Skip to content

Commit eefa341

Browse files
author
Stabzs
committed
feat(animations)
- Animations have been added and explicit animation configuration is now required for the library. Closes Stabzs#95. - angular2-toaster is now compiled with the strictNullChecks flag on by default. - tslint added to support cleaning up the overall style of the library. - The elvis operator has been added to titleClass and messageClass toasterconfig property bindings in order to allow the library to be consumed by Ahead of Time compilation utilizing the "strictNullChecks: true" configuration. Closes Stabzs#111. - Cleaned up the webpack demo and added a simple angular-cli demo.
1 parent 287ba3a commit eefa341

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+1225
-249
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,6 @@ src/*.js
1010
src/*.map
1111
src/*.d.ts
1212
src/*.ngfactory.ts
13+
angular2-toaster.d.ts
1314
demo/webpack/bundle.js
1415
demo/webpack/bundle.js.map

‎CHANGELOG.md

+25
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,28 @@
1+
# 4.0.0 (2017-5-25)
2+
### BREAKING CHANGES
3+
* **angular2-toaster:** Explicit animation configuration is now required for the library.
4+
5+
### FEATURES
6+
* **angular2-toaster:** Animation support has been added.
7+
Closes [#95](https://github.com/Stabzs/Angular2-Toaster/issues/95).
8+
9+
* **angular2-toaster:** `angular2-toaster` is now compiled with the `strictNullChecks` flag on by
10+
default.
11+
12+
* **tslint:** Added tslint to support cleaning up the style of the library and added initial
13+
cleanup changes.
14+
15+
### BUG FIXES
16+
* **toast.component.ts:** The elvis operator has been added to `titleClass` and `messageClass`
17+
toasterconfig property bindings in order to allow the library to be consumed by Ahead of Time
18+
compilation utilizing the `strictNullChecks: true` configuration.
19+
Closes [#111](https://github.com/Stabzs/Angular2-Toaster/issues/111)
20+
21+
### DOCUMENTATION
22+
* **README:** The documentation has been expanded to support the new animation feature.
23+
* **demos:** Cleaned up the `webpack` demo and added a simple `angular-cli` example.
24+
25+
126
# 3.0.0 (2017-3-30)
227
### BREAKING CHANGES
328
* **angular2-toaster:** The library's Angular dependencies have been pinned to a minimum version of

‎README.md

+60-6
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
11
# Angular2-Toaster
22

3-
**angular2-toaster** is an asynchronous, non-blocking, Ahead of Time Compilation-supported Angular2 Toaster Notification library
3+
**angular2-toaster** is an asynchronous, non-blocking, Ahead of Time Compilation-supported Angular Toaster Notification library
44
largely based off of [AngularJS-Toaster](https://github.com/jirikavi/AngularJS-Toaster).
55

66
[![npm](https://img.shields.io/npm/v/angular2-toaster.svg?maxAge=3600)](https://www.npmjs.com/package/angular2-toaster)
77
[![npm](https://img.shields.io/npm/dt/angular2-toaster.svg)](https://www.npmjs.com/package/angular2-toaster)
88
[![Build Status](https://travis-ci.org/Stabzs/Angular2-Toaster.svg?branch=master)](https://travis-ci.org/Stabzs/Angular2-Toaster)
9-
[![Coverage Status](https://coveralls.io/repos/github/Stabzs/Angular2-Toaster/badge.svg?branch=master&b=3.0.0)](https://coveralls.io/github/Stabzs/Angular2-Toaster?branch=master)
9+
[![Coverage Status](https://coveralls.io/repos/github/Stabzs/Angular2-Toaster/badge.svg?branch=master&b=4.0.0)](https://coveralls.io/github/Stabzs/Angular2-Toaster?branch=master)
1010

1111

12+
Version ^4.0.0 now supports `@angular/animations`, which is a breaking change. Please read both
13+
the `Getting Started` and `Animations` sections before upgrading.
14+
1215
# Demo
1316
A dynamic Angular and Typescript demo can be found at
1417
[this plunker](http://plnkr.co/edit/hkENUhos6q9fhiOHprXO?p=preview).
@@ -59,11 +62,12 @@ Simply follow the `Getting Started` instructions to import the library.
5962
## Getting Started With Default Configuration - NgModule (Recommended):
6063
```typescript
6164
import {NgModule, Component} from '@angular/core';
65+
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
6266
import {ToasterModule, ToasterService} from 'angular2-toaster';
6367
import {Root} from './root.component'
6468

6569
@NgModule({
66-
imports: [ToasterModule],
70+
imports: [BrowserAnimationsModule, ToasterModule],
6771
declarations: [Root],
6872
providers: [],
6973
bootstrap: [Root]
@@ -94,10 +98,12 @@ export class Root {
9498
9599
```typescript
96100
import {Component} from '@angular/core';
101+
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
97102
import {ToasterContainerComponent, ToasterService} from 'angular2-toaster';
98103

99104
@Component({
100105
selector: 'root',
106+
imports: [BrowserAnimationsModule],
101107
directives: [ToasterContainerComponent],
102108
providers: [ToasterService],
103109
template: `
@@ -124,10 +130,12 @@ bootstrap(Root);
124130
125131
```typescript
126132
import {Component} from '@angular/core';
133+
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
127134
import {ToasterContainerComponent, ToasterService, ToasterConfig} from 'angular2-toaster';
128135

129136
@Component({
130137
selector: 'root',
138+
imports: [BrowserAnimationsModule],
131139
directives: [ToasterContainerComponent],
132140
providers: [ToasterService],
133141
template: `
@@ -197,7 +205,56 @@ this.toasterService.clear(toast.toastId, toast.toastContainerId);
197205
```
198206
199207
208+
## Animations
209+
Starting with version `4.0.0` and greater, Animation configuration is required, as described in the
210+
`Getting Started` section.
211+
212+
To add animations:
213+
214+
- Install the `@angular/animations` npm package via
215+
`npm install @angular/animations`.
216+
- Add the `BrowserAnimationsModule` to your root module
217+
218+
```typescript
219+
import {NgModule, Component} from '@angular/core';
220+
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
221+
import {ToasterModule} from 'angular2-toaster';
222+
223+
@NgModule({
224+
imports: [BrowserAnimationsModule, ToasterModule],
225+
...
226+
```
227+
228+
If you want to avoid bringing in an additional module solely for the sake of animations, you can
229+
explicitly configure `angular2-toaster` to ignore animations. To do so, import the
230+
`NoopAnimationsModule` instead:
231+
232+
```typescript
233+
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
234+
import {ToasterModule} from 'angular2-toaster';
235+
236+
@NgModule({
237+
imports: [NoopAnimationsModule, ToasterModule],
238+
...
239+
```
240+
241+
Angular Animations require [browsers](http://caniuse.com/#feat=web-animation) that support the [Web Animations Standard](https://w3c.github.io/web-animations/).
242+
243+
If you need to target a non-supported browser, a [polyfill](https://github.com/web-animations/web-animations-js) is required.
244+
245+
200246
# Configurable Options
247+
### Animations
248+
There are five animation styles that can be applied via the toasterconfig `animation` property:
249+
'fade', 'flyLeft', 'flyRight', 'slideDown', and 'slideUp'. Any other value will disable animations.
250+
251+
```typescript
252+
template:
253+
`<toaster-container [toasterconfig]="toasterconfig"></toaster-container>`
254+
255+
public toasterconfig : ToasterConfig =
256+
new ToasterConfig({animation: 'fade'});
257+
```
201258
202259
### Limit
203260
Limit is defaulted to null, meaning that there is no maximum number of toasts that are defined
@@ -471,9 +528,6 @@ npm run test
471528
```
472529
473530
474-
## Animations
475-
Animations will be included at a later point in time.
476-
477531
## Author
478532
[Stabzs]([email protected])
479533

‎demo/angular-cli/.angular-cli.json

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"project": {
4+
"name": "angular-cli"
5+
},
6+
"apps": [
7+
{
8+
"root": "src",
9+
"outDir": "dist",
10+
"assets": [
11+
"assets",
12+
"favicon.ico"
13+
],
14+
"index": "index.html",
15+
"main": "main.ts",
16+
"polyfills": "polyfills.ts",
17+
"test": "test.ts",
18+
"tsconfig": "tsconfig.app.json",
19+
"testTsconfig": "tsconfig.spec.json",
20+
"prefix": "app",
21+
"styles": [
22+
"styles.css"
23+
],
24+
"scripts": [],
25+
"environmentSource": "environments/environment.ts",
26+
"environments": {
27+
"dev": "environments/environment.ts",
28+
"prod": "environments/environment.prod.ts"
29+
}
30+
}
31+
],
32+
"e2e": {
33+
"protractor": {
34+
"config": "./protractor.conf.js"
35+
}
36+
},
37+
"lint": [
38+
{
39+
"project": "src/tsconfig.app.json"
40+
},
41+
{
42+
"project": "src/tsconfig.spec.json"
43+
},
44+
{
45+
"project": "e2e/tsconfig.e2e.json"
46+
}
47+
],
48+
"test": {
49+
"karma": {
50+
"config": "./karma.conf.js"
51+
}
52+
},
53+
"defaults": {
54+
"styleExt": "css",
55+
"component": {}
56+
}
57+
}

‎demo/angular-cli/.editorconfig

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# Editor configuration, see http://editorconfig.org
2+
root = true
3+
4+
[*]
5+
charset = utf-8
6+
indent_style = space
7+
indent_size = 2
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true
10+
11+
[*.md]
12+
max_line_length = off
13+
trim_trailing_whitespace = false

‎demo/angular-cli/.gitignore

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
# See http://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
# compiled output
4+
/dist
5+
/tmp
6+
/out-tsc
7+
8+
# dependencies
9+
/node_modules
10+
11+
# IDEs and editors
12+
/.idea
13+
.project
14+
.classpath
15+
.c9/
16+
*.launch
17+
.settings/
18+
*.sublime-workspace
19+
20+
# IDE - VSCode
21+
.vscode/*
22+
!.vscode/settings.json
23+
!.vscode/tasks.json
24+
!.vscode/launch.json
25+
!.vscode/extensions.json
26+
27+
# misc
28+
/.sass-cache
29+
/connect.lock
30+
/coverage
31+
/libpeerconnection.log
32+
npm-debug.log
33+
testem.log
34+
/typings
35+
36+
# e2e
37+
/e2e/*.js
38+
/e2e/*.map
39+
40+
# System Files
41+
.DS_Store
42+
Thumbs.db

‎demo/angular-cli/README.md

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
# AngularCli
2+
3+
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.0.0.
4+
5+
## Development server
6+
7+
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
8+
9+
## Code scaffolding
10+
11+
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class/module`.
12+
13+
## Build
14+
15+
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
16+
17+
## Running unit tests
18+
19+
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
20+
21+
## Running end-to-end tests
22+
23+
Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
24+
Before running the tests make sure you are serving the app via `ng serve`.
25+
26+
## Further help
27+
28+
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

‎demo/angular-cli/e2e/app.e2e-spec.ts

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { AngularCliPage } from './app.po';
2+
3+
describe('angular-cli App', () => {
4+
let page: AngularCliPage;
5+
6+
beforeEach(() => {
7+
page = new AngularCliPage();
8+
});
9+
10+
it('should display message saying app works', () => {
11+
page.navigateTo();
12+
expect(page.getParagraphText()).toEqual('app works!');
13+
});
14+
});

‎demo/angular-cli/e2e/app.po.ts

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { browser, element, by } from 'protractor';
2+
3+
export class AngularCliPage {
4+
navigateTo() {
5+
return browser.get('/');
6+
}
7+
8+
getParagraphText() {
9+
return element(by.css('app-root h1')).getText();
10+
}
11+
}

‎demo/angular-cli/e2e/tsconfig.e2e.json

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"extends": "../tsconfig.json",
3+
"compilerOptions": {
4+
"outDir": "../out-tsc/e2e",
5+
"module": "commonjs",
6+
"target": "es5",
7+
"types":[
8+
"jasmine",
9+
"node"
10+
]
11+
}
12+
}

‎demo/angular-cli/karma.conf.js

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
// Karma configuration file, see link for more information
2+
// https://karma-runner.github.io/0.13/config/configuration-file.html
3+
4+
module.exports = function (config) {
5+
config.set({
6+
basePath: '',
7+
frameworks: ['jasmine', '@angular/cli'],
8+
plugins: [
9+
require('karma-jasmine'),
10+
require('karma-chrome-launcher'),
11+
require('karma-jasmine-html-reporter'),
12+
require('karma-coverage-istanbul-reporter'),
13+
require('@angular/cli/plugins/karma')
14+
],
15+
client:{
16+
clearContext: false // leave Jasmine Spec Runner output visible in browser
17+
},
18+
files: [
19+
{ pattern: './src/test.ts', watched: false }
20+
],
21+
preprocessors: {
22+
'./src/test.ts': ['@angular/cli']
23+
},
24+
mime: {
25+
'text/x-typescript': ['ts','tsx']
26+
},
27+
coverageIstanbulReporter: {
28+
reports: [ 'html', 'lcovonly' ],
29+
fixWebpackSourcePaths: true
30+
},
31+
angularCli: {
32+
environment: 'dev'
33+
},
34+
reporters: config.angularCli && config.angularCli.codeCoverage
35+
? ['progress', 'coverage-istanbul']
36+
: ['progress', 'kjhtml'],
37+
port: 9876,
38+
colors: true,
39+
logLevel: config.LOG_INFO,
40+
autoWatch: true,
41+
browsers: ['Chrome'],
42+
singleRun: false
43+
});
44+
};

0 commit comments

Comments
 (0)