diff options
author | Michael Lando <ml636r@att.com> | 2017-06-17 22:40:44 +0300 |
---|---|---|
committer | Michael Lando <ml636r@att.com> | 2017-06-18 07:20:49 +0300 |
commit | 4d97d5fac309ce0d66938e5ccd0349e2660d4e23 (patch) | |
tree | 3f921054f997d1962fa6f9db9a0119e31a851eea /catalog-ui/src/app/ng2/components/loader | |
parent | 89786d31f266a205857cae0177904c249ac6a512 (diff) |
[sdc] update code of sdc
Change-Id: If9f37c80b659cb67b34d18e6c019defecca58b9a
Signed-off-by: Michael Lando <ml636r@att.com>
Diffstat (limited to 'catalog-ui/src/app/ng2/components/loader')
-rw-r--r-- | catalog-ui/src/app/ng2/components/loader/loader.component.ts | 94 |
1 files changed, 38 insertions, 56 deletions
diff --git a/catalog-ui/src/app/ng2/components/loader/loader.component.ts b/catalog-ui/src/app/ng2/components/loader/loader.component.ts index 4d90b2853d..4af92eca24 100644 --- a/catalog-ui/src/app/ng2/components/loader/loader.component.ts +++ b/catalog-ui/src/app/ng2/components/loader/loader.component.ts @@ -11,72 +11,28 @@ export class LoaderComponent { @Input() display:boolean; @Input() size:string;// small || medium || large - @Input() elementSelector:string; // required if is relative true - @Input() relative:boolean; - - interval; + @Input() relative: boolean; + @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. + constructor (private el: ElementRef, private renderer: Renderer){ } ngOnInit() { - - if (this.elementSelector) { - let elemParent = angular.element(this.elementSelector); - let positionStyle:string = elemParent.css('position'); - this.setStyle(positionStyle); - } - - if (this.relative === true) { - let positionStyle:string = this.el.nativeElement.parentElement.style.position; - this.setStyle(positionStyle); - } if (!this.size) { this.size = 'large'; } - } - - ngOnDestroy(){ - clearInterval(this.interval); - } - - calculateSizesForFixPosition = (positionStyle:string):void => { - // This is problematic, I do not want to change the parent position. - // set the loader on all the screen - let parentLeft = this.el.nativeElement.parentElement.offsetLeft; - let parentTop = this.el.nativeElement.parentElement.offsetTop; - let parentWidth = this.el.nativeElement.parentElement.offsetWidth; - let parentHeight = this.el.nativeElement.parentElement.offsetHeight; - this.renderer.setElementStyle(this.el.nativeElement, 'position', positionStyle); - this.renderer.setElementStyle(this.el.nativeElement, 'top', parentTop); - this.renderer.setElementStyle(this.el.nativeElement, 'left', parentLeft); - this.renderer.setElementStyle(this.el.nativeElement, 'width', parentWidth); - this.renderer.setElementStyle(this.el.nativeElement, 'height', parentHeight); - }; - - setStyle = (positionStyle:string):void => { - - switch (positionStyle) { - case 'absolute': - case 'fixed': - // The parent size is not set yet, still loading, so need to use interval to update the size. - this.interval = window.setInterval(()=> { - this.calculateSizesForFixPosition(positionStyle); - }, 2000); - break; - default: - // Can change the parent position to relative without causing style issues. - this.renderer.setElementStyle(this.el.nativeElement.parentElement,'position', 'relative'); - break; + if (this.display === true) { + this.changeLoaderDisplay(true); } - }; + } ngOnChanges(changes: SimpleChanges) { if(changes.display){ - this.changeLoaderDisplay(false); - if ( this.display ) { - window.setTimeout(():void => { - this.changeLoaderDisplay(true); + if (this.display) { + this.changeLoaderDisplay(false); //display is set to true, so loader will appear unless we explicitly tell it not to. + window.setTimeout((): void => { + this.display && this.changeLoaderDisplay(true); //only show loader if we still need to display it. }, 500); } else { window.setTimeout(():void => { @@ -86,7 +42,33 @@ export class LoaderComponent { } } - changeLoaderDisplay = (display:boolean):void => { - this.renderer.setElementStyle(this.el.nativeElement, 'display', display ? 'block' : 'none'); + changeLoaderDisplay = (display: boolean): void => { + if (display) { + this.calculateLoaderPosition(); + this.renderer.setElementStyle(this.el.nativeElement, 'display', 'block'); + } else { + this.renderer.setElementStyle(this.el.nativeElement, 'display', 'none'); + } + } + + calculateLoaderPosition = () => { + if (this.relative === true) { // Can change the parent position to relative without causing style issues. + let parent = (this.elementSelector) ? angular.element(this.elementSelector).get(0) : this.el.nativeElement.parentElement; + this.renderer.setElementStyle(parent, 'position', 'relative'); + this.setLoaderPosition(0, 0); //will be relative to parent and appear over specified element + //TODO: DONT force parent to have position relative; set inner div's style instead of outer element + // let parentPos: ClientRect = this.el.nativeElement.parentElement.getBoundingClientRect(); + // this.setLoaderPosition(parentPos.top, parentPos.left, parentPos.width, parentPos.height); + } else { + this.setLoaderPosition(0, 0); //will appear over whole page + } } + + setLoaderPosition = (top:number, left:number, width?:number, height?:number): void => { + this.renderer.setElementStyle(this.el.nativeElement, 'position', 'absolute'); + this.renderer.setElementStyle(this.el.nativeElement, 'top', top? top.toString() : "0"); + this.renderer.setElementStyle(this.el.nativeElement, 'left', left? left.toString() : "0"); + this.renderer.setElementStyle(this.el.nativeElement, 'width', width? width.toString() : "100%"); + this.renderer.setElementStyle(this.el.nativeElement, 'height', height? height.toString() : "100%"); + }; } |