Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

Commit

Permalink
fix(tabs): programmatically changing tabs will now adjust pagination …
Browse files Browse the repository at this point in the history
…to show the selected tab

Also adjusts for window resize of pagination toggling.

Closes #3139
  • Loading branch information
Robert Messerle committed Jun 12, 2015
1 parent 09694bc commit 6d45f10
Show file tree
Hide file tree
Showing 3 changed files with 9 additions and 7 deletions.
12 changes: 8 additions & 4 deletions src/components/tabs/js/tabsController.js
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,7 @@ function MdTabsController ($scope, $element, $window, $timeout, $mdConstant, $md
ctrl.lastSelectedIndex = oldValue;
ctrl.updateInkBarStyles();
updateHeightFromContent();
adjustOffset();
adjustOffset(newValue);
$scope.$broadcast('$mdTabsChanged');
ctrl.tabs[oldValue] && ctrl.tabs[oldValue].scope.deselect();
ctrl.tabs[newValue] && ctrl.tabs[newValue].scope.select();
Expand Down Expand Up @@ -384,7 +384,7 @@ function MdTabsController ($scope, $element, $window, $timeout, $mdConstant, $md
function shouldPaginate () {
if ($scope.noPagination || !loaded) return false;
var canvasWidth = $element.prop('clientWidth');
angular.forEach(elements.tabs, function (tab) { canvasWidth -= tab.offsetWidth; });
angular.forEach(elements.dummies, function (tab) { canvasWidth -= tab.offsetWidth; });
return canvasWidth < 0;
}

Expand Down Expand Up @@ -432,6 +432,9 @@ function MdTabsController ($scope, $element, $window, $timeout, $mdConstant, $md
function updatePagination () {
ctrl.shouldPaginate = shouldPaginate();
ctrl.shouldCenterTabs = shouldCenterTabs();
$timeout(function () {
adjustOffset($scope.selectedIndex);
});
}

/**
Expand Down Expand Up @@ -474,9 +477,10 @@ function MdTabsController ($scope, $element, $window, $timeout, $mdConstant, $md
/**
* Forces the pagination to move the focused tab into view.
*/
function adjustOffset () {
function adjustOffset (index) {
if (ctrl.shouldCenterTabs) return;
var tab = elements.tabs[ctrl.focusIndex],
if (index == null) index = ctrl.focusIndex;
var tab = elements.tabs[index],
left = tab.offsetLeft,
right = tab.offsetWidth + left;
ctrl.offsetLeft = Math.max(ctrl.offsetLeft, fixOffset(right - elements.canvas.clientWidth));
Expand Down
1 change: 1 addition & 0 deletions src/components/tabs/js/tabsDirective.js
Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,7 @@ function MdTabs ($mdTheming, $mdUtil, $compile) {
</md-pagination-wrapper>\
<div class="md-visually-hidden md-dummy-wrapper">\
<md-dummy-tab\
class="md-tab"\
tabindex="-1"\
id="tab-item-{{tab.id}}"\
role="tab"\
Expand Down
3 changes: 0 additions & 3 deletions src/components/tabs/tabs.scss
Original file line number Diff line number Diff line change
Expand Up @@ -60,9 +60,6 @@ md-tabs {
md-tabs-wrapper {
border-width: 0 0 1px;
border-style: solid;
.md-tab {
padding-bottom: 11px;
}
}
&:not(.md-dynamic-height) {
md-tabs-content-wrapper {
Expand Down

0 comments on commit 6d45f10

Please sign in to comment.