From bca2e25d2dc279034112ef4a76131783523bc6e0 Mon Sep 17 00:00:00 2001 From: Stepan Riha Date: Tue, 12 Jan 2016 23:36:07 -0600 Subject: [PATCH] feat(collapse): optimize attribute parsing and standardize promises --- src/collapse/collapse.js | 93 +++++++++++++++++++++------------------- 1 file changed, 50 insertions(+), 43 deletions(-) diff --git a/src/collapse/collapse.js b/src/collapse/collapse.js index 81973a5e0a..9003882b1e 100644 --- a/src/collapse/collapse.js +++ b/src/collapse/collapse.js @@ -1,9 +1,14 @@ angular.module('ui.bootstrap.collapse', []) - .directive('uibCollapse', ['$animate', '$q', '$injector', function($animate, $q, $injector) { + .directive('uibCollapse', ['$animate', '$q', '$parse', '$injector', function($animate, $q, $parse, $injector) { var $animateCss = $injector.has('$animateCss') ? $injector.get('$animateCss') : null; return { link: function(scope, element, attrs) { + var expandingExpr = $parse(attrs.expanding), + expandedExpr = $parse(attrs.expanded), + collapsingExpr = $parse(attrs.collapsing), + collapsedExpr = $parse(attrs.collapsed); + if (!scope.$eval(attrs.uibCollapse)) { element.addClass('in') .addClass('collapse') @@ -11,31 +16,32 @@ angular.module('ui.bootstrap.collapse', []) } function expand() { - $q.when(scope.$eval(attrs.expanding), function() { - element.removeClass('collapse') - .addClass('collapsing') - .attr('aria-expanded', true) - .attr('aria-hidden', false); + $q.resolve(expandingExpr(scope)) + .then(function() { + 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); - } - }); + 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'}); - scope.$eval(attrs.expanded); + expandedExpr(scope); } function collapse() { @@ -43,37 +49,38 @@ angular.module('ui.bootstrap.collapse', []) return collapseDone(); } - $q.when(scope.$eval(attrs.collapsing), function() { - 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); + $q.resolve(collapsingExpr(scope)) + .then(function() { + 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); - } - }); + 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.$eval(attrs.collapsed); + collapsedExpr(scope); } scope.$watch(attrs.uibCollapse, function(shouldCollapse) {