From 8a634ad72f321922b3d1150d8d8b8c7a144647ed Mon Sep 17 00:00:00 2001 From: Sergey Akopkokhyants Date: Wed, 6 Apr 2016 10:42:13 +0200 Subject: [PATCH 1/2] fix($browser): Fixed issue: The Bar becomes to be invisible after first complete --- bundles/ng2-slim-loading-bar.js | 45 +++++++------ bundles/ng2-slim-loading-bar.min.js | 2 +- package.json | 11 ++-- src/component.ts | 17 ++--- src/service.ts | 97 +++++++++++++---------------- 5 files changed, 81 insertions(+), 91 deletions(-) diff --git a/bundles/ng2-slim-loading-bar.js b/bundles/ng2-slim-loading-bar.js index 10d8b1b..7a65ccb 100644 --- a/bundles/ng2-slim-loading-bar.js +++ b/bundles/ng2-slim-loading-bar.js @@ -1,4 +1,4 @@ -System.registerDynamic("src/component", ["angular2/core", "angular2/common", "./service"], true, function($__require, exports, module) { +System.registerDynamic("src/component", ["angular2/core", "angular2/src/facade/lang", "angular2/common", "./service"], true, function($__require, exports, module) { ; var define, global = this, @@ -20,6 +20,7 @@ System.registerDynamic("src/component", ["angular2/core", "angular2/common", "./ return Reflect.metadata(k, v); }; var core_1 = $__require('angular2/core'); + var lang_1 = $__require('angular2/src/facade/lang'); var common_1 = $__require('angular2/common'); var service_1 = $__require('./service'); var SlimLoadingBar = (function() { @@ -35,7 +36,7 @@ System.registerDynamic("src/component", ["angular2/core", "angular2/common", "./ return this._progress; }, set: function(value) { - if (value) { + if (lang_1.isPresent(value)) { this._progress = value + '%'; } }, @@ -63,7 +64,7 @@ System.registerDynamic("src/component", ["angular2/core", "angular2/common", "./ SlimLoadingBar = __decorate([core_1.Component({ selector: 'ng2-slim-loading-bar', directives: [common_1.CORE_DIRECTIVES], - template: "\n
\n
\n
" + template: "\n
\n
\n
" }), __metadata('design:paramtypes', [service_1.SlimLoadingBarService])], SlimLoadingBar); return SlimLoadingBar; })(); @@ -117,9 +118,8 @@ System.registerDynamic("src/service", ["angular2/core", "angular2/src/facade/lan this._height = '2px'; this._color = 'firebrick'; this._visible = true; - this.intervalCounterId = 0; + this._intervalCounterId = 0; this.interval = 500; - this.isPaused = false; this.observable = new Observable_1.Observable(function(subscriber) { _this.subscriber = subscriber; }); @@ -189,26 +189,19 @@ System.registerDynamic("src/service", ["angular2/core", "angular2/src/facade/lan if (onCompleted === void 0) { onCompleted = null; } - if (this.intervalCounterId) { - this.stop(); - } - this._onCompleted = onCompleted; - this.intervalCounterId = setInterval(function() { - if (!_this.isPaused) { - _this.progress++; - if (_this.progress === 100) { - _this.complete(); - } + this.stop(); + this.visible = true; + this._intervalCounterId = setInterval(function() { + _this.progress++; + if (_this.progress === 100) { + _this.complete(); } }, this.interval); }; - SlimLoadingBarService.prototype.pause = function() { - this.isPaused = !this.isPaused; - }; SlimLoadingBarService.prototype.stop = function() { - if (this.intervalCounterId) { - clearInterval(this.intervalCounterId); - this.intervalCounterId = null; + if (this._intervalCounterId) { + clearInterval(this._intervalCounterId); + this._intervalCounterId = null; } }; SlimLoadingBarService.prototype.reset = function() { @@ -216,11 +209,15 @@ System.registerDynamic("src/service", ["angular2/core", "angular2/src/facade/lan this.progress = 0; }; SlimLoadingBarService.prototype.complete = function() { + var _this = this; this.progress = 100; - if (this._onCompleted) { - this._onCompleted.call(this); - } this.stop(); + setTimeout(function() { + _this.visible = false; + setTimeout(function() { + _this.progress = 0; + }, 250); + }, 250); }; SlimLoadingBarService = __decorate([core_1.Injectable(), __metadata('design:paramtypes', [])], SlimLoadingBarService); return SlimLoadingBarService; diff --git a/bundles/ng2-slim-loading-bar.min.js b/bundles/ng2-slim-loading-bar.min.js index 34ebe3b..10c5838 100644 --- a/bundles/ng2-slim-loading-bar.min.js +++ b/bundles/ng2-slim-loading-bar.min.js @@ -1,2 +1,2 @@ -System.registerDynamic("src/component",["angular2/core","angular2/common","./service"],!0,function(e,t,r){var i=this&&this.__decorate||function(e,t,r,i){var n,o=arguments.length,s=3>o?t:null===i?i=Object.getOwnPropertyDescriptor(t,r):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,r,i);else for(var a=e.length-1;a>=0;a--)(n=e[a])&&(s=(3>o?n(s):o>3?n(t,r,s):n(t,r))||s);return o>3&&s&&Object.defineProperty(t,r,s),s},n=this&&this.__metadata||function(e,t){return"object"==typeof Reflect&&"function"==typeof Reflect.metadata?Reflect.metadata(e,t):void 0},o=e("angular2/core"),s=e("angular2/common"),a=e("./service"),c=function(){function e(e){this.service=e,this._progress="0%",this.color="firebrick",this.height="2px",this.show=!0}return Object.defineProperty(e.prototype,"progress",{get:function(){return this._progress},set:function(e){e&&(this._progress=e+"%")},enumerable:!0,configurable:!0}),e.prototype.ngOnInit=function(){var e=this;this.service.observable.subscribe(function(t){t.type===a.SlimLoadingBarEventType.PROGRESS?e.progress=t.value:t.type===a.SlimLoadingBarEventType.COLOR?e.color=t.value:t.type===a.SlimLoadingBarEventType.HEIGHT?e.height=t.value:t.type===a.SlimLoadingBarEventType.VISIBLE&&(e.show=t.value)})},i([o.Input(),n("design:type",String),n("design:paramtypes",[String])],e.prototype,"progress",null),i([o.Input(),n("design:type",String)],e.prototype,"color",void 0),i([o.Input(),n("design:type",String)],e.prototype,"height",void 0),i([o.Input(),n("design:type",Boolean)],e.prototype,"show",void 0),e=i([o.Component({selector:"ng2-slim-loading-bar",directives:[s.CORE_DIRECTIVES],template:'\n
\n
\n
'}),n("design:paramtypes",[a.SlimLoadingBarService])],e)}();return t.SlimLoadingBar=c,r.exports}),System.registerDynamic("src/service",["angular2/core","angular2/src/facade/lang","rxjs/Observable"],!0,function(e,t,r){var i=this&&this.__decorate||function(e,t,r,i){var n,o=arguments.length,s=3>o?t:null===i?i=Object.getOwnPropertyDescriptor(t,r):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,r,i);else for(var a=e.length-1;a>=0;a--)(n=e[a])&&(s=(3>o?n(s):o>3?n(t,r,s):n(t,r))||s);return o>3&&s&&Object.defineProperty(t,r,s),s},n=this&&this.__metadata||function(e,t){return"object"==typeof Reflect&&"function"==typeof Reflect.metadata?Reflect.metadata(e,t):void 0},o=e("angular2/core"),s=e("angular2/src/facade/lang"),a=e("rxjs/Observable");!function(e){e[e.PROGRESS=0]="PROGRESS",e[e.HEIGHT=1]="HEIGHT",e[e.COLOR=2]="COLOR",e[e.VISIBLE=3]="VISIBLE"}(t.SlimLoadingBarEventType||(t.SlimLoadingBarEventType={}));var c=t.SlimLoadingBarEventType,l=function(){function e(e,t){this.type=e,this.value=t}return e}();t.SlimLoadingBarEvent=l;var p=function(){function e(){var e=this;this._progress=0,this._height="2px",this._color="firebrick",this._visible=!0,this.intervalCounterId=0,this.interval=500,this.isPaused=!1,this.observable=new a.Observable(function(t){e.subscriber=t})}return Object.defineProperty(e.prototype,"progress",{get:function(){return this._progress},set:function(e){s.isPresent(e)&&(this._progress=e,this.emitEvent(new l(c.PROGRESS,this._progress)))},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"height",{get:function(){return this._height},set:function(e){s.isPresent(e)&&(this._height=e,this.emitEvent(new l(c.HEIGHT,this._height)))},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"color",{get:function(){return this._color},set:function(e){s.isPresent(e)&&(this._color=e,this.emitEvent(new l(c.COLOR,this._color)))},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"visible",{get:function(){return this._visible},set:function(e){s.isPresent(e)&&(this._visible=e,this.emitEvent(new l(c.VISIBLE,this._visible)))},enumerable:!0,configurable:!0}),e.prototype.emitEvent=function(e){try{this.subscriber.next(e)}catch(t){console.log(t),console.log("!!! Suggestion: Seems you forget add into your html?")}},e.prototype.start=function(e){var t=this;void 0===e&&(e=null),this.intervalCounterId&&this.stop(),this._onCompleted=e,this.intervalCounterId=setInterval(function(){t.isPaused||(t.progress++,100===t.progress&&t.complete())},this.interval)},e.prototype.pause=function(){this.isPaused=!this.isPaused},e.prototype.stop=function(){this.intervalCounterId&&(clearInterval(this.intervalCounterId),this.intervalCounterId=null)},e.prototype.reset=function(){this.stop(),this.progress=0},e.prototype.complete=function(){this.progress=100,this._onCompleted&&this._onCompleted.call(this),this.stop()},e=i([o.Injectable(),n("design:paramtypes",[])],e)}();return t.SlimLoadingBarService=p,r.exports}),System.registerDynamic("ng2-slim-loading-bar",["./src/component","./src/service"],!0,function(e,t,r){"use strict";function i(e){for(var r in e)t.hasOwnProperty(r)||(t[r]=e[r])}var n=e("./src/component"),o=e("./src/service");return i(e("./src/component")),i(e("./src/service")),Object.defineProperty(t,"__esModule",{value:!0}),t["default"]={providers:[o.SlimLoadingBarService],directives:[n.SlimLoadingBar]},r.exports}); +System.registerDynamic("src/component",["angular2/core","angular2/src/facade/lang","angular2/common","./service"],!0,function(e,t,r){var i=this&&this.__decorate||function(e,t,r,i){var n,o=arguments.length,s=3>o?t:null===i?i=Object.getOwnPropertyDescriptor(t,r):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,r,i);else for(var a=e.length-1;a>=0;a--)(n=e[a])&&(s=(3>o?n(s):o>3?n(t,r,s):n(t,r))||s);return o>3&&s&&Object.defineProperty(t,r,s),s},n=this&&this.__metadata||function(e,t){return"object"==typeof Reflect&&"function"==typeof Reflect.metadata?Reflect.metadata(e,t):void 0},o=e("angular2/core"),s=e("angular2/src/facade/lang"),a=e("angular2/common"),c=e("./service"),l=function(){function e(e){this.service=e,this._progress="0%",this.color="firebrick",this.height="2px",this.show=!0}return Object.defineProperty(e.prototype,"progress",{get:function(){return this._progress},set:function(e){s.isPresent(e)&&(this._progress=e+"%")},enumerable:!0,configurable:!0}),e.prototype.ngOnInit=function(){var e=this;this.service.observable.subscribe(function(t){t.type===c.SlimLoadingBarEventType.PROGRESS?e.progress=t.value:t.type===c.SlimLoadingBarEventType.COLOR?e.color=t.value:t.type===c.SlimLoadingBarEventType.HEIGHT?e.height=t.value:t.type===c.SlimLoadingBarEventType.VISIBLE&&(e.show=t.value)})},i([o.Input(),n("design:type",String),n("design:paramtypes",[String])],e.prototype,"progress",null),i([o.Input(),n("design:type",String)],e.prototype,"color",void 0),i([o.Input(),n("design:type",String)],e.prototype,"height",void 0),i([o.Input(),n("design:type",Boolean)],e.prototype,"show",void 0),e=i([o.Component({selector:"ng2-slim-loading-bar",directives:[a.CORE_DIRECTIVES],template:'\n
\n
\n
'}),n("design:paramtypes",[c.SlimLoadingBarService])],e)}();return t.SlimLoadingBar=l,r.exports}),System.registerDynamic("src/service",["angular2/core","angular2/src/facade/lang","rxjs/Observable"],!0,function(e,t,r){var i=this&&this.__decorate||function(e,t,r,i){var n,o=arguments.length,s=3>o?t:null===i?i=Object.getOwnPropertyDescriptor(t,r):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,r,i);else for(var a=e.length-1;a>=0;a--)(n=e[a])&&(s=(3>o?n(s):o>3?n(t,r,s):n(t,r))||s);return o>3&&s&&Object.defineProperty(t,r,s),s},n=this&&this.__metadata||function(e,t){return"object"==typeof Reflect&&"function"==typeof Reflect.metadata?Reflect.metadata(e,t):void 0},o=e("angular2/core"),s=e("angular2/src/facade/lang"),a=e("rxjs/Observable");!function(e){e[e.PROGRESS=0]="PROGRESS",e[e.HEIGHT=1]="HEIGHT",e[e.COLOR=2]="COLOR",e[e.VISIBLE=3]="VISIBLE"}(t.SlimLoadingBarEventType||(t.SlimLoadingBarEventType={}));var c=t.SlimLoadingBarEventType,l=function(){function e(e,t){this.type=e,this.value=t}return e}();t.SlimLoadingBarEvent=l;var p=function(){function e(){var e=this;this._progress=0,this._height="2px",this._color="firebrick",this._visible=!0,this._intervalCounterId=0,this.interval=500,this.observable=new a.Observable(function(t){e.subscriber=t})}return Object.defineProperty(e.prototype,"progress",{get:function(){return this._progress},set:function(e){s.isPresent(e)&&(this._progress=e,this.emitEvent(new l(c.PROGRESS,this._progress)))},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"height",{get:function(){return this._height},set:function(e){s.isPresent(e)&&(this._height=e,this.emitEvent(new l(c.HEIGHT,this._height)))},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"color",{get:function(){return this._color},set:function(e){s.isPresent(e)&&(this._color=e,this.emitEvent(new l(c.COLOR,this._color)))},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"visible",{get:function(){return this._visible},set:function(e){s.isPresent(e)&&(this._visible=e,this.emitEvent(new l(c.VISIBLE,this._visible)))},enumerable:!0,configurable:!0}),e.prototype.emitEvent=function(e){try{this.subscriber.next(e)}catch(t){console.log(t),console.log("!!! Suggestion: Seems you forget add into your html?")}},e.prototype.start=function(e){var t=this;void 0===e&&(e=null),this.stop(),this.visible=!0,this._intervalCounterId=setInterval(function(){t.progress++,100===t.progress&&t.complete()},this.interval)},e.prototype.stop=function(){this._intervalCounterId&&(clearInterval(this._intervalCounterId),this._intervalCounterId=null)},e.prototype.reset=function(){this.stop(),this.progress=0},e.prototype.complete=function(){var e=this;this.progress=100,this.stop(),setTimeout(function(){e.visible=!1,setTimeout(function(){e.progress=0},250)},250)},e=i([o.Injectable(),n("design:paramtypes",[])],e)}();return t.SlimLoadingBarService=p,r.exports}),System.registerDynamic("ng2-slim-loading-bar",["./src/component","./src/service"],!0,function(e,t,r){"use strict";function i(e){for(var r in e)t.hasOwnProperty(r)||(t[r]=e[r])}var n=e("./src/component"),o=e("./src/service");return i(e("./src/component")),i(e("./src/service")),Object.defineProperty(t,"__esModule",{value:!0}),t["default"]={providers:[o.SlimLoadingBarService],directives:[n.SlimLoadingBar]},r.exports}); //# sourceMappingURL=bundles/ng2-slim-loading-bar.min.js.map \ No newline at end of file diff --git a/package.json b/package.json index d30c2e0..805a97b 100644 --- a/package.json +++ b/package.json @@ -30,25 +30,26 @@ "homepage": "https://github.com/akserg/ng2-slim-loading-bar", "devDependencies": { "angular2": "~2.0.0-beta.13", + "commitizen": "^2.7.6", + "cz-conventional-changelog": "^1.1.5", "es6-promise": "~3.1.2", "es6-shim": "~0.35.0", - "reflect-metadata": "0.1.2", - "rxjs": "5.0.0-beta.2", - "zone.js": "~0.6.6", - "cz-conventional-changelog": "^1.1.5", "jasmine-core": "~2.3.4", "karma": "~0.13.15", "karma-chrome-launcher": "~0.2.2", "karma-firefox-launcher": "~0.1.7", "karma-jasmine": "~0.3.6", "karma-typescript-preprocessor": "0.0.21", + "reflect-metadata": "0.1.2", + "rxjs": "5.0.0-beta.2", "semantic-release": "^4.3.5", "systemjs": "~0.19.6", "systemjs-builder": "^0.15.6", "tsd": "^0.6.5", "typescript": "~1.7.3", "typings": "^0.6.8", - "uglify-js": "^2.6.2" + "uglify-js": "^2.6.2", + "zone.js": "~0.6.6" }, "config": { "commitizen": { diff --git a/src/component.ts b/src/component.ts index 7dc79f0..7df3d3e 100644 --- a/src/component.ts +++ b/src/component.ts @@ -3,42 +3,43 @@ // https://github.com/akserg/ng2-slim-loading-bar import {Component, Input, OnInit} from 'angular2/core'; +import {isPresent} from 'angular2/src/facade/lang'; import {CORE_DIRECTIVES} from 'angular2/common'; import {SlimLoadingBarService, SlimLoadingBarEvent, SlimLoadingBarEventType} from './service'; /** - * A Toast component shows message with title and close button. + * A Slim Loading Bar component shows message loading progress bar on the top of web page or parent component. */ @Component({ selector: 'ng2-slim-loading-bar', directives: [CORE_DIRECTIVES], template: `
-
` }) export class SlimLoadingBar implements OnInit { - + private progressEl:HTMLDivElement; - + private _progress: string = '0%'; @Input() set progress(value: string) { - if (value) { + if (isPresent(value)) { this._progress = value + '%'; } } get progress(): string { return this._progress; } - + @Input() color: string = 'firebrick'; @Input() height: string = '2px'; @Input() show: boolean = true; - + constructor(private service:SlimLoadingBarService) {} - + ngOnInit(): any { this.service.observable.subscribe((event:SlimLoadingBarEvent) => { if (event.type === SlimLoadingBarEventType.PROGRESS) { diff --git a/src/service.ts b/src/service.ts index 36190e9..7a92281 100644 --- a/src/service.ts +++ b/src/service.ts @@ -17,21 +17,23 @@ export enum SlimLoadingBarEventType { } export class SlimLoadingBarEvent { - constructor(public type:SlimLoadingBarEventType, public value:any) {} } /** - * Toasty service helps create different kinds of Toasts + * SlimLoadingBar service helps manage Slim Loading bar on the top of screen or parent component */ @Injectable() export class SlimLoadingBarService { - + private _progress:number = 0; private _height:string = '2px'; private _color:string = 'firebrick'; private _visible:boolean = true; - + + private _intervalCounterId:any = 0; + public interval:number = 500; // in milliseconds + public observable: Observable; private subscriber: Subscriber; @@ -40,52 +42,52 @@ export class SlimLoadingBarService { this.subscriber = subscriber; }); } - + set progress(value:number) { if (isPresent(value)) { this._progress = value; this.emitEvent(new SlimLoadingBarEvent(SlimLoadingBarEventType.PROGRESS, this._progress)); } } - + get progress():number { return this._progress; } - - + + set height(value:string) { if (isPresent(value)) { this._height = value; this.emitEvent(new SlimLoadingBarEvent(SlimLoadingBarEventType.HEIGHT, this._height)); } } - + get height():string { return this._height; } - + set color(value:string) { if (isPresent(value)) { this._color = value; this.emitEvent(new SlimLoadingBarEvent(SlimLoadingBarEventType.COLOR, this._color)); } } - + get color():string { return this._color; } - + set visible(value: boolean) { if (isPresent(value)) { this._visible = value; this.emitEvent(new SlimLoadingBarEvent(SlimLoadingBarEventType.VISIBLE, this._visible)); } } - + get visible():boolean { return this._visible; } - + private emitEvent(event: SlimLoadingBarEvent) { // Push up a new event try { @@ -95,60 +97,49 @@ export class SlimLoadingBarService { console.log('!!! Suggestion: Seems you forget add into your html?'); } } - - /*********/ - // observableTimer:Observable; - // subscriptionTimer:Subscription; - intervalCounterId:any = 0; - interval:number = 500; // in milliseconds - isPaused:boolean = false; - - private _onCompleted:Function - + + start(onCompleted:Function = null) { - if (this.intervalCounterId) { - // Stop current timer - this.stop(); - } - this._onCompleted = onCompleted; + // Stop current timer + this.stop(); + // Make it visible for sure + this.visible = true; // Run the timer with milliseconds iterval - this.intervalCounterId = setInterval(() => { - // Do nothing if it was paused - if (!this.isPaused) { - // Increment the progress and update view component - this.progress++; - // If the progress is 100% - call complete - if (this.progress === 100) { - this.complete(); - } + this._intervalCounterId = setInterval(() => { + // Increment the progress and update view component + this.progress++; + // If the progress is 100% - call complete + if (this.progress === 100) { + this.complete(); } }, this.interval); } - - pause() { - this.isPaused = !this.isPaused; - } - + stop() { - if (this.intervalCounterId) { - clearInterval(this.intervalCounterId); - this.intervalCounterId = null; + if (this._intervalCounterId) { + clearInterval(this._intervalCounterId); + this._intervalCounterId = null; } } - + reset() { this.stop(); this.progress = 0; } - + complete() { this.progress = 100; - if (this._onCompleted) { - this._onCompleted.call(this); - } this.stop(); + setTimeout(() => { + // Hide it away + this.visible = false; + setTimeout(() => { + // Drop to 0 + this.progress = 0; + }, 250); + }, 250); } - - + + } From 3921cf166a52cf2126f6261bf24fa9de672cb4c5 Mon Sep 17 00:00:00 2001 From: Sergey Akopkokhyants Date: Wed, 6 Apr 2016 11:08:55 +0200 Subject: [PATCH 2/2] fix($browser): Fixed issue: The loading bar still invisible after set the progress value --- bundles/ng2-slim-loading-bar.js | 3 +++ bundles/ng2-slim-loading-bar.min.js | 2 +- src/service.ts | 3 +++ 3 files changed, 7 insertions(+), 1 deletion(-) diff --git a/bundles/ng2-slim-loading-bar.js b/bundles/ng2-slim-loading-bar.js index 7a65ccb..8f9102a 100644 --- a/bundles/ng2-slim-loading-bar.js +++ b/bundles/ng2-slim-loading-bar.js @@ -130,6 +130,9 @@ System.registerDynamic("src/service", ["angular2/core", "angular2/src/facade/lan }, set: function(value) { if (lang_1.isPresent(value)) { + if (value > 0) { + this.visible = true; + } this._progress = value; this.emitEvent(new SlimLoadingBarEvent(SlimLoadingBarEventType.PROGRESS, this._progress)); } diff --git a/bundles/ng2-slim-loading-bar.min.js b/bundles/ng2-slim-loading-bar.min.js index 10c5838..df95624 100644 --- a/bundles/ng2-slim-loading-bar.min.js +++ b/bundles/ng2-slim-loading-bar.min.js @@ -1,2 +1,2 @@ -System.registerDynamic("src/component",["angular2/core","angular2/src/facade/lang","angular2/common","./service"],!0,function(e,t,r){var i=this&&this.__decorate||function(e,t,r,i){var n,o=arguments.length,s=3>o?t:null===i?i=Object.getOwnPropertyDescriptor(t,r):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,r,i);else for(var a=e.length-1;a>=0;a--)(n=e[a])&&(s=(3>o?n(s):o>3?n(t,r,s):n(t,r))||s);return o>3&&s&&Object.defineProperty(t,r,s),s},n=this&&this.__metadata||function(e,t){return"object"==typeof Reflect&&"function"==typeof Reflect.metadata?Reflect.metadata(e,t):void 0},o=e("angular2/core"),s=e("angular2/src/facade/lang"),a=e("angular2/common"),c=e("./service"),l=function(){function e(e){this.service=e,this._progress="0%",this.color="firebrick",this.height="2px",this.show=!0}return Object.defineProperty(e.prototype,"progress",{get:function(){return this._progress},set:function(e){s.isPresent(e)&&(this._progress=e+"%")},enumerable:!0,configurable:!0}),e.prototype.ngOnInit=function(){var e=this;this.service.observable.subscribe(function(t){t.type===c.SlimLoadingBarEventType.PROGRESS?e.progress=t.value:t.type===c.SlimLoadingBarEventType.COLOR?e.color=t.value:t.type===c.SlimLoadingBarEventType.HEIGHT?e.height=t.value:t.type===c.SlimLoadingBarEventType.VISIBLE&&(e.show=t.value)})},i([o.Input(),n("design:type",String),n("design:paramtypes",[String])],e.prototype,"progress",null),i([o.Input(),n("design:type",String)],e.prototype,"color",void 0),i([o.Input(),n("design:type",String)],e.prototype,"height",void 0),i([o.Input(),n("design:type",Boolean)],e.prototype,"show",void 0),e=i([o.Component({selector:"ng2-slim-loading-bar",directives:[a.CORE_DIRECTIVES],template:'\n
\n
\n
'}),n("design:paramtypes",[c.SlimLoadingBarService])],e)}();return t.SlimLoadingBar=l,r.exports}),System.registerDynamic("src/service",["angular2/core","angular2/src/facade/lang","rxjs/Observable"],!0,function(e,t,r){var i=this&&this.__decorate||function(e,t,r,i){var n,o=arguments.length,s=3>o?t:null===i?i=Object.getOwnPropertyDescriptor(t,r):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,r,i);else for(var a=e.length-1;a>=0;a--)(n=e[a])&&(s=(3>o?n(s):o>3?n(t,r,s):n(t,r))||s);return o>3&&s&&Object.defineProperty(t,r,s),s},n=this&&this.__metadata||function(e,t){return"object"==typeof Reflect&&"function"==typeof Reflect.metadata?Reflect.metadata(e,t):void 0},o=e("angular2/core"),s=e("angular2/src/facade/lang"),a=e("rxjs/Observable");!function(e){e[e.PROGRESS=0]="PROGRESS",e[e.HEIGHT=1]="HEIGHT",e[e.COLOR=2]="COLOR",e[e.VISIBLE=3]="VISIBLE"}(t.SlimLoadingBarEventType||(t.SlimLoadingBarEventType={}));var c=t.SlimLoadingBarEventType,l=function(){function e(e,t){this.type=e,this.value=t}return e}();t.SlimLoadingBarEvent=l;var p=function(){function e(){var e=this;this._progress=0,this._height="2px",this._color="firebrick",this._visible=!0,this._intervalCounterId=0,this.interval=500,this.observable=new a.Observable(function(t){e.subscriber=t})}return Object.defineProperty(e.prototype,"progress",{get:function(){return this._progress},set:function(e){s.isPresent(e)&&(this._progress=e,this.emitEvent(new l(c.PROGRESS,this._progress)))},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"height",{get:function(){return this._height},set:function(e){s.isPresent(e)&&(this._height=e,this.emitEvent(new l(c.HEIGHT,this._height)))},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"color",{get:function(){return this._color},set:function(e){s.isPresent(e)&&(this._color=e,this.emitEvent(new l(c.COLOR,this._color)))},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"visible",{get:function(){return this._visible},set:function(e){s.isPresent(e)&&(this._visible=e,this.emitEvent(new l(c.VISIBLE,this._visible)))},enumerable:!0,configurable:!0}),e.prototype.emitEvent=function(e){try{this.subscriber.next(e)}catch(t){console.log(t),console.log("!!! Suggestion: Seems you forget add into your html?")}},e.prototype.start=function(e){var t=this;void 0===e&&(e=null),this.stop(),this.visible=!0,this._intervalCounterId=setInterval(function(){t.progress++,100===t.progress&&t.complete()},this.interval)},e.prototype.stop=function(){this._intervalCounterId&&(clearInterval(this._intervalCounterId),this._intervalCounterId=null)},e.prototype.reset=function(){this.stop(),this.progress=0},e.prototype.complete=function(){var e=this;this.progress=100,this.stop(),setTimeout(function(){e.visible=!1,setTimeout(function(){e.progress=0},250)},250)},e=i([o.Injectable(),n("design:paramtypes",[])],e)}();return t.SlimLoadingBarService=p,r.exports}),System.registerDynamic("ng2-slim-loading-bar",["./src/component","./src/service"],!0,function(e,t,r){"use strict";function i(e){for(var r in e)t.hasOwnProperty(r)||(t[r]=e[r])}var n=e("./src/component"),o=e("./src/service");return i(e("./src/component")),i(e("./src/service")),Object.defineProperty(t,"__esModule",{value:!0}),t["default"]={providers:[o.SlimLoadingBarService],directives:[n.SlimLoadingBar]},r.exports}); +System.registerDynamic("src/component",["angular2/core","angular2/src/facade/lang","angular2/common","./service"],!0,function(e,t,r){var i=this&&this.__decorate||function(e,t,r,i){var n,o=arguments.length,s=3>o?t:null===i?i=Object.getOwnPropertyDescriptor(t,r):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,r,i);else for(var a=e.length-1;a>=0;a--)(n=e[a])&&(s=(3>o?n(s):o>3?n(t,r,s):n(t,r))||s);return o>3&&s&&Object.defineProperty(t,r,s),s},n=this&&this.__metadata||function(e,t){return"object"==typeof Reflect&&"function"==typeof Reflect.metadata?Reflect.metadata(e,t):void 0},o=e("angular2/core"),s=e("angular2/src/facade/lang"),a=e("angular2/common"),c=e("./service"),l=function(){function e(e){this.service=e,this._progress="0%",this.color="firebrick",this.height="2px",this.show=!0}return Object.defineProperty(e.prototype,"progress",{get:function(){return this._progress},set:function(e){s.isPresent(e)&&(this._progress=e+"%")},enumerable:!0,configurable:!0}),e.prototype.ngOnInit=function(){var e=this;this.service.observable.subscribe(function(t){t.type===c.SlimLoadingBarEventType.PROGRESS?e.progress=t.value:t.type===c.SlimLoadingBarEventType.COLOR?e.color=t.value:t.type===c.SlimLoadingBarEventType.HEIGHT?e.height=t.value:t.type===c.SlimLoadingBarEventType.VISIBLE&&(e.show=t.value)})},i([o.Input(),n("design:type",String),n("design:paramtypes",[String])],e.prototype,"progress",null),i([o.Input(),n("design:type",String)],e.prototype,"color",void 0),i([o.Input(),n("design:type",String)],e.prototype,"height",void 0),i([o.Input(),n("design:type",Boolean)],e.prototype,"show",void 0),e=i([o.Component({selector:"ng2-slim-loading-bar",directives:[a.CORE_DIRECTIVES],template:'\n
\n
\n
'}),n("design:paramtypes",[c.SlimLoadingBarService])],e)}();return t.SlimLoadingBar=l,r.exports}),System.registerDynamic("src/service",["angular2/core","angular2/src/facade/lang","rxjs/Observable"],!0,function(e,t,r){var i=this&&this.__decorate||function(e,t,r,i){var n,o=arguments.length,s=3>o?t:null===i?i=Object.getOwnPropertyDescriptor(t,r):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,r,i);else for(var a=e.length-1;a>=0;a--)(n=e[a])&&(s=(3>o?n(s):o>3?n(t,r,s):n(t,r))||s);return o>3&&s&&Object.defineProperty(t,r,s),s},n=this&&this.__metadata||function(e,t){return"object"==typeof Reflect&&"function"==typeof Reflect.metadata?Reflect.metadata(e,t):void 0},o=e("angular2/core"),s=e("angular2/src/facade/lang"),a=e("rxjs/Observable");!function(e){e[e.PROGRESS=0]="PROGRESS",e[e.HEIGHT=1]="HEIGHT",e[e.COLOR=2]="COLOR",e[e.VISIBLE=3]="VISIBLE"}(t.SlimLoadingBarEventType||(t.SlimLoadingBarEventType={}));var c=t.SlimLoadingBarEventType,l=function(){function e(e,t){this.type=e,this.value=t}return e}();t.SlimLoadingBarEvent=l;var p=function(){function e(){var e=this;this._progress=0,this._height="2px",this._color="firebrick",this._visible=!0,this._intervalCounterId=0,this.interval=500,this.observable=new a.Observable(function(t){e.subscriber=t})}return Object.defineProperty(e.prototype,"progress",{get:function(){return this._progress},set:function(e){s.isPresent(e)&&(e>0&&(this.visible=!0),this._progress=e,this.emitEvent(new l(c.PROGRESS,this._progress)))},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"height",{get:function(){return this._height},set:function(e){s.isPresent(e)&&(this._height=e,this.emitEvent(new l(c.HEIGHT,this._height)))},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"color",{get:function(){return this._color},set:function(e){s.isPresent(e)&&(this._color=e,this.emitEvent(new l(c.COLOR,this._color)))},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"visible",{get:function(){return this._visible},set:function(e){s.isPresent(e)&&(this._visible=e,this.emitEvent(new l(c.VISIBLE,this._visible)))},enumerable:!0,configurable:!0}),e.prototype.emitEvent=function(e){try{this.subscriber.next(e)}catch(t){console.log(t),console.log("!!! Suggestion: Seems you forget add into your html?")}},e.prototype.start=function(e){var t=this;void 0===e&&(e=null),this.stop(),this.visible=!0,this._intervalCounterId=setInterval(function(){t.progress++,100===t.progress&&t.complete()},this.interval)},e.prototype.stop=function(){this._intervalCounterId&&(clearInterval(this._intervalCounterId),this._intervalCounterId=null)},e.prototype.reset=function(){this.stop(),this.progress=0},e.prototype.complete=function(){var e=this;this.progress=100,this.stop(),setTimeout(function(){e.visible=!1,setTimeout(function(){e.progress=0},250)},250)},e=i([o.Injectable(),n("design:paramtypes",[])],e)}();return t.SlimLoadingBarService=p,r.exports}),System.registerDynamic("ng2-slim-loading-bar",["./src/component","./src/service"],!0,function(e,t,r){"use strict";function i(e){for(var r in e)t.hasOwnProperty(r)||(t[r]=e[r])}var n=e("./src/component"),o=e("./src/service");return i(e("./src/component")),i(e("./src/service")),Object.defineProperty(t,"__esModule",{value:!0}),t["default"]={providers:[o.SlimLoadingBarService],directives:[n.SlimLoadingBar]},r.exports}); //# sourceMappingURL=bundles/ng2-slim-loading-bar.min.js.map \ No newline at end of file diff --git a/src/service.ts b/src/service.ts index 7a92281..afd2028 100644 --- a/src/service.ts +++ b/src/service.ts @@ -45,6 +45,9 @@ export class SlimLoadingBarService { set progress(value:number) { if (isPresent(value)) { + if (value > 0) { + this.visible = true; + } this._progress = value; this.emitEvent(new SlimLoadingBarEvent(SlimLoadingBarEventType.PROGRESS, this._progress)); }