From bf00756161a27ffca6c23acf6cb129fdb72a4b42 Mon Sep 17 00:00:00 2001 From: Michael Prentice Date: Fri, 19 Apr 2019 16:44:51 -0500 Subject: [PATCH] fix(tabs): new tab animation broken by code to support IE11 Fixes #11689 --- src/components/tabs/demoDynamicTabs/script.js | 13 +++++------ src/components/tabs/js/tabDirective.js | 6 +++-- src/components/tabs/js/tabsController.js | 23 +++++++++++-------- 3 files changed, 23 insertions(+), 19 deletions(-) diff --git a/src/components/tabs/demoDynamicTabs/script.js b/src/components/tabs/demoDynamicTabs/script.js index 5efe5524961..2853c0437f8 100644 --- a/src/components/tabs/demoDynamicTabs/script.js +++ b/src/components/tabs/demoDynamicTabs/script.js @@ -32,14 +32,14 @@ previous = null; $scope.tabs = tabs; $scope.selectedIndex = 0; - $scope.$watch('selectedIndex', function(current, old) { + $scope.$watch('selectedIndex', function(newVal, oldVal) { previous = selected; - selected = tabs[current]; - if (old + 1 && (old !== current)) { - $log.debug('Goodbye ' + previous.title + '!'); + selected = tabs[newVal]; + if (oldVal + 1 && !angular.equals(oldVal, newVal)) { + $log.log('Goodbye ' + previous.title + '!'); } - if (current + 1) { - $log.debug('Hello ' + selected.title + '!'); + if (newVal + 1 > 0) { + $log.log('Hello ' + selected.title + '!'); } }); $scope.addTab = function(title, view) { @@ -52,4 +52,3 @@ }; } })(); - diff --git a/src/components/tabs/js/tabDirective.js b/src/components/tabs/js/tabDirective.js index fba407f3d42..8ec1aa48d4f 100644 --- a/src/components/tabs/js/tabDirective.js +++ b/src/components/tabs/js/tabDirective.js @@ -25,7 +25,8 @@ * @param {string=} label Optional attribute to specify a simple string as the tab label * @param {boolean=} ng-disabled If present and expression evaluates to truthy, disabled tab * selection. - * @param {string=} md-tab-class Optional attribute to specify a class that will be applied to the tab's button + * @param {string=} md-tab-class Optional attribute to specify a class that will be applied to the + * tab's button * @param {expression=} md-on-deselect Expression to be evaluated after the tab has been * de-selected. * @param {expression=} md-on-select Expression to be evaluated after the tab has been selected. @@ -36,7 +37,8 @@ * @usage * * - * + * *

My Tab content

*
* diff --git a/src/components/tabs/js/tabsController.js b/src/components/tabs/js/tabsController.js index 3624d93da97..f13d2e29cef 100644 --- a/src/components/tabs/js/tabsController.js +++ b/src/components/tabs/js/tabsController.js @@ -230,13 +230,13 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp * @param {string|number} left */ function handleOffsetChange (left) { - var elements = getElements(); var newValue = ((ctrl.shouldCenterTabs || isRtl() ? '' : '-') + left + 'px'); // Fix double-negative which can happen with RTL support newValue = newValue.replace('--', ''); - angular.element(elements.paging).css($mdConstant.CSS.TRANSFORM, 'translate(' + newValue + ', 0)'); + angular.element(getElements().paging).css($mdConstant.CSS.TRANSFORM, + 'translate(' + newValue + ', 0)'); $scope.$broadcast('$mdTabsPaginationChanged'); } @@ -439,11 +439,11 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp * Create an entry in the tabs array for a new tab at the specified index. * @param {Object} tabData tab to insert * @param {number} index location to insert the new tab - * @returns {*} + * @returns {Object} the inserted tab */ function insertTab (tabData, index) { var hasLoaded = loaded; - var proto = { + var proto = { getIndex: function () { return ctrl.tabs.indexOf(tab); }, isActive: function () { return this.getIndex() === ctrl.selectedIndex; }, isLeft: function () { return this.getIndex() < ctrl.selectedIndex; }, @@ -455,24 +455,27 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp }, id: $mdUtil.nextUid(), hasContent: !!(tabData.template && tabData.template.trim()) - }, - tab = angular.extend(proto, tabData); + }; + var tab = angular.extend(proto, tabData); + if (angular.isDefined(index)) { ctrl.tabs.splice(index, 0, tab); } else { ctrl.tabs.push(tab); } - processQueue(); updateHasContent(); + $mdUtil.nextTick(function () { updatePagination(); setAriaControls(tab); // if autoselect is enabled, select the newly added tab - if (hasLoaded && ctrl.autoselect) $mdUtil.nextTick(function () { - $mdUtil.nextTick(function () { select(ctrl.tabs.indexOf(tab)); }); - }); + if (hasLoaded && ctrl.autoselect) { + $mdUtil.nextTick(function () { + $mdUtil.nextTick(function () { select(ctrl.tabs.indexOf(tab)); }); + }); + } }); return tab; }