diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/components/loader')
3 files changed, 172 insertions, 0 deletions
diff --git a/catalog-ui/src/app/ng2/components/loader/loader.component.html b/catalog-ui/src/app/ng2/components/loader/loader.component.html new file mode 100644 index 0000000000..0e13cee674 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/loader/loader.component.html @@ -0,0 +1,5 @@ +<div *ngIf="display" data-tests-id="tlv-loader"> + <div class="tlv-loader-back" [ngClass]="{'tlv-loader-relative':relative}"></div> + <div class="tlv-loader {{size}}"></div> +</div> + diff --git a/catalog-ui/src/app/ng2/components/loader/loader.component.less b/catalog-ui/src/app/ng2/components/loader/loader.component.less new file mode 100644 index 0000000000..054b6021a1 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/loader/loader.component.less @@ -0,0 +1,75 @@ +@import '../../../../assets/styles/variables'; +.tlv-loader-back { + background-color: @main_color_p; + position: fixed; + top: 50px; + left: 0; + right: 0; + bottom: 0; + z-index: 9999; + opacity: 0.5; +} + +.tlv-loader-relative { position: absolute; top: 0;} + +.tlv-loader { + z-index: 10002; +} + +@keyframes fadein { + from { opacity: 0; } + to { opacity: 0.8; } +} + +/* Firefox < 16 */ +@-moz-keyframes fadein { + from { opacity: 0; } + to { opacity: 0.8; } +} + +/* Safari, Chrome and Opera > 12.1 */ +@-webkit-keyframes fadein { + from { opacity: 0; } + to { opacity: 0.8; } +} + +/* Internet Explorer */ +@-ms-keyframes fadein { + from { opacity: 0; } + to { opacity: 0.8; } +} + +/* Opera < 12.1 */ +@-o-keyframes fadein { + from { opacity: 0; } + to { opacity: 0.8; } +} + +@keyframes fadeout { + from { opacity: 0.8; } + to { opacity: 0; } +} + +/* Firefox < 16 */ +@-moz-keyframes fadeout { + from { opacity: 0.8; } + to { opacity: 0; } +} + +/* Safari, Chrome and Opera > 12.1 */ +@-webkit-keyframes fadeout { + from { opacity: 0.8; } + to { opacity: 0; } +} + +/* Internet Explorer */ +@-ms-keyframes fadeout { + from { opacity: 0.8; } + to { opacity: 0; } +} + +/* Opera < 12.1 */ +@-o-keyframes fadeout { + from { opacity: 0.8; } + to { opacity: 0; } +} diff --git a/catalog-ui/src/app/ng2/components/loader/loader.component.ts b/catalog-ui/src/app/ng2/components/loader/loader.component.ts new file mode 100644 index 0000000000..4d90b2853d --- /dev/null +++ b/catalog-ui/src/app/ng2/components/loader/loader.component.ts @@ -0,0 +1,92 @@ +/** + * Created by rc2122 on 6/6/2017. + */ +import {Component, Input, ElementRef, Renderer, SimpleChanges} from "@angular/core"; +@Component({ + selector: 'loader', + templateUrl: './loader.component.html', + styleUrls: ['./loader.component.less'] +}) +export class LoaderComponent { + + @Input() display:boolean; + @Input() size:string;// small || medium || large + @Input() elementSelector:string; // required if is relative true + @Input() relative:boolean; + + interval; + + 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; + } + }; + + ngOnChanges(changes: SimpleChanges) { + if(changes.display){ + this.changeLoaderDisplay(false); + if ( this.display ) { + window.setTimeout(():void => { + this.changeLoaderDisplay(true); + }, 500); + } else { + window.setTimeout(():void => { + this.changeLoaderDisplay(false); + }, 0); + } + } + } + + changeLoaderDisplay = (display:boolean):void => { + this.renderer.setElementStyle(this.el.nativeElement, 'display', display ? 'block' : 'none'); + } +} |