| angular.module('ui.bootstrap.collapse', []) |
| |
| .directive('uibCollapse', ['$animate', '$injector', function($animate, $injector) { |
| var $animateCss = $injector.has('$animateCss') ? $injector.get('$animateCss') : null; |
| return { |
| link: function(scope, element, attrs) { |
| function expand() { |
| element.removeClass('collapse') |
| .addClass('collapsing') |
| .attr('aria-expanded', true) |
| .attr('aria-hidden', false); |
| |
| if ($animateCss) { |
| $animateCss(element, { |
| addClass: 'in', |
| easing: 'ease', |
| to: { height: element[0].scrollHeight + 'px' } |
| }).start().finally(expandDone); |
| } else { |
| $animate.addClass(element, 'in', { |
| to: { height: element[0].scrollHeight + 'px' } |
| }).then(expandDone); |
| } |
| } |
| |
| function expandDone() { |
| element.removeClass('collapsing') |
| .addClass('collapse') |
| .css({height: 'auto'}); |
| } |
| |
| function collapse() { |
| if (!element.hasClass('collapse') && !element.hasClass('in')) { |
| return collapseDone(); |
| } |
| |
| element |
| // IMPORTANT: The height must be set before adding "collapsing" class. |
| // Otherwise, the browser attempts to animate from height 0 (in |
| // collapsing class) to the given height here. |
| .css({height: element[0].scrollHeight + 'px'}) |
| // initially all panel collapse have the collapse class, this removal |
| // prevents the animation from jumping to collapsed state |
| .removeClass('collapse') |
| .addClass('collapsing') |
| .attr('aria-expanded', false) |
| .attr('aria-hidden', true); |
| |
| if ($animateCss) { |
| $animateCss(element, { |
| removeClass: 'in', |
| to: {height: '0'} |
| }).start().finally(collapseDone); |
| } else { |
| $animate.removeClass(element, 'in', { |
| to: {height: '0'} |
| }).then(collapseDone); |
| } |
| } |
| |
| function collapseDone() { |
| element.css({height: '0'}); // Required so that collapse works when animation is disabled |
| element.removeClass('collapsing') |
| .addClass('collapse'); |
| } |
| |
| scope.$watch(attrs.uibCollapse, function(shouldCollapse) { |
| if (shouldCollapse) { |
| collapse(); |
| } else { |
| expand(); |
| } |
| }); |
| } |
| }; |
| }]); |
| |
| /* Deprecated collapse below */ |
| |
| angular.module('ui.bootstrap.collapse') |
| |
| .value('$collapseSuppressWarning', false) |
| |
| .directive('collapse', ['$animate', '$injector', '$log', '$collapseSuppressWarning', function($animate, $injector, $log, $collapseSuppressWarning) { |
| var $animateCss = $injector.has('$animateCss') ? $injector.get('$animateCss') : null; |
| return { |
| link: function(scope, element, attrs) { |
| if (!$collapseSuppressWarning) { |
| $log.warn('collapse is now deprecated. Use uib-collapse instead.'); |
| } |
| |
| function expand() { |
| element.removeClass('collapse') |
| .addClass('collapsing') |
| .attr('aria-expanded', true) |
| .attr('aria-hidden', false); |
| |
| if ($animateCss) { |
| $animateCss(element, { |
| easing: 'ease', |
| to: { height: element[0].scrollHeight + 'px' } |
| }).start().done(expandDone); |
| } else { |
| $animate.animate(element, {}, { |
| height: element[0].scrollHeight + 'px' |
| }).then(expandDone); |
| } |
| } |
| |
| function expandDone() { |
| element.removeClass('collapsing') |
| .addClass('collapse in') |
| .css({height: 'auto'}); |
| } |
| |
| function collapse() { |
| if (!element.hasClass('collapse') && !element.hasClass('in')) { |
| return collapseDone(); |
| } |
| |
| element |
| // IMPORTANT: The height must be set before adding "collapsing" class. |
| // Otherwise, the browser attempts to animate from height 0 (in |
| // collapsing class) to the given height here. |
| .css({height: element[0].scrollHeight + 'px'}) |
| // initially all panel collapse have the collapse class, this removal |
| // prevents the animation from jumping to collapsed state |
| .removeClass('collapse in') |
| .addClass('collapsing') |
| .attr('aria-expanded', false) |
| .attr('aria-hidden', true); |
| |
| if ($animateCss) { |
| $animateCss(element, { |
| to: {height: '0'} |
| }).start().done(collapseDone); |
| } else { |
| $animate.animate(element, {}, { |
| height: '0' |
| }).then(collapseDone); |
| } |
| } |
| |
| function collapseDone() { |
| element.css({height: '0'}); // Required so that collapse works when animation is disabled |
| element.removeClass('collapsing') |
| .addClass('collapse'); |
| } |
| |
| scope.$watch(attrs.collapse, function(shouldCollapse) { |
| if (shouldCollapse) { |
| collapse(); |
| } else { |
| expand(); |
| } |
| }); |
| } |
| }; |
| }]); |