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

Add class to disable js layout switching 

This is helpful when using MDL with other frameworks that provide routing such as Angular2.
master
yiinho 2016-10-18 15:14:35 -07:00
parent feca3a815a
commit b353f83e09
2 changed files with 55 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/layout/layout.js
View File

@ -110,6 +110,7 @@
TAB_BAR_BUTTON: 'mdl-layout__tab-bar-button',
TAB_BAR_LEFT_BUTTON: 'mdl-layout__tab-bar-left-button',
TAB_BAR_RIGHT_BUTTON: 'mdl-layout__tab-bar-right-button',
TAB_MANUAL_SWITCH: 'mdl-layout__tab-manual-switch',
PANEL: 'mdl-layout__tab-panel',
HAS_DRAWER: 'has-drawer',
@ -549,12 +550,15 @@
tab.appendChild(rippleContainer);
}
tab.addEventListener('click', function(e) {
if (tab.getAttribute('href').charAt(0) === '#') {
e.preventDefault();
selectTab();
}
});
if (!layout.tabBar_.classList.contains(
layout.CssClasses_.TAB_MANUAL_SWITCH)) {
tab.addEventListener('click', function(e) {
if (tab.getAttribute('href').charAt(0) === '#') {
e.preventDefault();
selectTab();
}
});
}
tab.show = selectTab;
}

45
test/unit/layout.js
View File

@ -151,4 +151,49 @@ describe('MaterialLayout', function () {
expect($(drawerBtn)).to.have.attr('aria-expanded', 'false');
});
});
describe('Manual switch mode', function () {
it('should disable content switching', function (done) {
var el = document.createElement('div');
el.innerHTML = '' +
' <header class="mdl-layout__header">' +
' <div class="mdl-layout__tab-bar mdl-js-ripple-effect mdl-layout__tab-manual-switch">' +
' <a id="tab1" href="#scroll-tab-1" class="mdl-layout__tab is-active">Tab 1</a>' +
' <a id="tab2" href="#scroll-tab-2" class="mdl-layout__tab">Tab 2</a>' +
' </div>' +
' </header>' +
' <main class="mdl-layout__content">' +
' <section class="mdl-layout__tab-panel is-active" id="scroll-tab-1">' +
' <div class="page-content"><!-- Your content goes here --></div>' +
' </section>' +
' <section class="mdl-layout__tab-panel" id="scroll-tab-2">' +
' <div class="page-content"><!-- Your content goes here --></div>' +
' </section>' +
' </main>';
var parent = document.createElement('div');
parent.appendChild(el); // MaterialLayout.init() expects a parent
var tab1 = el.querySelector('#tab1');
var tab2 = el.querySelector('#tab2');
var content1 = el.querySelector('#scroll-tab-1');
var content2 = el.querySelector('#scroll-tab-2');
componentHandler.upgradeElement(el, 'MaterialLayout');
var ev = document.createEvent('MouseEvents');
ev.initEvent('click', true, true);
tab2.dispatchEvent(ev);
window.setTimeout(function() {
// Since content switching has been set to manual, layout shouldn't
// have been switched.
expect($(tab1)).to.have.class('is-active');
expect($(content1)).to.have.class('is-active');
expect($(tab2)).to.not.have.class('is-active');
expect($(content2)).to.not.have.class('is-active');
done();
}, 100);
});
});
});