├── .gitignore
├── LICENSE
├── README.md
├── index.ts
├── package.json
└── tsconfig.json


/.gitignore:
--------------------------------------------------------------------------------
 1 | /dist
 2 | /tmp
 3 | 
 4 | /compiled
 5 | 
 6 | /node_modules
 7 | /typings
 8 | 
 9 | /.vscode
10 | /.idea


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 Hacklone <toakak@gmail.com>
 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 | [npm-url]: https://npmjs.org/package/angular2-cool-loading-indicator
 2 | [npm-image]: https://img.shields.io/npm/v/angular2-cool-loading-indicator.svg
 3 | [downloads-image]: https://img.shields.io/npm/dm/angular2-cool-loading-indicator.svg
 4 | [total-downloads-image]: https://img.shields.io/npm/dt/angular2-cool-loading-indicator.svg
 5 | 
 6 | # !!!!!!
 7 | # This version of angular2-cool-loading-indicator is deprecated and only left here for reference.
 8 | # Please use [@angular-cool/loading-indicator](https://www.npmjs.com/package/@angular-cool/loading-indicator) instead!
 9 | # !!!!!!
10 | 
11 | # angular2-cool-loading-indicator [![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][npm-url]  [![Total Downloads][total-downloads-image]][npm-url]
12 | Cool loading indicator for angular2
13 | 
14 | ## Dependencies
15 | > The angular2-cool-loading-indicator will only work properly if you utilize [angular2-cool-http](https://github.com/Hacklone/angular2-cool-http) for api calls.
16 | 
17 | ## Demo
18 | [View demo on Plunker](https://embed.plnkr.co/zusopx/)
19 | 
20 | ## Install 
21 | > npm install --save angular2-cool-loading-indicator
22 | 
23 | ## Setup
24 | ### bootstrap.ts
25 | ```javascript
26 | import { NgModule } from '@angular/core';
27 | import { CoolLoadingIndicatorModule } from 'angular2-cool-loading-indicator';
28 | 
29 | @NgModule({
30 |     imports: [CoolLoadingIndicatorModule]
31 | })
32 | export class MyAppModule {}
33 | 
34 | ```
35 | ### my-app.ts
36 | ```javascript
37 | import { Component, OnInit } from '@angular/core';
38 | 
39 | import { CoolHttp } from 'angular2-cool-http';
40 | 
41 | @Component({
42 |   selector: 'my-app',
43 |   template: `
44 |     <div>
45 |       <cool-loading-indicator [indicatorDelay]="500">
46 |         <div>This is you incredible custom loading indicator element</div>
47 |       </cool-loading-indicator> 
48 |     </div>
49 |   `
50 | })
51 | export class AppComponent implements OnInit { 
52 |     coolHttp: CoolHttp;
53 |     
54 |     constructor(coolHttp: CoolHttp) {
55 |         this.coolHttp = coolHttp;   
56 |     }
57 |     
58 |     async ngOnInit() {
59 |         // await async api call
60 |         let response = await this.coolHttp.getAsync('/api/request');
61 |     }
62 | }
63 | ```
64 | 
65 | ## Parameters
66 | - indicatorDelay
67 |   * optional
68 |   * default = 500ms
69 |   * cool-loading-indicator waits this amount of time before showing 
70 |   * to avoid blinking indicator caused by background api calls
71 | 
72 | ## License
73 | > The MIT License (MIT)
74 | 
75 | > Copyright (c) 2016 Hacklone
76 | > https://github.com/Hacklone
77 | 
78 | > Permission is hereby granted, free of charge, to any person obtaining a copy
79 | > of this software and associated documentation files (the "Software"), to deal
80 | > in the Software without restriction, including without limitation the rights
81 | > to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
82 | > copies of the Software, and to permit persons to whom the Software is
83 | > furnished to do so, subject to the following conditions:
84 | 
85 | > The above copyright notice and this permission notice shall be included in all
86 | > copies or substantial portions of the Software.
87 | 
88 | > THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
89 | > IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
90 | > FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
91 | > AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
92 | > LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
93 | > OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
94 | > SOFTWARE.
95 | 


--------------------------------------------------------------------------------
/index.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, OnDestroy, Input, NgModule } from '@angular/core';
 2 | import { CommonModule } from '@angular/common';
 3 | 
 4 | import { CoolHttpModule, CoolHttp, IRequestInterceptor, IResponseInterceptor } from 'angular2-cool-http';
 5 | 
 6 | const DEFAULT_INDICATOR_DELAY = 500;
 7 | 
 8 | @Component({
 9 |   selector: 'cool-loading-indicator',
10 |   template: `
11 |         <div *ngIf="showIndicator" class="cool-loading-indicator">
12 |             <ng-content></ng-content>
13 |         </div>
14 |     `
15 | })
16 | export class CoolLoadingIndicator implements OnInit, OnDestroy, IRequestInterceptor, IResponseInterceptor {
17 |   private _attachedTo: CoolHttp[] = [];
18 | 
19 |   coolHttp: CoolHttp;
20 | 
21 |   showIndicatorCounter: number = 0;
22 |   showIndicator: boolean = false;
23 | 
24 |   @Input()
25 |   indicatorDelay: number;
26 | 
27 |   constructor(coolHttp: CoolHttp) {
28 |     this.coolHttp = coolHttp;
29 |   }
30 | 
31 |   ngOnInit() {
32 |     this.attachTo(this.coolHttp);
33 |   }
34 | 
35 |   beforeRequestAsync() {
36 |     let that = this;
37 | 
38 |     this.showIndicatorCounter++;
39 | 
40 |     if(this.indicatorDelay) {
41 |       setTimeout(() => {
42 |         if(that.shouldShowIndicator) {
43 |           this.showIndicator = true;
44 |         }
45 |       }, this.indicatorDelay || DEFAULT_INDICATOR_DELAY);
46 |     }
47 |     else if(this.shouldShowIndicator) {
48 |       this.showIndicator = true;
49 |     }
50 | 
51 |     return Promise.resolve(false);
52 |   }
53 | 
54 |   afterResponseAsync() {
55 |     this.showIndicatorCounter--;
56 | 
57 |     if(this.shouldHideIndicator) {
58 |       this.showIndicator = false;
59 |     }
60 | 
61 |     return Promise.resolve(false);
62 |   }
63 | 
64 |   get shouldShowIndicator() {
65 |     return this.showIndicatorCounter > 0;
66 |   }
67 | 
68 |   get shouldHideIndicator() {
69 |     return this.showIndicatorCounter < 1;
70 |   }
71 | 
72 |   attachTo(http: CoolHttp) {
73 |     this._attachedTo.push(http);
74 | 
75 |     http.registerRequestInterceptor(this);
76 | 
77 |     http.registerResponseInterceptor(this);
78 |   }
79 | 
80 |   ngOnDestroy() {
81 |     for (const http of this._attachedTo) {
82 |       http.deregisterRequestInterceptor(this);
83 | 
84 |       http.deregisterResponseInterceptor(this);
85 |     }
86 | 
87 |     this._attachedTo.length = 0;
88 |   }
89 | }
90 | 
91 | @NgModule({
92 |   exports: [CoolLoadingIndicator],
93 |   imports: [CommonModule, CoolHttpModule],
94 |   declarations: [CoolLoadingIndicator]
95 | })
96 | export class CoolLoadingIndicatorModule {}


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angular2-cool-loading-indicator",
 3 |   "version": "1.2.1",
 4 |   "description": "Cool loading indicator for angular2",
 5 |   "main": "index.js",
 6 |   "jsnext:main": "esm/index.js",
 7 |   "typings": "index.d.ts",
 8 |   "dependencies": {
 9 |     "@angular/core": ">=2.4.4",
10 |     "@angular/common": ">=2.4.4",
11 |     "angular2-cool-http": ">=1.3.4"
12 |   },
13 |   "devDependencies": {
14 |     "@angular/compiler": "^2.4.4",
15 |     "@angular/compiler-cli": "^2.4.4",
16 |     "@angular/platform-server": "^2.4.4",
17 |     "typescript": "^2.1.5"
18 |   },
19 |   "scripts": {
20 |     "clean": "rm -rf ./dist",
21 |     "compile": "./node_modules/.bin/ngc",
22 |     "copy-files": "cp ./README.md ./dist/README.md && cp ./package.json ./dist/package.json",
23 |     "build": "npm run clean && npm run compile && npm run copy-files"
24 |   },
25 |   "repository": {
26 |     "type": "git",
27 |     "url": "git+https://github.com/Hacklone/angular2-cool-loading-indicator.git"
28 |   },
29 |   "keywords": [
30 |     "angular2",
31 |     "http",
32 |     "httpclient",
33 |     "interceptor",
34 |     "global",
35 |     "headers",
36 |     "interceptors",
37 |     "cool",
38 |     "cool-http",
39 |     "cool-loading-indicator",
40 |     "loading",
41 |     "indicator",
42 |     "loading indicator"
43 |   ],
44 |   "author": "Hacklone <toakak@gmail.com>",
45 |   "license": "MIT",
46 |   "licenses": [
47 |     {
48 |       "type": "MIT",
49 |       "url": "https://github.com/Hacklone/angular2-cool-loading-indicator/raw/master/LICENSE"
50 |     }
51 |   ],
52 |   "bugs": {
53 |     "url": "https://github.com/Hacklone/angular2-cool-loading-indicator/issues"
54 |   },
55 |   "homepage": "https://github.com/Hacklone/angular2-cool-loading-indicator#readme"
56 | }
57 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compileOnSave": true,
 3 |   "compilerOptions": {
 4 |     "declaration": true,
 5 |     "emitDecoratorMetadata": true,
 6 |     "experimentalDecorators": true,
 7 |     "mapRoot": "../../../../",
 8 |     "lib": [
 9 |       "es6",
10 |       "dom"
11 |     ],
12 |     "module": "commonjs",
13 |     "moduleResolution": "node",
14 |     "noEmitOnError": true,
15 |     "noImplicitAny": false,
16 |     "outDir": "dist",
17 |     "rootDir": ".",
18 |     "sourceMap": true,
19 |     "target": "es5",
20 |     "inlineSources": true
21 |   },
22 |   "angularCompilerOptions": {
23 |     "strictMetadataEmit": true,
24 |     "skipTemplateCodegen": true
25 |   },
26 |   "files": [
27 |     "index.ts"
28 |   ],
29 |   "exclude": [
30 |     "node_modules"
31 |   ]
32 | }


--------------------------------------------------------------------------------