summaryrefslogtreecommitdiffstats
path: root/catalog-ui/app/scripts/directives/loader
diff options
context:
space:
mode:
authorMichael Lando <ml636r@att.com>2017-02-19 10:28:42 +0200
committerMichael Lando <ml636r@att.com>2017-02-19 10:51:01 +0200
commit451a3400b76511393c62a444f588a4ed15f4a549 (patch)
treee4f5873a863d1d3e55618eab48b83262f874719d /catalog-ui/app/scripts/directives/loader
parent5abfe4e1fb5fae4bbd5fbc340519f52075aff3ff (diff)
Initial OpenECOMP SDC commit
Change-Id: I0924d5a6ae9cdc161ae17c68d3689a30d10f407b Signed-off-by: Michael Lando <ml636r@att.com>
Diffstat (limited to 'catalog-ui/app/scripts/directives/loader')
-rw-r--r--catalog-ui/app/scripts/directives/loader/loader-directive.html4
-rw-r--r--catalog-ui/app/scripts/directives/loader/loader-directive.less74
-rw-r--r--catalog-ui/app/scripts/directives/loader/loader-directive.ts155
3 files changed, 233 insertions, 0 deletions
diff --git a/catalog-ui/app/scripts/directives/loader/loader-directive.html b/catalog-ui/app/scripts/directives/loader/loader-directive.html
new file mode 100644
index 0000000000..e40b059a57
--- /dev/null
+++ b/catalog-ui/app/scripts/directives/loader/loader-directive.html
@@ -0,0 +1,4 @@
+<div data-ng-if="display" data-tests-id="tlv-loader">
+ <div class="tlv-loader-back " data-ng-class="{'tlv-loader-relative':relative}"></div>
+ <div class="tlv-loader {{size}}"></div>
+</div>
diff --git a/catalog-ui/app/scripts/directives/loader/loader-directive.less b/catalog-ui/app/scripts/directives/loader/loader-directive.less
new file mode 100644
index 0000000000..ae0b41aab1
--- /dev/null
+++ b/catalog-ui/app/scripts/directives/loader/loader-directive.less
@@ -0,0 +1,74 @@
+.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/app/scripts/directives/loader/loader-directive.ts b/catalog-ui/app/scripts/directives/loader/loader-directive.ts
new file mode 100644
index 0000000000..77c8977ac5
--- /dev/null
+++ b/catalog-ui/app/scripts/directives/loader/loader-directive.ts
@@ -0,0 +1,155 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+/// <reference path="../../references"/>
+module Sdc.Directives {
+ 'use strict';
+ export interface ILoaderScope extends ng.IScope {
+ display: boolean; // Toggle show || hide scroll
+ size: string; // small || medium || large
+ elementSelector: string; // Jquery selector to hide and scroll inside
+ relative: boolean; // Will use the parent of <loader> element and hide it and scroll inside
+ loaderType: string;
+ }
+
+ export class LoaderDirective implements ng.IDirective {
+
+ constructor(private $templateCache: ng.ITemplateCacheService, private EventListenerService: Services.EventListenerService) {
+ }
+
+ /*
+ * relative is used when inserting the HTML loader inside some div <loader data-display="isLoading" relative="true"></loader>
+ * elementSelector when we want to pass the Jquery selector of the loader.
+ */
+ scope = {
+ display: '=',
+ size: '@?',
+ elementSelector: '@?',
+ relative: '=?',
+ loaderType: '@?'
+ };
+
+ public replace = false;
+ public restrict = 'E';
+ template = (): string => {
+ return this.$templateCache.get('/app/scripts/directives/loader/loader-directive.html');
+ };
+
+ link = (scope: ILoaderScope, element: any) => {
+
+ let interval;
+
+ this.EventListenerService.registerObserverCallback(Utils.Constants.EVENTS.SHOW_LOADER_EVENT, (loaderType)=> {
+ if (scope.loaderType !== loaderType) {
+ return;
+ }
+ scope.display = true;
+ });
+ this.EventListenerService.registerObserverCallback(Utils.Constants.EVENTS.HIDE_LOADER_EVENT, (loaderType)=> {
+ if (scope.loaderType !== loaderType) {
+ return;
+ }
+ scope.display = false;
+ });
+
+ let calculateSizesForFixPosition = (positionStyle: string): void => {
+ // This is problematic, I do not want to change the parent position.
+ // set the loader on all the screen
+ let parentPosition = element.parent().position();
+ let parentWidth = element.parent().width();
+ let parentHeight = element.parent().height();
+ element.css('position', positionStyle);
+ element.css('top', parentPosition.top);
+ element.css('left', parentPosition.left);
+ element.css('width', parentWidth);
+ element.css('height', parentHeight);
+ };
+
+ let 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.
+ interval = window.setInterval(()=> {
+ calculateSizesForFixPosition(positionStyle);
+ }, 2000);
+ break;
+ default:
+ // Can change the parent position to relative without causing style issues.
+ element.parent().css('position', 'relative');
+ break;
+ }
+ };
+
+ // This should be executed after the dom loaded
+ window.setTimeout((): void => {
+
+ element.css('display', 'none');
+
+ if (scope.elementSelector) {
+ let elemParent = angular.element(scope.elementSelector);
+ let positionStyle: string = elemParent.css('position');
+ setStyle(positionStyle);
+ }
+
+ if (scope.relative === true) {
+ let positionStyle: string = element.parent().css('position');
+ setStyle(positionStyle);
+ }
+
+ if (!scope.size) {
+ scope.size = 'large';
+ }
+
+ }, 0);
+
+ if (scope.elementSelector) {
+
+ }
+
+ function cleanUp() {
+ clearInterval(interval);
+ }
+
+ scope.$watch("display", (newVal, oldVal) => {
+ element.css('display', 'none');
+ if (newVal === true) {
+ window.setTimeout((): void => {
+ element.css('display', 'block');
+ }, 500);
+ } else {
+ window.setTimeout((): void => {
+ element.css('display', 'none');
+ }, 0);
+ }
+ });
+
+ scope.$on('$destroy', cleanUp);
+
+ };
+
+ public static factory = ($templateCache: ng.ITemplateCacheService, EventListenerService: Services.EventListenerService)=> {
+ return new LoaderDirective($templateCache, EventListenerService);
+ };
+
+ }
+
+ LoaderDirective.factory.$inject = ['$templateCache', 'EventListenerService'];
+}