diff options
Diffstat (limited to 'catalog-ui/src/app/directives/utils/expand-collapse')
3 files changed, 127 insertions, 0 deletions
diff --git a/catalog-ui/src/app/directives/utils/expand-collapse/expand-collapse.html b/catalog-ui/src/app/directives/utils/expand-collapse/expand-collapse.html new file mode 100644 index 0000000000..a2358ea2b7 --- /dev/null +++ b/catalog-ui/src/app/directives/utils/expand-collapse/expand-collapse.html @@ -0,0 +1 @@ +<ng-transclude></ng-transclude> diff --git a/catalog-ui/src/app/directives/utils/expand-collapse/expand-collapse.less b/catalog-ui/src/app/directives/utils/expand-collapse/expand-collapse.less new file mode 100644 index 0000000000..e6b7b7d516 --- /dev/null +++ b/catalog-ui/src/app/directives/utils/expand-collapse/expand-collapse.less @@ -0,0 +1,11 @@ +.ellipsis-directive-more-less { + .a_9; + .bold; + .hand; + float: right; + margin-right: 10px; + line-height: 23px; + text-decoration: underline; + text-align: left; +} + 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 = []; |