MDL-48805 theme: Collapse now collapses all data-target

This commit is contained in:
Brian Barnes 2015-01-13 09:12:03 +13:00
parent e0ae3519a1
commit c430c2c246
4 changed files with 43 additions and 34 deletions

View File

@ -707,18 +707,21 @@ NS.setup_toggle_show = function() {
NS.toggle_show = function(e) {
// Toggle the active class on both the clicked .btn-navbar and the
// associated target, defined by a CSS selector string set as the
// data-target attribute on the .btn-navbar element in question.
//
// This will allow for us to have multiple .btn-navbar elements
// each with their own collapse/expand targets - these targets
// should be of class .nav-collapse.
var myTarget = this.get('parentNode').one(this.getAttribute('data-target'));
if (myTarget) {
this.siblings(".btn-navbar").removeClass(CSS.ACTIVE);
myTarget.siblings(".nav-collapse").removeClass(CSS.ACTIVE);
myTarget.toggleClass(CSS.ACTIVE);
// data-target attribute on the .btn-navbar element in question.
var navButtons = Y.all(SELECTORS.NAVBAR_BUTTON);
var currentOpen = this.hasClass(CSS.ACTIVE);
// Close all nav sections.
Y.each(navButtons, function(navButton) {
Y.all(navButton.getAttribute('data-target')).removeClass(CSS.ACTIVE);
});
navButtons.removeClass(CSS.ACTIVE);
if (!currentOpen) {
// Open the current Nav section
this.addClass(CSS.ACTIVE);
Y.all(this.getAttribute('data-target')).addClass(CSS.ACTIVE);
}
e.currentTarget.toggleClass(CSS.ACTIVE);
};

View File

@ -697,18 +697,21 @@ NS.setup_toggle_show = function() {
NS.toggle_show = function(e) {
// Toggle the active class on both the clicked .btn-navbar and the
// associated target, defined by a CSS selector string set as the
// data-target attribute on the .btn-navbar element in question.
//
// This will allow for us to have multiple .btn-navbar elements
// each with their own collapse/expand targets - these targets
// should be of class .nav-collapse.
var myTarget = this.get('parentNode').one(this.getAttribute('data-target'));
if (myTarget) {
this.siblings(".btn-navbar").removeClass(CSS.ACTIVE);
myTarget.siblings(".nav-collapse").removeClass(CSS.ACTIVE);
myTarget.toggleClass(CSS.ACTIVE);
// data-target attribute on the .btn-navbar element in question.
var navButtons = Y.all(SELECTORS.NAVBAR_BUTTON);
var currentOpen = this.hasClass(CSS.ACTIVE);
// Close all nav sections.
Y.each(navButtons, function(navButton) {
Y.all(navButton.getAttribute('data-target')).removeClass(CSS.ACTIVE);
});
navButtons.removeClass(CSS.ACTIVE);
if (!currentOpen) {
// Open the current Nav section
this.addClass(CSS.ACTIVE);
Y.all(this.getAttribute('data-target')).addClass(CSS.ACTIVE);
}
e.currentTarget.toggleClass(CSS.ACTIVE);
};

View File

@ -97,16 +97,19 @@ NS.setup_toggle_show = function() {
NS.toggle_show = function(e) {
// Toggle the active class on both the clicked .btn-navbar and the
// associated target, defined by a CSS selector string set as the
// data-target attribute on the .btn-navbar element in question.
//
// This will allow for us to have multiple .btn-navbar elements
// each with their own collapse/expand targets - these targets
// should be of class .nav-collapse.
var myTarget = this.get('parentNode').one(this.getAttribute('data-target'));
if (myTarget) {
this.siblings(".btn-navbar").removeClass(CSS.ACTIVE);
myTarget.siblings(".nav-collapse").removeClass(CSS.ACTIVE);
myTarget.toggleClass(CSS.ACTIVE);
// data-target attribute on the .btn-navbar element in question.
var navButtons = Y.all(SELECTORS.NAVBAR_BUTTON);
var currentOpen = this.hasClass(CSS.ACTIVE);
// Close all nav sections.
Y.each(navButtons, function(navButton) {
Y.all(navButton.getAttribute('data-target')).removeClass(CSS.ACTIVE);
});
navButtons.removeClass(CSS.ACTIVE);
if (!currentOpen) {
// Open the current Nav section
this.addClass(CSS.ACTIVE);
Y.all(this.getAttribute('data-target')).addClass(CSS.ACTIVE);
}
e.currentTarget.toggleClass(CSS.ACTIVE);
};