summaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2/components/loader
diff options
context:
space:
mode:
Diffstat (limited to 'catalog-ui/src/app/ng2/components/loader')
-rw-r--r--catalog-ui/src/app/ng2/components/loader/loader.component.html5
-rw-r--r--catalog-ui/src/app/ng2/components/loader/loader.component.less75
-rw-r--r--catalog-ui/src/app/ng2/components/loader/loader.component.ts92
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');
+ }
+}