angular-material-npfixed
Version:
The Angular Material project is an implementation of Material Design in Angular.js. This project provides a set of reusable, well-tested, and accessible Material Design UI components. Angular Material is supported internally at Google by the Angular.js, M
891 lines (786 loc) • 28.9 kB
JavaScript
angular
.module('material.components.tabs')
.controller('MdTabsController', MdTabsController);
/**
* @ngInject
*/
function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipple, $mdUtil,
$animateCss, $attrs, $compile, $mdTheming, $mdInteraction) {
// define private properties
var ctrl = this,
locked = false,
elements = getElements(),
queue = [],
destroyed = false,
loaded = false;
// Define public methods
ctrl.$onInit = $onInit;
ctrl.updatePagination = $mdUtil.debounce(updatePagination, 100);
ctrl.redirectFocus = redirectFocus;
ctrl.attachRipple = attachRipple;
ctrl.insertTab = insertTab;
ctrl.removeTab = removeTab;
ctrl.select = select;
ctrl.scroll = scroll;
ctrl.nextPage = nextPage;
ctrl.previousPage = previousPage;
ctrl.keydown = keydown;
ctrl.canPageForward = canPageForward;
ctrl.canPageBack = canPageBack;
ctrl.refreshIndex = refreshIndex;
ctrl.incrementIndex = incrementIndex;
ctrl.getTabElementIndex = getTabElementIndex;
ctrl.updateInkBarStyles = $mdUtil.debounce(updateInkBarStyles, 100);
ctrl.updateTabOrder = $mdUtil.debounce(updateTabOrder, 100);
ctrl.getFocusedTabId = getFocusedTabId;
// For Angular 1.4 and older, where there are no lifecycle hooks but bindings are pre-assigned,
// manually call the $onInit hook.
if (angular.version.major === 1 && angular.version.minor <= 4) {
this.$onInit();
}
/**
* Angular Lifecycle hook for newer Angular versions.
* Bindings are not guaranteed to have been assigned in the controller, but they are in the $onInit hook.
*/
function $onInit() {
// Define one-way bindings
defineOneWayBinding('stretchTabs', handleStretchTabs);
// Define public properties with change handlers
defineProperty('focusIndex', handleFocusIndexChange, ctrl.selectedIndex || 0);
defineProperty('offsetLeft', handleOffsetChange, 0);
defineProperty('hasContent', handleHasContent, false);
defineProperty('maxTabWidth', handleMaxTabWidth, getMaxTabWidth());
defineProperty('shouldPaginate', handleShouldPaginate, false);
// Define boolean attributes
defineBooleanAttribute('noInkBar', handleInkBar);
defineBooleanAttribute('dynamicHeight', handleDynamicHeight);
defineBooleanAttribute('noPagination');
defineBooleanAttribute('swipeContent');
defineBooleanAttribute('noDisconnect');
defineBooleanAttribute('autoselect');
defineBooleanAttribute('noSelectClick');
defineBooleanAttribute('centerTabs', handleCenterTabs, false);
defineBooleanAttribute('enableDisconnect');
// Define public properties
ctrl.scope = $scope;
ctrl.parent = $scope.$parent;
ctrl.tabs = [];
ctrl.lastSelectedIndex = null;
ctrl.hasFocus = false;
ctrl.styleTabItemFocus = false;
ctrl.shouldCenterTabs = shouldCenterTabs();
ctrl.tabContentPrefix = 'tab-content-';
// Setup the tabs controller after all bindings are available.
setupTabsController();
}
/**
* Perform setup for the controller, setup events and watcher(s)
*/
function setupTabsController () {
ctrl.selectedIndex = ctrl.selectedIndex || 0;
compileTemplate();
configureWatchers();
bindEvents();
$mdTheming($element);
$mdUtil.nextTick(function () {
// Note that the element references need to be updated, because certain "browsers"
// (IE/Edge) lose them and start throwing "Invalid calling object" errors, when we
// compile the element contents down in `compileElement`.
elements = getElements();
updateHeightFromContent();
adjustOffset();
updateInkBarStyles();
ctrl.tabs[ ctrl.selectedIndex ] && ctrl.tabs[ ctrl.selectedIndex ].scope.select();
loaded = true;
updatePagination();
});
}
/**
* Compiles the template provided by the user. This is passed as an attribute from the tabs
* directive's template function.
*/
function compileTemplate () {
var template = $attrs.$mdTabsTemplate,
element = angular.element($element[0].querySelector('md-tab-data'));
element.html(template);
$compile(element.contents())(ctrl.parent);
delete $attrs.$mdTabsTemplate;
}
/**
* Binds events used by the tabs component.
*/
function bindEvents () {
angular.element($window).on('resize', handleWindowResize);
$scope.$on('$destroy', cleanup);
}
/**
* Configure watcher(s) used by Tabs
*/
function configureWatchers () {
$scope.$watch('$mdTabsCtrl.selectedIndex', handleSelectedIndexChange);
}
/**
* Creates a one-way binding manually rather than relying on Angular's isolated scope
* @param key
* @param handler
*/
function defineOneWayBinding (key, handler) {
var attr = $attrs.$normalize('md-' + key);
if (handler) defineProperty(key, handler);
$attrs.$observe(attr, function (newValue) { ctrl[ key ] = newValue; });
}
/**
* Defines boolean attributes with default value set to true. (ie. md-stretch-tabs with no value
* will be treated as being truthy)
* @param key
* @param handler
*/
function defineBooleanAttribute (key, handler) {
var attr = $attrs.$normalize('md-' + key);
if (handler) defineProperty(key, handler);
if ($attrs.hasOwnProperty(attr)) updateValue($attrs[attr]);
$attrs.$observe(attr, updateValue);
function updateValue (newValue) {
ctrl[ key ] = newValue !== 'false';
}
}
/**
* Remove any events defined by this controller
*/
function cleanup () {
destroyed = true;
angular.element($window).off('resize', handleWindowResize);
}
// Change handlers
/**
* Toggles stretch tabs class and updates inkbar when tab stretching changes
* @param stretchTabs
*/
function handleStretchTabs (stretchTabs) {
var elements = getElements();
angular.element(elements.wrapper).toggleClass('md-stretch-tabs', shouldStretchTabs());
updateInkBarStyles();
}
function handleCenterTabs (newValue) {
ctrl.shouldCenterTabs = shouldCenterTabs();
}
function handleMaxTabWidth (newWidth, oldWidth) {
if (newWidth !== oldWidth) {
var elements = getElements();
angular.forEach(elements.tabs, function(tab) {
tab.style.maxWidth = newWidth + 'px';
});
$mdUtil.nextTick(ctrl.updateInkBarStyles);
}
}
function handleShouldPaginate (newValue, oldValue) {
if (newValue !== oldValue) {
ctrl.maxTabWidth = getMaxTabWidth();
ctrl.shouldCenterTabs = shouldCenterTabs();
$mdUtil.nextTick(function () {
ctrl.maxTabWidth = getMaxTabWidth();
adjustOffset(ctrl.selectedIndex);
});
}
}
/**
* Add/remove the `md-no-tab-content` class depending on `ctrl.hasContent`
* @param hasContent
*/
function handleHasContent (hasContent) {
$element[ hasContent ? 'removeClass' : 'addClass' ]('md-no-tab-content');
}
/**
* Apply ctrl.offsetLeft to the paging element when it changes
* @param left
*/
function handleOffsetChange (left) {
var elements = getElements();
var newValue = ctrl.shouldCenterTabs ? '' : '-' + left + 'px';
angular.element(elements.paging).css($mdConstant.CSS.TRANSFORM, 'translate3d(' + newValue + ', 0, 0)');
$scope.$broadcast('$mdTabsPaginationChanged');
}
/**
* Update the UI whenever `ctrl.focusIndex` is updated
* @param newIndex
* @param oldIndex
*/
function handleFocusIndexChange (newIndex, oldIndex) {
if (newIndex === oldIndex) return;
if (!getElements().tabs[ newIndex ]) return;
adjustOffset();
redirectFocus();
}
/**
* Update the UI whenever the selected index changes. Calls user-defined select/deselect methods.
* @param newValue
* @param oldValue
*/
function handleSelectedIndexChange (newValue, oldValue) {
if (newValue === oldValue) return;
ctrl.selectedIndex = getNearestSafeIndex(newValue);
ctrl.lastSelectedIndex = oldValue;
ctrl.updateInkBarStyles();
updateHeightFromContent();
adjustOffset(newValue);
$scope.$broadcast('$mdTabsChanged');
ctrl.tabs[ oldValue ] && ctrl.tabs[ oldValue ].scope.deselect();
ctrl.tabs[ newValue ] && ctrl.tabs[ newValue ].scope.select();
}
function getTabElementIndex(tabEl){
var tabs = $element[0].getElementsByTagName('md-tab');
return Array.prototype.indexOf.call(tabs, tabEl[0]);
}
/**
* Queues up a call to `handleWindowResize` when a resize occurs while the tabs component is
* hidden.
*/
function handleResizeWhenVisible () {
// if there is already a watcher waiting for resize, do nothing
if (handleResizeWhenVisible.watcher) return;
// otherwise, we will abuse the $watch function to check for visible
handleResizeWhenVisible.watcher = $scope.$watch(function () {
// since we are checking for DOM size, we use $mdUtil.nextTick() to wait for after the DOM updates
$mdUtil.nextTick(function () {
// if the watcher has already run (ie. multiple digests in one cycle), do nothing
if (!handleResizeWhenVisible.watcher) return;
if ($element.prop('offsetParent')) {
handleResizeWhenVisible.watcher();
handleResizeWhenVisible.watcher = null;
handleWindowResize();
}
}, false);
});
}
// Event handlers / actions
/**
* Handle user keyboard interactions
* @param event
*/
function keydown (event) {
switch (event.keyCode) {
case $mdConstant.KEY_CODE.LEFT_ARROW:
event.preventDefault();
incrementIndex(-1, true);
break;
case $mdConstant.KEY_CODE.RIGHT_ARROW:
event.preventDefault();
incrementIndex(1, true);
break;
case $mdConstant.KEY_CODE.SPACE:
case $mdConstant.KEY_CODE.ENTER:
event.preventDefault();
if (!locked) select(ctrl.focusIndex);
break;
}
}
/**
* Update the selected index. Triggers a click event on the original `md-tab` element in order
* to fire user-added click events if canSkipClick or `md-no-select-click` are false.
* @param index
* @param canSkipClick Optionally allow not firing the click event if `md-no-select-click` is also true.
*/
function select (index, canSkipClick) {
if (!locked) ctrl.focusIndex = ctrl.selectedIndex = index;
// skip the click event if noSelectClick is enabled
if (canSkipClick && ctrl.noSelectClick) return;
// nextTick is required to prevent errors in user-defined click events
$mdUtil.nextTick(function () {
ctrl.tabs[ index ].element.triggerHandler('click');
}, false);
}
/**
* When pagination is on, this makes sure the selected index is in view.
* @param event
*/
function scroll (event) {
if (!ctrl.shouldPaginate) return;
event.preventDefault();
ctrl.offsetLeft = fixOffset(ctrl.offsetLeft - event.wheelDelta);
}
/**
* Slides the tabs over approximately one page forward.
*/
function nextPage () {
var elements = getElements();
var viewportWidth = elements.canvas.clientWidth,
totalWidth = viewportWidth + ctrl.offsetLeft,
i, tab;
for (i = 0; i < elements.tabs.length; i++) {
tab = elements.tabs[ i ];
if (tab.offsetLeft + tab.offsetWidth > totalWidth) break;
}
if (viewportWidth > tab.offsetWidth) {
//Canvas width *greater* than tab width: usual positioning
ctrl.offsetLeft = fixOffset(tab.offsetLeft);
} else {
/**
* Canvas width *smaller* than tab width: positioning at the *end* of current tab to let
* pagination "for loop" to proceed correctly on next tab when nextPage() is called again
*/
ctrl.offsetLeft = fixOffset(tab.offsetLeft + (tab.offsetWidth - viewportWidth + 1));
}
}
/**
* Slides the tabs over approximately one page backward.
*/
function previousPage () {
var i, tab, elements = getElements();
for (i = 0; i < elements.tabs.length; i++) {
tab = elements.tabs[ i ];
if (tab.offsetLeft + tab.offsetWidth >= ctrl.offsetLeft) break;
}
if (elements.canvas.clientWidth > tab.offsetWidth) {
//Canvas width *greater* than tab width: usual positioning
ctrl.offsetLeft = fixOffset(tab.offsetLeft + tab.offsetWidth - elements.canvas.clientWidth);
} else {
/**
* Canvas width *smaller* than tab width: positioning at the *beginning* of current tab to let
* pagination "for loop" to break correctly on previous tab when previousPage() is called again
*/
ctrl.offsetLeft = fixOffset(tab.offsetLeft);
}
}
/**
* Update size calculations when the window is resized.
*/
function handleWindowResize () {
ctrl.lastSelectedIndex = ctrl.selectedIndex;
ctrl.offsetLeft = fixOffset(ctrl.offsetLeft);
$mdUtil.nextTick(function () {
ctrl.updateInkBarStyles();
updatePagination();
});
}
function handleInkBar (hide) {
angular.element(getElements().inkBar).toggleClass('ng-hide', hide);
}
/**
* Toggle dynamic height class when value changes
* @param value
*/
function handleDynamicHeight (value) {
$element.toggleClass('md-dynamic-height', value);
}
/**
* Remove a tab from the data and select the nearest valid tab.
* @param tabData
*/
function removeTab (tabData) {
if (destroyed) return;
var selectedIndex = ctrl.selectedIndex,
tab = ctrl.tabs.splice(tabData.getIndex(), 1)[ 0 ];
refreshIndex();
// when removing a tab, if the selected index did not change, we have to manually trigger the
// tab select/deselect events
if (ctrl.selectedIndex === selectedIndex) {
tab.scope.deselect();
ctrl.tabs[ ctrl.selectedIndex ] && ctrl.tabs[ ctrl.selectedIndex ].scope.select();
}
$mdUtil.nextTick(function () {
updatePagination();
ctrl.offsetLeft = fixOffset(ctrl.offsetLeft);
});
}
/**
* Create an entry in the tabs array for a new tab at the specified index.
* @param tabData
* @param index
* @returns {*}
*/
function insertTab (tabData, index) {
var hasLoaded = loaded;
var proto = {
getIndex: function () { return ctrl.tabs.indexOf(tab); },
isActive: function () { return this.getIndex() === ctrl.selectedIndex; },
isLeft: function () { return this.getIndex() < ctrl.selectedIndex; },
isRight: function () { return this.getIndex() > ctrl.selectedIndex; },
shouldRender: function () { return !ctrl.noDisconnect || this.isActive(); },
hasFocus: function () {
return ctrl.styleTabItemFocus
&& ctrl.hasFocus && this.getIndex() === ctrl.focusIndex;
},
id: $mdUtil.nextUid(),
hasContent: !!(tabData.template && tabData.template.trim())
},
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)); });
});
});
return tab;
}
// Getter methods
/**
* Gathers references to all of the DOM elements used by this controller.
* @returns {{}}
*/
function getElements () {
var elements = {};
var node = $element[0];
// gather tab bar elements
elements.wrapper = node.querySelector('md-tabs-wrapper');
elements.canvas = elements.wrapper.querySelector('md-tabs-canvas');
elements.paging = elements.canvas.querySelector('md-pagination-wrapper');
elements.inkBar = elements.paging.querySelector('md-ink-bar');
elements.contents = node.querySelectorAll('md-tabs-content-wrapper > md-tab-content');
elements.tabs = elements.paging.querySelectorAll('md-tab-item');
elements.dummies = elements.canvas.querySelectorAll('md-dummy-tab');
return elements;
}
/**
* Determines whether or not the left pagination arrow should be enabled.
* @returns {boolean}
*/
function canPageBack () {
return ctrl.offsetLeft > 0;
}
/**
* Determines whether or not the right pagination arrow should be enabled.
* @returns {*|boolean}
*/
function canPageForward () {
var elements = getElements();
var lastTab = elements.tabs[ elements.tabs.length - 1 ];
return lastTab && lastTab.offsetLeft + lastTab.offsetWidth > elements.canvas.clientWidth +
ctrl.offsetLeft;
}
/**
* Returns currently focused tab item's element ID
*/
function getFocusedTabId() {
var focusedTab = ctrl.tabs[ctrl.focusIndex];
if (!focusedTab || !focusedTab.id) {
return null;
}
return 'tab-item-' + focusedTab.id;
}
/**
* Determines if the UI should stretch the tabs to fill the available space.
* @returns {*}
*/
function shouldStretchTabs () {
switch (ctrl.stretchTabs) {
case 'always':
return true;
case 'never':
return false;
default:
return !ctrl.shouldPaginate
&& $window.matchMedia('(max-width: 600px)').matches;
}
}
/**
* Determines if the tabs should appear centered.
* @returns {string|boolean}
*/
function shouldCenterTabs () {
return ctrl.centerTabs && !ctrl.shouldPaginate;
}
/**
* Determines if pagination is necessary to display the tabs within the available space.
* @returns {boolean}
*/
function shouldPaginate () {
if (ctrl.noPagination || !loaded) return false;
var canvasWidth = $element.prop('clientWidth');
angular.forEach(getElements().dummies, function (tab) {
canvasWidth -= tab.offsetWidth;
});
return canvasWidth < 0;
}
/**
* Finds the nearest tab index that is available. This is primarily used for when the active
* tab is removed.
* @param newIndex
* @returns {*}
*/
function getNearestSafeIndex (newIndex) {
if (newIndex === -1) return -1;
var maxOffset = Math.max(ctrl.tabs.length - newIndex, newIndex),
i, tab;
for (i = 0; i <= maxOffset; i++) {
tab = ctrl.tabs[ newIndex + i ];
if (tab && (tab.scope.disabled !== true)) return tab.getIndex();
tab = ctrl.tabs[ newIndex - i ];
if (tab && (tab.scope.disabled !== true)) return tab.getIndex();
}
return newIndex;
}
// Utility methods
/**
* Defines a property using a getter and setter in order to trigger a change handler without
* using `$watch` to observe changes.
* @param key
* @param handler
* @param value
*/
function defineProperty (key, handler, value) {
Object.defineProperty(ctrl, key, {
get: function () { return value; },
set: function (newValue) {
var oldValue = value;
value = newValue;
handler && handler(newValue, oldValue);
}
});
}
/**
* Updates whether or not pagination should be displayed.
*/
function updatePagination () {
updatePagingWidth();
ctrl.maxTabWidth = getMaxTabWidth();
ctrl.shouldPaginate = shouldPaginate();
}
/**
* Sets or clears fixed width for md-pagination-wrapper depending on if tabs should stretch.
*/
function updatePagingWidth() {
var elements = getElements();
if (shouldStretchTabs()) {
angular.element(elements.paging).css('width', '');
} else {
angular.element(elements.paging).css('width', calcPagingWidth() + 'px');
}
}
/**
* Calculates the width of the pagination wrapper by summing the widths of the dummy tabs.
* @returns {number}
*/
function calcPagingWidth () {
return calcTabsWidth(getElements().dummies);
}
function calcTabsWidth(tabs) {
var width = 0;
angular.forEach(tabs, function (tab) {
//-- Uses the larger value between `getBoundingClientRect().width` and `offsetWidth`. This
// prevents `offsetWidth` value from being rounded down and causing wrapping issues, but
// also handles scenarios where `getBoundingClientRect()` is inaccurate (ie. tabs inside
// of a dialog)
width += Math.max(tab.offsetWidth, tab.getBoundingClientRect().width);
});
return Math.ceil(width);
}
function getMaxTabWidth () {
return $element.prop('clientWidth');
}
/**
* Re-orders the tabs and updates the selected and focus indexes to their new positions.
* This is triggered by `tabDirective.js` when the user's tabs have been re-ordered.
*/
function updateTabOrder () {
var selectedItem = ctrl.tabs[ ctrl.selectedIndex ],
focusItem = ctrl.tabs[ ctrl.focusIndex ];
ctrl.tabs = ctrl.tabs.sort(function (a, b) {
return a.index - b.index;
});
ctrl.selectedIndex = ctrl.tabs.indexOf(selectedItem);
ctrl.focusIndex = ctrl.tabs.indexOf(focusItem);
}
/**
* This moves the selected or focus index left or right. This is used by the keydown handler.
* @param inc
*/
function incrementIndex (inc, focus) {
var newIndex,
key = focus ? 'focusIndex' : 'selectedIndex',
index = ctrl[ key ];
for (newIndex = index + inc;
ctrl.tabs[ newIndex ] && ctrl.tabs[ newIndex ].scope.disabled;
newIndex += inc) {}
if (ctrl.tabs[ newIndex ]) {
ctrl[ key ] = newIndex;
}
}
/**
* This is used to forward focus to dummy elements. This method is necessary to avoid animation
* issues when attempting to focus an item that is out of view.
*/
function redirectFocus () {
ctrl.styleTabItemFocus = ($mdInteraction.getLastInteractionType() === 'keyboard');
getElements().dummies[ ctrl.focusIndex ].focus();
}
/**
* Forces the pagination to move the focused tab into view.
*/
function adjustOffset (index) {
var elements = getElements();
if (!angular.isNumber(index)) index = ctrl.focusIndex;
if (!elements.tabs[ index ]) return;
if (ctrl.shouldCenterTabs) return;
var tab = elements.tabs[ index ],
left = tab.offsetLeft,
right = tab.offsetWidth + left;
ctrl.offsetLeft = Math.max(ctrl.offsetLeft, fixOffset(right - elements.canvas.clientWidth + 32 * 2));
ctrl.offsetLeft = Math.min(ctrl.offsetLeft, fixOffset(left));
}
/**
* Iterates through all queued functions and clears the queue. This is used for functions that
* are called before the UI is ready, such as size calculations.
*/
function processQueue () {
queue.forEach(function (func) { $mdUtil.nextTick(func); });
queue = [];
}
/**
* Determines if the tab content area is needed.
*/
function updateHasContent () {
var hasContent = false;
for (var i = 0; i < ctrl.tabs.length; i++) {
if (ctrl.tabs[i].hasContent) {
hasContent = true;
break;
}
}
ctrl.hasContent = hasContent;
}
/**
* Moves the indexes to their nearest valid values.
*/
function refreshIndex () {
ctrl.selectedIndex = getNearestSafeIndex(ctrl.selectedIndex);
ctrl.focusIndex = getNearestSafeIndex(ctrl.focusIndex);
}
/**
* Calculates the content height of the current tab.
* @returns {*}
*/
function updateHeightFromContent () {
if (!ctrl.dynamicHeight) return $element.css('height', '');
if (!ctrl.tabs.length) return queue.push(updateHeightFromContent);
var elements = getElements();
var tabContent = elements.contents[ ctrl.selectedIndex ],
contentHeight = tabContent ? tabContent.offsetHeight : 0,
tabsHeight = elements.wrapper.offsetHeight,
newHeight = contentHeight + tabsHeight,
currentHeight = $element.prop('clientHeight');
if (currentHeight === newHeight) return;
// Adjusts calculations for when the buttons are bottom-aligned since this relies on absolute
// positioning. This should probably be cleaned up if a cleaner solution is possible.
if ($element.attr('md-align-tabs') === 'bottom') {
currentHeight -= tabsHeight;
newHeight -= tabsHeight;
// Need to include bottom border in these calculations
if ($element.attr('md-border-bottom') !== undefined) ++currentHeight;
}
// Lock during animation so the user can't change tabs
locked = true;
var fromHeight = { height: currentHeight + 'px' },
toHeight = { height: newHeight + 'px' };
// Set the height to the current, specific pixel height to fix a bug on iOS where the height
// first animates to 0, then back to the proper height causing a visual glitch
$element.css(fromHeight);
// Animate the height from the old to the new
$animateCss($element, {
from: fromHeight,
to: toHeight,
easing: 'cubic-bezier(0.35, 0, 0.25, 1)',
duration: 0.5
}).start().done(function () {
// Then (to fix the same iOS issue as above), disable transitions and remove the specific
// pixel height so the height can size with browser width/content changes, etc.
$element.css({
transition: 'none',
height: ''
});
// In the next tick, re-allow transitions (if we do it all at once, $element.css is "smart"
// enough to batch it for us instead of doing it immediately, which undoes the original
// transition: none)
$mdUtil.nextTick(function() {
$element.css('transition', '');
});
// And unlock so tab changes can occur
locked = false;
});
}
/**
* Repositions the ink bar to the selected tab.
* @returns {*}
*/
function updateInkBarStyles () {
var elements = getElements();
if (!elements.tabs[ ctrl.selectedIndex ]) {
angular.element(elements.inkBar).css({ left: 'auto', right: 'auto' });
return;
}
if (!ctrl.tabs.length) return queue.push(ctrl.updateInkBarStyles);
// if the element is not visible, we will not be able to calculate sizes until it is
// we should treat that as a resize event rather than just updating the ink bar
if (!$element.prop('offsetParent')) return handleResizeWhenVisible();
var index = ctrl.selectedIndex,
totalWidth = elements.paging.offsetWidth,
tab = elements.tabs[ index ],
left = tab.offsetLeft,
right = totalWidth - left - tab.offsetWidth;
if (ctrl.shouldCenterTabs) {
// We need to use the same calculate process as in the pagination wrapper, to avoid rounding deviations.
var tabWidth = calcTabsWidth(elements.tabs);
if (totalWidth > tabWidth) {
$mdUtil.nextTick(updateInkBarStyles, false);
}
}
updateInkBarClassName();
angular.element(elements.inkBar).css({ left: left + 'px', right: right + 'px' });
}
/**
* Adds left/right classes so that the ink bar will animate properly.
*/
function updateInkBarClassName () {
var elements = getElements();
var newIndex = ctrl.selectedIndex,
oldIndex = ctrl.lastSelectedIndex,
ink = angular.element(elements.inkBar);
if (!angular.isNumber(oldIndex)) return;
ink
.toggleClass('md-left', newIndex < oldIndex)
.toggleClass('md-right', newIndex > oldIndex);
}
/**
* Takes an offset value and makes sure that it is within the min/max allowed values.
* @param value
* @returns {*}
*/
function fixOffset (value) {
var elements = getElements();
if (!elements.tabs.length || !ctrl.shouldPaginate) return 0;
var lastTab = elements.tabs[ elements.tabs.length - 1 ],
totalWidth = lastTab.offsetLeft + lastTab.offsetWidth;
value = Math.max(0, value);
value = Math.min(totalWidth - elements.canvas.clientWidth, value);
return value;
}
/**
* Attaches a ripple to the tab item element.
* @param scope
* @param element
*/
function attachRipple (scope, element) {
var elements = getElements();
var options = { colorElement: angular.element(elements.inkBar) };
$mdTabInkRipple.attach(scope, element, options);
}
/**
* Sets the `aria-controls` attribute to the elements that
* correspond to the passed-in tab.
* @param tab
*/
function setAriaControls (tab) {
if (tab.hasContent) {
var nodes = $element[0].querySelectorAll('[md-tab-id="' + tab.id + '"]');
angular.element(nodes).attr('aria-controls', ctrl.tabContentPrefix + tab.id);
}
}
}