blob: 3993f0603603c7cdd33a3312ce8a94d93c14adc0 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
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 = [];
|
