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() relative: boolean;
  15     @Input() elementSelector: string; // optional. If is relative is set to true, option to pass in element that loader should be relative to. Otherwise, will be relative to parent element.
  16
  17
  18     constructor (private el: ElementRef, private renderer: Renderer){
  19     }
  20
  21     ngOnInit() {
  22         if (!this.size) {
  23             this.size = 'large';
  24         }
  25         if (this.display === true) {
  26             this.changeLoaderDisplay(true);
  27         }
  28     }
  29
  30     ngOnChanges(changes: SimpleChanges) {
  31         if(changes.display){
  32             if (this.display) {
  33                 this.changeLoaderDisplay(false); //display is set to true, so loader will appear unless we explicitly tell it not to.
  34                 window.setTimeout((): void => {
  35                     this.display && this.changeLoaderDisplay(true); //only show loader if we still need to display it.
  36                 }, 500);
  37             } else {
  38                 window.setTimeout(():void => {
  39                     this.changeLoaderDisplay(false);
  40                 }, 0);
  41             }
  42         }
  43     }
  44
  45     changeLoaderDisplay = (display: boolean): void => {
  46         if (display) {
  47             this.calculateLoaderPosition();
  48             this.renderer.setElementStyle(this.el.nativeElement, 'display', 'block');
  49         } else {
  50             this.renderer.setElementStyle(this.el.nativeElement, 'display', 'none');
  51         }
  52     }
  53
  54     calculateLoaderPosition = () => {
  55         if (this.relative === true) { // Can change the parent position to relative without causing style issues.
  56             let parent = (this.elementSelector) ? angular.element(this.elementSelector).get(0) : this.el.nativeElement.parentElement;
  57             this.renderer.setElementStyle(parent, 'position', 'relative');
  58             this.setLoaderPosition(0, 0); //will be relative to parent and appear over specified element
  59             //TODO: DONT force parent to have position relative; set inner div's style instead of outer element
  60             // let parentPos: ClientRect = this.el.nativeElement.parentElement.getBoundingClientRect();
  61             // this.setLoaderPosition(parentPos.top, parentPos.left, parentPos.width, parentPos.height);
  62         } else {
  63             this.setLoaderPosition(0, 0); //will appear over whole page
  64         }
  65     }
  66
  67     setLoaderPosition = (top:number, left:number, width?:number, height?:number): void => {
  68         this.renderer.setElementStyle(this.el.nativeElement, 'position', 'absolute');
  69         this.renderer.setElementStyle(this.el.nativeElement, 'top', top? top.toString() : "0");
  70         this.renderer.setElementStyle(this.el.nativeElement, 'left', left? left.toString() : "0");
  71         this.renderer.setElementStyle(this.el.nativeElement, 'width', width? width.toString() : "100%");
  72         this.renderer.setElementStyle(this.el.nativeElement, 'height', height? height.toString() : "100%");
  73     };
  74 }