Merge pull request t-ho#4 from t-ho/dev

Added NgxUiLoaderBlurred directive

Author: t-ho

README.md

@@ -1,6 +1,6 @@
 {
   "name": "ngx-ui-loader-app",
-  "version": "1.1.9",
+  "version": "1.2.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -12,14 +12,14 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^6.0.3",
-    "@angular/cdk": "^6.2.0",
+    "@angular/cdk": "^6.2.1",
     "@angular/common": "^6.0.3",
     "@angular/compiler": "^6.0.3",
     "@angular/core": "^6.0.3",
     "@angular/flex-layout": "^6.0.0-beta.15",
     "@angular/forms": "^6.0.3",
     "@angular/http": "^6.0.3",
-    "@angular/material": "^6.2.0",
+    "@angular/material": "^6.2.1",
     "@angular/platform-browser": "^6.0.3",
     "@angular/platform-browser-dynamic": "^6.0.3",
     "@angular/router": "^6.0.3",

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "ngx-ui-loader",
   "description": "An all-in-one and fully customizable loader/spinner for Angular 5+ (5+ and 6+ are tested) applications. It supports foreground, background spinner/loader and indicative progress bar.",
-  "version": "1.1.9",
+  "version": "1.2.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/t-ho/ngx-ui-loader.git"
@@ -15,7 +15,6 @@
     "@angular/core": ">=4.4.0"
   },
   "keywords": [
-    "ngx",
     "ngx-ui-loader",
     "ngx-loader",
     "loader",

package.json

@@ -0,0 +1,8 @@
+/**
+ * Coerce a value (string) to a number
+ * @param value
+ * @param fallbackValue
+ */
+export function coerceNumber(value, fallbackValue): number {
+  return !isNaN(parseFloat(value as any)) && !isNaN(Number(value)) ? Number(value) : fallbackValue;
+}

projects/ngx-ui-loader/package.json

@@ -0,0 +1,56 @@
+import { Directive, ElementRef, Input, OnDestroy, Renderer2 } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { NgxUiLoaderService } from './ngx-ui-loader.service';
+import { coerceNumber } from './coercion';
+
+const DELAY = 500;
+
+@Directive({ selector: '[ngxUiLoaderBlurred]' })
+export class NgxUiLoaderBlurredDirective implements OnDestroy {
+
+  private _blur: number;
+  private _filterValue: string;
+
+  @Input()
+  get blur(): number {
+    return this._blur;
+  }
+
+  set blur(value: number) {
+    this._blur = coerceNumber(value, this.ngxUiLoaderService.getDefaultConfig().blur);
+  }
+
+  showForegroundWatcher: Subscription;
+
+  constructor(
+    private elementRef: ElementRef,
+    private renderer: Renderer2,
+    private ngxUiLoaderService: NgxUiLoaderService
+  ) {
+    this._blur = this.ngxUiLoaderService.getDefaultConfig().blur;
+
+    this.showForegroundWatcher = this.ngxUiLoaderService.showForeground
+      .subscribe(showForeground => {
+        if (showForeground) {
+          const filterValue = `blur(${this._blur}px)`;
+          this.renderer.setStyle(this.elementRef.nativeElement, '-webkit-filter', filterValue);
+          this.renderer.setStyle(this.elementRef.nativeElement, 'filter', filterValue);
+        } else {
+          setTimeout(() => {
+            this.renderer.setStyle(this.elementRef.nativeElement, '-webkit-filter', 'none');
+            this.renderer.setStyle(this.elementRef.nativeElement, 'filter', 'none');
+          }, DELAY);
+        }
+      });
+
+  }
+
+  /**
+   * On destroy event
+   */
+  ngOnDestroy() {
+    if (this.showForegroundWatcher) {
+      this.showForegroundWatcher.unsubscribe();
+    }
+  }
+}

projects/ngx-ui-loader/src/lib/core/coercion.ts

@@ -8,6 +8,7 @@ export interface NgxUiLoaderConfig {
   bgsOpacity?: number;
   bgsPosition?: PositionType;
   bgsSize?: number;
+  blur?: number;
   bgsType?: SpinnerType;
   fgsColor?: string;
   fgsPosition?: PositionType;

projects/ngx-ui-loader/src/lib/core/ngx-ui-loader-blurred.directive.ts

@@ -4,8 +4,9 @@ import { NgxUiLoaderService } from './ngx-ui-loader.service';
 import { Observable, Subscription } from 'rxjs';
 import { NgxUiLoaderConfig } from './ngx-ui-loader-config';
 import { DirectionType, PositionType, SpinnerType } from './ngx-ui-loader.types';
-import { NGX_POSITIONS, PB_DIRECTIONS, SPINNER_TYPES } from './ngx-ui-loader.enums';
+import { POSITION, PB_DIRECTION, SPINNER } from './ngx-ui-loader.enums';
 import { SPINNER_CONFIG } from './ngx-ui-loader.contants';
+import { coerceNumber } from './coercion';
 
 @Component({
   selector: 'ngx-ui-loader',
@@ -98,11 +99,11 @@ export class NgxUiLoaderComponent implements OnChanges, OnDestroy, OnInit {
     this.initializeSpinners();
     this.determinePositions();
 
-    this.bgsPosition = <PositionType>this.validate('bgsPosition', this.bgsPosition, NGX_POSITIONS, this.defaultConfig.bgsPosition);
+    this.bgsPosition = <PositionType>this.validate('bgsPosition', this.bgsPosition, POSITION, this.defaultConfig.bgsPosition);
 
     this.trustedLogoUrl = this.domSanitizer.bypassSecurityTrustResourceUrl(this.logoUrl);
 
-    this.pbDirection = <DirectionType>this.validate('pbDirection', this.pbDirection, PB_DIRECTIONS, this.defaultConfig.pbDirection);
+    this.pbDirection = <DirectionType>this.validate('pbDirection', this.pbDirection, PB_DIRECTION, this.defaultConfig.pbDirection);
 
     this.showForegroundWatcher = this.ngxService.showForeground
       .subscribe(data => this.showForeground = data);
@@ -140,24 +141,24 @@ export class NgxUiLoaderComponent implements OnChanges, OnDestroy, OnInit {
     this.determinePositions();
 
     if (bgsPositionChange) {
-      this.bgsPosition = <PositionType>this.validate('bgsPosition', this.bgsPosition, NGX_POSITIONS, this.defaultConfig.bgsPosition);
+      this.bgsPosition = <PositionType>this.validate('bgsPosition', this.bgsPosition, POSITION, this.defaultConfig.bgsPosition);
     }
 
     if (logoUrlChange) {
       this.trustedLogoUrl = this.domSanitizer.bypassSecurityTrustResourceUrl(this.logoUrl);
     }
 
     if (pbDirectionChange) {
-      this.pbDirection = <DirectionType>this.validate('pbDirection', this.pbDirection, PB_DIRECTIONS, this.defaultConfig.pbDirection);
+      this.pbDirection = <DirectionType>this.validate('pbDirection', this.pbDirection, PB_DIRECTION, this.defaultConfig.pbDirection);
     }
   }
 
   /**
    * Initialize spinners
    */
   private initializeSpinners() {
-    this.fgsType = <SpinnerType>this.validate('fgsType', this.fgsType, SPINNER_TYPES, this.defaultConfig.fgsType);
-    this.bgsType = <SpinnerType>this.validate('bgsType', this.bgsType, SPINNER_TYPES, this.defaultConfig.bgsType);
+    this.fgsType = <SpinnerType>this.validate('fgsType', this.fgsType, SPINNER, this.defaultConfig.fgsType);
+    this.bgsType = <SpinnerType>this.validate('bgsType', this.bgsType, SPINNER, this.defaultConfig.bgsType);
 
     this.fgDivs = Array(SPINNER_CONFIG[this.fgsType].divs).fill(1);
     this.fgSpinnerClass = SPINNER_CONFIG[this.fgsType].class;
@@ -169,10 +170,10 @@ export class NgxUiLoaderComponent implements OnChanges, OnDestroy, OnInit {
    * Determine the positions of spinner, logo and text
    */
   private determinePositions() {
-    this.fgsPosition = <PositionType>this.validate('fgsPosition', this.fgsPosition, NGX_POSITIONS, this.defaultConfig.fgsPosition);
-    this.logoPosition = <PositionType>this.validate('logoPosition', this.logoPosition, NGX_POSITIONS, this.defaultConfig.logoPosition);
-    this.textPosition = <PositionType>this.validate('textPosition', this.textPosition, NGX_POSITIONS, this.defaultConfig.textPosition);
-    this.gap = !isNaN(parseFloat(this.gap as any)) && !isNaN(Number(this.gap)) ? Number(this.gap) : 24;
+    this.fgsPosition = <PositionType>this.validate('fgsPosition', this.fgsPosition, POSITION, this.defaultConfig.fgsPosition);
+    this.logoPosition = <PositionType>this.validate('logoPosition', this.logoPosition, POSITION, this.defaultConfig.logoPosition);
+    this.textPosition = <PositionType>this.validate('textPosition', this.textPosition, POSITION, this.defaultConfig.textPosition);
+    this.gap = coerceNumber(this.gap, this.defaultConfig.gap);
 
     this.logoTop = 'initial';
     this.spinnerTop = 'initial';
@@ -197,9 +198,9 @@ export class NgxUiLoaderComponent implements OnChanges, OnDestroy, OnInit {
       this.textTop = '30px';
     }
 
-    if (this.fgsPosition === NGX_POSITIONS.centerCenter) {
-      if (this.logoUrl && this.logoPosition === NGX_POSITIONS.centerCenter) {
-        if (this.text && this.textPosition === NGX_POSITIONS.centerCenter) { // logo, spinner and text
+    if (this.fgsPosition === POSITION.centerCenter) {
+      if (this.logoUrl && this.logoPosition === POSITION.centerCenter) {
+        if (this.text && this.textPosition === POSITION.centerCenter) { // logo, spinner and text
           this.logoTop = this.domSanitizer
             .bypassSecurityTrustStyle(`calc(50% - ${this.fgsSize / 2}px - ${textSize / 2}px - ${this.gap}px)`);
           this.spinnerTop = this.domSanitizer
@@ -213,16 +214,16 @@ export class NgxUiLoaderComponent implements OnChanges, OnDestroy, OnInit {
             .bypassSecurityTrustStyle(`calc(50% + ${this.logoSize / 2}px + ${this.gap / 2}px)`);
         }
       } else {
-        if (this.text && this.textPosition === NGX_POSITIONS.centerCenter) { // spinner and text
+        if (this.text && this.textPosition === POSITION.centerCenter) { // spinner and text
           this.spinnerTop = this.domSanitizer
             .bypassSecurityTrustStyle(`calc(50% - ${textSize / 2}px - ${this.gap / 2}px)`);
           this.textTop = this.domSanitizer
             .bypassSecurityTrustStyle(`calc(50% + ${this.fgsSize / 2}px + ${this.gap / 2}px)`);
         }
       }
     } else {
-      if (this.logoUrl && this.logoPosition === NGX_POSITIONS.centerCenter
-        && this.text && this.textPosition === NGX_POSITIONS.centerCenter) { // logo and text
+      if (this.logoUrl && this.logoPosition === POSITION.centerCenter
+        && this.text && this.textPosition === POSITION.centerCenter) { // logo and text
         this.logoTop = this.domSanitizer
           .bypassSecurityTrustStyle(`calc(50% - ${textSize / 2}px - ${this.gap / 2}px)`);
         this.textTop = this.domSanitizer

projects/ngx-ui-loader/src/lib/core/ngx-ui-loader-config.ts

@@ -1,5 +1,5 @@
 import { NgxUiLoaderConfig } from './ngx-ui-loader-config';
-import { NGX_POSITIONS, PB_DIRECTIONS, SPINNER_TYPES } from './ngx-ui-loader.enums';
+import { POSITION, PB_DIRECTION, SPINNER } from './ngx-ui-loader.enums';
 
 /**
  * The configuration of spinners
@@ -101,33 +101,29 @@ export const SPINNER_CONFIG = {
 export const DEFAULT_CONFIG: NgxUiLoaderConfig = {
   bgsColor: '#00ACC1',
   bgsOpacity: 0.5,
-  bgsPosition: NGX_POSITIONS.bottomRight,
+  bgsPosition: POSITION.bottomRight,
   bgsSize: 60,
-  bgsType: SPINNER_TYPES.rectangleBounce,
+  bgsType: SPINNER.rectangleBounce,
+  blur: 5,
   fgsColor: '#00ACC1',
-  fgsPosition: NGX_POSITIONS.centerCenter,
+  fgsPosition: POSITION.centerCenter,
   fgsSize: 60,
-  fgsType: SPINNER_TYPES.rectangleBounce,
+  fgsType: SPINNER.rectangleBounce,
   gap: 24,
-  logoPosition: NGX_POSITIONS.centerCenter,
+  logoPosition: POSITION.centerCenter,
   logoSize: 120,
   logoUrl: '',
   overlayColor: 'rgba(40, 40, 40, 0.8)',
   pbColor: '#00ACC1',
-  pbDirection: PB_DIRECTIONS.leftToRight,
+  pbDirection: PB_DIRECTION.leftToRight,
   pbThickness: 5,
   text: '',
   textColor: '#FFFFFF',
-  textPosition: NGX_POSITIONS.centerCenter,
+  textPosition: POSITION.centerCenter,
   threshold: 500
 };
 
 /**
  * The default id of the loading
  */
 export const DEFAULT_ID = 'default';
-
-/**
- * The time close out a loading
- */
-export const INTERVAL = 1100;