diff --git a/README.md b/README.md index 004af8c..c6cabb4 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,6 @@ [![Build Status](https://travis-ci.org/t-ho/ngx-ui-loader.svg?branch=master)](https://travis-ci.org/t-ho/ngx-ui-loader) [![codecov](https://codecov.io/gh/t-ho/ngx-ui-loader/branch/master/graph/badge.svg)](https://codecov.io/gh/t-ho/ngx-ui-loader) [![npm](https://img.shields.io/npm/dw/ngx-ui-loader.svg)](https://www.npmjs.com/package/ngx-ui-loader) -[![](https://data.jsdelivr.com/v1/package/npm/ngx-ui-loader/badge?style=rounded)](https://www.jsdelivr.com/package/npm/ngx-ui-loader) [![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/ngx-ui-loader.svg)](https://bundlephobia.com/result?p=ngx-ui-loader) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier) [![license](https://img.shields.io/npm/l/ngx-ui-loader.svg)](https://github.com/t-ho/ngx-ui-loader/wiki/License) @@ -16,14 +15,10 @@ An all-in-one and fully customizable loader/spinner for Angular applications. It ## Features -- Support **multiple loaders** (>= ngx-ui-loader@7.1.0). See [Multiple loaders](https://tdev.app/ngx-ui-loader#multiple-loaders) for more details and [demo here](https://tdev.app/ngx-ui-loader/demo) +- Support [custom template](https://tdev.app/ngx-ui-loader#custom-template) (>= ngx-ui-loader@9.1.0). +- Support [multiple loaders](https://tdev.app/ngx-ui-loader#multiple-loaders) (>= ngx-ui-loader@7.1.0). - Show foreground loader with **progress bar** - The page content can be **blurred/frosted** while showing foreground loader. See [NgxUiLoaderBlurred](https://tdev.app/ngx-ui-loader#ngxuiloaderblurred-directive) directive for more details -- Show loader with different id for different tasks -- Be able to add **logo** and **loading text** -- Be able to change position of spinners, logo and loading text -- Be able to change color and size of logo, spinners and progress bar -- Be able to change the direction of progress bar - Automatically show loader for router events. See [NgxUiLoaderRouterModule](https://tdev.app/ngx-ui-loader#automatically-show-loader-for-router-events) for more details - Automatically show loader for http requests. See [NgxUiLoaderHttpModule](https://tdev.app/ngx-ui-loader#automatically-show-loader-for-http-requests) for more details diff --git a/package.json b/package.json index af8991e..e4689fb 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "prettier": "prettier --write \"**/*.{scss,ts,component.html}\"", "start": "ng serve", "build": "ng build ngx-ui-loader --prod && ng build --prod", - "build:lib": "ng build ngx-ui-loader --prod && cp README.md CHANGELOG.md LICENSE ./dist/ngx-ui-loader/", + "build:lib": "ng build ngx-ui-loader --prod && cp README.md CHANGELOG.md ./dist/ngx-ui-loader/", "build:schematics": "cd projects/ngx-ui-loader && npm run build && cd ../..", "test": "ng test ngx-ui-loader --code-coverage", "lint": "ng lint", diff --git a/projects/ngx-ui-loader/src/lib/core/ngx-ui-loader-blurred.directive.ts b/projects/ngx-ui-loader/src/lib/core/ngx-ui-loader-blurred.directive.ts index b530a1d..e7f6877 100644 --- a/projects/ngx-ui-loader/src/lib/core/ngx-ui-loader-blurred.directive.ts +++ b/projects/ngx-ui-loader/src/lib/core/ngx-ui-loader-blurred.directive.ts @@ -3,30 +3,19 @@ import { Subscription } from 'rxjs'; import { filter } from 'rxjs/operators'; import { NgxUiLoaderService } from './ngx-ui-loader.service'; -import { coerceNumber } from '../utils/functions'; import { ShowEvent } from '../utils/interfaces'; import { FOREGROUND, OVERLAY_DISAPPEAR_TIME, FAST_OVERLAY_DISAPPEAR_TIME } from '../utils/constants'; @Directive({ selector: '[ngxUiLoaderBlurred]' }) export class NgxUiLoaderBlurredDirective implements OnInit, OnDestroy { - private blurNumber: number; - - @Input() - get blur(): number { - return this.blurNumber; - } - - set blur(value: number) { - this.blurNumber = coerceNumber(value, this.loader.getDefaultConfig().blur); - } - + @Input() blur: number; @Input() loaderId: string; showForegroundWatcher: Subscription; fastFadeOut: boolean; constructor(private elementRef: ElementRef, private renderer: Renderer2, private loader: NgxUiLoaderService) { - this.blurNumber = this.loader.getDefaultConfig().blur; + this.blur = this.loader.getDefaultConfig().blur; this.loaderId = this.loader.getDefaultConfig().masterLoaderId; this.fastFadeOut = this.loader.getDefaultConfig().fastFadeOut; } @@ -39,7 +28,7 @@ export class NgxUiLoaderBlurredDirective implements OnInit, OnDestroy { .pipe(filter((showEvent: ShowEvent) => this.loaderId === showEvent.loaderId)) .subscribe(data => { if (data.isShow) { - const filterValue = `blur(${this.blurNumber}px)`; + const filterValue = `blur(${this.blur}px)`; this.renderer.setStyle(this.elementRef.nativeElement, '-webkit-filter', filterValue); this.renderer.setStyle(this.elementRef.nativeElement, 'filter', filterValue); } else { diff --git a/projects/ngx-ui-loader/src/lib/core/ngx-ui-loader.component.html b/projects/ngx-ui-loader/src/lib/core/ngx-ui-loader.component.html index cd7981d..a219604 100644 --- a/projects/ngx-ui-loader/src/lib/core/ngx-ui-loader.component.html +++ b/projects/ngx-ui-loader/src/lib/core/ngx-ui-loader.component.html @@ -43,9 +43,12 @@ [style.height.px]="fgsSize" [style.top]="spinnerTop" > -
+
+ + +
@@ -68,8 +71,11 @@ [style.color]="bgsColor" [style.opacity]="bgsOpacity" > -
+
+ + +
diff --git a/projects/ngx-ui-loader/src/lib/core/ngx-ui-loader.component.spec.ts b/projects/ngx-ui-loader/src/lib/core/ngx-ui-loader.component.spec.ts index 6ad7dbb..125c0e8 100644 --- a/projects/ngx-ui-loader/src/lib/core/ngx-ui-loader.component.spec.ts +++ b/projects/ngx-ui-loader/src/lib/core/ngx-ui-loader.component.spec.ts @@ -327,19 +327,6 @@ describe('NgxUiLoaderComponent', () => { expect(textEl.style.top).toBe('initial'); }); - it('#validate', () => { - spyOn(console, 'error'); - component.bgsPosition = 'invalid-position' as PositionType; - component.ngOnChanges({ - bgsPosition: new SimpleChange(null, component.bgsPosition, true) - }); - fixture.detectChanges(); - expect(console.error).toHaveBeenCalledWith( - `[ngx-ui-loader] - bgsPosition ("invalid-position") is invalid. ` + `Default value "${component.defaultConfig.bgsPosition}" is used.` - ); - expect(component.bgsPosition).toBe(component.defaultConfig.bgsPosition); - }); - it(`start() - 1 - condition: 0 background and 0 foreground`, () => { loaderService.start(); fixture.detectChanges(); diff --git a/projects/ngx-ui-loader/src/lib/core/ngx-ui-loader.component.ts b/projects/ngx-ui-loader/src/lib/core/ngx-ui-loader.component.ts index c97d3b0..834d23c 100644 --- a/projects/ngx-ui-loader/src/lib/core/ngx-ui-loader.component.ts +++ b/projects/ngx-ui-loader/src/lib/core/ngx-ui-loader.component.ts @@ -7,7 +7,8 @@ import { SimpleChange, OnDestroy, ChangeDetectionStrategy, - ChangeDetectorRef + ChangeDetectorRef, + TemplateRef } from '@angular/core'; import { DomSanitizer, SafeResourceUrl, SafeStyle } from '@angular/platform-browser'; import { NgxUiLoaderService } from './ngx-ui-loader.service'; @@ -16,10 +17,9 @@ import { filter } from 'rxjs/operators'; import { NgxUiLoaderConfig } from '../utils/interfaces'; import { DirectionType, PositionType, SpinnerType } from '../utils/types'; -import { POSITION, PB_DIRECTION, SPINNER } from '../utils/enums'; +import { POSITION } from '../utils/enums'; import { SPINNER_CONFIG } from '../utils/constants'; import { ShowEvent } from '../utils/interfaces'; -import { coerceNumber } from '../utils/functions'; @Component({ selector: 'ngx-ui-loader', @@ -32,10 +32,12 @@ export class NgxUiLoaderComponent implements OnChanges, OnDestroy, OnInit { @Input() bgsOpacity: number; @Input() bgsPosition: PositionType; @Input() bgsSize: number; + @Input() bgsTemplate: TemplateRef; @Input() bgsType: SpinnerType; @Input() fgsColor: string; @Input() fgsPosition: PositionType; @Input() fgsSize: number; + @Input() fgsTemplate: TemplateRef; @Input() fgsType: SpinnerType; @Input() gap: number; @Input() loaderId: string; @@ -116,12 +118,8 @@ export class NgxUiLoaderComponent implements OnChanges, OnDestroy, OnInit { this.ngxService.bindLoaderData(this.loaderId); this.determinePositions(); - this.bgsPosition = this.validate('bgsPosition', this.bgsPosition, POSITION, this.defaultConfig.bgsPosition) as PositionType; - this.trustedLogoUrl = this.domSanitizer.bypassSecurityTrustResourceUrl(this.logoUrl); - this.pbDirection = this.validate('pbDirection', this.pbDirection, PB_DIRECTION, this.defaultConfig.pbDirection) as DirectionType; - this.showForegroundWatcher = this.ngxService.showForeground$ .pipe(filter((showEvent: ShowEvent) => this.loaderId === showEvent.loaderId)) .subscribe(data => { @@ -161,42 +159,24 @@ export class NgxUiLoaderComponent implements OnChanges, OnDestroy, OnInit { } const bgsTypeChange: SimpleChange = changes.bgsType; - const bgsPositionChange: SimpleChange = changes.bgsPosition; const fgsTypeChange: SimpleChange = changes.fgsType; - const loaderIdChange: SimpleChange = changes.loaderId; const logoUrlChange: SimpleChange = changes.logoUrl; - const pbDirectionChange: SimpleChange = changes.pbDirection; if (fgsTypeChange || bgsTypeChange) { this.initializeSpinners(); } - if (loaderIdChange) { - this.ngxService.updateLoaderId(loaderIdChange.previousValue, this.loaderId); - } - this.determinePositions(); - if (bgsPositionChange) { - this.bgsPosition = this.validate('bgsPosition', this.bgsPosition, POSITION, this.defaultConfig.bgsPosition) as PositionType; - } - if (logoUrlChange) { this.trustedLogoUrl = this.domSanitizer.bypassSecurityTrustResourceUrl(this.logoUrl); } - - if (pbDirectionChange) { - this.pbDirection = this.validate('pbDirection', this.pbDirection, PB_DIRECTION, this.defaultConfig.pbDirection) as DirectionType; - } } /** * Initialize spinners */ private initializeSpinners(): void { - this.fgsType = this.validate('fgsType', this.fgsType, SPINNER, this.defaultConfig.fgsType) as SpinnerType; - this.bgsType = this.validate('bgsType', this.bgsType, SPINNER, this.defaultConfig.bgsType) as SpinnerType; - this.fgDivs = Array(SPINNER_CONFIG[this.fgsType].divs).fill(1); this.fgSpinnerClass = SPINNER_CONFIG[this.fgsType].class; this.bgDivs = Array(SPINNER_CONFIG[this.bgsType].divs).fill(1); @@ -207,11 +187,6 @@ export class NgxUiLoaderComponent implements OnChanges, OnDestroy, OnInit { * Determine the positions of spinner, logo and text */ private determinePositions(): void { - this.fgsPosition = this.validate('fgsPosition', this.fgsPosition, POSITION, this.defaultConfig.fgsPosition) as PositionType; - this.logoPosition = this.validate('logoPosition', this.logoPosition, POSITION, this.defaultConfig.logoPosition) as PositionType; - this.textPosition = this.validate('textPosition', this.textPosition, POSITION, this.defaultConfig.textPosition) as PositionType; - this.gap = coerceNumber(this.gap, this.defaultConfig.gap); - this.logoTop = 'initial'; this.spinnerTop = 'initial'; this.textTop = 'initial'; @@ -267,18 +242,6 @@ export class NgxUiLoaderComponent implements OnChanges, OnDestroy, OnInit { } } - private validate(inputName: string, value: string, validTypeObj: {}, fallbackValue: string): string { - if ( - Object.keys(validTypeObj) - .map(k => validTypeObj[k]) - .findIndex(v => v === value) === -1 - ) { - console.error(`[ngx-ui-loader] - ${inputName} ("${value}") is invalid. ` + `Default value "${fallbackValue}" is used.`); - return fallbackValue; - } - return value; - } - /** * On destroy event */ diff --git a/projects/ngx-ui-loader/src/lib/core/ngx-ui-loader.service.spec.ts b/projects/ngx-ui-loader/src/lib/core/ngx-ui-loader.service.spec.ts index cff880f..8a407f5 100644 --- a/projects/ngx-ui-loader/src/lib/core/ngx-ui-loader.service.spec.ts +++ b/projects/ngx-ui-loader/src/lib/core/ngx-ui-loader.service.spec.ts @@ -76,19 +76,16 @@ describe(`NgxUiLoaderService (no loader)`, () => { }); it(`#getLoader('${NOT_EXISTING_LOADER_ID}')`, () => { - expect(() => { - loaderService.getLoader(NOT_EXISTING_LOADER_ID); - }).toThrowError(`[ngx-ui-loader] - loaderId "${NOT_EXISTING_LOADER_ID}" does not exist.`); + expect(loaderService.getLoader(NOT_EXISTING_LOADER_ID)).toEqual(null); }); - it(`#getLoader()`, () => { - expect(() => { - loaderService.getLoader(); - }).toThrowError(`[ngx-ui-loader] - The master loader does not exist.`); + expect(loaderService.getLoader()).toEqual(null); }); it(`#bindLoaderData('${DEFAULT_MASTER_LOADER_ID}') - 1 - should not throw any error`, () => { - loaderService.bindLoaderData(DEFAULT_MASTER_LOADER_ID); + expect(() => { + loaderService.bindLoaderData(DEFAULT_MASTER_LOADER_ID); + }).not.toThrowError(`[ngx-ui-loader] - loaderId "${LOADER_ID_01}" is duplicated.`); expect(loaderService.getLoaders()[DEFAULT_MASTER_LOADER_ID]).toEqual({ loaderId: DEFAULT_MASTER_LOADER_ID, tasks: {}, @@ -118,10 +115,7 @@ describe(`NgxUiLoaderService (no loader)`, () => { loaderService.bindLoaderData(DEFAULT_MASTER_LOADER_ID); expect(() => { loaderService.bindLoaderData(DEFAULT_MASTER_LOADER_ID); - }).toThrowError( - `[ngx-ui-loader] - The master loader has already existed. ` + - `The app should have only one master loader and it should be placed in the root app template` - ); + }).toThrowError(`[ngx-ui-loader] - loaderId "${DEFAULT_MASTER_LOADER_ID}" is duplicated.`); }); it(`#bindLoaderData('${LOADER_ID_01}') - 5 - should not throw any error`, () => { @@ -135,59 +129,6 @@ describe(`NgxUiLoaderService (no loader)`, () => { }); }); - it(`#updateLoaderId('${NOT_EXISTING_LOADER_ID}', '${LOADER_ID_01}') - 1 - should throw not exist loaderId error`, () => { - expect(() => { - loaderService.updateLoaderId(NOT_EXISTING_LOADER_ID, LOADER_ID_01); - }).toThrowError(`[ngx-ui-loader] - loaderId "${NOT_EXISTING_LOADER_ID}" does not exist.`); - }); - - it(`#updateLoaderId('${LOADER_ID_01}', '${EXISTING_LOADER_ID}') - 2 - should throw duplicated loaderId error`, () => { - loaderService.bindLoaderData(LOADER_ID_01); - loaderService.bindLoaderData(EXISTING_LOADER_ID); - expect(() => { - loaderService.updateLoaderId(LOADER_ID_01, EXISTING_LOADER_ID); - }).toThrowError(`[ngx-ui-loader] - loaderId "${EXISTING_LOADER_ID}" is duplicated.`); - }); - - it(`#updateLoaderId('${DEFAULT_MASTER_LOADER_ID}', '${LOADER_ID_01}') - 3 - should print a warning`, () => { - loaderService.bindLoaderData(DEFAULT_MASTER_LOADER_ID); - loaderService.updateLoaderId(DEFAULT_MASTER_LOADER_ID, LOADER_ID_01); - expect(console.warn).toHaveBeenCalledWith( - `[ngx-ui-loader] - Cannot change loaderId of master loader. The current ` + - `master's loaderId is "${DEFAULT_MASTER_LOADER_ID}". If you really want to ` + - `change it, please use NgxUiLoaderModule.forRoot() method.` - ); - expect(loaderService.getLoaders()[DEFAULT_MASTER_LOADER_ID]).toEqual({ - loaderId: DEFAULT_MASTER_LOADER_ID, - tasks: {}, - isMaster: IS_MASTER, - isBound: IS_BOUND - }); - }); - - it(`#updateLoaderId('${LOADER_ID_01}', '${LOADER_ID_01}') - 4 - should not throw any error`, () => { - loaderService.bindLoaderData(LOADER_ID_01); - loaderService.updateLoaderId(LOADER_ID_01, LOADER_ID_01); - expect(loaderService.getLoaders()[LOADER_ID_01]).toEqual({ - loaderId: LOADER_ID_01, - tasks: {}, - isMaster: !IS_MASTER, - isBound: IS_BOUND - }); - }); - - it(`#updateLoaderId('${EXISTING_LOADER_ID}', '${LOADER_ID_01}') - 4 - should not throw any error`, () => { - loaderService.bindLoaderData(EXISTING_LOADER_ID); - loaderService.updateLoaderId(EXISTING_LOADER_ID, LOADER_ID_01); - expect(loaderService.getLoaders()[LOADER_ID_01]).toEqual({ - loaderId: LOADER_ID_01, - tasks: {}, - isMaster: !IS_MASTER, - isBound: IS_BOUND - }); - expect(loaderService.getLoaders()[EXISTING_LOADER_ID]).toBeUndefined(); - }); - it(`#destroyLoaderData('${EXISTING_LOADER_ID}') - 1 - existing loader is not master loader`, () => { loaderService.bindLoaderData(EXISTING_LOADER_ID); loaderService.destroyLoaderData(EXISTING_LOADER_ID); @@ -202,9 +143,8 @@ describe(`NgxUiLoaderService (no loader)`, () => { it(`#destroyLoaderData('${NOT_EXISTING_LOADER_ID}')`, () => { loaderService.bindLoaderData(DEFAULT_MASTER_LOADER_ID); - expect(() => { - loaderService.destroyLoaderData(NOT_EXISTING_LOADER_ID); - }).toThrowError(`[ngx-ui-loader] - loaderId "${NOT_EXISTING_LOADER_ID}" does not exist.`); + loaderService.destroyLoaderData(NOT_EXISTING_LOADER_ID); + expect(console.warn).toHaveBeenCalledWith(`[ngx-ui-loader] - loaderId "${NOT_EXISTING_LOADER_ID}" does not exist.`); }); }); @@ -617,10 +557,9 @@ describe(`NgxUiLoaderService (loaderId == ${DEFAULT_MASTER_LOADER_ID})`, () => { expect(Object.keys(loader.tasks).every(id => loader.tasks[id].isForeground === false)).toEqual(true); }); - it(`#stopLoader('${NOT_EXISTING_LOADER_ID}') - 1 - should not throw any error`, () => { - expect(() => { - loaderService.stopLoader(NOT_EXISTING_LOADER_ID); - }).toThrowError(`[ngx-ui-loader] - loaderId "${NOT_EXISTING_LOADER_ID}" does not exist.`); + it(`#stopLoader('${NOT_EXISTING_LOADER_ID}') - 1 - should print not-exist-loaderid warning`, () => { + loaderService.stopLoader(NOT_EXISTING_LOADER_ID); + expect(console.warn).toHaveBeenCalledWith(`[ngx-ui-loader] - loaderId "${NOT_EXISTING_LOADER_ID}" does not exist.`); }); it(`#stopLoader('${DEFAULT_MASTER_LOADER_ID}') - 2 - not exist task id`, () => { @@ -690,11 +629,10 @@ describe(`NgxUiLoaderService (loaderId == ${DEFAULT_MASTER_LOADER_ID})`, () => { tick(END_TIME); })); - it(`#stop() - 0 - should throw not exist master loader error`, () => { + it(`#stop() - 0 - should print not exist master loader warning`, () => { loaderService.destroyLoaderData(DEFAULT_MASTER_LOADER_ID); - expect(() => { - loaderService.stop(); - }).toThrowError(`[ngx-ui-loader] - loaderId "${DEFAULT_MASTER_LOADER_ID}" does not exist.`); + loaderService.stop(); + expect(console.warn).toHaveBeenCalledWith(`[ngx-ui-loader] - loaderId "${DEFAULT_MASTER_LOADER_ID}" does not exist.`); }); it(`#stop() - 1 - should work correctly`, fakeAsync(() => { @@ -714,10 +652,9 @@ describe(`NgxUiLoaderService (loaderId == ${DEFAULT_MASTER_LOADER_ID})`, () => { tick(END_TIME); })); - it(`#stopBackgroundLoader('${NOT_EXISTING_LOADER_ID}') - 1 - should not throw any error`, () => { - expect(() => { - loaderService.stopBackgroundLoader(NOT_EXISTING_LOADER_ID); - }).toThrowError(`[ngx-ui-loader] - loaderId "${NOT_EXISTING_LOADER_ID}" does not exist.`); + it(`#stopBackgroundLoader('${NOT_EXISTING_LOADER_ID}') - 1 - should print not-existing-loaderId warning`, () => { + loaderService.stopBackgroundLoader(NOT_EXISTING_LOADER_ID); + expect(console.warn).toHaveBeenCalledWith(`[ngx-ui-loader] - loaderId "${NOT_EXISTING_LOADER_ID}" does not exist.`); }); it(`#stopBackgroundLoader('${DEFAULT_MASTER_LOADER_ID}') - 2 - not exist task id`, () => { @@ -756,11 +693,10 @@ describe(`NgxUiLoaderService (loaderId == ${DEFAULT_MASTER_LOADER_ID})`, () => { tick(END_TIME); })); - it(`#stopBackground() - 0 - should throw not exist master loader error`, () => { + it(`#stopBackground() - 0 - should print not-exist-master-loader warning`, () => { loaderService.destroyLoaderData(DEFAULT_MASTER_LOADER_ID); - expect(() => { - loaderService.stopBackground(); - }).toThrowError(`[ngx-ui-loader] - loaderId "${DEFAULT_MASTER_LOADER_ID}" does not exist.`); + loaderService.stopBackground(); + expect(console.warn).toHaveBeenCalledWith(`[ngx-ui-loader] - loaderId "${DEFAULT_MASTER_LOADER_ID}" does not exist.`); }); it(`#stopBackground() - 1 - should work correctly`, fakeAsync(() => { @@ -779,10 +715,9 @@ describe(`NgxUiLoaderService (loaderId == ${DEFAULT_MASTER_LOADER_ID})`, () => { tick(END_TIME); })); - it(`#stopAllLoader('${NOT_EXISTING_LOADER_ID}') - 1 - should not throw any error`, () => { - expect(() => { - loaderService.stopAllLoader(NOT_EXISTING_LOADER_ID); - }).toThrowError(`[ngx-ui-loader] - loaderId "${NOT_EXISTING_LOADER_ID}" does not exist.`); + it(`#stopAllLoader('${NOT_EXISTING_LOADER_ID}') - 1 - should print warning message`, () => { + loaderService.stopAllLoader(NOT_EXISTING_LOADER_ID); + expect(console.warn).toHaveBeenCalledWith(`[ngx-ui-loader] - loaderId "${NOT_EXISTING_LOADER_ID}" does not exist.`); }); it(`#stopAllLoader('${DEFAULT_MASTER_LOADER_ID}') - 2 - should work correctly`, () => { @@ -944,11 +879,10 @@ describe(`NgxUiLoaderService (loaderId == ${DEFAULT_MASTER_LOADER_ID})`, () => { tick(END_TIME); })); - it(`#stopAll() - 0 - should throw not exist master loader error`, () => { + it(`#stopAll() - 0 - should print not-exist-master-loader warning`, () => { loaderService.destroyLoaderData(DEFAULT_MASTER_LOADER_ID); - expect(() => { - loaderService.stopAll(); - }).toThrowError(`[ngx-ui-loader] - loaderId "${DEFAULT_MASTER_LOADER_ID}" does not exist.`); + loaderService.stopAll(); + expect(console.warn).toHaveBeenCalledWith(`[ngx-ui-loader] - loaderId "${DEFAULT_MASTER_LOADER_ID}" does not exist.`); }); it(`#stopAll() - 1 - should work correctly`, () => { diff --git a/projects/ngx-ui-loader/src/lib/core/ngx-ui-loader.service.ts b/projects/ngx-ui-loader/src/lib/core/ngx-ui-loader.service.ts index 32a698a..2f0d0ad 100644 --- a/projects/ngx-ui-loader/src/lib/core/ngx-ui-loader.service.ts +++ b/projects/ngx-ui-loader/src/lib/core/ngx-ui-loader.service.ts @@ -81,15 +81,11 @@ export class NgxUiLoaderService { * @docs-private */ bindLoaderData(loaderId: string): void { - let isMaster = false; - if (loaderId === this.defaultConfig.masterLoaderId) { - this.throwErrorIfMasterLoaderExists(true); - isMaster = true; - } else { - // not master loader - this.throwErrorIfLoaderExists(loaderId, true); - } + const isMaster = loaderId === this.defaultConfig.masterLoaderId; if (this.loaders[loaderId]) { + if (this.loaders[loaderId].isBound) { + throw new Error(`[ngx-ui-loader] - loaderId "${loaderId}" is duplicated.`); + } this.loaders[loaderId].isBound = true; this.loaders[loaderId].isMaster = isMaster; // emit showEvent after data loader is bound @@ -105,32 +101,6 @@ export class NgxUiLoaderService { } } - /** - * For internal use only. - * @docs-private - */ - updateLoaderId(loaderId: string, newLoaderId: string): void { - this.throwErrorIfLoaderNotExist(loaderId); - if (this.loaders[loaderId].loaderId === this.defaultConfig.masterLoaderId) { - console.warn( - `[ngx-ui-loader] - Cannot change loaderId of master loader. The current ` + - `master's loaderId is "${this.defaultConfig.masterLoaderId}". If you really want to ` + - `change it, please use NgxUiLoaderModule.forRoot() method.` - ); - return; - } - if (newLoaderId !== loaderId) { - this.throwErrorIfLoaderExists(newLoaderId, true); - this.loaders[newLoaderId] = { - loaderId: newLoaderId, - tasks: { ...this.loaders[loaderId].tasks }, - isMaster: false, - isBound: this.loaders[loaderId].isBound - }; - delete this.loaders[loaderId]; - } - } - /** * For internal use only. * @docs-private @@ -156,16 +126,15 @@ export class NgxUiLoaderService { } /** - * Get data of a specified loader. If loaderId is not provided, it will return data of master loader(if existed) + * Get data of a specified loader. If loaderId is not provided, it will return data of + * master loader(if existed). Otherwise null is returned. */ getLoader(loaderId?: string): Loader { - if (loaderId) { - this.throwErrorIfLoaderNotExist(loaderId); - } else { - this.throwErrorIfMasterLoaderNotExist(); - loaderId = this.defaultConfig.masterLoaderId; + loaderId = loaderId ? loaderId : this.defaultConfig.masterLoaderId; + if (this.loaders[loaderId]) { + return JSON.parse(JSON.stringify(this.loaders[loaderId])); } - return JSON.parse(JSON.stringify(this.loaders[loaderId])); + return null; } /** @@ -289,7 +258,10 @@ export class NgxUiLoaderService { * @param loaderId the loader Id */ stopAllLoader(loaderId: string): void { - this.throwErrorIfLoaderNotExist(loaderId); + if (!this.loaders[loaderId]) { + console.warn(`[ngx-ui-loader] - loaderId "${loaderId}" does not exist.`); + return; + } if (this.hasRunningTask(FOREGROUND, loaderId)) { this.foregroundCloseout(loaderId); this.showForeground.next({ loaderId, isShow: false }); @@ -323,49 +295,6 @@ export class NgxUiLoaderService { } } - /** - * Throw error if the loaderId does not exist. - * @docs-private - */ - private throwErrorIfLoaderNotExist(loaderId: string): void { - if (!this.loaders[loaderId]) { - throw new Error(`[ngx-ui-loader] - loaderId "${loaderId}" does not exist.`); - } - } - - /** - * Throw error if the loaderId has already existed. - * @docs-private - */ - private throwErrorIfLoaderExists(loaderId: string, useIsBoundProp?: boolean): void { - if (this.loaders[loaderId] && this.loaders[loaderId].isBound && useIsBoundProp) { - throw new Error(`[ngx-ui-loader] - loaderId "${loaderId}" is duplicated.`); - } - } - - /** - * Throw error if the master loader has already existed. - * @docs-private - */ - private throwErrorIfMasterLoaderExists(useIsBoundProp?: boolean): void { - if (this.loaders[this.defaultConfig.masterLoaderId] && this.loaders[this.defaultConfig.masterLoaderId].isBound && useIsBoundProp) { - throw new Error( - `[ngx-ui-loader] - The master loader has already existed. ` + - `The app should have only one master loader and it should be placed in the root app template` - ); - } - } - - /** - * Throw error if the master loader does not exist. - * @docs-private - */ - private throwErrorIfMasterLoaderNotExist(): void { - if (!this.loaders[this.defaultConfig.masterLoaderId]) { - throw new Error(`[ngx-ui-loader] - The master loader does not exist.`); - } - } - /** * Manage to close foreground loading * @docs-private @@ -481,7 +410,10 @@ export class NgxUiLoaderService { * @docs-private */ private readyToStop(loaderId: string, taskId: string): boolean { - this.throwErrorIfLoaderNotExist(loaderId); + if (!this.loaders[loaderId]) { + console.warn(`[ngx-ui-loader] - loaderId "${loaderId}" does not exist.`); + return false; + } const task: Task = this.loaders[loaderId].tasks[taskId]; if (!task) { return false; diff --git a/projects/ngx-ui-loader/src/lib/utils/functions.spec.ts b/projects/ngx-ui-loader/src/lib/utils/functions.spec.ts index acb1a99..a566a79 100644 --- a/projects/ngx-ui-loader/src/lib/utils/functions.spec.ts +++ b/projects/ngx-ui-loader/src/lib/utils/functions.spec.ts @@ -1,18 +1,10 @@ -import { coerceNumber, getExcludeObj, isIgnored } from './functions'; +import { getExcludeObj, isIgnored } from './functions'; import { Config } from './interfaces'; describe('functions', () => { const excludeStrings = ['/api/not/show', 'https://www.domain.com/not/show']; const excludeRegexps = [new RegExp('/Api/not/Show/path$', 'i'), new RegExp('^https://www.domain.com/Not/show', 'i')]; - it('coerceNumber(12, 10) should return 12', () => { - expect(coerceNumber(12, 10)).toEqual(12); - }); - - it(`coerceNumber('abc', 10) should return 10`, () => { - expect(coerceNumber('abc', 10)).toEqual(10); - }); - it('getExclude(null) - 01', () => { expect(getExcludeObj(null)).toEqual({ strs: undefined, diff --git a/projects/ngx-ui-loader/src/lib/utils/functions.ts b/projects/ngx-ui-loader/src/lib/utils/functions.ts index 0d26cf0..e42c8ef 100644 --- a/projects/ngx-ui-loader/src/lib/utils/functions.ts +++ b/projects/ngx-ui-loader/src/lib/utils/functions.ts @@ -1,12 +1,5 @@ import { Config, Exclude } from './interfaces'; -/** - * Coerce a value (string) to a number - */ -export function coerceNumber(value, fallbackValue): number { - return !isNaN(parseFloat(value as any)) && !isNaN(Number(value)) ? Number(value) : fallbackValue; -} - export function getExcludeObj(config: Config): Exclude { let strs: string[]; let regExps: RegExp[]; diff --git a/src/app/app.component.html b/src/app/app.component.html index 48b50a2..44d3a51 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -25,8 +25,8 @@
- - DOCUMENTATION + + DOCUMENTATION @@ -61,6 +61,6 @@

NGX-UI-LOADER

MIT License
-

A fully customizable loader/spinner for angular 5 and beyond

+

A fully customizable loader/spinner for Angular application

diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 9f49a5c..136adca 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; -import { NgxUiLoaderDemoService } from './ngx-ui-loader-demo.service'; +import { DemoService } from './demo.service'; @Component({ selector: 'app-root', @@ -11,5 +11,5 @@ export class AppComponent { /** * Constructor */ - constructor(public demoService: NgxUiLoaderDemoService) {} + constructor(public demoService: DemoService) {} } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index bed4a05..dca4ddd 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -28,24 +28,25 @@ import { import { AppComponent } from './app.component'; import { FormsModule } from '@angular/forms'; -import { SpinnerDemoComponent } from './spinner-demo.component'; -import { MultiLoaderDemoComponent } from './multi-loader-demo.component'; -import { NgxUiLoaderDemoComponent } from './ngx-ui-loader-demo.component'; -import { NgxUiLoaderDemoService } from './ngx-ui-loader-demo.service'; -import { NgxUiLoaderControllerComponent } from './ngx-ui-loader-controller.component'; +import { SpinnersComponent } from './spinners/spinners.component'; +import { MultiloadersComponent } from './multiloaders/multiloaders.component'; +import { MasterConfigurationComponent } from './master-configuration/master-configuration.component'; +import { DemoService } from './demo.service'; +import { ControllerComponent } from './controller/controller.component'; +import { CustomTemplateComponent } from './custom-template/custom-template.component'; const ngxUiLoaderConfig: NgxUiLoaderConfig = { - // bgsColor: '#OOACC1', + bgsColor: 'red', // bgsOpacity: 0.5, // bgsPosition: POSITION.bottomCenter, // bgsSize: 60, // bgsType: SPINNER.rectangleBounce, - // fgsColor: '#00ACC1', + fgsColor: 'red', // fgsPosition: POSITION.centerCenter, // fgsSize: 60, // fgsType: SPINNER.chasingDots, // logoUrl: 'assets/angular.png', - // pbColor: '#FF0000', + pbColor: 'red', // pbDirection: PB_DIRECTION.leftToRight, // pbThickness: 5, // text: 'Welcome to ngx-ui-loader', @@ -57,20 +58,31 @@ const ngxUiLoaderConfig: NgxUiLoaderConfig = { const routes: Routes = [ { path: 'spinners', - component: SpinnerDemoComponent + component: SpinnersComponent }, { - path: 'multiloader', - component: MultiLoaderDemoComponent + path: 'multiloaders', + component: MultiloadersComponent + }, + { + path: 'custom-template', + component: CustomTemplateComponent }, { path: '', - component: NgxUiLoaderDemoComponent + component: MasterConfigurationComponent } ]; @NgModule({ - declarations: [AppComponent, SpinnerDemoComponent, MultiLoaderDemoComponent, NgxUiLoaderDemoComponent, NgxUiLoaderControllerComponent], + declarations: [ + AppComponent, + SpinnersComponent, + MultiloadersComponent, + MasterConfigurationComponent, + ControllerComponent, + CustomTemplateComponent + ], imports: [ BrowserModule, BrowserAnimationsModule, @@ -93,7 +105,7 @@ const routes: Routes = [ NgxUiLoaderRouterModule, // import this module for showing loader automatically when navigating between app routes NgxUiLoaderHttpModule ], - providers: [NgxUiLoaderDemoService], + providers: [DemoService], bootstrap: [AppComponent] }) export class AppModule {} diff --git a/src/app/ngx-ui-loader-controller.component.html b/src/app/controller/controller.component.html similarity index 100% rename from src/app/ngx-ui-loader-controller.component.html rename to src/app/controller/controller.component.html diff --git a/src/app/ngx-ui-loader-controller.component.scss b/src/app/controller/controller.component.scss similarity index 100% rename from src/app/ngx-ui-loader-controller.component.scss rename to src/app/controller/controller.component.scss diff --git a/src/app/ngx-ui-loader-controller.component.ts b/src/app/controller/controller.component.ts similarity index 84% rename from src/app/ngx-ui-loader-controller.component.ts rename to src/app/controller/controller.component.ts index ffedfb6..1ea8023 100644 --- a/src/app/ngx-ui-loader-controller.component.ts +++ b/src/app/controller/controller.component.ts @@ -3,11 +3,11 @@ import { Component, OnInit, OnDestroy, Input } from '@angular/core'; import { NgxUiLoaderService, Loader } from 'ngx-ui-loader'; @Component({ - selector: 'app-ngx-ui-loader-controller', - templateUrl: './ngx-ui-loader-controller.component.html', - styleUrls: ['./ngx-ui-loader-controller.component.scss'] + selector: 'app-controller', + templateUrl: './controller.component.html', + styleUrls: ['./controller.component.scss'] }) -export class NgxUiLoaderControllerComponent implements OnInit, OnDestroy { +export class ControllerComponent implements OnInit, OnDestroy { @Input() loader: Loader; timers: any[]; diff --git a/src/app/custom-template/custom-template.component.html b/src/app/custom-template/custom-template.component.html new file mode 100644 index 0000000..9befc56 --- /dev/null +++ b/src/app/custom-template/custom-template.component.html @@ -0,0 +1,39 @@ +
+
+
+
+ +
+ +
+
+
+ Back +
+
+ + +
+
+
+
+
+
+
+
+ + + +
+
+
+
+ diff --git a/src/app/custom-template/custom-template.component.scss b/src/app/custom-template/custom-template.component.scss new file mode 100644 index 0000000..b9a1ab5 --- /dev/null +++ b/src/app/custom-template/custom-template.component.scss @@ -0,0 +1,292 @@ +h2, +h3 { + font-family: Roboto, 'Heltical Neue', sans-serif; + text-align: center; + margin-bottom: 10px; +} + +.container { + position: relative; + margin: 12px; + height: 600px; +} + +.mat-elevation-z4 { + background-color: rgba(63, 81, 181, 0.3); + + &.master { + background-color: rgba(63, 81, 181, 0.6); + } +} + +mat-slider { + width: 100%; +} + +span code { + color: rgba(0, 0, 0, 0.54); + font-size: 100%; + font-weight: 700; + font-style: normal; +} + +.mat-list-item code { + font-size: 75%; +} + +.sk-chase { + width: 100px; + height: 100px; + position: relative; + animation: sk-chase 2.5s infinite linear both; +} + +.sk-chase-dot { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + animation: sk-chase-dot 2s infinite ease-in-out both; +} + +.sk-chase-dot:before { + content: ''; + display: block; + width: 25%; + height: 25%; + background-color: #f00; + border-radius: 100%; + animation: sk-chase-dot-before 2s infinite ease-in-out both; +} + +.sk-chase-dot:nth-child(1) { + animation-delay: -1.1s; +} +.sk-chase-dot:nth-child(2) { + animation-delay: -1s; +} +.sk-chase-dot:nth-child(3) { + animation-delay: -0.9s; +} +.sk-chase-dot:nth-child(4) { + animation-delay: -0.8s; +} +.sk-chase-dot:nth-child(5) { + animation-delay: -0.7s; +} +.sk-chase-dot:nth-child(6) { + animation-delay: -0.6s; +} +.sk-chase-dot:nth-child(1):before { + animation-delay: -1.1s; +} +.sk-chase-dot:nth-child(2):before { + animation-delay: -1s; +} +.sk-chase-dot:nth-child(3):before { + animation-delay: -0.9s; +} +.sk-chase-dot:nth-child(4):before { + animation-delay: -0.8s; +} +.sk-chase-dot:nth-child(5):before { + animation-delay: -0.7s; +} +.sk-chase-dot:nth-child(6):before { + animation-delay: -0.6s; +} + +@keyframes sk-chase { + 100% { + transform: rotate(360deg); + } +} + +@keyframes sk-chase-dot { + 80%, + 100% { + transform: rotate(360deg); + } +} + +@keyframes sk-chase-dot-before { + 50% { + transform: scale(0.4); + } + 100%, + 0% { + transform: scale(1); + } +} + +// Background spinner +.la-ball-clip-rotate-multiple, +.la-ball-clip-rotate-multiple > div { + position: relative; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +.la-ball-clip-rotate-multiple { + display: block; + font-size: 0; + color: #f00; +} +.la-ball-clip-rotate-multiple.la-dark { + color: #333; +} +.la-ball-clip-rotate-multiple > div { + display: inline-block; + float: none; + background-color: currentColor; + border: 0 solid currentColor; +} +.la-ball-clip-rotate-multiple { + width: 32px; + height: 32px; +} +.la-ball-clip-rotate-multiple > div { + position: absolute; + top: 50%; + left: 50%; + background: transparent; + border-style: solid; + border-width: 2px; + border-radius: 100%; + -webkit-animation: ball-clip-rotate-multiple-rotate 1s ease-in-out infinite; + -moz-animation: ball-clip-rotate-multiple-rotate 1s ease-in-out infinite; + -o-animation: ball-clip-rotate-multiple-rotate 1s ease-in-out infinite; + animation: ball-clip-rotate-multiple-rotate 1s ease-in-out infinite; +} +.la-ball-clip-rotate-multiple > div:first-child { + position: absolute; + width: 32px; + height: 32px; + border-right-color: transparent; + border-left-color: transparent; +} +.la-ball-clip-rotate-multiple > div:last-child { + width: 16px; + height: 16px; + border-top-color: transparent; + border-bottom-color: transparent; + -webkit-animation-duration: 0.5s; + -moz-animation-duration: 0.5s; + -o-animation-duration: 0.5s; + animation-duration: 0.5s; + -webkit-animation-direction: reverse; + -moz-animation-direction: reverse; + -o-animation-direction: reverse; + animation-direction: reverse; +} +.la-ball-clip-rotate-multiple.la-sm { + width: 16px; + height: 16px; +} +.la-ball-clip-rotate-multiple.la-sm > div { + border-width: 1px; +} +.la-ball-clip-rotate-multiple.la-sm > div:first-child { + width: 16px; + height: 16px; +} +.la-ball-clip-rotate-multiple.la-sm > div:last-child { + width: 8px; + height: 8px; +} +.la-ball-clip-rotate-multiple.la-2x { + width: 64px; + height: 64px; +} +.la-ball-clip-rotate-multiple.la-2x > div { + border-width: 4px; +} +.la-ball-clip-rotate-multiple.la-2x > div:first-child { + width: 64px; + height: 64px; +} +.la-ball-clip-rotate-multiple.la-2x > div:last-child { + width: 32px; + height: 32px; +} +.la-ball-clip-rotate-multiple.la-3x { + width: 96px; + height: 96px; +} +.la-ball-clip-rotate-multiple.la-3x > div { + border-width: 6px; +} +.la-ball-clip-rotate-multiple.la-3x > div:first-child { + width: 96px; + height: 96px; +} +.la-ball-clip-rotate-multiple.la-3x > div:last-child { + width: 48px; + height: 48px; +} +/* + * Animation + */ +@-webkit-keyframes ball-clip-rotate-multiple-rotate { + 0% { + -webkit-transform: translate(-50%, -50%) rotate(0deg); + transform: translate(-50%, -50%) rotate(0deg); + } + 50% { + -webkit-transform: translate(-50%, -50%) rotate(180deg); + transform: translate(-50%, -50%) rotate(180deg); + } + 100% { + -webkit-transform: translate(-50%, -50%) rotate(360deg); + transform: translate(-50%, -50%) rotate(360deg); + } +} +@-moz-keyframes ball-clip-rotate-multiple-rotate { + 0% { + -moz-transform: translate(-50%, -50%) rotate(0deg); + transform: translate(-50%, -50%) rotate(0deg); + } + 50% { + -moz-transform: translate(-50%, -50%) rotate(180deg); + transform: translate(-50%, -50%) rotate(180deg); + } + 100% { + -moz-transform: translate(-50%, -50%) rotate(360deg); + transform: translate(-50%, -50%) rotate(360deg); + } +} +@-o-keyframes ball-clip-rotate-multiple-rotate { + 0% { + -o-transform: translate(-50%, -50%) rotate(0deg); + transform: translate(-50%, -50%) rotate(0deg); + } + 50% { + -o-transform: translate(-50%, -50%) rotate(180deg); + transform: translate(-50%, -50%) rotate(180deg); + } + 100% { + -o-transform: translate(-50%, -50%) rotate(360deg); + transform: translate(-50%, -50%) rotate(360deg); + } +} +@keyframes ball-clip-rotate-multiple-rotate { + 0% { + -webkit-transform: translate(-50%, -50%) rotate(0deg); + -moz-transform: translate(-50%, -50%) rotate(0deg); + -o-transform: translate(-50%, -50%) rotate(0deg); + transform: translate(-50%, -50%) rotate(0deg); + } + 50% { + -webkit-transform: translate(-50%, -50%) rotate(180deg); + -moz-transform: translate(-50%, -50%) rotate(180deg); + -o-transform: translate(-50%, -50%) rotate(180deg); + transform: translate(-50%, -50%) rotate(180deg); + } + 100% { + -webkit-transform: translate(-50%, -50%) rotate(360deg); + -moz-transform: translate(-50%, -50%) rotate(360deg); + -o-transform: translate(-50%, -50%) rotate(360deg); + transform: translate(-50%, -50%) rotate(360deg); + } +} diff --git a/src/app/custom-template/custom-template.component.ts b/src/app/custom-template/custom-template.component.ts new file mode 100644 index 0000000..11bea4a --- /dev/null +++ b/src/app/custom-template/custom-template.component.ts @@ -0,0 +1,26 @@ +import { Component } from '@angular/core'; + +import { NgxUiLoaderService } from 'ngx-ui-loader'; + +@Component({ + selector: 'app-custom-template', + templateUrl: './custom-template.component.html', + styleUrls: ['./custom-template.component.scss'] +}) +export class CustomTemplateComponent { + loader: any; + /** + * Constructor + */ + constructor(public ngxUiLoader: NgxUiLoaderService) { + this.loader = { + hasProgressBar: true, + loaderId: 'customLoaderId', + isMaster: false, + fgsSize: 100, + bgsSize: 64, + gap: 80, + text: 'Custom Spinner' + }; + } +} diff --git a/src/app/ngx-ui-loader-demo.service.spec.ts b/src/app/demo.service.spec.ts similarity index 53% rename from src/app/ngx-ui-loader-demo.service.spec.ts rename to src/app/demo.service.spec.ts index 0774bb0..ce98592 100644 --- a/src/app/ngx-ui-loader-demo.service.spec.ts +++ b/src/app/demo.service.spec.ts @@ -1,14 +1,14 @@ import { TestBed, inject } from '@angular/core/testing'; import { NgxUiLoaderService } from 'ngx-ui-loader'; -import { NgxUiLoaderDemoService } from './ngx-ui-loader-demo.service'; +import { DemoService } from './demo.service'; describe('NgxUiLoaderDemoService', () => { beforeEach(() => { TestBed.configureTestingModule({ - providers: [NgxUiLoaderService, NgxUiLoaderDemoService] + providers: [NgxUiLoaderService, DemoService] }); }); - it('should be created', inject([NgxUiLoaderDemoService], (service: NgxUiLoaderDemoService) => { + it('should be created', inject([DemoService], (service: DemoService) => { expect(service).toBeTruthy(); })); }); diff --git a/src/app/ngx-ui-loader-demo.service.ts b/src/app/demo.service.ts similarity index 89% rename from src/app/ngx-ui-loader-demo.service.ts rename to src/app/demo.service.ts index fc485a3..57f95ff 100644 --- a/src/app/ngx-ui-loader-demo.service.ts +++ b/src/app/demo.service.ts @@ -2,7 +2,7 @@ import { Injectable } from '@angular/core'; import { NgxUiLoaderConfig, NgxUiLoaderService } from 'ngx-ui-loader'; @Injectable() -export class NgxUiLoaderDemoService { +export class DemoService { config: NgxUiLoaderConfig; /** diff --git a/src/app/ngx-ui-loader-demo.component.html b/src/app/master-configuration/master-configuration.component.html similarity index 97% rename from src/app/ngx-ui-loader-demo.component.html rename to src/app/master-configuration/master-configuration.component.html index d3d1c01..f2ab4ac 100644 --- a/src/app/ngx-ui-loader-demo.component.html +++ b/src/app/master-configuration/master-configuration.component.html @@ -2,7 +2,7 @@
- +
ngx-ui-loader-configuration = @@ -174,7 +174,7 @@
- Multiple Loaders + Multiple Loaders @@ -182,6 +182,7 @@ Star on Github + Custom Template
diff --git a/src/app/ngx-ui-loader-demo.component.scss b/src/app/master-configuration/master-configuration.component.scss similarity index 100% rename from src/app/ngx-ui-loader-demo.component.scss rename to src/app/master-configuration/master-configuration.component.scss diff --git a/src/app/ngx-ui-loader-demo.component.ts b/src/app/master-configuration/master-configuration.component.ts similarity index 81% rename from src/app/ngx-ui-loader-demo.component.ts rename to src/app/master-configuration/master-configuration.component.ts index addac3d..443b4ce 100644 --- a/src/app/ngx-ui-loader-demo.component.ts +++ b/src/app/master-configuration/master-configuration.component.ts @@ -1,16 +1,16 @@ import { Component, OnInit } from '@angular/core'; import { NgxUiLoaderService, Loader, SPINNER, POSITION, PB_DIRECTION } from 'ngx-ui-loader'; -import { NgxUiLoaderDemoService } from './ngx-ui-loader-demo.service'; +import { DemoService } from '../demo.service'; import { HttpClient } from '@angular/common/http'; const LOGO_URL = 'assets/angular.png'; @Component({ - selector: 'app-ngx-ui-loader-demo', - templateUrl: './ngx-ui-loader-demo.component.html', - styleUrls: ['./ngx-ui-loader-demo.component.scss'] + selector: 'app-master-configuration', + templateUrl: './master-configuration.component.html', + styleUrls: ['./master-configuration.component.scss'] }) -export class NgxUiLoaderDemoComponent implements OnInit { +export class MasterConfigurationComponent implements OnInit { spinnerTypes: string[]; positions: string[]; directions: string[]; @@ -22,7 +22,7 @@ export class NgxUiLoaderDemoComponent implements OnInit { /** * Constructor */ - constructor(private ngxUiLoaderService: NgxUiLoaderService, public demoService: NgxUiLoaderDemoService, private http: HttpClient) {} + constructor(private ngxUiLoaderService: NgxUiLoaderService, public demoService: DemoService, private http: HttpClient) {} /** * On init diff --git a/src/app/multi-loader-demo.component.html b/src/app/multiloaders/multiloaders.component.html similarity index 84% rename from src/app/multi-loader-demo.component.html rename to src/app/multiloaders/multiloaders.component.html index ae59b35..ed6ae3d 100644 --- a/src/app/multi-loader-demo.component.html +++ b/src/app/multiloaders/multiloaders.component.html @@ -1,11 +1,11 @@
- +
- +