AngularSlideables/angularSlideables.js at master · david-cahill/AngularSlideables · GitHub

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
angular.module('angularSlideables', [])
.directive('slideable', function () {
    return {
        restrict:'CA',
        compile: function (element, attr) {
            // wrap tag
            var contents = element.html();
            element.html('<div class="slideable_content" style="margin:0 !important; padding:0 !important" >' + contents + '</div>');

            return function postLink(scope, element, attrs) {
                // default properties
                attrs.duration = (!attrs.duration) ? '1s' : attrs.duration;
                attrs.easing = (!attrs.easing) ? 'ease-in-out' : attrs.easing;
                element.css({
                    'overflow': 'hidden',
                    'max-height': '0px',
                    'transitionProperty': 'max-height',
                    'transitionDuration': attrs.duration,
                    'transitionTimingFunction': attrs.easing
                });
            };
        }
    };
})
.directive('slideToggle', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {

            element.bind('click', function() {
                var target, content;
                if (!target && attrs.slideToggle) target = document.querySelector(attrs.slideToggle);
                if(target) {

                    if(target.style.maxHeight === '0px') {
                      attrs.expanded = false;
                    } else {
                      attrs.expanded = true;
                    }

                    if (!content) content = target.querySelector('.slideable_content');

                    if(!attrs.expanded) {
                        content.style.border = '1px solid rgba(0,0,0,0)';
                        var y = content.clientHeight;
                        content.style.border = 0;
                        target.style.height = 'auto';
                        target.style.maxHeight = '1000px';
                        attrs.expanded = true;
                    } else {
                        target.style.maxHeight = '0px';
                        attrs.expanded = false;
                    }
                }
            });
        }
    }
});