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

   1 /*-
   2  * ============LICENSE_START=======================================================
   3  * SDC
   4  * ================================================================================
   5  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
   6  * ================================================================================
   7  * Licensed under the Apache License, Version 2.0 (the "License");
   8  * you may not use this file except in compliance with the License.
   9  * You may obtain a copy of the License at
  10  *
  11  *      http://www.apache.org/licenses/LICENSE-2.0
  12  *
  13  * Unless required by applicable law or agreed to in writing, software
  14  * distributed under the License is distributed on an "AS IS" BASIS,
  15  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16  * See the License for the specific language governing permissions and
  17  * limitations under the License.
  18  * ============LICENSE_END=========================================================
  19  */
  20
  21 /**
  22  * Created by rc2122 on 6/6/2017.
  23  */
  24 import { Component, Input, ViewContainerRef, SimpleChanges} from "@angular/core";
  25 @Component({
  26     selector: 'loader',
  27     templateUrl: './loader.component.html',
  28     styleUrls: ['./loader.component.less']
  29 })
  30 export class LoaderComponent {
  31
  32     @Input() display: boolean;
  33     @Input() size: string;// small || medium || large
  34     @Input() relative: boolean; // If is relative is set to true, loader will appear over parent element. Otherwise, will be fixed over the entire page.
  35     @Input() loaderDelay: number; //optional - number of ms to delay loader display.
  36
  37     private isVisible: boolean = false;
  38     private offset : {
  39         top: string;
  40         left: string;
  41         width: string;
  42         height: string;
  43     };
  44
  45     constructor(private viewContainerRef: ViewContainerRef) {
  46     }
  47
  48     ngOnInit() {
  49         if (!this.size) {
  50             this.size = 'large';
  51         }
  52         if (this.display === true) {
  53             this.changeLoaderDisplay(true);
  54         }
  55     }
  56
  57     ngOnChanges(changes: SimpleChanges) {
  58         if(changes.display){
  59             this.changeLoaderDisplay(this.display);
  60         }
  61     }
  62
  63     private changeLoaderDisplay = (display: boolean): void => {
  64         if (display) {
  65             window.setTimeout((): void => {
  66                 this.display && this.showLoader(); //only show loader if this.display has not changed in the meanwhile.
  67             }, this.loaderDelay || 0);
  68         } else {
  69             this.isVisible = false;
  70         }
  71     }
  72
  73     private showLoader = () => {
  74         if (this.relative === true) {
  75             let parentElement = this.viewContainerRef.element.nativeElement.parentElement;
  76             this.offset = {
  77                 left: (parentElement.offsetLeft !== undefined) ? parentElement.offsetLeft + "px" : undefined,
  78                 top: (parentElement.offsetTop !== undefined) ? parentElement.offsetTop + "px" : undefined,
  79                 width: (parentElement.offsetWidth !== undefined) ? parentElement.offsetWidth + "px" : undefined,
  80                 height: (parentElement.offsetHeight !== undefined) ? parentElement.offsetHeight + "px" : undefined
  81             };
  82         } else {
  83             this.offset = {
  84                 left: '0px',
  85                 top: '0px',
  86                 width: '100%',
  87                 height: '100%'
  88             }
  89         }
  90         this.isVisible = true;
  91     }
  92
  93 }