1 files changed, 115 insertions, 0 deletions
diff --git a/catalog-ui/src/app/directives/utils/expand-collapse/expand-collapse.ts b/catalog-ui/src/app/directives/utils/expand-collapse/expand-collapse.ts
new file mode 100644
index 0000000000..3993f06036
--- /dev/null
+++ b/catalog-ui/src/app/directives/utils/expand-collapse/expand-collapse.ts
@@ -0,0 +1,115 @@
+'use strict';
+export interface IExpandCollapseScope extends ng.IScope {
+    toggle():void;
+    collapsed:boolean;
+    expandedSelector:string;
+    content:string;
+    isCloseOnInit:boolean;
+    loadDataFunction:Function;
+    isLoadingData:boolean;
+}
+
+export class ExpandCollapseDirective implements ng.IDirective {
+
+    constructor() {
+    }
+
+    scope = {
+        expandedSelector: '@',
+        loadDataFunction: '&?',
+        isCloseOnInit: '=?'
+    };
+
+    public replace = false;
+    public restrict = 'AE';
+    public transclude = true;
+
+    template = ():string => {
+        return require('./expand-collapse.html');
+    };
+
+    link = (scope:IExpandCollapseScope, $elem:any) => {
+        scope.collapsed = false;
+        scope.isLoadingData = false;
+        $elem.addClass('expanded');
+
+
+        if (scope.isCloseOnInit) {
+            window.setTimeout(function () {
+                toggle();
+            }, 0);
+        }
+        //
+        // $elem.click(function () {
+        //     toggle();
+        // });
+        $elem.bind('click', function() {
+            toggle();
+        })
+        let expand = ():void => {
+            $elem.addClass('expanded');
+            scope.collapsed = false;
+
+            let element = $(scope.expandedSelector)[0];
+            let prevWidth = element.style.height;
+            element.style.height = 'auto';
+            let endWidth = getComputedStyle(element).height;
+            element.style.height = prevWidth;
+            element.offsetHeight; // force repaint
+            element.style.transition = 'height .3s ease-in-out';
+            element.style.height = endWidth;
+            element.hidden = false;
+            element.addEventListener('transitionend', function transitionEnd(event) {
+                if (event['propertyName'] == 'height') {
+                    element.style.transition = '';
+                    element.style.height = 'auto';
+                    element.removeEventListener('transitionend', transitionEnd, false);
+                }
+            }, false)
+        };
+
+        let collapse = ():void => {
+            $elem.removeClass('expanded');
+            scope.collapsed = true;
+
+            let element = $(scope.expandedSelector)[0];
+            element.style.height = getComputedStyle(element).height;
+            element.style.transition = 'height .5s ease-in-out';
+            element.offsetHeight; // force repaint
+            element.style.height = '0px';
+            element.hidden = true;
+        };
+
+        let toggle = ():void => {
+            if (scope.collapsed === true) {
+                if (scope.loadDataFunction) {
+                    scope.isLoadingData = true;
+                    let onSuccess = () => {
+                        window.setTimeout(function () {
+                            expand();
+                            scope.isLoadingData = false;
+                        }, 0);
+                    };
+                    scope.loadDataFunction().then(onSuccess);
+                }
+                else {
+                    if (scope.isLoadingData === false) {
+                        expand();
+                    }
+                }
+
+            } else {
+                if (scope.isLoadingData === false) {
+                    collapse();
+                }
+            }
+        }
+
+    };
+
+    public static factory = ()=> {
+        return new ExpandCollapseDirective();
+    };
+}
+
+ExpandCollapseDirective.factory.$inject = [];