├── .gitignore ├── .npmignore ├── .travis.yml ├── LICENSE ├── README.md ├── build ├── busy-backdrop.component.d.ts ├── busy-backdrop.component.js ├── busy-backdrop.component.js.map ├── busy-backdrop.component.metadata.json ├── busy-config.d.ts ├── busy-config.js ├── busy-config.js.map ├── busy-config.metadata.json ├── busy.component.d.ts ├── busy.component.js ├── busy.component.js.map ├── busy.component.metadata.json ├── busy.directive.d.ts ├── busy.directive.js ├── busy.directive.js.map ├── busy.directive.metadata.json ├── busy.module.d.ts ├── busy.module.js ├── busy.module.js.map ├── busy.module.metadata.json ├── busy.service.d.ts ├── busy.service.js ├── busy.service.js.map ├── busy.service.metadata.json ├── index.d.ts ├── index.js ├── index.js.map ├── index.metadata.json ├── promise-tracker.service.d.ts ├── promise-tracker.service.js ├── promise-tracker.service.js.map ├── promise-tracker.service.metadata.json ├── style │ └── busy.css ├── util.d.ts ├── util.js ├── util.js.map └── util.metadata.json ├── config ├── helper.js ├── webpack.busy.js ├── webpack.demo.js └── webpack.test.js ├── demo ├── app │ ├── app.component.html │ ├── app.component.less │ ├── app.component.ts │ ├── app.module.ts │ ├── github-corner │ │ ├── github-corner.component.html │ │ ├── github-corner.component.less │ │ ├── github-corner.component.ts │ │ └── index.ts │ ├── header │ │ ├── header.component.html │ │ ├── header.component.less │ │ ├── header.component.ts │ │ └── index.ts │ ├── index.ts │ ├── options │ │ ├── index.ts │ │ ├── options-template.ts │ │ ├── options.component.html │ │ ├── options.component.less │ │ └── options.component.ts │ └── table │ │ ├── index.ts │ │ ├── table.component.html │ │ ├── table.component.less │ │ └── table.component.ts ├── asset │ ├── css │ │ ├── bootstrap.min.css │ │ └── busy.css │ ├── img │ │ └── du.gif │ ├── index.html │ └── js │ │ ├── main.js │ │ └── vendor.js ├── index.html ├── main.ts ├── style │ └── variable.less ├── tsconfig.json └── vendor.ts ├── index.d.ts ├── index.js ├── index.js.map ├── index.metadata.json ├── index.ts ├── package.json ├── src ├── busy-backdrop.component.ts ├── busy-config.ts ├── busy.component.ts ├── busy.directive.ts ├── busy.module.ts ├── busy.service.ts ├── index.ts ├── promise-tracker.service.ts ├── style │ ├── busy.less │ └── index.js └── util.ts ├── test ├── busy.spec.js ├── busy.spec.ts └── index.html ├── tsconfig.json ├── tslint.json └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Node Files 2 | /node_modules 3 | npm-debug.log 4 | 5 | # OS generated files 6 | .DS_Store 7 | ehthumbs.db 8 | Icon? 9 | Thumbs.db 10 | 11 | # Style scripts 12 | build/busy.js 13 | 14 | # AOT files 15 | *.ngsummary.json 16 | *.ngfactory.ts 17 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | 3 | /build/busy.js 4 | /config 5 | /demo 6 | /test 7 | /typings 8 | /tsconfig.json 9 | /tslint.json 10 | /typings.json 11 | /webpack.config.js 12 | 13 | .gitignore 14 | 15 | *.ngsummary.json 16 | *.ngfactory.ts 17 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | branches: 2 | only: 3 | - master 4 | language: node_js 5 | node_js: 6 | - "node" 7 | script: 8 | - npm run build 9 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Yumao 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Angular2-Busy 2 | 3 | [![npm version](https://img.shields.io/npm/v/angular2-busy.svg?style=flat-square)](https://www.npmjs.com/package/angular2-busy) [![Build Status](https://img.shields.io/travis/devyumao/angular2-busy/master.svg?style=flat-square)](https://travis-ci.org/devyumao/angular2-busy) 4 | 5 | **Angular 2 Busy** can show busy/loading indicators on any promise, or on any Observable's subscription. 6 | 7 | ![demo](https://raw.githubusercontent.com/devyumao/devyumao.github.io/master/angular2-busy/img/demo.gif) 8 | 9 | Rewritten from [angular-busy](https://github.com/cgross/angular-busy), and add some new features in terms of Angular 2. 10 | 11 | ### Built with Angular 4.0.1 12 | 13 | ## Demo 14 | 15 | [devyumao.github.io/angular2-busy/demo/asset/](http://devyumao.github.io/angular2-busy/demo/asset/) 16 | 17 | ## Installation 18 | 19 | ```shell 20 | npm install --save angular2-busy 21 | ``` 22 | 23 | ## Link CSS 24 | 25 | ```html 26 | 27 | ``` 28 | 29 | ## Getting Started 30 | 31 | Import the `BusyModule` in your root application module: 32 | 33 | ```typescript 34 | import {NgModule} from '@angular/core'; 35 | import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; 36 | import {BusyModule} from 'angular2-busy'; 37 | 38 | @NgModule({ 39 | imports: [ 40 | // ... 41 | BrowserAnimationsModule, 42 | BusyModule 43 | ], 44 | // ... 45 | }) 46 | export class AppModule {} 47 | ``` 48 | 49 | 50 | Reference your promise in the `ngBusy` directive: 51 | 52 | ```typescript 53 | import {Component, OnInit} from '@angular/core'; 54 | import {Http} from '@angular/http'; 55 | 56 | @Component({ 57 | selector: 'some', 58 | template: ` 59 |
60 | ` 61 | }) 62 | class SomeComponent implements OnInit { 63 | busy: Promise; 64 | 65 | constructor(private http: Http) {} 66 | 67 | ngOnInit() { 68 | this.busy = this.http.get('...').toPromise(); 69 | } 70 | } 71 | ``` 72 | 73 | Moreover, the subscription of an Observable is also supported: 74 | 75 | ```typescript 76 | // ... 77 | import {Subscription} from 'rxjs'; 78 | 79 | // ... 80 | class SomeComponent implements OnInit { 81 | busy: Subscription; 82 | 83 | // ... 84 | 85 | ngOnInit() { 86 | this.busy = this.http.get('...').subscribe(); 87 | } 88 | } 89 | ``` 90 | 91 | ## Directive Syntax 92 | 93 | The `ngBusy` directive expects a ***busy thing***, which means: 94 | - A promise 95 | - Or an Observable's subscription 96 | - Or an array of them 97 | - Or a configuration object 98 | 99 | In other words, you may use flexible syntax: 100 | 101 | ```html 102 | 103 |
104 | ``` 105 | 106 | ```html 107 | 108 |
109 | ``` 110 | 111 | ```html 112 | 113 |
114 | ``` 115 | 116 | ## Options 117 | 118 | | Option | Required | Default | Details | 119 | | ---- | ---- | ---- | ---- | 120 | | busy | Required | null | A busy thing (or an array of busy things) that will cause the loading indicator to show. | 121 | | message | Optional | 'Please wait...' | The message to show in the indicator which will reflect the updated values as they are changed. | 122 | | backdrop | Optional | true | A faded backdrop will be shown behind the indicator if true. | 123 | | template | Optional | A default template string | If provided, the custom template will be shown in place of the default indicatory template. The scope can be augmented with a `{{message}}` field containing the indicator message text. | 124 | | delay | Optional | 0 | The amount of time to wait until showing the indicator. Specified in milliseconds. 125 | | minDuration | Optional | 0 | The amount of time to keep the indicator showing even if the busy thing was completed quicker. Specified in milliseconds.| 126 | | wrapperClass | Optional | 'ng-busy' | The name(s) of the CSS classes to be applied to the wrapper element of the indicator. | 127 | 128 | 129 | ## Overriding Defaults 130 | 131 | The default values of options can be overriden by configuring the provider of the `BusyModule`. 132 | 133 | In the root application module, you can do this: 134 | 135 | ```typescript 136 | import {NgModule} from '@angular/core'; 137 | import {BusyModule, BusyConfig} from 'angular2-busy'; 138 | 139 | @NgModule({ 140 | imports: [ 141 | // ... 142 | BusyModule.forRoot( 143 | new BusyConfig({ 144 | message: 'Don\'t panic!', 145 | backdrop: false, 146 | template: '
{{message}}
', 147 | delay: 200, 148 | minDuration: 600, 149 | wrapperClass: 'my-class' 150 | }) 151 | ) 152 | ], 153 | // ... 154 | }) 155 | export class AppModule 156 | ``` 157 | 158 | ## FAQ 159 | 160 | ### The indicator's position is not inside the `ngBusy` container 161 | 162 | You may add `position: relative` style to your `ngBusy` container. 163 | 164 | ### SystemJS Config? 165 | 166 | You may need this in your `systemjs.config.js`: 167 | 168 | ```javascript 169 | { 170 | paths: { 171 | 'npm:': 'node_modules/' 172 | }, 173 | map: { 174 | // ... 175 | 'angular2-busy': 'npm:angular2-busy' 176 | }, 177 | packages: { 178 | // ... 179 | 'angular2-busy': { 180 | main: './index.js', 181 | defaultExtension: 'js' 182 | } 183 | } 184 | } 185 | ``` 186 | 187 | 188 | ## TODO 189 | 190 | - Provide custom animations for the indicator 191 | 192 | - Unit & E2E test 193 | 194 | ## Credits 195 | 196 | Rewritten from [cgross](https://github.com/cgross)'s [angular-busy](https://github.com/cgross/angular-busy). 197 | 198 | Inspired by [ajoslin](https://github.com/ajoslin)'s [angular-promise-tracker](https://github.com/ajoslin/angular-promise-tracker). 199 | 200 | ## LICENSE 201 | 202 | This project is licensed under the MIT license. See the [LICENSE](https://github.com/devyumao/angular2-busy/blob/master/LICENSE) file for more info. 203 | -------------------------------------------------------------------------------- /build/busy-backdrop.component.d.ts: -------------------------------------------------------------------------------- 1 | import { PromiseTrackerService } from './promise-tracker.service'; 2 | export declare class BusyBackdropComponent { 3 | private tracker; 4 | constructor(tracker: PromiseTrackerService); 5 | isActive(): boolean; 6 | } 7 | -------------------------------------------------------------------------------- /build/busy-backdrop.component.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @file Component: BusyBackdrop 3 | * @author yumao 4 | */ 5 | "use strict"; 6 | Object.defineProperty(exports, "__esModule", { value: true }); 7 | var core_1 = require("@angular/core"); 8 | var animations_1 = require("@angular/animations"); 9 | var promise_tracker_service_1 = require("./promise-tracker.service"); 10 | var inactiveStyle = animations_1.style({ 11 | opacity: 0, 12 | }); 13 | var timing = '.3s ease'; 14 | var BusyBackdropComponent = (function () { 15 | function BusyBackdropComponent(tracker) { 16 | this.tracker = tracker; 17 | } 18 | BusyBackdropComponent.prototype.isActive = function () { 19 | return this.tracker.isActive(); 20 | }; 21 | return BusyBackdropComponent; 22 | }()); 23 | BusyBackdropComponent.decorators = [ 24 | { type: core_1.Component, args: [{ 25 | selector: 'ng-busy-backdrop', 26 | template: "\n
\n
\n ", 27 | animations: [ 28 | animations_1.trigger('fadeInOut', [ 29 | animations_1.transition('void => *', [ 30 | inactiveStyle, 31 | animations_1.animate(timing) 32 | ]), 33 | animations_1.transition('* => void', [ 34 | animations_1.animate(timing, inactiveStyle) 35 | ]) 36 | ]) 37 | ] 38 | },] }, 39 | ]; 40 | /** @nocollapse */ 41 | BusyBackdropComponent.ctorParameters = function () { return [ 42 | { type: promise_tracker_service_1.PromiseTrackerService, }, 43 | ]; }; 44 | exports.BusyBackdropComponent = BusyBackdropComponent; 45 | //# sourceMappingURL=busy-backdrop.component.js.map -------------------------------------------------------------------------------- /build/busy-backdrop.component.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../src/busy-backdrop.component.ts"],"names":[],"mappings":"AAAA;;;GAGG;;;AAEH,sCAAwC;AACxC,kDAA+E;AAE/E,qEAAgE;AAEhE,IAAM,aAAA,GAAgB,kBAAA,CAAM;IACxB,OAAO,EAAE,CAAA;CACZ,CAAC,CAAC;AACH,IAAM,MAAA,GAAS,UAAA,CAAW;AAG1B;IACI,+BAAoB,OAA8B;QAA9B,YAAO,GAAP,OAAO,CAAuB;IAClD,CAAC;IAED,wCAAQ,GAAR;QACI,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC;IACnC,CAAC;IA2BL,4BAAC;AAAD,CAjCA,AAiCC;AA1BM,gCAAU,GAA0B;IAC3C,EAAE,IAAI,EAAE,gBAAS,EAAE,IAAI,EAAE,CAAC;gBACtB,QAAQ,EAAE,kBAAkB;gBAC5B,QAAQ,EAAE,8HAKT;gBACD,UAAU,EAAE;oBACR,oBAAO,CAAC,WAAW,EAAE;wBACjB,uBAAU,CAAC,WAAW,EAAE;4BACpB,aAAa;4BACb,oBAAO,CAAC,MAAM,CAAC;yBAClB,CAAC;wBACF,uBAAU,CAAC,WAAW,EAAE;4BACpB,oBAAO,CAAC,MAAM,EAAE,aAAa,CAAC;yBACjC,CAAC;qBACL,CAAC;iBACL;aACJ,EAAG,EAAE;CACL,CAAC;AACF,kBAAkB;AACX,oCAAc,GAAmE,cAAM,OAAA;IAC9F,EAAC,IAAI,EAAE,+CAAqB,GAAG;CAC9B,EAF6F,CAE7F,CAAC;AAhCW,sDAAqB","file":"busy-backdrop.component.js","sourceRoot":""} -------------------------------------------------------------------------------- /build/busy-backdrop.component.metadata.json: -------------------------------------------------------------------------------- 1 | [{"__symbolic":"module","version":3,"metadata":{"BusyBackdropComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ng-busy-backdrop","template":"\n
\n
\n ","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger"},"arguments":["fadeInOut",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition"},"arguments":["void => *",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style"},"arguments":[{"opacity":0}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate"},"arguments":[".3s ease"]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition"},"arguments":["* => void",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate"},"arguments":[".3s ease",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style"},"arguments":[{"opacity":0}]}]}]]}]]}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./promise-tracker.service","name":"PromiseTrackerService"}]}],"isActive":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"BusyBackdropComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ng-busy-backdrop","template":"\n
\n
\n ","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger"},"arguments":["fadeInOut",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition"},"arguments":["void => *",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style"},"arguments":[{"opacity":0}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate"},"arguments":[".3s ease"]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition"},"arguments":["* => void",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate"},"arguments":[".3s ease",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style"},"arguments":[{"opacity":0}]}]}]]}]]}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./promise-tracker.service","name":"PromiseTrackerService"}]}],"isActive":[{"__symbolic":"method"}]}}}}] -------------------------------------------------------------------------------- /build/busy-config.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @file Busy Config 3 | * @author yumao 4 | */ 5 | import { Subscription } from 'rxjs/Subscription'; 6 | export declare class BusyConfig implements IBusyConfig { 7 | template: string; 8 | delay: number; 9 | minDuration: number; 10 | backdrop: boolean; 11 | message: string; 12 | wrapperClass: string; 13 | constructor(config?: IBusyConfig); 14 | } 15 | export interface IBusyConfig { 16 | template?: string; 17 | delay?: number; 18 | minDuration?: number; 19 | backdrop?: boolean; 20 | message?: string; 21 | wrapperClass?: string; 22 | busy?: Promise | Subscription | Array | Subscription>; 23 | } 24 | export declare const BUSY_CONFIG_DEFAULTS: { 25 | template: string; 26 | delay: number; 27 | minDuration: number; 28 | backdrop: boolean; 29 | message: string; 30 | wrapperClass: string; 31 | }; 32 | -------------------------------------------------------------------------------- /build/busy-config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @file Busy Config 3 | * @author yumao 4 | */ 5 | "use strict"; 6 | Object.defineProperty(exports, "__esModule", { value: true }); 7 | var BusyConfig = (function () { 8 | function BusyConfig(config) { 9 | if (config === void 0) { config = {}; } 10 | for (var option in exports.BUSY_CONFIG_DEFAULTS) { 11 | this[option] = config[option] != null ? config[option] : exports.BUSY_CONFIG_DEFAULTS[option]; 12 | } 13 | } 14 | return BusyConfig; 15 | }()); 16 | exports.BusyConfig = BusyConfig; 17 | exports.BUSY_CONFIG_DEFAULTS = { 18 | template: "\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
{{message}}
\n
\n
\n ", 19 | delay: 0, 20 | minDuration: 0, 21 | backdrop: true, 22 | message: 'Please wait...', 23 | wrapperClass: 'ng-busy' 24 | }; 25 | //# sourceMappingURL=busy-config.js.map -------------------------------------------------------------------------------- /build/busy-config.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../src/busy-config.ts"],"names":[],"mappings":"AAAA;;;GAGG;;;AAIH;IAQI,oBAAY,MAAwB;QAAxB,uBAAA,EAAA,WAAwB;QAChC,GAAG,CAAC,CAAC,IAAI,MAAM,IAAI,4BAAoB,CAAC,CAAC,CAAC;YACtC,IAAI,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,4BAAoB,CAAC,MAAM,CAAC,CAAC;QAC1F,CAAC;IACL,CAAC;IACL,iBAAC;AAAD,CAbA,AAaC,IAAA;AAbY,gCAAU;AAyBV,QAAA,oBAAoB,GAAG;IAChC,QAAQ,EAAE,02BAoBT;IACD,KAAK,EAAE,CAAC;IACR,WAAW,EAAE,CAAC;IACd,QAAQ,EAAE,IAAI;IACd,OAAO,EAAE,gBAAgB;IACzB,YAAY,EAAE,SAAS;CAC1B,CAAC","file":"busy-config.js","sourceRoot":""} -------------------------------------------------------------------------------- /build/busy-config.metadata.json: -------------------------------------------------------------------------------- 1 | [{"__symbolic":"module","version":3,"metadata":{"BusyConfig":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"any"}]}]}},"IBusyConfig":{"__symbolic":"interface"},"BUSY_CONFIG_DEFAULTS":{"template":"\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
{{message}}
\n
\n
\n ","delay":0,"minDuration":0,"backdrop":true,"message":"Please wait...","wrapperClass":"ng-busy"}}},{"__symbolic":"module","version":1,"metadata":{"BusyConfig":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"any"}]}]}},"IBusyConfig":{"__symbolic":"interface"},"BUSY_CONFIG_DEFAULTS":{"template":"\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
{{message}}
\n
\n
\n ","delay":0,"minDuration":0,"backdrop":true,"message":"Please wait...","wrapperClass":"ng-busy"}}}] -------------------------------------------------------------------------------- /build/busy.component.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @file Component: Busy 3 | * @author yumao 4 | */ 5 | import { Compiler, DoCheck, OnDestroy } from '@angular/core'; 6 | import { PromiseTrackerService } from './promise-tracker.service'; 7 | export interface IBusyContext { 8 | message: string; 9 | } 10 | export declare class BusyComponent implements DoCheck, OnDestroy { 11 | private tracker; 12 | private compiler; 13 | TemplateComponent: any; 14 | private nmf; 15 | wrapperClass: string; 16 | template: string; 17 | message: string; 18 | private lastMessage; 19 | constructor(tracker: PromiseTrackerService, compiler: Compiler); 20 | ngDoCheck(): void; 21 | ngOnDestroy(): void; 22 | createDynamicTemplate(): void; 23 | clearDynamicTemplateCache(): void; 24 | isActive(): boolean; 25 | } 26 | -------------------------------------------------------------------------------- /build/busy.component.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @file Component: Busy 3 | * @author yumao 4 | */ 5 | "use strict"; 6 | Object.defineProperty(exports, "__esModule", { value: true }); 7 | var core_1 = require("@angular/core"); 8 | var animations_1 = require("@angular/animations"); 9 | var promise_tracker_service_1 = require("./promise-tracker.service"); 10 | var inactiveStyle = animations_1.style({ 11 | opacity: 0, 12 | transform: 'translateY(-40px)' 13 | }); 14 | var timing = '.3s ease'; 15 | ; 16 | var BusyComponent = (function () { 17 | function BusyComponent(tracker, compiler) { 18 | this.tracker = tracker; 19 | this.compiler = compiler; 20 | } 21 | BusyComponent.prototype.ngDoCheck = function () { 22 | if (this.message === this.lastMessage) { 23 | return; 24 | } 25 | this.lastMessage = this.message; 26 | this.clearDynamicTemplateCache(); 27 | this.createDynamicTemplate(); 28 | }; 29 | BusyComponent.prototype.ngOnDestroy = function () { 30 | this.clearDynamicTemplateCache(); 31 | }; 32 | BusyComponent.prototype.createDynamicTemplate = function () { 33 | var _a = this, template = _a.template, message = _a.message; 34 | var TemplateComponent = (function () { 35 | function TemplateComponent() { 36 | this.message = message; 37 | } 38 | return TemplateComponent; 39 | }()); 40 | TemplateComponent.decorators = [ 41 | { type: core_1.Component, args: [{ template: template },] }, 42 | ]; 43 | /** @nocollapse */ 44 | TemplateComponent.ctorParameters = function () { return []; }; 45 | var TemplateModule = (function () { 46 | function TemplateModule() { 47 | } 48 | return TemplateModule; 49 | }()); 50 | TemplateModule.decorators = [ 51 | { type: core_1.NgModule, args: [{ 52 | declarations: [TemplateComponent], 53 | entryComponents: [TemplateComponent] 54 | },] }, 55 | ]; 56 | /** @nocollapse */ 57 | TemplateModule.ctorParameters = function () { return []; }; 58 | this.TemplateComponent = TemplateComponent; 59 | this.nmf = this.compiler.compileModuleSync(TemplateModule); 60 | }; 61 | BusyComponent.prototype.clearDynamicTemplateCache = function () { 62 | if (!this.nmf) { 63 | return; 64 | } 65 | this.compiler.clearCacheFor(this.nmf.moduleType); 66 | this.nmf = null; 67 | }; 68 | BusyComponent.prototype.isActive = function () { 69 | return this.tracker.isActive(); 70 | }; 71 | return BusyComponent; 72 | }()); 73 | BusyComponent.decorators = [ 74 | { type: core_1.Component, args: [{ 75 | selector: 'ng-busy', 76 | template: "\n
\n \n
\n ", 77 | animations: [ 78 | animations_1.trigger('flyInOut', [ 79 | animations_1.transition('void => *', [ 80 | inactiveStyle, 81 | animations_1.animate(timing) 82 | ]), 83 | animations_1.transition('* => void', [ 84 | animations_1.animate(timing, inactiveStyle) 85 | ]) 86 | ]) 87 | ] 88 | },] }, 89 | ]; 90 | /** @nocollapse */ 91 | BusyComponent.ctorParameters = function () { return [ 92 | { type: promise_tracker_service_1.PromiseTrackerService, }, 93 | { type: core_1.Compiler, }, 94 | ]; }; 95 | exports.BusyComponent = BusyComponent; 96 | //# sourceMappingURL=busy.component.js.map -------------------------------------------------------------------------------- /build/busy.component.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../src/busy.component.ts"],"names":[],"mappings":"AAAA;;;GAGG;;;AAEH,sCAQuB;AACvB,kDAA+E;AAE/E,qEAAgE;AAGhE,IAAM,aAAA,GAAgB,kBAAA,CAAM;IACxB,OAAO,EAAE,CAAA;IACT,SAAS,EAAE,mBAAA;CACd,CAAC,CAAC;AACH,IAAM,MAAA,GAAS,UAAA,CAAW;AAIzB,CAAC;AAGF;IAQI,uBACY,OAA8B,EAC9B,QAAkB;QADlB,YAAO,GAAP,OAAO,CAAuB;QAC9B,aAAQ,GAAR,QAAQ,CAAU;IAC3B,CAAC;IAEJ,iCAAS,GAAT;QACI,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;YACpC,MAAM,CAAC;QACX,CAAC;QACD,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC;QAChC,IAAI,CAAC,yBAAyB,EAAE,CAAC;QACjC,IAAI,CAAC,qBAAqB,EAAE,CAAC;IACjC,CAAC;IAED,mCAAW,GAAX;QACI,IAAI,CAAC,yBAAyB,EAAE,CAAC;IACrC,CAAC;IAED,6CAAqB,GAArB;QACU,IAAA,SAA0B,EAAzB,sBAAQ,EAAE,oBAAO,CAAS;QAGjC;YAAA;gBACI,YAAO,GAAW,OAAO,CAAC;YAOtC,CAAC;YAAD,wBAAC;QAAD,CARQ,AAQP;QANc,4BAAU,GAA0B;YACnD,EAAE,IAAI,EAAE,gBAAS,EAAE,IAAI,EAAE,CAAC,EAAC,QAAQ,UAAA,EAAC,EAAG,EAAE;SACxC,CAAC;QACF,kBAAkB;QACX,gCAAc,GAAmE,cAAM,OAAA,EAC7F,EAD6F,CAC7F,CAAC;QAIM;YAAA;YASR,CAAC;YAAD,qBAAC;QAAD,CATQ,AASP;QAToC,yBAAU,GAA0B;YACzE,EAAE,IAAI,EAAE,eAAQ,EAAE,IAAI,EAAE,CAAC;wBACb,YAAY,EAAE,CAAC,iBAAiB,CAAC;wBACjC,eAAe,EAAE,CAAC,iBAAiB,CAAC;qBACvC,EAAG,EAAE;SACb,CAAC;QACF,kBAAkB;QACX,6BAAc,GAAmE,cAAM,OAAA,EAC7F,EAD6F,CAC7F,CAAC;QAGM,IAAI,CAAC,iBAAiB,GAAG,iBAAiB,CAAC;QAC3C,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC;IAC/D,CAAC;IAED,iDAAyB,GAAzB;QACI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;YACZ,MAAM,CAAC;QACX,CAAC;QAED,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;QACjD,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC;IACpB,CAAC;IAED,gCAAQ,GAAR;QACI,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC;IACnC,CAAC;IA2BL,oBAAC;AAAD,CA9FA,AA8FC;AA1BM,wBAAU,GAA0B;IAC3C,EAAE,IAAI,EAAE,gBAAS,EAAE,IAAI,EAAE,CAAC;gBACtB,QAAQ,EAAE,SAAS;gBACnB,QAAQ,EAAE,0MAIT;gBACD,UAAU,EAAE;oBACR,oBAAO,CAAC,UAAU,EAAE;wBAChB,uBAAU,CAAC,WAAW,EAAE;4BACpB,aAAa;4BACb,oBAAO,CAAC,MAAM,CAAC;yBAClB,CAAC;wBACF,uBAAU,CAAC,WAAW,EAAE;4BACpB,oBAAO,CAAC,MAAM,EAAE,aAAa,CAAC;yBACjC,CAAC;qBACL,CAAC;iBACL;aACJ,EAAG,EAAE;CACL,CAAC;AACF,kBAAkB;AACX,4BAAc,GAAmE,cAAM,OAAA;IAC9F,EAAC,IAAI,EAAE,+CAAqB,GAAG;IAC/B,EAAC,IAAI,EAAE,eAAQ,GAAG;CACjB,EAH6F,CAG7F,CAAC;AA7FW,sCAAa","file":"busy.component.js","sourceRoot":""} -------------------------------------------------------------------------------- /build/busy.component.metadata.json: -------------------------------------------------------------------------------- 1 | [{"__symbolic":"module","version":3,"metadata":{"IBusyContext":{"__symbolic":"interface"},"BusyComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ng-busy","template":"\n
\n \n
\n ","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger"},"arguments":["flyInOut",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition"},"arguments":["void => *",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style"},"arguments":[{"opacity":0,"transform":"translateY(-40px)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate"},"arguments":[".3s ease"]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition"},"arguments":["* => void",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate"},"arguments":[".3s ease",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style"},"arguments":[{"opacity":0,"transform":"translateY(-40px)"}]}]}]]}]]}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./promise-tracker.service","name":"PromiseTrackerService"},{"__symbolic":"reference","module":"@angular/core","name":"Compiler"}]}],"ngDoCheck":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"createDynamicTemplate":[{"__symbolic":"method"}],"clearDynamicTemplateCache":[{"__symbolic":"method"}],"isActive":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"IBusyContext":{"__symbolic":"interface"},"BusyComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ng-busy","template":"\n
\n \n
\n ","animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger"},"arguments":["flyInOut",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition"},"arguments":["void => *",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style"},"arguments":[{"opacity":0,"transform":"translateY(-40px)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate"},"arguments":[".3s ease"]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition"},"arguments":["* => void",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate"},"arguments":[".3s ease",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style"},"arguments":[{"opacity":0,"transform":"translateY(-40px)"}]}]}]]}]]}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./promise-tracker.service","name":"PromiseTrackerService"},{"__symbolic":"reference","module":"@angular/core","name":"Compiler"}]}],"ngDoCheck":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"createDynamicTemplate":[{"__symbolic":"method"}],"clearDynamicTemplateCache":[{"__symbolic":"method"}],"isActive":[{"__symbolic":"method"}]}}}}] -------------------------------------------------------------------------------- /build/busy.directive.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @file Directive: Busy 3 | * @author yumao 4 | */ 5 | import { DoCheck, ViewContainerRef, ComponentFactoryResolver, Injector } from '@angular/core'; 6 | import { PromiseTrackerService } from './promise-tracker.service'; 7 | import { BusyService } from './busy.service'; 8 | /** 9 | * ### Syntax 10 | * 11 | * - `
...
` 12 | * - `
...
` 13 | * - `
...
` 14 | */ 15 | export declare class BusyDirective implements DoCheck { 16 | private service; 17 | private tracker; 18 | private cfResolver; 19 | private vcRef; 20 | private injector; 21 | options: any; 22 | private optionsRecord; 23 | private optionsNorm; 24 | template: string; 25 | backdrop: boolean; 26 | private busyRef; 27 | private backdropRef; 28 | constructor(service: BusyService, tracker: PromiseTrackerService, cfResolver: ComponentFactoryResolver, vcRef: ViewContainerRef, injector: Injector); 29 | private normalizeOptions(options); 30 | private dectectOptionsChange(); 31 | ngDoCheck(): void; 32 | ngOnDestroy(): void; 33 | private destroyComponents(); 34 | private createBackdrop(); 35 | private createBusy(); 36 | } 37 | -------------------------------------------------------------------------------- /build/busy.directive.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @file Directive: Busy 3 | * @author yumao 4 | */ 5 | "use strict"; 6 | Object.defineProperty(exports, "__esModule", { value: true }); 7 | var core_1 = require("@angular/core"); 8 | var Subscription_1 = require("rxjs/Subscription"); 9 | var util_1 = require("./util"); 10 | var promise_tracker_service_1 = require("./promise-tracker.service"); 11 | var busy_service_1 = require("./busy.service"); 12 | var busy_component_1 = require("./busy.component"); 13 | var busy_backdrop_component_1 = require("./busy-backdrop.component"); 14 | /** 15 | * ### Syntax 16 | * 17 | * - `
...
` 18 | * - `
...
` 19 | * - `
...
` 20 | */ 21 | var BusyDirective = (function () { 22 | function BusyDirective(service, tracker, cfResolver, vcRef, injector) { 23 | this.service = service; 24 | this.tracker = tracker; 25 | this.cfResolver = cfResolver; 26 | this.vcRef = vcRef; 27 | this.injector = injector; 28 | } 29 | BusyDirective.prototype.normalizeOptions = function (options) { 30 | if (!options) { 31 | options = { busy: null }; 32 | } 33 | else if (Array.isArray(options) 34 | || options instanceof Promise 35 | || options instanceof Subscription_1.Subscription) { 36 | options = { busy: options }; 37 | } 38 | options = Object.assign({}, this.service.config, options); 39 | if (!Array.isArray(options.busy)) { 40 | options.busy = [options.busy]; 41 | } 42 | return options; 43 | }; 44 | BusyDirective.prototype.dectectOptionsChange = function () { 45 | if (util_1.equals(this.optionsNorm, this.optionsRecord)) { 46 | return false; 47 | } 48 | this.optionsRecord = this.optionsNorm; 49 | return true; 50 | }; 51 | // As ngOnChanges does not work on Object detection, ngDoCheck is using 52 | BusyDirective.prototype.ngDoCheck = function () { 53 | var options = this.optionsNorm = this.normalizeOptions(this.options); 54 | if (!this.dectectOptionsChange()) { 55 | return; 56 | } 57 | if (this.busyRef) { 58 | this.busyRef.instance.message = options.message; 59 | } 60 | !util_1.equals(options.busy, this.tracker.promiseList) 61 | && this.tracker.reset({ 62 | promiseList: options.busy, 63 | delay: options.delay, 64 | minDuration: options.minDuration 65 | }); 66 | if (!this.busyRef 67 | || this.template !== options.template 68 | || this.backdrop !== options.backdrop) { 69 | this.destroyComponents(); 70 | this.template = options.template; 71 | this.backdrop = options.backdrop; 72 | options.backdrop && this.createBackdrop(); 73 | this.createBusy(); 74 | } 75 | }; 76 | BusyDirective.prototype.ngOnDestroy = function () { 77 | this.destroyComponents(); 78 | }; 79 | BusyDirective.prototype.destroyComponents = function () { 80 | this.busyRef && this.busyRef.destroy(); 81 | this.backdropRef && this.backdropRef.destroy(); 82 | }; 83 | BusyDirective.prototype.createBackdrop = function () { 84 | var backdropFactory = this.cfResolver.resolveComponentFactory(busy_backdrop_component_1.BusyBackdropComponent); 85 | this.backdropRef = this.vcRef.createComponent(backdropFactory, null, this.injector); 86 | }; 87 | BusyDirective.prototype.createBusy = function () { 88 | var busyFactory = this.cfResolver.resolveComponentFactory(busy_component_1.BusyComponent); 89 | this.busyRef = this.vcRef.createComponent(busyFactory, null, this.injector); 90 | var _a = this.optionsNorm, message = _a.message, wrapperClass = _a.wrapperClass, template = _a.template; 91 | var instance = this.busyRef.instance; 92 | instance.message = message; 93 | instance.wrapperClass = wrapperClass; 94 | instance.template = template; 95 | }; 96 | return BusyDirective; 97 | }()); 98 | BusyDirective.decorators = [ 99 | { type: core_1.Directive, args: [{ 100 | selector: '[ngBusy]', 101 | providers: [promise_tracker_service_1.PromiseTrackerService] 102 | },] }, 103 | ]; 104 | /** @nocollapse */ 105 | BusyDirective.ctorParameters = function () { return [ 106 | { type: busy_service_1.BusyService, }, 107 | { type: promise_tracker_service_1.PromiseTrackerService, }, 108 | { type: core_1.ComponentFactoryResolver, }, 109 | { type: core_1.ViewContainerRef, }, 110 | { type: core_1.Injector, }, 111 | ]; }; 112 | BusyDirective.propDecorators = { 113 | 'options': [{ type: core_1.Input, args: ['ngBusy',] },], 114 | }; 115 | exports.BusyDirective = BusyDirective; 116 | //# sourceMappingURL=busy.directive.js.map -------------------------------------------------------------------------------- /build/busy.directive.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../src/busy.directive.ts"],"names":[],"mappings":"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","file":"busy.directive.js","sourceRoot":""} -------------------------------------------------------------------------------- /build/busy.directive.metadata.json: -------------------------------------------------------------------------------- 1 | [{"__symbolic":"module","version":3,"metadata":{"BusyDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[ngBusy]","providers":[{"__symbolic":"reference","module":"./promise-tracker.service","name":"PromiseTrackerService"}]}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["ngBusy"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./busy.service","name":"BusyService"},{"__symbolic":"reference","module":"./promise-tracker.service","name":"PromiseTrackerService"},{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver"},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef"},{"__symbolic":"reference","module":"@angular/core","name":"Injector"}]}],"normalizeOptions":[{"__symbolic":"method"}],"dectectOptionsChange":[{"__symbolic":"method"}],"ngDoCheck":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"destroyComponents":[{"__symbolic":"method"}],"createBackdrop":[{"__symbolic":"method"}],"createBusy":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"BusyDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[ngBusy]","providers":[{"__symbolic":"reference","module":"./promise-tracker.service","name":"PromiseTrackerService"}]}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["ngBusy"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./busy.service","name":"BusyService"},{"__symbolic":"reference","module":"./promise-tracker.service","name":"PromiseTrackerService"},{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver"},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef"},{"__symbolic":"reference","module":"@angular/core","name":"Injector"}]}],"normalizeOptions":[{"__symbolic":"method"}],"dectectOptionsChange":[{"__symbolic":"method"}],"ngDoCheck":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"destroyComponents":[{"__symbolic":"method"}],"createBackdrop":[{"__symbolic":"method"}],"createBusy":[{"__symbolic":"method"}]}}}}] -------------------------------------------------------------------------------- /build/busy.module.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @file Module: Busy 3 | * @author yumao 4 | */ 5 | import { Compiler } from '@angular/core'; 6 | import { ModuleWithProviders } from '@angular/core'; 7 | import { BusyConfig } from './busy-config'; 8 | export declare function createJitCompiler(): Compiler; 9 | export declare class BusyModule { 10 | static forRoot(config: BusyConfig): ModuleWithProviders; 11 | } 12 | -------------------------------------------------------------------------------- /build/busy.module.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @file Module: Busy 3 | * @author yumao 4 | */ 5 | "use strict"; 6 | Object.defineProperty(exports, "__esModule", { value: true }); 7 | var core_1 = require("@angular/core"); 8 | var common_1 = require("@angular/common"); 9 | var compiler_1 = require("@angular/compiler"); 10 | var busy_directive_1 = require("./busy.directive"); 11 | var busy_service_1 = require("./busy.service"); 12 | var busy_backdrop_component_1 = require("./busy-backdrop.component"); 13 | var busy_component_1 = require("./busy.component"); 14 | var busy_config_1 = require("./busy-config"); 15 | // Workaround for Compiler in AOT 16 | // https://github.com/angular/angular/issues/15510#issuecomment-294301758 17 | function createJitCompiler() { 18 | return new compiler_1.JitCompilerFactory([{ useDebug: false, useJit: true }]).createCompiler(); 19 | } 20 | exports.createJitCompiler = createJitCompiler; 21 | var BusyModule = (function () { 22 | function BusyModule() { 23 | } 24 | BusyModule.forRoot = function (config) { 25 | return { 26 | ngModule: BusyModule, 27 | providers: [ 28 | { provide: busy_config_1.BusyConfig, useValue: config } 29 | ] 30 | }; 31 | }; 32 | return BusyModule; 33 | }()); 34 | BusyModule.decorators = [ 35 | { type: core_1.NgModule, args: [{ 36 | imports: [ 37 | common_1.CommonModule 38 | ], 39 | declarations: [ 40 | busy_directive_1.BusyDirective, 41 | busy_component_1.BusyComponent, 42 | busy_backdrop_component_1.BusyBackdropComponent, 43 | ], 44 | providers: [ 45 | busy_service_1.BusyService, 46 | { provide: core_1.Compiler, useFactory: createJitCompiler }, 47 | ], 48 | exports: [busy_directive_1.BusyDirective], 49 | entryComponents: [ 50 | busy_component_1.BusyComponent, 51 | busy_backdrop_component_1.BusyBackdropComponent 52 | ] 53 | },] }, 54 | ]; 55 | /** @nocollapse */ 56 | BusyModule.ctorParameters = function () { return []; }; 57 | exports.BusyModule = BusyModule; 58 | //# sourceMappingURL=busy.module.js.map -------------------------------------------------------------------------------- /build/busy.module.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../src/busy.module.ts"],"names":[],"mappings":"AAAA;;;GAGG;;;AAEH,sCAAiD;AACjD,0CAA6C;AAE7C,8CAAqD;AAErD,mDAA+C;AAC/C,+CAA2C;AAC3C,qEAAgE;AAChE,mDAA+C;AAC/C,6CAAyC;AAEzC,iCAAiC;AACjC,yEAAyE;AACzE;IACI,MAAM,CAAC,IAAI,6BAAA,CAAmB,CAAC,EAAC,QAAC,EAAS,KAAA,EAAO,MAAA,EAAQ,IAAA,EAAK,CAAC,CAAC,CAAC,cAAC,EAAc,CAAE;AACtF,CAAC;AAFD,8CAEC;AAGD;IAAA;IAiCA,CAAC;IAhCU,kBAAO,GAAd,UAAe,MAAkB;QAC7B,MAAM,CAAC;YACH,QAAQ,EAAE,UAAU;YACpB,SAAS,EAAE;gBACP,EAAC,OAAO,EAAE,wBAAU,EAAE,QAAQ,EAAE,MAAM,EAAC;aAC1C;SACJ,CAAC;IACN,CAAC;IAyBL,iBAAC;AAAD,CAjCA,AAiCC;AAxBM,qBAAU,GAA0B;IAC3C,EAAE,IAAI,EAAE,eAAQ,EAAE,IAAI,EAAE,CAAC;gBACrB,OAAO,EAAE;oBACL,qBAAY;iBACf;gBACD,YAAY,EAAE;oBACV,8BAAa;oBACb,8BAAa;oBACb,+CAAqB;iBACxB;gBACD,SAAS,EAAE;oBACP,0BAAW;oBACX,EAAC,OAAO,EAAE,eAAQ,EAAE,UAAU,EAAE,iBAAiB,EAAC;iBACrD;gBACD,OAAO,EAAE,CAAC,8BAAa,CAAC;gBACxB,eAAe,EAAE;oBACb,8BAAa;oBACb,+CAAqB;iBACxB;aACJ,EAAG,EAAE;CACL,CAAC;AACF,kBAAkB;AACX,yBAAc,GAAmE,cAAM,OAAA,EAC7F,EAD6F,CAC7F,CAAC;AAhCW,gCAAU","file":"busy.module.js","sourceRoot":""} -------------------------------------------------------------------------------- /build/busy.module.metadata.json: -------------------------------------------------------------------------------- 1 | [{"__symbolic":"module","version":3,"metadata":{"createJitCompiler":{"__symbolic":"function","parameters":[],"value":{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/compiler","name":"JitCompilerFactory"},"arguments":[[{"useDebug":false,"useJit":true}]]},"member":"createCompiler"}}},"BusyModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"declarations":[{"__symbolic":"reference","module":"./busy.directive","name":"BusyDirective"},{"__symbolic":"reference","module":"./busy.component","name":"BusyComponent"},{"__symbolic":"reference","module":"./busy-backdrop.component","name":"BusyBackdropComponent"}],"providers":[{"__symbolic":"reference","module":"./busy.service","name":"BusyService"},{"provide":{"__symbolic":"reference","module":"@angular/core","name":"Compiler"},"useFactory":{"__symbolic":"reference","name":"createJitCompiler"}}],"exports":[{"__symbolic":"reference","module":"./busy.directive","name":"BusyDirective"}],"entryComponents":[{"__symbolic":"reference","module":"./busy.component","name":"BusyComponent"},{"__symbolic":"reference","module":"./busy-backdrop.component","name":"BusyBackdropComponent"}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":["config"],"value":{"ngModule":{"__symbolic":"reference","name":"BusyModule"},"providers":[{"provide":{"__symbolic":"reference","module":"./busy-config","name":"BusyConfig"},"useValue":{"__symbolic":"reference","name":"config"}}]}}}}}},{"__symbolic":"module","version":1,"metadata":{"createJitCompiler":{"__symbolic":"function","parameters":[],"value":{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/compiler","name":"JitCompilerFactory"},"arguments":[[{"useDebug":false,"useJit":true}]]},"member":"createCompiler"}}},"BusyModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"declarations":[{"__symbolic":"reference","module":"./busy.directive","name":"BusyDirective"},{"__symbolic":"reference","module":"./busy.component","name":"BusyComponent"},{"__symbolic":"reference","module":"./busy-backdrop.component","name":"BusyBackdropComponent"}],"providers":[{"__symbolic":"reference","module":"./busy.service","name":"BusyService"},{"provide":{"__symbolic":"reference","module":"@angular/core","name":"Compiler"},"useFactory":{"__symbolic":"reference","name":"createJitCompiler"}}],"exports":[{"__symbolic":"reference","module":"./busy.directive","name":"BusyDirective"}],"entryComponents":[{"__symbolic":"reference","module":"./busy.component","name":"BusyComponent"},{"__symbolic":"reference","module":"./busy-backdrop.component","name":"BusyBackdropComponent"}]}]}],"statics":{"forRoot":{"__symbolic":"function","parameters":["config"],"value":{"ngModule":{"__symbolic":"reference","name":"BusyModule"},"providers":[{"provide":{"__symbolic":"reference","module":"./busy-config","name":"BusyConfig"},"useValue":{"__symbolic":"reference","name":"config"}}]}}}}}}] -------------------------------------------------------------------------------- /build/busy.service.d.ts: -------------------------------------------------------------------------------- 1 | import { BusyConfig } from './busy-config'; 2 | export declare class BusyService { 3 | config: BusyConfig; 4 | constructor(config: BusyConfig); 5 | } 6 | -------------------------------------------------------------------------------- /build/busy.service.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @file Service: Busy 3 | * @author yumao 4 | */ 5 | "use strict"; 6 | Object.defineProperty(exports, "__esModule", { value: true }); 7 | var core_1 = require("@angular/core"); 8 | var busy_config_1 = require("./busy-config"); 9 | var BusyService = (function () { 10 | function BusyService(config) { 11 | this.config = config || new busy_config_1.BusyConfig(); 12 | } 13 | return BusyService; 14 | }()); 15 | BusyService.decorators = [ 16 | { type: core_1.Injectable }, 17 | ]; 18 | /** @nocollapse */ 19 | BusyService.ctorParameters = function () { return [ 20 | { type: busy_config_1.BusyConfig, decorators: [{ type: core_1.Optional },] }, 21 | ]; }; 22 | exports.BusyService = BusyService; 23 | //# sourceMappingURL=busy.service.js.map -------------------------------------------------------------------------------- /build/busy.service.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../src/busy.service.ts"],"names":[],"mappings":"AAAA;;;GAGG;;;AAEH,sCAAmD;AAEnD,6CAAyC;AAGzC;IAGI,qBAAa,MAAkB;QAC3B,IAAI,CAAC,MAAM,GAAG,MAAM,IAAI,IAAI,wBAAU,EAAE,CAAC;IAC7C,CAAC;IAQL,kBAAC;AAAD,CAbA,AAaC;AAPM,sBAAU,GAA0B;IAC3C,EAAE,IAAI,EAAE,iBAAU,EAAE;CACnB,CAAC;AACF,kBAAkB;AACX,0BAAc,GAAmE,cAAM,OAAA;IAC9F,EAAC,IAAI,EAAE,wBAAU,EAAE,UAAU,EAAE,CAAC,EAAE,IAAI,EAAE,eAAQ,EAAE,EAAG,EAAC;CACrD,EAF6F,CAE7F,CAAC;AAZW,kCAAW","file":"busy.service.js","sourceRoot":""} -------------------------------------------------------------------------------- /build/busy.service.metadata.json: -------------------------------------------------------------------------------- 1 | [{"__symbolic":"module","version":3,"metadata":{"BusyService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}}]],"parameters":[{"__symbolic":"reference","module":"./busy-config","name":"BusyConfig"}]}]}}}},{"__symbolic":"module","version":1,"metadata":{"BusyService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}}]],"parameters":[{"__symbolic":"reference","module":"./busy-config","name":"BusyConfig"}]}]}}}}] -------------------------------------------------------------------------------- /build/index.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @file Busy index 3 | * @author yumao 4 | */ 5 | export * from './busy.module'; 6 | export * from './busy.directive'; 7 | export * from './busy.service'; 8 | export * from './busy-config'; 9 | -------------------------------------------------------------------------------- /build/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @file Busy index 3 | * @author yumao 4 | */ 5 | "use strict"; 6 | function __export(m) { 7 | for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; 8 | } 9 | Object.defineProperty(exports, "__esModule", { value: true }); 10 | __export(require("./busy.module")); 11 | __export(require("./busy.directive")); 12 | __export(require("./busy.service")); 13 | __export(require("./busy-config")); 14 | //# sourceMappingURL=index.js.map -------------------------------------------------------------------------------- /build/index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;;;;;;AAEH,mCAA8B;AAC9B,sCAAiC;AACjC,oCAA+B;AAC/B,mCAA8B","file":"index.js","sourceRoot":""} -------------------------------------------------------------------------------- /build/index.metadata.json: -------------------------------------------------------------------------------- 1 | [{"__symbolic":"module","version":3,"metadata":{},"exports":[{"from":"./busy.module"},{"from":"./busy.directive"},{"from":"./busy.service"},{"from":"./busy-config"}]},{"__symbolic":"module","version":1,"metadata":{},"exports":[{"from":"./busy.module"},{"from":"./busy.directive"},{"from":"./busy.service"},{"from":"./busy-config"}]}] -------------------------------------------------------------------------------- /build/promise-tracker.service.d.ts: -------------------------------------------------------------------------------- 1 | import { Subscription } from 'rxjs/Subscription'; 2 | export declare class PromiseTrackerService { 3 | promiseList: Array | Subscription>; 4 | delayPromise: number | any; 5 | durationPromise: number | any; 6 | delayJustFinished: boolean; 7 | minDuration: number; 8 | reset(options: IPromiseTrackerOptions): void; 9 | private addPromise(promise); 10 | private finishPromise(promise); 11 | isActive(): boolean; 12 | } 13 | export interface IPromiseTrackerOptions { 14 | minDuration: number; 15 | delay: number; 16 | promiseList: Promise[]; 17 | } 18 | -------------------------------------------------------------------------------- /build/promise-tracker.service.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @file Service: PromiseTracker 3 | * @author yumao 4 | */ 5 | "use strict"; 6 | Object.defineProperty(exports, "__esModule", { value: true }); 7 | // Inspired by angular-promise-tracker 8 | // Add Observable Subscription 9 | var core_1 = require("@angular/core"); 10 | var Subscription_1 = require("rxjs/Subscription"); 11 | var PromiseTrackerService = (function () { 12 | function PromiseTrackerService() { 13 | this.promiseList = []; 14 | this.delayJustFinished = false; 15 | } 16 | PromiseTrackerService.prototype.reset = function (options) { 17 | var _this = this; 18 | this.minDuration = options.minDuration; 19 | this.promiseList = []; 20 | options.promiseList.forEach(function (promise) { 21 | if (!promise || promise['busyFulfilled']) { 22 | return; 23 | } 24 | _this.addPromise(promise); 25 | }); 26 | if (this.promiseList.length === 0) { 27 | return; 28 | } 29 | this.delayJustFinished = false; 30 | if (options.delay) { 31 | this.delayPromise = setTimeout(function () { 32 | _this.delayPromise = null; 33 | _this.delayJustFinished = true; 34 | }, options.delay); 35 | } 36 | if (options.minDuration) { 37 | this.durationPromise = setTimeout(function () { 38 | _this.durationPromise = null; 39 | }, options.minDuration + (options.delay || 0)); 40 | } 41 | }; 42 | PromiseTrackerService.prototype.addPromise = function (promise) { 43 | var _this = this; 44 | if (this.promiseList.indexOf(promise) !== -1) { 45 | return; 46 | } 47 | this.promiseList.push(promise); 48 | if (promise instanceof Promise) { 49 | promise.then.call(promise, function () { return _this.finishPromise(promise); }, function () { return _this.finishPromise(promise); }); 50 | } 51 | else if (promise instanceof Subscription_1.Subscription) { 52 | promise.add(function () { return _this.finishPromise(promise); }); 53 | } 54 | }; 55 | PromiseTrackerService.prototype.finishPromise = function (promise) { 56 | promise['busyFulfilled'] = true; 57 | var index = this.promiseList.indexOf(promise); 58 | if (index === -1) { 59 | return; 60 | } 61 | this.promiseList.splice(index, 1); 62 | }; 63 | PromiseTrackerService.prototype.isActive = function () { 64 | if (this.delayPromise) { 65 | return false; 66 | } 67 | if (!this.delayJustFinished) { 68 | if (this.durationPromise) { 69 | return true; 70 | } 71 | return this.promiseList.length > 0; 72 | } 73 | this.delayJustFinished = false; 74 | if (this.promiseList.length === 0) { 75 | this.durationPromise = null; 76 | } 77 | return this.promiseList.length > 0; 78 | }; 79 | return PromiseTrackerService; 80 | }()); 81 | PromiseTrackerService.decorators = [ 82 | { type: core_1.Injectable }, 83 | ]; 84 | /** @nocollapse */ 85 | PromiseTrackerService.ctorParameters = function () { return []; }; 86 | exports.PromiseTrackerService = PromiseTrackerService; 87 | //# sourceMappingURL=promise-tracker.service.js.map -------------------------------------------------------------------------------- /build/promise-tracker.service.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../src/promise-tracker.service.ts"],"names":[],"mappings":"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","file":"promise-tracker.service.js","sourceRoot":""} -------------------------------------------------------------------------------- /build/promise-tracker.service.metadata.json: -------------------------------------------------------------------------------- 1 | [{"__symbolic":"module","version":3,"metadata":{"PromiseTrackerService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"reset":[{"__symbolic":"method"}],"addPromise":[{"__symbolic":"method"}],"finishPromise":[{"__symbolic":"method"}],"isActive":[{"__symbolic":"method"}]}},"IPromiseTrackerOptions":{"__symbolic":"interface"}}},{"__symbolic":"module","version":1,"metadata":{"PromiseTrackerService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"reset":[{"__symbolic":"method"}],"addPromise":[{"__symbolic":"method"}],"finishPromise":[{"__symbolic":"method"}],"isActive":[{"__symbolic":"method"}]}},"IPromiseTrackerOptions":{"__symbolic":"interface"}}}] -------------------------------------------------------------------------------- /build/style/busy.css: -------------------------------------------------------------------------------- 1 | .ng-busy { 2 | z-index: 1002; 3 | } 4 | .ng-busy, 5 | .ng-busy > *, 6 | .ng-busy > ng-component > * { 7 | position: absolute; 8 | top: 0px; 9 | left: 0px; 10 | right: 0px; 11 | bottom: 0px; 12 | } 13 | .ng-busy-backdrop { 14 | position: absolute; 15 | top: 0; 16 | left: 0; 17 | right: 0; 18 | bottom: 0; 19 | z-index: 1001; 20 | background: #fff; 21 | opacity: .7; 22 | } 23 | .ng-busy-default-wrapper { 24 | text-align: center; 25 | } 26 | .ng-busy-default-sign { 27 | position: relative; 28 | display: inline-block; 29 | z-index: 1003; 30 | padding: 12px 14px; 31 | border: 1px solid #d8d8d8; 32 | border-top: 0; 33 | border-radius: 4px; 34 | border-top-left-radius: 0; 35 | border-top-right-radius: 0; 36 | box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); 37 | background: #f8f8f8; 38 | color: #333; 39 | } 40 | .ng-busy-default-text { 41 | display: inline-block; 42 | margin-left: 6px; 43 | max-width: 400px; 44 | font-size: 14px; 45 | text-align: left; 46 | } 47 | .ng-busy-default-spinner { 48 | position: relative; 49 | display: inline-block; 50 | width: 25px; 51 | height: 25px; 52 | vertical-align: middle; 53 | } 54 | .ng-busy-default-spinner div { 55 | position: absolute; 56 | left: 44.5%; 57 | top: 37%; 58 | width: 10%; 59 | height: 26%; 60 | background: #666; 61 | border-radius: 50px; 62 | box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); 63 | opacity: 0; 64 | -webkit-animation: busy-spinner-anim 1s linear infinite; 65 | animation: busy-spinner-anim 1s linear infinite; 66 | } 67 | .ng-busy-default-spinner .bar1 { 68 | -webkit-transform: rotate(0deg) translate(0, -142%); 69 | transform: rotate(0deg) translate(0, -142%); 70 | -webkit-animation-delay: -1s; 71 | animation-delay: -1s; 72 | } 73 | .ng-busy-default-spinner .bar2 { 74 | -webkit-transform: rotate(30deg) translate(0, -142%); 75 | transform: rotate(30deg) translate(0, -142%); 76 | -webkit-animation-delay: -0.91666667s; 77 | animation-delay: -0.91666667s; 78 | } 79 | .ng-busy-default-spinner .bar3 { 80 | -webkit-transform: rotate(60deg) translate(0, -142%); 81 | transform: rotate(60deg) translate(0, -142%); 82 | -webkit-animation-delay: -0.83333333s; 83 | animation-delay: -0.83333333s; 84 | } 85 | .ng-busy-default-spinner .bar4 { 86 | -webkit-transform: rotate(90deg) translate(0, -142%); 87 | transform: rotate(90deg) translate(0, -142%); 88 | -webkit-animation-delay: -0.75s; 89 | animation-delay: -0.75s; 90 | } 91 | .ng-busy-default-spinner .bar5 { 92 | -webkit-transform: rotate(120deg) translate(0, -142%); 93 | transform: rotate(120deg) translate(0, -142%); 94 | -webkit-animation-delay: -0.66666667s; 95 | animation-delay: -0.66666667s; 96 | } 97 | .ng-busy-default-spinner .bar6 { 98 | -webkit-transform: rotate(150deg) translate(0, -142%); 99 | transform: rotate(150deg) translate(0, -142%); 100 | -webkit-animation-delay: -0.58333333s; 101 | animation-delay: -0.58333333s; 102 | } 103 | .ng-busy-default-spinner .bar7 { 104 | -webkit-transform: rotate(180deg) translate(0, -142%); 105 | transform: rotate(180deg) translate(0, -142%); 106 | -webkit-animation-delay: -0.5s; 107 | animation-delay: -0.5s; 108 | } 109 | .ng-busy-default-spinner .bar8 { 110 | -webkit-transform: rotate(210deg) translate(0, -142%); 111 | transform: rotate(210deg) translate(0, -142%); 112 | -webkit-animation-delay: -0.41666667s; 113 | animation-delay: -0.41666667s; 114 | } 115 | .ng-busy-default-spinner .bar9 { 116 | -webkit-transform: rotate(240deg) translate(0, -142%); 117 | transform: rotate(240deg) translate(0, -142%); 118 | -webkit-animation-delay: -0.33333333s; 119 | animation-delay: -0.33333333s; 120 | } 121 | .ng-busy-default-spinner .bar10 { 122 | -webkit-transform: rotate(270deg) translate(0, -142%); 123 | transform: rotate(270deg) translate(0, -142%); 124 | -webkit-animation-delay: -0.25s; 125 | animation-delay: -0.25s; 126 | } 127 | .ng-busy-default-spinner .bar11 { 128 | -webkit-transform: rotate(300deg) translate(0, -142%); 129 | transform: rotate(300deg) translate(0, -142%); 130 | -webkit-animation-delay: -0.16666667s; 131 | animation-delay: -0.16666667s; 132 | } 133 | .ng-busy-default-spinner .bar12 { 134 | -webkit-transform: rotate(330deg) translate(0, -142%); 135 | transform: rotate(330deg) translate(0, -142%); 136 | -webkit-animation-delay: -0.08333333s; 137 | animation-delay: -0.08333333s; 138 | } 139 | @-webkit-keyframes busy-spinner-anim { 140 | from { 141 | opacity: 1; 142 | } 143 | to { 144 | opacity: 0.25; 145 | } 146 | } 147 | @keyframes busy-spinner-anim { 148 | from { 149 | opacity: 1; 150 | } 151 | to { 152 | opacity: 0.25; 153 | } 154 | } 155 | -------------------------------------------------------------------------------- /build/util.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @file Util 3 | * @author yumao 4 | */ 5 | export declare function isDate(value: any): boolean; 6 | export declare function isRegExp(value: any): boolean; 7 | export declare function isWindow(obj: any): boolean; 8 | export declare function isFunction(value: any): boolean; 9 | export declare function isDefined(value: any): boolean; 10 | export declare function equals(o1: any, o2: any): any; 11 | -------------------------------------------------------------------------------- /build/util.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @file Util 3 | * @author yumao 4 | */ 5 | "use strict"; 6 | Object.defineProperty(exports, "__esModule", { value: true }); 7 | // from AngularJS 8 | function isDate(value) { 9 | return Object.prototype.toString.call(value) === '[object Date]'; 10 | } 11 | exports.isDate = isDate; 12 | function isRegExp(value) { 13 | return Object.prototype.toString.call(value) === '[object RegExp]'; 14 | } 15 | exports.isRegExp = isRegExp; 16 | function isWindow(obj) { 17 | return obj && obj.window === obj; 18 | } 19 | exports.isWindow = isWindow; 20 | function isFunction(value) { 21 | return typeof value === 'function'; 22 | } 23 | exports.isFunction = isFunction; 24 | function isDefined(value) { 25 | return typeof value !== 'undefined'; 26 | } 27 | exports.isDefined = isDefined; 28 | function equals(o1, o2) { 29 | if (o1 === o2) { 30 | return true; 31 | } 32 | ; 33 | if (o1 === null || o2 === null) { 34 | return false; 35 | } 36 | if (o1 !== o1 && o2 !== o2) { 37 | return true; // NaN === NaN 38 | } 39 | var t1 = typeof o1; 40 | var t2 = typeof o2; 41 | var length; 42 | var key; 43 | var keySet; 44 | if (t1 === t2 && t1 === 'object') { 45 | if (Array.isArray(o1)) { 46 | if (!Array.isArray(o2)) { 47 | return false; 48 | } 49 | if ((length = o1.length) === o2.length) { 50 | for (key = 0; key < length; key++) { 51 | if (!equals(o1[key], o2[key])) { 52 | return false; 53 | } 54 | } 55 | return true; 56 | } 57 | } 58 | else if (isDate(o1)) { 59 | if (!isDate(o2)) { 60 | return false; 61 | } 62 | return equals(o1.getTime(), o2.getTime()); 63 | } 64 | else if (isRegExp(o1)) { 65 | if (!isRegExp(o2)) { 66 | return false; 67 | } 68 | return o1.toString() === o2.toString(); 69 | } 70 | else { 71 | if (isWindow(o1) || isWindow(o2) 72 | || Array.isArray(o2) || isDate(o2) || isRegExp(o2)) { 73 | return false; 74 | } 75 | ; 76 | keySet = Object.create(null); 77 | for (key in o1) { 78 | if (key.charAt(0) === '$' || isFunction(o1[key])) { 79 | continue; 80 | } 81 | ; 82 | if (!equals(o1[key], o2[key])) { 83 | return false; 84 | } 85 | keySet[key] = true; 86 | } 87 | for (key in o2) { 88 | if (!(key in keySet) 89 | && key.charAt(0) !== '$' 90 | && isDefined(o2[key]) 91 | && !isFunction(o2[key])) { 92 | return false; 93 | } 94 | } 95 | return true; 96 | } 97 | } 98 | return false; 99 | } 100 | exports.equals = equals; 101 | //# sourceMappingURL=util.js.map -------------------------------------------------------------------------------- /build/util.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../src/util.ts"],"names":[],"mappings":"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","file":"util.js","sourceRoot":""} -------------------------------------------------------------------------------- /build/util.metadata.json: -------------------------------------------------------------------------------- 1 | [{"__symbolic":"module","version":3,"metadata":{"isDate":{"__symbolic":"function","parameters":["value"],"value":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"select","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"Object"},"member":"prototype"},"member":"toString"},"member":"call"},"arguments":[{"__symbolic":"reference","name":"value"}]},"right":"[object Date]"}},"isRegExp":{"__symbolic":"function","parameters":["value"],"value":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"select","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"Object"},"member":"prototype"},"member":"toString"},"member":"call"},"arguments":[{"__symbolic":"reference","name":"value"}]},"right":"[object RegExp]"}},"isWindow":{"__symbolic":"function","parameters":["obj"],"value":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"reference","name":"obj"},"right":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"obj"},"member":"window"},"right":{"__symbolic":"reference","name":"obj"}}}},"isFunction":{"__symbolic":"function","parameters":["value"],"value":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"error","message":"Expression form not supported","line":20,"character":11},"right":"function"}},"isDefined":{"__symbolic":"function","parameters":["value"],"value":{"__symbolic":"binop","operator":"!==","left":{"__symbolic":"error","message":"Expression form not supported","line":24,"character":11},"right":"undefined"}},"equals":{"__symbolic":"function"}}},{"__symbolic":"module","version":1,"metadata":{"isDate":{"__symbolic":"function","parameters":["value"],"value":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"select","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"Object"},"member":"prototype"},"member":"toString"},"member":"call"},"arguments":[{"__symbolic":"reference","name":"value"}]},"right":"[object Date]"}},"isRegExp":{"__symbolic":"function","parameters":["value"],"value":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"select","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"Object"},"member":"prototype"},"member":"toString"},"member":"call"},"arguments":[{"__symbolic":"reference","name":"value"}]},"right":"[object RegExp]"}},"isWindow":{"__symbolic":"function","parameters":["obj"],"value":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"reference","name":"obj"},"right":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"obj"},"member":"window"},"right":{"__symbolic":"reference","name":"obj"}}}},"isFunction":{"__symbolic":"function","parameters":["value"],"value":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"error","message":"Expression form not supported","line":20,"character":11},"right":"function"}},"isDefined":{"__symbolic":"function","parameters":["value"],"value":{"__symbolic":"binop","operator":"!==","left":{"__symbolic":"error","message":"Expression form not supported","line":24,"character":11},"right":"undefined"}},"equals":{"__symbolic":"function"}}}] -------------------------------------------------------------------------------- /config/helper.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | 3 | var _root = path.resolve(__dirname, '..'); 4 | 5 | function root(args) { 6 | args = Array.prototype.slice.call(arguments, 0); 7 | return path.join.apply(path, [_root].concat(args)); 8 | } 9 | 10 | module.exports = { 11 | root: root 12 | }; 13 | -------------------------------------------------------------------------------- /config/webpack.busy.js: -------------------------------------------------------------------------------- 1 | var ExtractTextPlugin = require('extract-text-webpack-plugin'); 2 | var autoprefixer = require('autoprefixer'); 3 | 4 | var helper = require('./helper'); 5 | 6 | module.exports = { 7 | debug: false, 8 | 9 | context: helper.root('src'), 10 | 11 | entry: { 12 | 'busy': 'style' 13 | }, 14 | 15 | output: { 16 | path: helper.root('build'), 17 | filename: '[name].js' 18 | }, 19 | 20 | resolve: { 21 | extensions: ['', '.js'], 22 | root: helper.root('src') 23 | }, 24 | 25 | module: { 26 | loaders: [ 27 | { 28 | test: /\.css$/, 29 | loader: 'raw' 30 | }, 31 | { 32 | test: /\.less$/, 33 | loader: ExtractTextPlugin.extract('raw!postcss!less') 34 | } 35 | ] 36 | }, 37 | 38 | postcss: [ 39 | autoprefixer() 40 | ], 41 | 42 | plugins: [ 43 | new ExtractTextPlugin('style/[name].css') 44 | ] 45 | }; 46 | -------------------------------------------------------------------------------- /config/webpack.demo.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack'); 2 | var ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin; 3 | var HtmlWebpackPlugin = require('html-webpack-plugin'); 4 | var CopyWebpackPlugin = require('copy-webpack-plugin'); 5 | var DedupePlugin = webpack.optimize.DedupePlugin; 6 | var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin; 7 | var CompressionPlugin = require('compression-webpack-plugin'); 8 | var autoprefixer = require('autoprefixer'); 9 | 10 | var helper = require('./helper'); 11 | 12 | module.exports = { 13 | debug: true, 14 | 15 | context: helper.root('demo'), 16 | 17 | entry: { 18 | 'vendor': 'vendor.ts', 19 | 'main': 'main.ts' 20 | }, 21 | 22 | output: { 23 | path: helper.root('demo/asset'), 24 | filename: 'js/[name].js' 25 | }, 26 | 27 | resolve: { 28 | extensions: ['', '.ts', '.js'], 29 | root: helper.root('demo'), 30 | modulesDirectories: ['node_modules'] 31 | }, 32 | 33 | module: { 34 | loaders: [ 35 | { 36 | test: /\.ts$/, 37 | loader: 'awesome-typescript', 38 | exclude: [/\.(spec|e2e)\.ts$/] 39 | }, 40 | { 41 | test: /\.css$/, 42 | loader: 'raw' 43 | }, 44 | { 45 | test: /\.less$/, 46 | loader: 'raw!postcss!less' 47 | }, 48 | { 49 | test: /\.html$/, 50 | loader: 'raw' 51 | } 52 | ] 53 | }, 54 | 55 | postcss: [ 56 | autoprefixer() 57 | ], 58 | 59 | plugins: [ 60 | new ForkCheckerPlugin(), 61 | 62 | new webpack.optimize.CommonsChunkPlugin({ 63 | name: ['main', 'vendor'] 64 | }), 65 | 66 | new HtmlWebpackPlugin({ 67 | template: 'index.html', 68 | inject: 'body', 69 | chunks: ['vendor', 'main'] 70 | }), 71 | 72 | new CopyWebpackPlugin([ 73 | { 74 | from: helper.root('node_modules/bootstrap/dist/css/bootstrap.min.css'), 75 | to: 'css/' 76 | }, 77 | { 78 | from: helper.root('build/style/busy.css'), 79 | to: 'css/' 80 | } 81 | ]), 82 | 83 | // prod 84 | 85 | // new DedupePlugin(), 86 | 87 | // new UglifyJsPlugin({ 88 | // beautify: false, 89 | // mangle: { 90 | // screw_ie8 : true, 91 | // keep_fnames: true 92 | // }, 93 | // compress: { 94 | // screw_ie8: true 95 | // }, 96 | // comments: false 97 | // }), 98 | 99 | // new CompressionPlugin({ 100 | // regExp: /\.css$|\.html$|\.js$|\.map$/, 101 | // threshold: 2 * 1024 102 | // }) 103 | ], 104 | 105 | devServer: { 106 | port: 8999, 107 | host: 'localhost', 108 | historyApiFallback: true, 109 | watchOptions: { 110 | aggregateTimeout: 300 111 | }, 112 | outputPath: helper.root('demo/asset') 113 | } 114 | }; 115 | -------------------------------------------------------------------------------- /config/webpack.test.js: -------------------------------------------------------------------------------- 1 | var ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin; 2 | 3 | var helper = require('./helper'); 4 | 5 | module.exports = { 6 | debug: true, 7 | 8 | context: helper.root('test'), 9 | 10 | entry: { 11 | 'busy.spec': 'busy.spec.ts' 12 | }, 13 | 14 | output: { 15 | path: helper.root('test'), 16 | filename: '[name].js' 17 | }, 18 | 19 | resolve: { 20 | extensions: ['', '.ts', '.js'], 21 | root: helper.root('test'), 22 | modulesDirectories: ['node_modules'] 23 | }, 24 | 25 | module: { 26 | loaders: [ 27 | { 28 | test: /\.ts$/, 29 | loader: 'awesome-typescript' 30 | } 31 | ] 32 | }, 33 | 34 | plugins: [ 35 | new ForkCheckerPlugin() 36 | ] 37 | }; 38 | -------------------------------------------------------------------------------- /demo/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 |
6 |
7 | 8 |
9 |
10 | 11 |
12 |
13 |
14 | -------------------------------------------------------------------------------- /demo/app/app.component.less: -------------------------------------------------------------------------------- 1 | /** 2 | * @file App style 3 | * @author yumao 4 | */ 5 | 6 | @import "~style/variable.less"; 7 | 8 | .form-control { 9 | &:focus { 10 | border-color: @theme-color-light; 11 | } 12 | } 13 | 14 | .c-input { 15 | > input { 16 | &:checked { 17 | ~ .c-indicator { 18 | background-color: @theme-color; 19 | } 20 | } 21 | 22 | &:focus { 23 | ~ .c-indicator { 24 | box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem @theme-color; 25 | } 26 | } 27 | 28 | &:active { 29 | ~ .c-indicator { 30 | background-color: @theme-color-light; 31 | } 32 | } 33 | } 34 | } 35 | 36 | .btn { 37 | &:focus { 38 | &, 39 | &:active { 40 | outline: 0; 41 | } 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /demo/app/app.component.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @file Component: App 3 | * @author yumao 4 | */ 5 | 6 | import {Component, ViewEncapsulation} from '@angular/core'; 7 | import {Http} from '@angular/http'; 8 | 9 | @Component({ 10 | selector: 'app', 11 | encapsulation: ViewEncapsulation.None, 12 | template: require('./app.component.html'), 13 | styles: [require('./app.component.less')] 14 | }) 15 | export class AppComponent { 16 | } 17 | -------------------------------------------------------------------------------- /demo/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import {NgModule} from '@angular/core'; 2 | import {BrowserModule} from '@angular/platform-browser'; 3 | import {HttpModule} from '@angular/http'; 4 | import {FormsModule} from '@angular/forms'; 5 | import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; 6 | 7 | import {BusyModule, BusyConfig} from '../..'; 8 | // import {BusyModule, BusyConfig} from 'angular2-busy'; 9 | import {AppComponent} from './app.component'; 10 | import {GithubCornerComponent} from './github-corner'; 11 | import {HeaderComponent} from './header'; 12 | import {OptionsComponent} from './options'; 13 | import {TableComponent} from './table'; 14 | 15 | @NgModule({ 16 | imports: [ 17 | BrowserModule, 18 | FormsModule, 19 | HttpModule, 20 | BusyModule, 21 | BrowserAnimationsModule 22 | // BusyModule.forRoot(new BusyConfig({ 23 | // message: 'test', 24 | // backdrop: false 25 | // })) 26 | ], 27 | declarations: [ 28 | AppComponent, 29 | GithubCornerComponent, 30 | HeaderComponent, 31 | OptionsComponent, 32 | TableComponent 33 | ], 34 | bootstrap: [AppComponent] 35 | }) 36 | export class AppModule {} 37 | -------------------------------------------------------------------------------- /demo/app/github-corner/github-corner.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /demo/app/github-corner/github-corner.component.less: -------------------------------------------------------------------------------- 1 | /** 2 | * @file GithubCorner style 3 | * @author yumao 4 | */ 5 | 6 | @import "~style/variable.less"; 7 | 8 | @octo-arm-animation: octocat-wave 560ms ease-in-out; 9 | 10 | .github-corner { 11 | svg { 12 | position: absolute; 13 | top: 0; 14 | border: 0; 15 | right: 0; 16 | fill: #fff; 17 | color: @theme-color; 18 | } 19 | 20 | .octo-arm { 21 | transform-origin: 130px 106px; 22 | } 23 | 24 | &:hover { 25 | .octo-arm { 26 | animation: @octo-arm-animation; 27 | } 28 | } 29 | } 30 | 31 | @media(max-width: 500px) { 32 | .github-corner { 33 | .octo-arm { 34 | animation: @octo-arm-animation; 35 | } 36 | 37 | &:hover { 38 | .octo-arm { 39 | animation: none; 40 | } 41 | } 42 | } 43 | } 44 | 45 | @keyframes octocat-wave { 46 | 0%, 100% { 47 | transform: rotate(0); 48 | } 49 | 20%, 60% { 50 | transform: rotate(-25deg); 51 | } 52 | 40%, 80% { 53 | transform: rotate(10deg); 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /demo/app/github-corner/github-corner.component.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @file Component: GithubCorner 3 | * @author yumao 4 | */ 5 | 6 | import {Component} from '@angular/core'; 7 | 8 | @Component({ 9 | selector: 'github-corner', 10 | template: require('./github-corner.component.html'), 11 | styles: [require('./github-corner.component.less')] 12 | }) 13 | export class GithubCornerComponent { 14 | } 15 | -------------------------------------------------------------------------------- /demo/app/github-corner/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @file GithubCorner index 3 | * @author yumao 4 | */ 5 | 6 | export * from './github-corner.component'; 7 | -------------------------------------------------------------------------------- /demo/app/header/header.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Angular 2 Busy

4 |

Show busy/loading indicators on any promise, or on any Observable's subscription.

5 |
6 |
7 | -------------------------------------------------------------------------------- /demo/app/header/header.component.less: -------------------------------------------------------------------------------- 1 | /** 2 | * @file Header style 3 | * @author yumao 4 | */ 5 | 6 | @import "~style/variable.less"; 7 | 8 | header { 9 | padding: 3rem .9375rem; 10 | margin-bottom: 3rem; 11 | background: @theme-color; 12 | color: lighten(@theme-color, 36%); 13 | 14 | h1 { 15 | color: #fff; 16 | font-size: 3rem; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /demo/app/header/header.component.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @file Component: Header 3 | * @author yumao 4 | */ 5 | 6 | import {Component} from '@angular/core'; 7 | 8 | @Component({ 9 | selector: 'demo-header', 10 | template: require('./header.component.html'), 11 | styles: [require('./header.component.less')] 12 | }) 13 | export class HeaderComponent { 14 | } 15 | -------------------------------------------------------------------------------- /demo/app/header/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @file Header index 3 | * @author yumao 4 | */ 5 | 6 | export * from './header.component'; 7 | -------------------------------------------------------------------------------- /demo/app/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @file App index 3 | * @author yumao 4 | */ 5 | 6 | export * from './app.component'; 7 | -------------------------------------------------------------------------------- /demo/app/options/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @file Options index 3 | * @author yumao 4 | */ 5 | 6 | export * from './options.component'; 7 | -------------------------------------------------------------------------------- /demo/app/options/options-template.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @file Options Template 3 | * @author yumao 4 | */ 5 | 6 | import {BUSY_CONFIG_DEFAULTS} from '../../..'; 7 | 8 | export const OPTIONS_TEMPLATE: Object = { 9 | default: BUSY_CONFIG_DEFAULTS.template, 10 | custom: ` 11 |
12 |
13 | {{message}} 14 |
15 |
16 | ` 17 | }; 18 | -------------------------------------------------------------------------------- /demo/app/options/options.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 | 6 |
7 |
8 |
9 | 10 |
11 | 12 |
13 |
14 |
15 | 16 |
17 | 18 |
19 |
20 |
21 | 22 |
23 | 27 |
28 |
29 |
30 | 31 |
32 | 37 |
38 |
39 |
40 | 41 |
42 |
43 | -------------------------------------------------------------------------------- /demo/app/options/options.component.less: -------------------------------------------------------------------------------- 1 | /** 2 | * @file Options style 3 | * @author yumao 4 | */ 5 | 6 | @import "~style/variable.less"; 7 | 8 | .c-checkbox { 9 | line-height: 36px; 10 | } 11 | -------------------------------------------------------------------------------- /demo/app/options/options.component.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @file Component: Options 3 | * @author yumao 4 | */ 5 | 6 | import {Component, Input} from '@angular/core'; 7 | import {Http} from '@angular/http'; 8 | 9 | import {BUSY_CONFIG_DEFAULTS, IBusyConfig} from '../../..'; 10 | // import {BUSY_CONFIG_DEFAULTS, IBusyConfig} from 'angular2-busy'; 11 | import {OPTIONS_TEMPLATE} from './options-template'; 12 | 13 | @Component({ 14 | selector: 'demo-options', 15 | template: require('./options.component.html'), 16 | styles: [require('./options.component.less')] 17 | }) 18 | export class OptionsComponent { 19 | templateType: string = 'default'; 20 | data: IBusyConfig = Object.assign({}, BUSY_CONFIG_DEFAULTS); 21 | 22 | constructor(private http: Http) { 23 | } 24 | 25 | changeTemplate(type: string) { 26 | this.data.template = OPTIONS_TEMPLATE[type]; 27 | } 28 | 29 | playDemo() { 30 | // this.data.busy = this.http.get('https://httpbin.org/delay/3') 31 | // .subscribe(); 32 | 33 | this.data.busy = this.http.get('https://httpbin.org/delay/1') 34 | .toPromise(); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /demo/app/table/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @file Table index 3 | * @author yumao 4 | */ 5 | 6 | export * from './table.component'; 7 | -------------------------------------------------------------------------------- /demo/app/table/table.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 |
#NameSpeciesOccupation
1Arthur DentHumanRadio Employee
2Ford PrefectBetelgeusianResearcher
3MarvinRobotServant
31 | -------------------------------------------------------------------------------- /demo/app/table/table.component.less: -------------------------------------------------------------------------------- 1 | /** 2 | * @file Table style 3 | * @author yumao 4 | */ 5 | 6 | .table { 7 | position: relative; 8 | } 9 | -------------------------------------------------------------------------------- /demo/app/table/table.component.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @file Component: Table 3 | * @author yumao 4 | */ 5 | 6 | import {Component, Input} from '@angular/core'; 7 | 8 | import {IBusyConfig} from '../../..'; 9 | // import {IBusyConfig} from 'angular2-busy'; 10 | 11 | @Component({ 12 | selector: 'demo-table', 13 | template: require('./table.component.html'), 14 | styles: [require('./table.component.less')] 15 | }) 16 | export class TableComponent { 17 | @Input() loading: IBusyConfig; 18 | } 19 | -------------------------------------------------------------------------------- /demo/asset/css/busy.css: -------------------------------------------------------------------------------- 1 | .ng-busy { 2 | z-index: 1002; 3 | } 4 | .ng-busy, 5 | .ng-busy > *, 6 | .ng-busy > ng-component > * { 7 | position: absolute; 8 | top: 0px; 9 | left: 0px; 10 | right: 0px; 11 | bottom: 0px; 12 | } 13 | .ng-busy-backdrop { 14 | position: absolute; 15 | top: 0; 16 | left: 0; 17 | right: 0; 18 | bottom: 0; 19 | z-index: 1001; 20 | background: #fff; 21 | opacity: .7; 22 | } 23 | .ng-busy-default-wrapper { 24 | text-align: center; 25 | } 26 | .ng-busy-default-sign { 27 | position: relative; 28 | display: inline-block; 29 | z-index: 1003; 30 | padding: 12px 14px; 31 | border: 1px solid #d8d8d8; 32 | border-top: 0; 33 | border-radius: 4px; 34 | border-top-left-radius: 0; 35 | border-top-right-radius: 0; 36 | box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); 37 | background: #f8f8f8; 38 | color: #333; 39 | } 40 | .ng-busy-default-text { 41 | display: inline-block; 42 | margin-left: 6px; 43 | max-width: 400px; 44 | font-size: 14px; 45 | text-align: left; 46 | } 47 | .ng-busy-default-spinner { 48 | position: relative; 49 | display: inline-block; 50 | width: 25px; 51 | height: 25px; 52 | vertical-align: middle; 53 | } 54 | .ng-busy-default-spinner div { 55 | position: absolute; 56 | left: 44.5%; 57 | top: 37%; 58 | width: 10%; 59 | height: 26%; 60 | background: #666; 61 | border-radius: 50px; 62 | box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); 63 | opacity: 0; 64 | -webkit-animation: busy-spinner-anim 1s linear infinite; 65 | animation: busy-spinner-anim 1s linear infinite; 66 | } 67 | .ng-busy-default-spinner .bar1 { 68 | -webkit-transform: rotate(0deg) translate(0, -142%); 69 | transform: rotate(0deg) translate(0, -142%); 70 | -webkit-animation-delay: -1s; 71 | animation-delay: -1s; 72 | } 73 | .ng-busy-default-spinner .bar2 { 74 | -webkit-transform: rotate(30deg) translate(0, -142%); 75 | transform: rotate(30deg) translate(0, -142%); 76 | -webkit-animation-delay: -0.91666667s; 77 | animation-delay: -0.91666667s; 78 | } 79 | .ng-busy-default-spinner .bar3 { 80 | -webkit-transform: rotate(60deg) translate(0, -142%); 81 | transform: rotate(60deg) translate(0, -142%); 82 | -webkit-animation-delay: -0.83333333s; 83 | animation-delay: -0.83333333s; 84 | } 85 | .ng-busy-default-spinner .bar4 { 86 | -webkit-transform: rotate(90deg) translate(0, -142%); 87 | transform: rotate(90deg) translate(0, -142%); 88 | -webkit-animation-delay: -0.75s; 89 | animation-delay: -0.75s; 90 | } 91 | .ng-busy-default-spinner .bar5 { 92 | -webkit-transform: rotate(120deg) translate(0, -142%); 93 | transform: rotate(120deg) translate(0, -142%); 94 | -webkit-animation-delay: -0.66666667s; 95 | animation-delay: -0.66666667s; 96 | } 97 | .ng-busy-default-spinner .bar6 { 98 | -webkit-transform: rotate(150deg) translate(0, -142%); 99 | transform: rotate(150deg) translate(0, -142%); 100 | -webkit-animation-delay: -0.58333333s; 101 | animation-delay: -0.58333333s; 102 | } 103 | .ng-busy-default-spinner .bar7 { 104 | -webkit-transform: rotate(180deg) translate(0, -142%); 105 | transform: rotate(180deg) translate(0, -142%); 106 | -webkit-animation-delay: -0.5s; 107 | animation-delay: -0.5s; 108 | } 109 | .ng-busy-default-spinner .bar8 { 110 | -webkit-transform: rotate(210deg) translate(0, -142%); 111 | transform: rotate(210deg) translate(0, -142%); 112 | -webkit-animation-delay: -0.41666667s; 113 | animation-delay: -0.41666667s; 114 | } 115 | .ng-busy-default-spinner .bar9 { 116 | -webkit-transform: rotate(240deg) translate(0, -142%); 117 | transform: rotate(240deg) translate(0, -142%); 118 | -webkit-animation-delay: -0.33333333s; 119 | animation-delay: -0.33333333s; 120 | } 121 | .ng-busy-default-spinner .bar10 { 122 | -webkit-transform: rotate(270deg) translate(0, -142%); 123 | transform: rotate(270deg) translate(0, -142%); 124 | -webkit-animation-delay: -0.25s; 125 | animation-delay: -0.25s; 126 | } 127 | .ng-busy-default-spinner .bar11 { 128 | -webkit-transform: rotate(300deg) translate(0, -142%); 129 | transform: rotate(300deg) translate(0, -142%); 130 | -webkit-animation-delay: -0.16666667s; 131 | animation-delay: -0.16666667s; 132 | } 133 | .ng-busy-default-spinner .bar12 { 134 | -webkit-transform: rotate(330deg) translate(0, -142%); 135 | transform: rotate(330deg) translate(0, -142%); 136 | -webkit-animation-delay: -0.08333333s; 137 | animation-delay: -0.08333333s; 138 | } 139 | @-webkit-keyframes busy-spinner-anim { 140 | from { 141 | opacity: 1; 142 | } 143 | to { 144 | opacity: 0.25; 145 | } 146 | } 147 | @keyframes busy-spinner-anim { 148 | from { 149 | opacity: 1; 150 | } 151 | to { 152 | opacity: 0.25; 153 | } 154 | } 155 | -------------------------------------------------------------------------------- /demo/asset/img/du.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devyumao/angular2-busy/707d8c74c6a58191370374d82ad99a52cec3e611/demo/asset/img/du.gif -------------------------------------------------------------------------------- /demo/asset/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Angular 2 Busy Demo 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Loading...
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /demo/asset/js/main.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([0],[ 2 | /* 0 */ 3 | /***/ function(module, exports, __webpack_require__) { 4 | 5 | /** 6 | * @file main 7 | * @author yumao 8 | */ 9 | "use strict"; 10 | Object.defineProperty(exports, "__esModule", { value: true }); 11 | var platform_browser_dynamic_1 = __webpack_require__(2); 12 | var core_1 = __webpack_require__(4); 13 | var app_module_1 = __webpack_require__(39); 14 | core_1.enableProdMode(); 15 | platform_browser_dynamic_1.platformBrowserDynamic().bootstrapModule(app_module_1.AppModule); 16 | 17 | 18 | /***/ }, 19 | /* 1 */, 20 | /* 2 */, 21 | /* 3 */, 22 | /* 4 */, 23 | /* 5 */, 24 | /* 6 */, 25 | /* 7 */, 26 | /* 8 */, 27 | /* 9 */, 28 | /* 10 */, 29 | /* 11 */, 30 | /* 12 */, 31 | /* 13 */, 32 | /* 14 */, 33 | /* 15 */, 34 | /* 16 */, 35 | /* 17 */, 36 | /* 18 */, 37 | /* 19 */, 38 | /* 20 */, 39 | /* 21 */, 40 | /* 22 */, 41 | /* 23 */, 42 | /* 24 */, 43 | /* 25 */, 44 | /* 26 */, 45 | /* 27 */, 46 | /* 28 */, 47 | /* 29 */, 48 | /* 30 */, 49 | /* 31 */, 50 | /* 32 */, 51 | /* 33 */, 52 | /* 34 */, 53 | /* 35 */, 54 | /* 36 */, 55 | /* 37 */, 56 | /* 38 */, 57 | /* 39 */ 58 | /***/ function(module, exports, __webpack_require__) { 59 | 60 | "use strict"; 61 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { 62 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; 63 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); 64 | 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; 65 | return c > 3 && r && Object.defineProperty(target, key, r), r; 66 | }; 67 | Object.defineProperty(exports, "__esModule", { value: true }); 68 | var core_1 = __webpack_require__(4); 69 | var platform_browser_1 = __webpack_require__(38); 70 | var http_1 = __webpack_require__(40); 71 | var forms_1 = __webpack_require__(41); 72 | var animations_1 = __webpack_require__(47); 73 | var __1 = __webpack_require__(50); 74 | // import {BusyModule, BusyConfig} from 'angular2-busy'; 75 | var app_component_1 = __webpack_require__(60); 76 | var github_corner_1 = __webpack_require__(63); 77 | var header_1 = __webpack_require__(67); 78 | var options_1 = __webpack_require__(71); 79 | var table_1 = __webpack_require__(76); 80 | var AppModule = (function () { 81 | function AppModule() { 82 | } 83 | return AppModule; 84 | }()); 85 | AppModule = __decorate([ 86 | core_1.NgModule({ 87 | imports: [ 88 | platform_browser_1.BrowserModule, 89 | forms_1.FormsModule, 90 | http_1.HttpModule, 91 | __1.BusyModule, 92 | animations_1.BrowserAnimationsModule 93 | // BusyModule.forRoot(new BusyConfig({ 94 | // message: 'test', 95 | // backdrop: false 96 | // })) 97 | ], 98 | declarations: [ 99 | app_component_1.AppComponent, 100 | github_corner_1.GithubCornerComponent, 101 | header_1.HeaderComponent, 102 | options_1.OptionsComponent, 103 | table_1.TableComponent 104 | ], 105 | bootstrap: [app_component_1.AppComponent] 106 | }) 107 | ], AppModule); 108 | exports.AppModule = AppModule; 109 | 110 | 111 | /***/ }, 112 | /* 40 */, 113 | /* 41 */, 114 | /* 42 */, 115 | /* 43 */, 116 | /* 44 */, 117 | /* 45 */, 118 | /* 46 */, 119 | /* 47 */, 120 | /* 48 */, 121 | /* 49 */, 122 | /* 50 */, 123 | /* 51 */, 124 | /* 52 */, 125 | /* 53 */, 126 | /* 54 */, 127 | /* 55 */, 128 | /* 56 */, 129 | /* 57 */, 130 | /* 58 */, 131 | /* 59 */, 132 | /* 60 */ 133 | /***/ function(module, exports, __webpack_require__) { 134 | 135 | /** 136 | * @file Component: App 137 | * @author yumao 138 | */ 139 | "use strict"; 140 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { 141 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; 142 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); 143 | 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; 144 | return c > 3 && r && Object.defineProperty(target, key, r), r; 145 | }; 146 | Object.defineProperty(exports, "__esModule", { value: true }); 147 | var core_1 = __webpack_require__(4); 148 | var AppComponent = (function () { 149 | function AppComponent() { 150 | } 151 | return AppComponent; 152 | }()); 153 | AppComponent = __decorate([ 154 | core_1.Component({ 155 | selector: 'app', 156 | encapsulation: core_1.ViewEncapsulation.None, 157 | template: __webpack_require__(61), 158 | styles: [__webpack_require__(62)] 159 | }) 160 | ], AppComponent); 161 | exports.AppComponent = AppComponent; 162 | 163 | 164 | /***/ }, 165 | /* 61 */ 166 | /***/ function(module, exports) { 167 | 168 | module.exports = "\n\n\n
\n
\n
\n \n
\n
\n \n
\n
\n
\n" 169 | 170 | /***/ }, 171 | /* 62 */ 172 | /***/ function(module, exports) { 173 | 174 | module.exports = "/**\n * @file App style\n * @author yumao\n */\n.form-control:focus {\n border-color: #e86c8c;\n}\n.c-input > input:checked ~ .c-indicator {\n background-color: #b03a58;\n}\n.c-input > input:focus ~ .c-indicator {\n box-shadow: 0 0 0 0.075rem #fff, 0 0 0 0.2rem #b03a58;\n}\n.c-input > input:active ~ .c-indicator {\n background-color: #e86c8c;\n}\n.btn:focus,\n.btn:focus:active {\n outline: 0;\n}\n" 175 | 176 | /***/ }, 177 | /* 63 */ 178 | /***/ function(module, exports, __webpack_require__) { 179 | 180 | /** 181 | * @file GithubCorner index 182 | * @author yumao 183 | */ 184 | "use strict"; 185 | function __export(m) { 186 | for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; 187 | } 188 | Object.defineProperty(exports, "__esModule", { value: true }); 189 | __export(__webpack_require__(64)); 190 | 191 | 192 | /***/ }, 193 | /* 64 */ 194 | /***/ function(module, exports, __webpack_require__) { 195 | 196 | /** 197 | * @file Component: GithubCorner 198 | * @author yumao 199 | */ 200 | "use strict"; 201 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { 202 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; 203 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); 204 | 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; 205 | return c > 3 && r && Object.defineProperty(target, key, r), r; 206 | }; 207 | Object.defineProperty(exports, "__esModule", { value: true }); 208 | var core_1 = __webpack_require__(4); 209 | var GithubCornerComponent = (function () { 210 | function GithubCornerComponent() { 211 | } 212 | return GithubCornerComponent; 213 | }()); 214 | GithubCornerComponent = __decorate([ 215 | core_1.Component({ 216 | selector: 'github-corner', 217 | template: __webpack_require__(65), 218 | styles: [__webpack_require__(66)] 219 | }) 220 | ], GithubCornerComponent); 221 | exports.GithubCornerComponent = GithubCornerComponent; 222 | 223 | 224 | /***/ }, 225 | /* 65 */ 226 | /***/ function(module, exports) { 227 | 228 | module.exports = "\n\n \n \n \n \n \n\n" 229 | 230 | /***/ }, 231 | /* 66 */ 232 | /***/ function(module, exports) { 233 | 234 | module.exports = "/**\n * @file GithubCorner style\n * @author yumao\n */\n.github-corner svg {\n position: absolute;\n top: 0;\n border: 0;\n right: 0;\n fill: #fff;\n color: #b03a58;\n}\n.github-corner .octo-arm {\n -webkit-transform-origin: 130px 106px;\n transform-origin: 130px 106px;\n}\n.github-corner:hover .octo-arm {\n -webkit-animation: octocat-wave 560ms ease-in-out;\n animation: octocat-wave 560ms ease-in-out;\n}\n@media (max-width: 500px) {\n .github-corner .octo-arm {\n -webkit-animation: octocat-wave 560ms ease-in-out;\n animation: octocat-wave 560ms ease-in-out;\n }\n .github-corner:hover .octo-arm {\n -webkit-animation: none;\n animation: none;\n }\n}\n@-webkit-keyframes octocat-wave {\n 0%,\n 100% {\n -webkit-transform: rotate(0);\n transform: rotate(0);\n }\n 20%,\n 60% {\n -webkit-transform: rotate(-25deg);\n transform: rotate(-25deg);\n }\n 40%,\n 80% {\n -webkit-transform: rotate(10deg);\n transform: rotate(10deg);\n }\n}\n@keyframes octocat-wave {\n 0%,\n 100% {\n -webkit-transform: rotate(0);\n transform: rotate(0);\n }\n 20%,\n 60% {\n -webkit-transform: rotate(-25deg);\n transform: rotate(-25deg);\n }\n 40%,\n 80% {\n -webkit-transform: rotate(10deg);\n transform: rotate(10deg);\n }\n}\n" 235 | 236 | /***/ }, 237 | /* 67 */ 238 | /***/ function(module, exports, __webpack_require__) { 239 | 240 | /** 241 | * @file Header index 242 | * @author yumao 243 | */ 244 | "use strict"; 245 | function __export(m) { 246 | for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; 247 | } 248 | Object.defineProperty(exports, "__esModule", { value: true }); 249 | __export(__webpack_require__(68)); 250 | 251 | 252 | /***/ }, 253 | /* 68 */ 254 | /***/ function(module, exports, __webpack_require__) { 255 | 256 | /** 257 | * @file Component: Header 258 | * @author yumao 259 | */ 260 | "use strict"; 261 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { 262 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; 263 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); 264 | 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; 265 | return c > 3 && r && Object.defineProperty(target, key, r), r; 266 | }; 267 | Object.defineProperty(exports, "__esModule", { value: true }); 268 | var core_1 = __webpack_require__(4); 269 | var HeaderComponent = (function () { 270 | function HeaderComponent() { 271 | } 272 | return HeaderComponent; 273 | }()); 274 | HeaderComponent = __decorate([ 275 | core_1.Component({ 276 | selector: 'demo-header', 277 | template: __webpack_require__(69), 278 | styles: [__webpack_require__(70)] 279 | }) 280 | ], HeaderComponent); 281 | exports.HeaderComponent = HeaderComponent; 282 | 283 | 284 | /***/ }, 285 | /* 69 */ 286 | /***/ function(module, exports) { 287 | 288 | module.exports = "
\n
\n

Angular 2 Busy

\n

Show busy/loading indicators on any promise, or on any Observable's subscription.

\n
\n
\n" 289 | 290 | /***/ }, 291 | /* 70 */ 292 | /***/ function(module, exports) { 293 | 294 | module.exports = "/**\n * @file Header style\n * @author yumao\n */\nheader {\n padding: 3rem .9375rem;\n margin-bottom: 3rem;\n background: #b03a58;\n color: #e8bac5;\n}\nheader h1 {\n color: #fff;\n font-size: 3rem;\n}\n" 295 | 296 | /***/ }, 297 | /* 71 */ 298 | /***/ function(module, exports, __webpack_require__) { 299 | 300 | /** 301 | * @file Options index 302 | * @author yumao 303 | */ 304 | "use strict"; 305 | function __export(m) { 306 | for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; 307 | } 308 | Object.defineProperty(exports, "__esModule", { value: true }); 309 | __export(__webpack_require__(72)); 310 | 311 | 312 | /***/ }, 313 | /* 72 */ 314 | /***/ function(module, exports, __webpack_require__) { 315 | 316 | /** 317 | * @file Component: Options 318 | * @author yumao 319 | */ 320 | "use strict"; 321 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { 322 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; 323 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); 324 | 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; 325 | return c > 3 && r && Object.defineProperty(target, key, r), r; 326 | }; 327 | var __metadata = (this && this.__metadata) || function (k, v) { 328 | if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); 329 | }; 330 | Object.defineProperty(exports, "__esModule", { value: true }); 331 | var core_1 = __webpack_require__(4); 332 | var http_1 = __webpack_require__(40); 333 | var __1 = __webpack_require__(50); 334 | // import {BUSY_CONFIG_DEFAULTS, IBusyConfig} from 'angular2-busy'; 335 | var options_template_1 = __webpack_require__(73); 336 | var OptionsComponent = (function () { 337 | function OptionsComponent(http) { 338 | this.http = http; 339 | this.templateType = 'default'; 340 | this.data = Object.assign({}, __1.BUSY_CONFIG_DEFAULTS); 341 | } 342 | OptionsComponent.prototype.changeTemplate = function (type) { 343 | this.data.template = options_template_1.OPTIONS_TEMPLATE[type]; 344 | }; 345 | OptionsComponent.prototype.playDemo = function () { 346 | // this.data.busy = this.http.get('https://httpbin.org/delay/3') 347 | // .subscribe(); 348 | this.data.busy = this.http.get('https://httpbin.org/delay/1') 349 | .toPromise(); 350 | }; 351 | return OptionsComponent; 352 | }()); 353 | OptionsComponent = __decorate([ 354 | core_1.Component({ 355 | selector: 'demo-options', 356 | template: __webpack_require__(74), 357 | styles: [__webpack_require__(75)] 358 | }), 359 | __metadata("design:paramtypes", [typeof (_a = typeof http_1.Http !== "undefined" && http_1.Http) === "function" && _a || Object]) 360 | ], OptionsComponent); 361 | exports.OptionsComponent = OptionsComponent; 362 | var _a; 363 | 364 | 365 | /***/ }, 366 | /* 73 */ 367 | /***/ function(module, exports, __webpack_require__) { 368 | 369 | /** 370 | * @file Options Template 371 | * @author yumao 372 | */ 373 | "use strict"; 374 | Object.defineProperty(exports, "__esModule", { value: true }); 375 | var __1 = __webpack_require__(50); 376 | exports.OPTIONS_TEMPLATE = { 377 | default: __1.BUSY_CONFIG_DEFAULTS.template, 378 | custom: "\n
\n
\n {{message}}\n
\n
\n " 379 | }; 380 | 381 | 382 | /***/ }, 383 | /* 74 */ 384 | /***/ function(module, exports) { 385 | 386 | module.exports = "
\n
\n \n
\n \n
\n
\n
\n \n
\n \n
\n
\n
\n \n
\n \n
\n
\n
\n \n
\n \n
\n
\n
\n \n
\n \n
\n
\n
\n \n
\n
\n" 387 | 388 | /***/ }, 389 | /* 75 */ 390 | /***/ function(module, exports) { 391 | 392 | module.exports = "/**\n * @file Options style\n * @author yumao\n */\n.c-checkbox {\n line-height: 36px;\n}\n" 393 | 394 | /***/ }, 395 | /* 76 */ 396 | /***/ function(module, exports, __webpack_require__) { 397 | 398 | /** 399 | * @file Table index 400 | * @author yumao 401 | */ 402 | "use strict"; 403 | function __export(m) { 404 | for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; 405 | } 406 | Object.defineProperty(exports, "__esModule", { value: true }); 407 | __export(__webpack_require__(77)); 408 | 409 | 410 | /***/ }, 411 | /* 77 */ 412 | /***/ function(module, exports, __webpack_require__) { 413 | 414 | /** 415 | * @file Component: Table 416 | * @author yumao 417 | */ 418 | "use strict"; 419 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { 420 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; 421 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); 422 | 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; 423 | return c > 3 && r && Object.defineProperty(target, key, r), r; 424 | }; 425 | var __metadata = (this && this.__metadata) || function (k, v) { 426 | if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); 427 | }; 428 | Object.defineProperty(exports, "__esModule", { value: true }); 429 | var core_1 = __webpack_require__(4); 430 | var __1 = __webpack_require__(50); 431 | // import {IBusyConfig} from 'angular2-busy'; 432 | var TableComponent = (function () { 433 | function TableComponent() { 434 | } 435 | return TableComponent; 436 | }()); 437 | __decorate([ 438 | core_1.Input(), 439 | __metadata("design:type", typeof (_a = typeof __1.IBusyConfig !== "undefined" && __1.IBusyConfig) === "function" && _a || Object) 440 | ], TableComponent.prototype, "loading", void 0); 441 | TableComponent = __decorate([ 442 | core_1.Component({ 443 | selector: 'demo-table', 444 | template: __webpack_require__(78), 445 | styles: [__webpack_require__(79)] 446 | }) 447 | ], TableComponent); 448 | exports.TableComponent = TableComponent; 449 | var _a; 450 | 451 | 452 | /***/ }, 453 | /* 78 */ 454 | /***/ function(module, exports) { 455 | 456 | module.exports = "\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
#NameSpeciesOccupation
1Arthur DentHumanRadio Employee
2Ford PrefectBetelgeusianResearcher
3MarvinRobotServant
\n" 457 | 458 | /***/ }, 459 | /* 79 */ 460 | /***/ function(module, exports) { 461 | 462 | module.exports = "/**\n * @file Table style\n * @author yumao\n */\n.table {\n position: relative;\n}\n" 463 | 464 | /***/ } 465 | ]); -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Angular 2 Busy Demo 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Loading...
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /demo/main.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @file main 3 | * @author yumao 4 | */ 5 | 6 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; 7 | import {enableProdMode} from '@angular/core'; 8 | 9 | import {AppModule} from './app/app.module'; 10 | 11 | enableProdMode(); 12 | 13 | platformBrowserDynamic().bootstrapModule(AppModule); 14 | -------------------------------------------------------------------------------- /demo/style/variable.less: -------------------------------------------------------------------------------- 1 | @theme-color: #b03a58; 2 | @theme-color-light: #e86c8c; 3 | -------------------------------------------------------------------------------- /demo/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs", 5 | "emitDecoratorMetadata": true, 6 | "experimentalDecorators": true, 7 | "sourceMap": true, 8 | "declaration": false, 9 | "outDir": "build", 10 | "lib": ["es2015", "dom"] 11 | }, 12 | "exclude": [ 13 | "node_modules", 14 | "build", 15 | "demo", 16 | "test" 17 | ], 18 | "filesGlob": [ 19 | "./index.ts", 20 | "./src/**/*.ts", 21 | "./demo/**/*.ts", 22 | "!./node_modules/**/*.ts", 23 | "typings/browser.d.ts" 24 | ], 25 | "awesomeTypescriptLoaderOptions": { 26 | "resolveGlobs": true, 27 | "forkChecker": true 28 | }, 29 | "angularCompilerOptions": { 30 | "strictMetadataEmit": true 31 | }, 32 | "compileOnSave": false, 33 | "buildOnSave": false, 34 | "atom": { 35 | "rewriteTsconfig": false 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /demo/vendor.ts: -------------------------------------------------------------------------------- 1 | // Polyfills 2 | import 'core-js/es6'; 3 | import 'core-js/es7/reflect'; 4 | require('zone.js/dist/zone'); 5 | 6 | // Angular 2 7 | import '@angular/platform-browser'; 8 | import '@angular/platform-browser/animations'; 9 | import '@angular/platform-browser-dynamic'; 10 | import '@angular/core'; 11 | import '@angular/forms'; 12 | import '@angular/http'; 13 | 14 | // RxJS 15 | import 'rxjs/add/operator/toPromise'; 16 | 17 | // Busy 18 | import '..'; 19 | -------------------------------------------------------------------------------- /index.d.ts: -------------------------------------------------------------------------------- 1 | export * from './build/index'; 2 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | function __export(m) { 3 | for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p]; 4 | } 5 | Object.defineProperty(exports, "__esModule", { value: true }); 6 | __export(require("./build/index")); 7 | //# sourceMappingURL=index.js.map -------------------------------------------------------------------------------- /index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../index.ts"],"names":[],"mappings":";;;;;AAAA,mCAA8B","file":"index.js","sourceRoot":""} -------------------------------------------------------------------------------- /index.metadata.json: -------------------------------------------------------------------------------- 1 | [{"__symbolic":"module","version":3,"metadata":{},"exports":[{"from":"./build/index"}]},{"__symbolic":"module","version":1,"metadata":{},"exports":[{"from":"./build/index"}]}] -------------------------------------------------------------------------------- /index.ts: -------------------------------------------------------------------------------- 1 | export * from './build/index'; 2 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular2-busy", 3 | "description": "Angular 2 Busy: show busy/loading indicators on any promise, or on any Observable's subscription", 4 | "version": "2.0.4", 5 | "repository": { 6 | "type": "git", 7 | "url": "git+https://github.com/devyumao/angular2-busy.git" 8 | }, 9 | "keywords": [ 10 | "angular", 11 | "angular2", 12 | "busy", 13 | "loading", 14 | "angular2-busy", 15 | "ng2-busy" 16 | ], 17 | "author": "Yumao", 18 | "license": "MIT", 19 | "main": "index.js", 20 | "typings": "", 21 | "homepage": "https://github.com/devyumao/angular2-busy", 22 | "bugs": { 23 | "url": "https://github.com/devyumao/angular2-busy" 24 | }, 25 | "scripts": { 26 | "build": "cross-env NODE_ENV=busy webpack --progress", 27 | "watch": "cross-env NODE_ENV=busy webpack --inline --progress --profile --colors --watch --display-error-details --display-cached --content-base build", 28 | "build:busy": "npm run build", 29 | "watch:busy": "npm run watch", 30 | "build:demo": "cross-env NODE_ENV=demo webpack --progress", 31 | "watch:demo": "cross-env NODE_ENV=demo webpack-dev-server --inline --progress --profile --colors --watch --display-error-details --display-cached --content-base demo/asset", 32 | "test": "cross-env NODE_ENV=test webpack --inline --progress --colors --watch --content-base test", 33 | "ngc": "node_modules/.bin/ngc", 34 | "tsc": "node_modules/.bin/tsc" 35 | }, 36 | "peerDependencies": { 37 | "@angular/animations": "^4.0.0", 38 | "@angular/common": "^4.0.0", 39 | "@angular/core": "^4.0.0", 40 | "@angular/platform-browser": "^4.0.0", 41 | "rxjs": "^5.0.0" 42 | }, 43 | "devDependencies": { 44 | "@angular/animations": "^4.0.1", 45 | "@angular/common": "^4.0.1", 46 | "@angular/compiler": "^4.0.1", 47 | "@angular/compiler-cli": "^4.0.1", 48 | "@angular/core": "^4.0.1", 49 | "@angular/forms": "^4.0.1", 50 | "@angular/http": "^4.0.1", 51 | "@angular/platform-browser": "^4.0.1", 52 | "@angular/platform-browser-dynamic": "^4.0.1", 53 | "@angular/router": "^4.0.1", 54 | "@types/core-js": "^0.9.41", 55 | "autoprefixer": "^6.3.7", 56 | "awesome-typescript-loader": "^0.19.1", 57 | "bootstrap": "^4.0.0-alpha.2", 58 | "compression-webpack-plugin": "^0.3.2", 59 | "copy-webpack-plugin": "^3.0.1", 60 | "core-js": "^2.4.1", 61 | "cross-env": "^3.2.3", 62 | "extract-text-webpack-plugin": "^1.0.1", 63 | "html-webpack-plugin": "^2.28.0", 64 | "install": "^0.8.7", 65 | "jasmine-core": "^2.4.1", 66 | "less": "^2.7.2", 67 | "less-loader": "^2.2.3", 68 | "postcss-loader": "^0.9.1", 69 | "raw-loader": "^0.5.1", 70 | "reflect-metadata": "^0.1.3", 71 | "rxjs": "~5.1.1", 72 | "ts-loader": "^0.8.2", 73 | "tslint": "~4.5.0", 74 | "typescript": "~2.2.0", 75 | "typings": "^0.8.1", 76 | "webpack": "^1.12.15", 77 | "webpack-dev-server": "^1.14.1", 78 | "zone.js": "^0.8.5" 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /src/busy-backdrop.component.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @file Component: BusyBackdrop 3 | * @author yumao 4 | */ 5 | 6 | import {Component} from '@angular/core'; 7 | import {trigger, state, style, transition, animate} from '@angular/animations'; 8 | 9 | import {PromiseTrackerService} from './promise-tracker.service'; 10 | 11 | const inactiveStyle = style({ 12 | opacity: 0, 13 | }); 14 | const timing = '.3s ease'; 15 | 16 | @Component({ 17 | selector: 'ng-busy-backdrop', 18 | template: ` 19 |
22 |
23 | `, 24 | animations: [ 25 | trigger('fadeInOut', [ 26 | transition('void => *', [ 27 | inactiveStyle, 28 | animate(timing) 29 | ]), 30 | transition('* => void', [ 31 | animate(timing, inactiveStyle) 32 | ]) 33 | ]) 34 | ] 35 | }) 36 | export class BusyBackdropComponent { 37 | constructor(private tracker: PromiseTrackerService) { 38 | } 39 | 40 | isActive() { 41 | return this.tracker.isActive(); 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /src/busy-config.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @file Busy Config 3 | * @author yumao 4 | */ 5 | 6 | import {Subscription} from 'rxjs/Subscription'; 7 | 8 | export class BusyConfig implements IBusyConfig { 9 | template: string; 10 | delay: number; 11 | minDuration: number; 12 | backdrop: boolean; 13 | message: string; 14 | wrapperClass: string; 15 | 16 | constructor(config: IBusyConfig = {}) { 17 | for (let option in BUSY_CONFIG_DEFAULTS) { 18 | this[option] = config[option] != null ? config[option] : BUSY_CONFIG_DEFAULTS[option]; 19 | } 20 | } 21 | } 22 | 23 | export interface IBusyConfig { 24 | template?: string; 25 | delay?: number; 26 | minDuration?: number; 27 | backdrop?: boolean; 28 | message?: string; 29 | wrapperClass?: string; 30 | busy?: Promise | Subscription | Array | Subscription> 31 | } 32 | 33 | export const BUSY_CONFIG_DEFAULTS = { 34 | template: ` 35 |
36 |
37 | 51 |
{{message}}
52 |
53 |
54 | `, 55 | delay: 0, 56 | minDuration: 0, 57 | backdrop: true, 58 | message: 'Please wait...', 59 | wrapperClass: 'ng-busy' 60 | }; 61 | -------------------------------------------------------------------------------- /src/busy.component.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @file Component: Busy 3 | * @author yumao 4 | */ 5 | 6 | import { 7 | Component, 8 | Compiler, 9 | NgModule, 10 | NgModuleFactory, 11 | Injectable, 12 | DoCheck, 13 | OnDestroy 14 | } from '@angular/core'; 15 | import {trigger, state, style, transition, animate} from '@angular/animations'; 16 | 17 | import {PromiseTrackerService} from './promise-tracker.service'; 18 | 19 | 20 | const inactiveStyle = style({ 21 | opacity: 0, 22 | transform: 'translateY(-40px)' 23 | }); 24 | const timing = '.3s ease'; 25 | 26 | export interface IBusyContext { 27 | message: string; 28 | }; 29 | 30 | @Component({ 31 | selector: 'ng-busy', 32 | template: ` 33 |
34 | 35 |
36 | `, 37 | animations: [ 38 | trigger('flyInOut', [ 39 | transition('void => *', [ 40 | inactiveStyle, 41 | animate(timing) 42 | ]), 43 | transition('* => void', [ 44 | animate(timing, inactiveStyle) 45 | ]) 46 | ]) 47 | ] 48 | }) 49 | export class BusyComponent implements DoCheck, OnDestroy { 50 | TemplateComponent; 51 | private nmf: NgModuleFactory; 52 | wrapperClass: string; 53 | template: string; 54 | message: string; 55 | private lastMessage: string; 56 | 57 | constructor( 58 | private tracker: PromiseTrackerService, 59 | private compiler: Compiler 60 | ) {} 61 | 62 | ngDoCheck() { 63 | if (this.message === this.lastMessage) { 64 | return; 65 | } 66 | this.lastMessage = this.message; 67 | this.clearDynamicTemplateCache(); 68 | this.createDynamicTemplate(); 69 | } 70 | 71 | ngOnDestroy(): void { 72 | this.clearDynamicTemplateCache(); 73 | } 74 | 75 | createDynamicTemplate() { 76 | const {template, message} = this; 77 | 78 | @Component({template}) 79 | class TemplateComponent { 80 | message: string = message; 81 | } 82 | 83 | @NgModule({ 84 | declarations: [TemplateComponent], 85 | entryComponents: [TemplateComponent] 86 | }) 87 | class TemplateModule {} 88 | 89 | this.TemplateComponent = TemplateComponent; 90 | this.nmf = this.compiler.compileModuleSync(TemplateModule); 91 | } 92 | 93 | clearDynamicTemplateCache() { 94 | if (!this.nmf) { 95 | return; 96 | } 97 | 98 | this.compiler.clearCacheFor(this.nmf.moduleType); 99 | this.nmf = null; 100 | } 101 | 102 | isActive() { 103 | return this.tracker.isActive(); 104 | } 105 | } 106 | -------------------------------------------------------------------------------- /src/busy.directive.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @file Directive: Busy 3 | * @author yumao 4 | */ 5 | 6 | import { 7 | Directive, 8 | Component, 9 | Input, 10 | DoCheck, 11 | ViewContainerRef, 12 | ComponentFactoryResolver, 13 | ComponentRef, 14 | Injector 15 | } from '@angular/core'; 16 | import {Subscription} from 'rxjs/Subscription'; 17 | 18 | import {equals} from './util'; 19 | import {PromiseTrackerService} from './promise-tracker.service'; 20 | import {BusyService} from './busy.service'; 21 | import {IBusyConfig} from './busy-config'; 22 | import {BusyComponent} from './busy.component'; 23 | import {BusyBackdropComponent} from './busy-backdrop.component'; 24 | 25 | /** 26 | * ### Syntax 27 | * 28 | * - `
...
` 29 | * - `
...
` 30 | * - `
...
` 31 | */ 32 | @Directive({ 33 | selector: '[ngBusy]', 34 | providers: [PromiseTrackerService] 35 | }) 36 | export class BusyDirective implements DoCheck { 37 | @Input('ngBusy') options: any; 38 | private optionsRecord: any; 39 | private optionsNorm: IBusyConfig; 40 | template: string; 41 | backdrop: boolean; 42 | private busyRef: ComponentRef; 43 | private backdropRef: ComponentRef; 44 | 45 | constructor( 46 | private service: BusyService, 47 | private tracker: PromiseTrackerService, 48 | private cfResolver: ComponentFactoryResolver, 49 | private vcRef: ViewContainerRef, 50 | private injector: Injector 51 | ) { 52 | } 53 | 54 | private normalizeOptions(options: any) { 55 | if (!options) { 56 | options = {busy: null}; 57 | } 58 | else if (Array.isArray(options) 59 | || options instanceof Promise 60 | || options instanceof Subscription 61 | ) { 62 | options = {busy: options}; 63 | } 64 | options = Object.assign({}, this.service.config, options); 65 | if (!Array.isArray(options.busy)) { 66 | options.busy = [options.busy]; 67 | } 68 | 69 | return options; 70 | } 71 | 72 | private dectectOptionsChange() { 73 | if (equals(this.optionsNorm, this.optionsRecord)) { 74 | return false; 75 | } 76 | this.optionsRecord = this.optionsNorm; 77 | return true; 78 | } 79 | 80 | // As ngOnChanges does not work on Object detection, ngDoCheck is using 81 | ngDoCheck() { 82 | const options = this.optionsNorm = this.normalizeOptions(this.options); 83 | 84 | if (!this.dectectOptionsChange()) { 85 | return; 86 | } 87 | 88 | if (this.busyRef) { 89 | this.busyRef.instance.message = options.message; 90 | } 91 | 92 | !equals(options.busy, this.tracker.promiseList) 93 | && this.tracker.reset({ 94 | promiseList: options.busy, 95 | delay: options.delay, 96 | minDuration: options.minDuration 97 | }); 98 | 99 | if (!this.busyRef 100 | || this.template !== options.template 101 | || this.backdrop !== options.backdrop 102 | ) { 103 | this.destroyComponents(); 104 | 105 | this.template = options.template; 106 | this.backdrop = options.backdrop; 107 | 108 | options.backdrop && this.createBackdrop(); 109 | 110 | this.createBusy(); 111 | } 112 | } 113 | 114 | ngOnDestroy() { 115 | this.destroyComponents(); 116 | } 117 | 118 | private destroyComponents() { 119 | this.busyRef && this.busyRef.destroy(); 120 | this.backdropRef && this.backdropRef.destroy(); 121 | } 122 | 123 | private createBackdrop() { 124 | const backdropFactory = this.cfResolver.resolveComponentFactory(BusyBackdropComponent); 125 | this.backdropRef = this.vcRef.createComponent(backdropFactory, null, this.injector); 126 | } 127 | 128 | private createBusy() { 129 | const busyFactory = this.cfResolver.resolveComponentFactory(BusyComponent); 130 | this.busyRef = this.vcRef.createComponent(busyFactory, null, this.injector); 131 | 132 | const {message, wrapperClass, template} = this.optionsNorm; 133 | const instance = this.busyRef.instance; 134 | instance.message = message; 135 | instance.wrapperClass = wrapperClass; 136 | instance.template = template; 137 | } 138 | } 139 | -------------------------------------------------------------------------------- /src/busy.module.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @file Module: Busy 3 | * @author yumao 4 | */ 5 | 6 | import {NgModule, Compiler} from '@angular/core'; 7 | import {CommonModule} from '@angular/common'; 8 | import {ModuleWithProviders} from '@angular/core'; 9 | import {JitCompilerFactory} from '@angular/compiler'; 10 | 11 | import {BusyDirective} from './busy.directive'; 12 | import {BusyService} from './busy.service'; 13 | import {BusyBackdropComponent} from './busy-backdrop.component'; 14 | import {BusyComponent} from './busy.component'; 15 | import {BusyConfig} from './busy-config'; 16 | 17 | // Workaround for Compiler in AOT 18 | // https://github.com/angular/angular/issues/15510#issuecomment-294301758 19 | export function createJitCompiler() { 20 | return new JitCompilerFactory([{useDebug: false, useJit: true}]).createCompiler(); 21 | } 22 | 23 | @NgModule({ 24 | imports: [ 25 | CommonModule 26 | ], 27 | declarations: [ 28 | BusyDirective, 29 | BusyComponent, 30 | BusyBackdropComponent, 31 | ], 32 | providers: [ 33 | BusyService, 34 | {provide: Compiler, useFactory: createJitCompiler}, 35 | ], 36 | exports: [BusyDirective], 37 | entryComponents: [ 38 | BusyComponent, 39 | BusyBackdropComponent 40 | ] 41 | }) 42 | export class BusyModule { 43 | static forRoot(config: BusyConfig): ModuleWithProviders { 44 | return { 45 | ngModule: BusyModule, 46 | providers: [ 47 | {provide: BusyConfig, useValue: config} 48 | ] 49 | }; 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /src/busy.service.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @file Service: Busy 3 | * @author yumao 4 | */ 5 | 6 | import {Injectable, Optional} from '@angular/core'; 7 | 8 | import {BusyConfig} from './busy-config'; 9 | 10 | @Injectable() 11 | export class BusyService { 12 | config: BusyConfig; 13 | 14 | constructor(@Optional() config: BusyConfig) { 15 | this.config = config || new BusyConfig(); 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @file Busy index 3 | * @author yumao 4 | */ 5 | 6 | export * from './busy.module'; 7 | export * from './busy.directive'; 8 | export * from './busy.service'; 9 | export * from './busy-config'; 10 | -------------------------------------------------------------------------------- /src/promise-tracker.service.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @file Service: PromiseTracker 3 | * @author yumao 4 | */ 5 | 6 | // Inspired by angular-promise-tracker 7 | // Add Observable Subscription 8 | 9 | import {Injectable} from '@angular/core'; 10 | import {Subscription} from 'rxjs/Subscription'; 11 | 12 | @Injectable() 13 | export class PromiseTrackerService { 14 | promiseList: Array | Subscription> = []; 15 | delayPromise: number | any; 16 | durationPromise: number | any; 17 | delayJustFinished: boolean = false; 18 | minDuration: number; 19 | 20 | reset(options: IPromiseTrackerOptions) { 21 | this.minDuration = options.minDuration; 22 | 23 | this.promiseList = []; 24 | options.promiseList.forEach(promise => { 25 | if (!promise || promise['busyFulfilled']) { 26 | return; 27 | } 28 | this.addPromise(promise); 29 | }); 30 | 31 | if (this.promiseList.length === 0) { 32 | return; 33 | } 34 | 35 | this.delayJustFinished = false; 36 | if (options.delay) { 37 | this.delayPromise = setTimeout( 38 | () => { 39 | this.delayPromise = null; 40 | this.delayJustFinished = true; 41 | }, 42 | options.delay 43 | ); 44 | } 45 | if (options.minDuration) { 46 | this.durationPromise = setTimeout( 47 | () => { 48 | this.durationPromise = null; 49 | }, 50 | options.minDuration + (options.delay || 0) 51 | ); 52 | } 53 | } 54 | 55 | private addPromise(promise: Promise | Subscription) { 56 | if (this.promiseList.indexOf(promise) !== -1) { 57 | return; 58 | } 59 | 60 | this.promiseList.push(promise); 61 | 62 | if (promise instanceof Promise) { 63 | promise.then.call( 64 | promise, 65 | () => this.finishPromise(promise), 66 | () => this.finishPromise(promise) 67 | ); 68 | } 69 | else if (promise instanceof Subscription) { 70 | promise.add(() => this.finishPromise(promise)); 71 | } 72 | } 73 | 74 | private finishPromise(promise: Promise | Subscription) { 75 | promise['busyFulfilled'] = true; 76 | const index = this.promiseList.indexOf(promise); 77 | if (index === -1) { 78 | return; 79 | } 80 | this.promiseList.splice(index, 1); 81 | } 82 | 83 | isActive() { 84 | if (this.delayPromise) { 85 | return false; 86 | } 87 | 88 | if (!this.delayJustFinished) { 89 | if (this.durationPromise) { 90 | return true; 91 | } 92 | return this.promiseList.length > 0; 93 | } 94 | 95 | this.delayJustFinished = false; 96 | if (this.promiseList.length === 0) { 97 | this.durationPromise = null; 98 | } 99 | return this.promiseList.length > 0; 100 | } 101 | } 102 | 103 | export interface IPromiseTrackerOptions { 104 | minDuration: number; 105 | delay: number; 106 | promiseList: Promise[]; 107 | } 108 | -------------------------------------------------------------------------------- /src/style/busy.less: -------------------------------------------------------------------------------- 1 | .ng-busy { 2 | z-index: 1002; 3 | 4 | &, 5 | > *, 6 | > ng-component > * { 7 | position: absolute; 8 | top: 0px; 9 | left: 0px; 10 | right: 0px; 11 | bottom: 0px; 12 | } 13 | } 14 | 15 | .ng-busy-backdrop { 16 | position: absolute; 17 | top: 0; 18 | left: 0; 19 | right: 0; 20 | bottom: 0; 21 | z-index: 1001; 22 | background: #fff; 23 | opacity: .7; 24 | } 25 | 26 | .ng-busy-default-wrapper { 27 | text-align: center; 28 | } 29 | 30 | .ng-busy-default-sign { 31 | position: relative; 32 | display: inline-block; 33 | z-index: 1003; 34 | padding: 12px 14px; 35 | border: 1px solid #d8d8d8; 36 | border-top: 0; 37 | border-radius: 4px; 38 | border-top-left-radius: 0; 39 | border-top-right-radius: 0; 40 | box-shadow: 0 1px 2px rgba(0, 0, 0, .05); 41 | background: #f8f8f8; 42 | color: #333; 43 | } 44 | 45 | .ng-busy-default-text { 46 | display: inline-block; 47 | margin-left: 6px; 48 | max-width: 400px; 49 | font-size: 14px; 50 | text-align: left; 51 | } 52 | 53 | .ng-busy-default-spinner { 54 | position: relative; 55 | display: inline-block; 56 | width: 25px; 57 | height: 25px; 58 | vertical-align: middle; 59 | 60 | div { 61 | position: absolute; 62 | left: 44.5%; 63 | top: 37%; 64 | width: 10%; 65 | height: 26%; 66 | background: #666; 67 | border-radius: 50px; 68 | box-shadow: 0 0 3px rgba(0, 0, 0, .2); 69 | opacity: 0; 70 | animation: busy-spinner-anim 1s linear infinite; 71 | } 72 | 73 | .generate-bars(@n, @i: 1) when (@i =< @n) { 74 | .bar@{i} { 75 | transform: rotate(unit(360 / 12 * (@i - 1), deg)) translate(0, -142%); 76 | animation-delay: unit(-1 + 1 / 12 * (@i - 1), s); 77 | } 78 | .generate-bars(@n, (@i + 1)); 79 | } 80 | 81 | .generate-bars(12); 82 | } 83 | 84 | @keyframes busy-spinner-anim { 85 | from { 86 | opacity: 1; 87 | } 88 | to { 89 | opacity: 0.25; 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /src/style/index.js: -------------------------------------------------------------------------------- 1 | require('./busy.less'); 2 | -------------------------------------------------------------------------------- /src/util.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @file Util 3 | * @author yumao 4 | */ 5 | 6 | // from AngularJS 7 | 8 | export function isDate(value) { 9 | return Object.prototype.toString.call(value) === '[object Date]'; 10 | } 11 | 12 | export function isRegExp(value) { 13 | return Object.prototype.toString.call(value) === '[object RegExp]'; 14 | } 15 | 16 | export function isWindow(obj) { 17 | return obj && obj.window === obj; 18 | } 19 | 20 | export function isFunction(value) { 21 | return typeof value === 'function'; 22 | } 23 | 24 | export function isDefined(value) { 25 | return typeof value !== 'undefined'; 26 | } 27 | 28 | export function equals(o1, o2) { 29 | if (o1 === o2) { 30 | return true 31 | }; 32 | if (o1 === null || o2 === null) { 33 | return false; 34 | } 35 | if (o1 !== o1 && o2 !== o2) { 36 | return true; // NaN === NaN 37 | } 38 | const t1 = typeof o1; 39 | const t2 = typeof o2; 40 | let length; 41 | let key; 42 | let keySet; 43 | if (t1 === t2 && t1 === 'object') { 44 | if (Array.isArray(o1)) { 45 | if (!Array.isArray(o2)) { 46 | return false; 47 | } 48 | if ((length = o1.length) === o2.length) { 49 | for (key = 0; key < length; key++) { 50 | if (!equals(o1[key], o2[key])) { 51 | return false; 52 | } 53 | } 54 | return true; 55 | } 56 | } 57 | else if (isDate(o1)) { 58 | if (!isDate(o2)) { 59 | return false; 60 | } 61 | return equals(o1.getTime(), o2.getTime()); 62 | } 63 | else if (isRegExp(o1)) { 64 | if (!isRegExp(o2)) { 65 | return false; 66 | } 67 | return o1.toString() === o2.toString(); 68 | } 69 | else { 70 | if (isWindow(o1) || isWindow(o2) 71 | || Array.isArray(o2) || isDate(o2) || isRegExp(o2) 72 | ) { 73 | return false 74 | }; 75 | keySet = Object.create(null); 76 | for (key in o1) { 77 | if (key.charAt(0) === '$' || isFunction(o1[key])) { 78 | continue 79 | }; 80 | if (!equals(o1[key], o2[key])) { 81 | return false; 82 | } 83 | keySet[key] = true; 84 | } 85 | for (key in o2) { 86 | if (!(key in keySet) 87 | && key.charAt(0) !== '$' 88 | && isDefined(o2[key]) 89 | && !isFunction(o2[key]) 90 | ) { 91 | return false; 92 | } 93 | } 94 | return true; 95 | } 96 | } 97 | return false; 98 | } 99 | -------------------------------------------------------------------------------- /test/busy.spec.js: -------------------------------------------------------------------------------- 1 | /******/ (function(modules) { // webpackBootstrap 2 | /******/ // The module cache 3 | /******/ var installedModules = {}; 4 | 5 | /******/ // The require function 6 | /******/ function __webpack_require__(moduleId) { 7 | 8 | /******/ // Check if module is in cache 9 | /******/ if(installedModules[moduleId]) 10 | /******/ return installedModules[moduleId].exports; 11 | 12 | /******/ // Create a new module (and put it into the cache) 13 | /******/ var module = installedModules[moduleId] = { 14 | /******/ exports: {}, 15 | /******/ id: moduleId, 16 | /******/ loaded: false 17 | /******/ }; 18 | 19 | /******/ // Execute the module function 20 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 21 | 22 | /******/ // Flag the module as loaded 23 | /******/ module.loaded = true; 24 | 25 | /******/ // Return the exports of the module 26 | /******/ return module.exports; 27 | /******/ } 28 | 29 | 30 | /******/ // expose the modules object (__webpack_modules__) 31 | /******/ __webpack_require__.m = modules; 32 | 33 | /******/ // expose the module cache 34 | /******/ __webpack_require__.c = installedModules; 35 | 36 | /******/ // __webpack_public_path__ 37 | /******/ __webpack_require__.p = ""; 38 | 39 | /******/ // Load entry module and return exports 40 | /******/ return __webpack_require__(0); 41 | /******/ }) 42 | /************************************************************************/ 43 | /******/ ([ 44 | /* 0 */ 45 | /***/ function(module, exports) { 46 | 47 | "use strict"; 48 | describe('BusyDirective', function () { 49 | // forthcoming... 50 | }); 51 | 52 | 53 | /***/ } 54 | /******/ ]); -------------------------------------------------------------------------------- /test/busy.spec.ts: -------------------------------------------------------------------------------- 1 | import { 2 | inject, 3 | } from '@angular/core/testing'; 4 | 5 | import {BusyDirective} from '..'; 6 | 7 | describe('BusyDirective', () => { 8 | // forthcoming... 9 | }); 10 | -------------------------------------------------------------------------------- /test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Angular 2 Tests 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs", 5 | "emitDecoratorMetadata": true, 6 | "experimentalDecorators": true, 7 | "sourceMap": true, 8 | "declaration": false, 9 | "outDir": "build", 10 | "lib": ["es2015", "dom"], 11 | "moduleResolution": "node" 12 | }, 13 | "files": [ 14 | "./src/index.ts" 15 | ], 16 | "awesomeTypescriptLoaderOptions": { 17 | "resolveGlobs": true, 18 | "forkChecker": true 19 | }, 20 | "angularCompilerOptions": { 21 | "strictMetadataEmit": true 22 | }, 23 | "compileOnSave": false, 24 | "buildOnSave": false, 25 | "atom": { 26 | "rewriteTsconfig": false 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rules": { 3 | "member-access": false, 4 | "member-ordering": [ 5 | true, 6 | "public-before-private", 7 | "static-before-instance", 8 | "variables-before-functions" 9 | ], 10 | "no-any": false, 11 | "no-inferrable-types": false, 12 | "no-internal-module": true, 13 | "no-var-requires": false, 14 | "typedef": false, 15 | "typedef-whitespace": [ 16 | true, 17 | { 18 | "call-signature": "nospace", 19 | "index-signature": "nospace", 20 | "parameter": "nospace", 21 | "property-declaration": "nospace", 22 | "variable-declaration": "nospace" 23 | }, 24 | { 25 | "call-signature": "space", 26 | "index-signature": "space", 27 | "parameter": "space", 28 | "property-declaration": "space", 29 | "variable-declaration": "space" 30 | } 31 | ], 32 | 33 | "ban": false, 34 | "curly": false, 35 | "forin": true, 36 | "label-position": true, 37 | "label-undefined": true, 38 | "no-arg": true, 39 | "no-bitwise": true, 40 | "no-conditional-assignment": true, 41 | "no-console": [ 42 | true, 43 | "debug", 44 | "info", 45 | "time", 46 | "timeEnd", 47 | "trace" 48 | ], 49 | "no-construct": true, 50 | "no-debugger": true, 51 | "no-duplicate-key": true, 52 | "no-duplicate-variable": true, 53 | "no-empty": false, 54 | "no-eval": true, 55 | "no-null-keyword": true, 56 | "no-shadowed-variable": true, 57 | "no-string-literal": true, 58 | "no-switch-case-fall-through": true, 59 | "no-unreachable": true, 60 | "no-unused-expression": true, 61 | "no-unused-variable": false, 62 | "no-use-before-declare": true, 63 | "no-var-keyword": true, 64 | "radix": true, 65 | "switch-default": true, 66 | "triple-equals": [ 67 | true, 68 | "allow-null-check" 69 | ], 70 | "use-strict": [ 71 | true, 72 | "check-module" 73 | ], 74 | 75 | "eofline": true, 76 | "indent": [ 77 | true, 78 | "spaces" 79 | ], 80 | "max-line-length": [ 81 | true, 82 | 100 83 | ], 84 | "no-require-imports": false, 85 | "no-trailing-whitespace": true, 86 | "object-literal-sort-keys": false, 87 | "trailing-comma": [ 88 | true, 89 | { 90 | "multiline": "never", 91 | "singleline": "never" 92 | } 93 | ], 94 | 95 | "align": false, 96 | "class-name": true, 97 | "comment-format": [ 98 | true, 99 | "check-space" 100 | ], 101 | "interface-name": false, 102 | "jsdoc-format": true, 103 | "no-consecutive-blank-lines": false, 104 | "no-constructor-vars": false, 105 | "one-line": [ 106 | true, 107 | "check-open-brace", 108 | "check-catch", 109 | "check-else", 110 | "check-finally", 111 | "check-whitespace" 112 | ], 113 | "quotemark": [ 114 | true, 115 | "single", 116 | "avoid-escape" 117 | ], 118 | "semicolon": [true, "always"], 119 | "variable-name": [ 120 | true, 121 | "check-format", 122 | "allow-leading-underscore", 123 | "ban-keywords" 124 | ], 125 | "whitespace": [ 126 | true, 127 | "check-branch", 128 | "check-decl", 129 | "check-operator", 130 | "check-separator", 131 | "check-type" 132 | ] 133 | 134 | } 135 | } 136 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @file Webpack config 3 | * @author yumao 4 | */ 5 | 6 | // Look in ./config folder for webpack.[type].js 7 | switch (process.env.NODE_ENV) { 8 | case 'demo': 9 | module.exports = require('./config/webpack.demo'); 10 | break; 11 | case 'test': 12 | module.exports = require('./config/webpack.test'); 13 | break; 14 | case 'busy': 15 | default: 16 | module.exports = require('./config/webpack.busy'); 17 | } 18 | --------------------------------------------------------------------------------