From ed64b5edff15e702493df21aa3230b81593e6133 Mon Sep 17 00:00:00 2001 From: Michael Lando Date: Fri, 9 Jun 2017 03:19:04 +0300 Subject: [SDC-29] catalog 1707 rebase commit. Change-Id: I43c3dc5cf44abf5da817649bc738938a3e8388c1 Signed-off-by: Michael Lando --- .../src/app/directives/loader/loader-directive.ts | 155 +++++++++++++++++++++ 1 file changed, 155 insertions(+) create mode 100644 catalog-ui/src/app/directives/loader/loader-directive.ts (limited to 'catalog-ui/src/app/directives/loader/loader-directive.ts') diff --git a/catalog-ui/src/app/directives/loader/loader-directive.ts b/catalog-ui/src/app/directives/loader/loader-directive.ts new file mode 100644 index 0000000000..aa9c4b09c4 --- /dev/null +++ b/catalog-ui/src/app/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========================================================= + */ +'use strict'; +import {EVENTS} from "app/utils"; +import {EventListenerService} from "app/services"; + +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 element and hide it and scroll inside + loaderType:string; +} + +export class LoaderDirective implements ng.IDirective { + + constructor(private EventListenerService:EventListenerService) { + } + + /* + * relative is used when inserting the HTML loader inside some div + * 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 require('./loader-directive.html'); + } + + link = (scope:ILoaderScope, element:any) => { + + let interval; + + this.EventListenerService.registerObserverCallback(EVENTS.SHOW_LOADER_EVENT, (loaderType)=> { + if (scope.loaderType !== loaderType) { + return; + } + scope.display = true; + }); + this.EventListenerService.registerObserverCallback(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 = (EventListenerService:EventListenerService)=> { + return new LoaderDirective( EventListenerService); + }; + +} + +LoaderDirective.factory.$inject = ['EventListenerService']; -- cgit 1.2.3-korg