catalog-ui/src/app/directives/utils/expand-collapse/expand-collapse.ts

   1 /*-
   2  * ============LICENSE_START=======================================================
   3  * SDC
   4  * ================================================================================
   5  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
   6  * ================================================================================
   7  * Licensed under the Apache License, Version 2.0 (the "License");
   8  * you may not use this file except in compliance with the License.
   9  * You may obtain a copy of the License at
  10  *
  11  *      http://www.apache.org/licenses/LICENSE-2.0
  12  *
  13  * Unless required by applicable law or agreed to in writing, software
  14  * distributed under the License is distributed on an "AS IS" BASIS,
  15  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16  * See the License for the specific language governing permissions and
  17  * limitations under the License.
  18  * ============LICENSE_END=========================================================
  19  */
  20
  21 'use strict';
  22 export interface IExpandCollapseScope extends ng.IScope {
  23     toggle():void;
  24     collapsed:boolean;
  25     expandedSelector:string;
  26     content:string;
  27     isCloseOnInit:boolean;
  28     loadDataFunction:Function;
  29     isLoadingData:boolean;
  30 }
  31
  32 export class ExpandCollapseDirective implements ng.IDirective {
  33
  34     constructor() {
  35     }
  36
  37     scope = {
  38         expandedSelector: '@',
  39         loadDataFunction: '&?',
  40         isCloseOnInit: '=?'
  41     };
  42
  43     public replace = false;
  44     public restrict = 'AE';
  45     public transclude = true;
  46
  47     template = ():string => {
  48         return require('./expand-collapse.html');
  49     };
  50
  51     link = (scope:IExpandCollapseScope, $elem:any) => {
  52         scope.collapsed = false;
  53         scope.isLoadingData = false;
  54         $elem.addClass('expanded');
  55
  56
  57         if (scope.isCloseOnInit) {
  58             window.setTimeout(function () {
  59                 toggle();
  60             }, 0);
  61         }
  62         //
  63         // $elem.click(function () {
  64         //     toggle();
  65         // });
  66         $elem.bind('click', function() {
  67             toggle();
  68         })
  69         let expand = ():void => {
  70             $elem.addClass('expanded');
  71             scope.collapsed = false;
  72
  73             let element = <HTMLElement>$(scope.expandedSelector)[0];
  74             let prevWidth = element.style.height;
  75             element.style.height = 'auto';
  76             let endWidth = getComputedStyle(element).height;
  77             element.style.height = prevWidth;
  78             element.offsetHeight; // force repaint
  79             element.style.transition = 'height .3s ease-in-out';
  80             element.style.height = endWidth;
  81             element.hidden = false;
  82             element.addEventListener('transitionend', function transitionEnd(event) {
  83                 if (event['propertyName'] == 'height') {
  84                     element.style.transition = '';
  85                     element.style.height = 'auto';
  86                     element.removeEventListener('transitionend', transitionEnd, false);
  87                 }
  88             }, false)
  89         };
  90
  91         let collapse = ():void => {
  92             $elem.removeClass('expanded');
  93             scope.collapsed = true;
  94
  95             let element = <HTMLElement>$(scope.expandedSelector)[0];
  96             element.style.height = getComputedStyle(element).height;
  97             element.style.transition = 'height .5s ease-in-out';
  98             element.offsetHeight; // force repaint
  99             element.style.height = '0px';
 100             element.hidden = true;
 101         };
 102
 103         let toggle = ():void => {
 104             if (scope.collapsed === true) {
 105                 if (scope.loadDataFunction) {
 106                     scope.isLoadingData = true;
 107                     let onSuccess = () => {
 108                         window.setTimeout(function () {
 109                             expand();
 110                             scope.isLoadingData = false;
 111                         }, 0);
 112                     };
 113                     scope.loadDataFunction().then(onSuccess);
 114                 }
 115                 else {
 116                     if (scope.isLoadingData === false) {
 117                         expand();
 118                     }
 119                 }
 120
 121             } else {
 122                 if (scope.isLoadingData === false) {
 123                     collapse();
 124                 }
 125             }
 126         }
 127
 128     };
 129
 130     public static factory = ()=> {
 131         return new ExpandCollapseDirective();
 132     };
 133 }
 134
 135 ExpandCollapseDirective.factory.$inject = [];