diff --git a/README.md b/README.md
index a1f6773..eae8421 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,8 @@
-# ng2-toasty [](https://travis-ci.org/akserg/ng2-toasty) [](https://www.npmjs.com/package/ng2-toasty) [](https://www.npmjs.com/package/ng2-toasty)[](https://github.com/semantic-release/semantic-release) [](http://commitizen.github.io/cz-cli/)
+# ng2-slim-loading-bar [](https://travis-ci.org/akserg/ng2-slim-loading-bar) [](https://www.npmjs.com/package/ng2-slim-loading-bar) [](https://www.npmjs.com/package/ng2-slim-loading-bar)[](https://github.com/semantic-release/semantic-release) [](http://commitizen.github.io/cz-cli/)
-Angular2 Toasty component shows growl-style alerts and messages for your application.
+Angular2 component shows slim loading bar at the top of the page of your application.
-Simple examples using ng2-toasty:
+Simple examples using ng2-slim-loading-bar:
- with SystemJS in [ng2-systemjs-demo](https://github.com/akserg/ng2-systemjs-demo)
- with Webpack in [ng2-webpack-demo](https://github.com/akserg/ng2-webpack-demo)
@@ -11,146 +11,51 @@ Online demo available [here](http://akserg.github.io/ng2-webpack-demo)
## Installation
First you need to install the npm module:
```sh
-npm install ng2-toasty --save
+npm install ng2-slim-loading-bar --save
```
If you use SystemJS to load your files, you might have to update your config with this if you don't use `defaultJSExtensions: true`:
```js
System.config({
packages: {
- "/ng2-toasty": {"defaultExtension": "js"}
+ "/ng2-slim-loading-bar": {"defaultExtension": "js"}
}
});
```
-Finally, you can use *ng2-toasty* in your Angular 2 project:
-- Import `ToastyService, ToastyConfig, Toasty, ToastOptions` from `ng2-toasty/ng2-toasty`
-- Instantiate `ToastyService, ToastyConfig` in the bootstrap of your application;
-- Add `Toasty` to the "directives" property of your application component;
-- Add `` tag in template of your application component.
+Finally, you can use *ng2-slim-loading-bar* in your Angular 2 project:
+- Import `SlimLoadingBarService, SlimLoadingBar` from `ng2-slim-loading-bar/ng2-slim-loading-bar`
+- Instantiate `SlimLoadingBarService` in the bootstrap of your application;
+- Add `SlimLoadingBar` to the "directives" property of your application component;
+- Add `` tag in template of your application component.
```js
import {Component} from 'angular2/core';
-import {ToastyService, ToastyConfig, Toasty, ToastOptions, ToastData} from 'ng2-toasty/ng2-toasty';
+import {SlimLoadingBarService, SlimLoadingBar} from 'ng2-slim-loading-bar/ng2-slim-loading-bar';
import {bootstrap} from 'angular2/platform/browser';
bootstrap(AppComponent, [
- ToastyService, ToastyConfig // It is required to have 1 unique instance of your service
+ SlimLoadingBarService // It is required to have 1 unique instance of your service
]);
@Component({
selector: 'app',
- directives: [Toasty],
+ directives: [SlimLoadingBar],
template: `
Hello world
-
-
+
+
`
})
export class AppComponent {
- constructor(private toastyService:ToastyService) { }
+ constructor(private slimLoadingBarService:SlimLoadingBarService) { }
- addToast() {
- // Just add default Toast with title only
- this.toastyService.default('Hi there');
- // Or create the instance of ToastOptions
- var toastOptions:ToastOptions = {
- title: "My title",
- msg: "The message",
- showClose: true,
- timeout: 5000,
- theme: 'default'
- onAdd: (toast:ToastData) => {
- console.log('Toast ' + toast.id + ' has been added!');
- },
- onRemove: function(toast:ToastData) {
- console.log('Toast ' + toast.id + ' has been removed!');
- }
- };
- // Add see all possible types in one shot
- this.toastyService.info(toastOptions);
- this.toastyService.success(toastOptions);
- this.toastyService.wait(toastOptions);
- this.toastyService.error(toastOptions);
- this.toastyService.warning(toastOptions);
- }
-}
-```
-
-## How dynamically update title and message of toast
-Here is an example of how to dynamically update message and title of individual toast:
-
-```js
-import {Component} from 'angular2/core';
-import {ToastyService, ToastyConfig, Toasty, ToastOptions, ToastData} from 'ng2-toasty/ng2-toasty';
-import {bootstrap} from 'angular2/platform/browser';
-import {Subject, Observable, Subscription} from 'rxjs/Rx';
-
-bootstrap(AppComponent, [
- ToastyService, ToastyConfig // It is required to have 1 unique instance of your service
-]);
-
-@Component({
- selector: 'app',
- directives: [Toasty],
- template: `
-
Hello world
-
-
- `
-})
-export class AppComponent {
-
- getTitle(num: number): string {
- return 'Countdown: ' + num;
- }
-
- getMessage(num: number): string {
- return 'Seconds left: ' + num;
- }
-
- constructor(private toastyService:ToastyService) { }
-
- addToast() {
- let interval = 1000;
- let timeout = 5000;
- let seconds = timeout / 1000;
- let subscription: Subscription;
-
- let toastOptions: ToastOptions = {
- title: this.getTitle(seconds),
- msg: this.getMessage(seconds),
- showClose: true,
- timeout: timeout,
- onAdd: (toast: ToastData) => {
- console.log('Toast ' + toast.id + ' has been added!');
- // Run the timer with 1 second iterval
- let observable = Observable.interval(interval).take(seconds);
- // Start listen seconds beat
- subscription = observable.subscribe((count: number) => {
- // Update title of toast
- toast.title = this.getTitle(seconds - count - 1);
- // Update message of toast
- toast.msg = this.getMessage(seconds - count - 1);
- });
-
- },
- onRemove: function(toast: ToastData) {
- console.log('Toast ' + toast.id + ' has been removed!');
- // Stop listenning
- subscription.unsubscribe();
- }
- };
-
- switch (this.options.type) {
- case 'default': this.toastyService.default(toastOptions); break;
- case 'info': this.toastyService.info(toastOptions); break;
- case 'success': this.toastyService.success(toastOptions); break;
- case 'wait': this.toastyService.wait(toastOptions); break;
- case 'error': this.toastyService.error(toastOptions); break;
- case 'warning': this.toastyService.warning(toastOptions); break;
- }
+ startLoading() {
+ // We can listen when loading will be completed
+ this.slimLoadingBarService.start(() => {
+ console.log('Loading complete');
+ });
}
}
```
@@ -159,4 +64,4 @@ export class AppComponent {
[MIT](/LICENSE)
# Credits
-Inspired by [angular-toasty](https://github.com/teamfa/angular-toasty)
+Inspired by [ngProgress.js](https://github.com/VictorBjelkholm/ngProgress)
diff --git a/bundles/ng2-slim-loading-bar.js b/bundles/ng2-slim-loading-bar.js
new file mode 100644
index 0000000..10d8b1b
--- /dev/null
+++ b/bundles/ng2-slim-loading-bar.js
@@ -0,0 +1,253 @@
+System.registerDynamic("src/component", ["angular2/core", "angular2/common", "./service"], true, function($__require, exports, module) {
+ ;
+ var define,
+ global = this,
+ GLOBAL = this;
+ var __decorate = (this && this.__decorate) || function(decorators, target, key, desc) {
+ var c = arguments.length,
+ r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
+ d;
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+ r = Reflect.decorate(decorators, target, key, desc);
+ else
+ for (var i = decorators.length - 1; i >= 0; i--)
+ if (d = decorators[i])
+ r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
+ };
+ var __metadata = (this && this.__metadata) || function(k, v) {
+ if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+ return Reflect.metadata(k, v);
+ };
+ var core_1 = $__require('angular2/core');
+ var common_1 = $__require('angular2/common');
+ var service_1 = $__require('./service');
+ var SlimLoadingBar = (function() {
+ function SlimLoadingBar(service) {
+ this.service = service;
+ this._progress = '0%';
+ this.color = 'firebrick';
+ this.height = '2px';
+ this.show = true;
+ }
+ Object.defineProperty(SlimLoadingBar.prototype, "progress", {
+ get: function() {
+ return this._progress;
+ },
+ set: function(value) {
+ if (value) {
+ this._progress = value + '%';
+ }
+ },
+ enumerable: true,
+ configurable: true
+ });
+ SlimLoadingBar.prototype.ngOnInit = function() {
+ var _this = this;
+ this.service.observable.subscribe(function(event) {
+ if (event.type === service_1.SlimLoadingBarEventType.PROGRESS) {
+ _this.progress = event.value;
+ } else if (event.type === service_1.SlimLoadingBarEventType.COLOR) {
+ _this.color = event.value;
+ } else if (event.type === service_1.SlimLoadingBarEventType.HEIGHT) {
+ _this.height = event.value;
+ } else if (event.type === service_1.SlimLoadingBarEventType.VISIBLE) {
+ _this.show = event.value;
+ }
+ });
+ };
+ __decorate([core_1.Input(), __metadata('design:type', String), __metadata('design:paramtypes', [String])], SlimLoadingBar.prototype, "progress", null);
+ __decorate([core_1.Input(), __metadata('design:type', String)], SlimLoadingBar.prototype, "color", void 0);
+ __decorate([core_1.Input(), __metadata('design:type', String)], SlimLoadingBar.prototype, "height", void 0);
+ __decorate([core_1.Input(), __metadata('design:type', Boolean)], SlimLoadingBar.prototype, "show", void 0);
+ SlimLoadingBar = __decorate([core_1.Component({
+ selector: 'ng2-slim-loading-bar',
+ directives: [common_1.CORE_DIRECTIVES],
+ template: "\n