MDL-46920 theme_bootstrapbase: fix dropdown to use data-target

theme/bootstrapbase/yui/build/moodle-theme_bootstrapbase-bootstrap/moodle-theme_bootstrapbase-bootstrap-debug.js

@@ -629,8 +629,7 @@ var CSS = {
     SELECTORS = {
         NAVBAR_BUTTON: '.btn-navbar',
         // FIXME This is deliberately wrong because of a breaking issue in the upstream library.
-        TOGGLECOLLAPSE: '*[data-disabledtoggle="collapse"]',
-        NAV_COLLAPSE: '.nav-collapse'
+        TOGGLECOLLAPSE: '*[data-disabledtoggle="collapse"]'
     },
     NS = Y.namespace('Moodle.theme_bootstrapbase.bootstrap');
 
@@ -706,9 +705,19 @@ NS.setup_toggle_show = function() {
  * @param {EventFacade} e
  */
 NS.toggle_show = function(e) {
-    // Toggle the active class on both the clicked .btn-navbar and the .nav-collapse.
-    // Our CSS will set the height for these.
-    Y.all(SELECTORS.NAV_COLLAPSE).toggleClass(CSS.ACTIVE);
+    // 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);
+    }
     e.currentTarget.toggleClass(CSS.ACTIVE);
 };
 

theme/bootstrapbase/yui/build/moodle-theme_bootstrapbase-bootstrap/moodle-theme_bootstrapbase-bootstrap.js

@@ -619,8 +619,7 @@ var CSS = {
     SELECTORS = {
         NAVBAR_BUTTON: '.btn-navbar',
         // FIXME This is deliberately wrong because of a breaking issue in the upstream library.
-        TOGGLECOLLAPSE: '*[data-disabledtoggle="collapse"]',
-        NAV_COLLAPSE: '.nav-collapse'
+        TOGGLECOLLAPSE: '*[data-disabledtoggle="collapse"]'
     },
     NS = Y.namespace('Moodle.theme_bootstrapbase.bootstrap');
 
@@ -696,9 +695,19 @@ NS.setup_toggle_show = function() {
  * @param {EventFacade} e
  */
 NS.toggle_show = function(e) {
-    // Toggle the active class on both the clicked .btn-navbar and the .nav-collapse.
-    // Our CSS will set the height for these.
-    Y.all(SELECTORS.NAV_COLLAPSE).toggleClass(CSS.ACTIVE);
+    // 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);
+    }
     e.currentTarget.toggleClass(CSS.ACTIVE);
 };
 

theme/bootstrapbase/yui/src/bootstrap/js/bootstrap.js

@@ -19,8 +19,7 @@ var CSS = {
     SELECTORS = {
         NAVBAR_BUTTON: '.btn-navbar',
         // FIXME This is deliberately wrong because of a breaking issue in the upstream library.
-        TOGGLECOLLAPSE: '*[data-disabledtoggle="collapse"]',
-        NAV_COLLAPSE: '.nav-collapse'
+        TOGGLECOLLAPSE: '*[data-disabledtoggle="collapse"]'
     },
     NS = Y.namespace('Moodle.theme_bootstrapbase.bootstrap');
 
@@ -96,8 +95,18 @@ NS.setup_toggle_show = function() {
  * @param {EventFacade} e
  */
 NS.toggle_show = function(e) {
-    // Toggle the active class on both the clicked .btn-navbar and the .nav-collapse.
-    // Our CSS will set the height for these.
-    Y.all(SELECTORS.NAV_COLLAPSE).toggleClass(CSS.ACTIVE);
+    // 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);
+    }
     e.currentTarget.toggleClass(CSS.ACTIVE);
 };