summaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/directives/utils/expand-collapse
diff options
context:
space:
mode:
Diffstat (limited to 'catalog-ui/src/app/directives/utils/expand-collapse')
-rw-r--r--catalog-ui/src/app/directives/utils/expand-collapse/expand-collapse.html1
-rw-r--r--catalog-ui/src/app/directives/utils/expand-collapse/expand-collapse.less11
-rw-r--r--catalog-ui/src/app/directives/utils/expand-collapse/expand-collapse.ts115
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 = [];