catalog-ui/src/app/ng2/components/loader/loader.component.ts

   1 /**
   2  * Created by rc2122 on 6/6/2017.
   3  */
   4 import {Component, Input, ElementRef, Renderer, SimpleChanges} from "@angular/core";
   5 @Component({
   6     selector: 'loader',
   7     templateUrl: './loader.component.html',
   8     styleUrls: ['./loader.component.less']
   9 })
  10 export class LoaderComponent {
  11
  12     @Input() display:boolean;
  13     @Input() size:string;// small || medium || large
  14     @Input() elementSelector:string; // required if is relative true
  15     @Input() relative:boolean;
  16
  17     interval;
  18
  19     constructor (private el: ElementRef, private renderer: Renderer){
  20     }
  21
  22     ngOnInit() {
  23
  24         if (this.elementSelector) {
  25             let elemParent = angular.element(this.elementSelector);
  26             let positionStyle:string = elemParent.css('position');
  27             this.setStyle(positionStyle);
  28         }
  29
  30         if (this.relative === true) {
  31             let positionStyle:string = this.el.nativeElement.parentElement.style.position;
  32             this.setStyle(positionStyle);
  33         }
  34         if (!this.size) {
  35             this.size = 'large';
  36         }
  37     }
  38
  39     ngOnDestroy(){
  40         clearInterval(this.interval);
  41     }
  42
  43     calculateSizesForFixPosition = (positionStyle:string):void => {
  44         // This is problematic, I do not want to change the parent position.
  45         // set the loader on all the screen
  46         let parentLeft = this.el.nativeElement.parentElement.offsetLeft;
  47         let parentTop = this.el.nativeElement.parentElement.offsetTop;
  48         let parentWidth = this.el.nativeElement.parentElement.offsetWidth;
  49         let parentHeight = this.el.nativeElement.parentElement.offsetHeight;
  50         this.renderer.setElementStyle(this.el.nativeElement, 'position', positionStyle);
  51         this.renderer.setElementStyle(this.el.nativeElement, 'top', parentTop);
  52         this.renderer.setElementStyle(this.el.nativeElement, 'left', parentLeft);
  53         this.renderer.setElementStyle(this.el.nativeElement, 'width', parentWidth);
  54         this.renderer.setElementStyle(this.el.nativeElement, 'height', parentHeight);
  55     };
  56
  57     setStyle = (positionStyle:string):void => {
  58
  59         switch (positionStyle) {
  60             case 'absolute':
  61             case 'fixed':
  62                 // The parent size is not set yet, still loading, so need to use interval to update the size.
  63                 this.interval = window.setInterval(()=> {
  64                     this.calculateSizesForFixPosition(positionStyle);
  65                 }, 2000);
  66                 break;
  67             default:
  68                 // Can change the parent position to relative without causing style issues.
  69                 this.renderer.setElementStyle(this.el.nativeElement.parentElement,'position', 'relative');
  70                 break;
  71         }
  72     };
  73
  74     ngOnChanges(changes: SimpleChanges) {
  75         if(changes.display){
  76             this.changeLoaderDisplay(false);
  77             if ( this.display ) {
  78                 window.setTimeout(():void => {
  79                     this.changeLoaderDisplay(true);
  80                 }, 500);
  81             } else {
  82                 window.setTimeout(():void => {
  83                     this.changeLoaderDisplay(false);
  84                 }, 0);
  85             }
  86         }
  87     }
  88
  89     changeLoaderDisplay = (display:boolean):void => {
  90         this.renderer.setElementStyle(this.el.nativeElement, 'display', display ? 'block' : 'none');
  91     }
  92 }