google
/
material-design-lite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update tab button appearance on window resize. Fixes #4061.

master
Sérgio Gomes 2016-02-12 15:41:17 +00:00
parent 48cdbd9340
commit a86a08fd6e
1 changed files with 20 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/layout/layout.js
View File

@ -43,6 +43,7 @@
MaterialLayout.prototype.Constant_ = {
MAX_WIDTH: '(max-width: 1024px)',
TAB_SCROLL_PIXELS: 100,
RESIZE_TIMEOUT: 100,
MENU_ICON: '',
CHEVRON_LEFT: 'chevron_left',
@ -453,8 +454,9 @@
tabContainer.appendChild(this.tabBar_);
tabContainer.appendChild(rightButton);
// Add and remove buttons depending on scroll position.
var tabScrollHandler = function() {
// Add and remove tab buttons depending on scroll position and total
// window size.
var tabUpdateHandler = function() {
if (this.tabBar_.scrollLeft > 0) {
leftButton.classList.add(this.CssClasses_.IS_ACTIVE);
} else {
@ -469,8 +471,22 @@
}
}.bind(this);
this.tabBar_.addEventListener('scroll', tabScrollHandler);
tabScrollHandler();
this.tabBar_.addEventListener('scroll', tabUpdateHandler);
tabUpdateHandler();
// Update tabs when the window resizes.
var windowResizeHandler = function() {
// Use timeouts to make sure it doesn't happen too often.
if (this.resizeTimeoutId_) {
clearTimeout(this.resizeTimeoutId_);
}
this.resizeTimeoutId_ = setTimeout(function() {
tabUpdateHandler();
this.resizeTimeoutId_ = null;
}.bind(this), /** @type {number} */ (this.Constant_.RESIZE_TIMEOUT));
}.bind(this);
window.addEventListener('resize', windowResizeHandler);
if (this.tabBar_.classList.contains(this.CssClasses_.JS_RIPPLE_EFFECT)) {
this.tabBar_.classList.add(this.CssClasses_.RIPPLE_IGNORE_EVENTS);