Fix active nav menu markup (#418)

* Also add `.active` to nav menu list item * Add active classes in the same block * Use bootstrap tab plugin to manage active class on page and nav Co-authored-by: Carson Sievert <[email protected]> * Remove `.manageActiveNavbarMenu()` * Add some of my notes in comments * Add NEWS item * remove comment --------- Co-authored-by: Carson Sievert <[email protected]>
rstudio · Feb 28, 2023 · 50d7648 · 50d7648
1 parent ddcfd7e
commit 50d7648
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 18 deletions.
diff --git a/NEWS.md b/NEWS.md
@@ -1,6 +1,6 @@
 # flexdashboard 0.6.1.9000
 
-
+* Fixed #411: Improved support for Bootstrap 5 to ensure correct handling of the active dashboard page. (#418)
 
 # flexdashboard 0.6.1
 

diff --git a/inst/www/flex_dashboard/flexdashboard.js b/inst/www/flex_dashboard/flexdashboard.js
@@ -273,8 +273,6 @@ var FlexDashboard = (function () {
 
     // add the tab-pane class to the wrapper
     wrapper.addClass('tab-pane');
-    if (active)
-      wrapper.addClass('active');
 
     // get a reference to the h1, discover its inner contens, then detach it
     var h1 = wrapper.find('h1').first();
@@ -299,6 +297,10 @@ var FlexDashboard = (function () {
       container.append(li);
     }
 
+    // mark active tab and corresponding nav menu item
+    if (active)
+      $(a).tab("show");
+
     // hide it if requested
     if (hidden)
       li.addClass('hidden');
@@ -1225,9 +1227,10 @@ var FlexDashboard = (function () {
 
     // restore tab/page from bookmark
     var hash = window.decodeURIComponent(window.location.hash);
-    if (hash.length > 0)
+    if (hash.length > 0) {
+      // Update the tab without .showPage() so that we don't change page history
       $('ul.nav a[href="' + hash + '"]').tab('show');
-    FlexDashboardUtils.manageActiveNavbarMenu();
+    }
 
     // navigate to a tab when the history changes
     window.addEventListener("popstate", function(e) {
@@ -1236,9 +1239,9 @@ var FlexDashboard = (function () {
       if (activeTab.length) {
         activeTab.tab('show');
       } else {
+        // returning to the base page URL without a hash activates first tab
         $('ul.nav a:first').tab('show');
       }
-      FlexDashboardUtils.manageActiveNavbarMenu();
     });
 
     // add a hash to the URL when the user clicks on a tab/page
@@ -1322,7 +1325,6 @@ window.FlexDashboardUtils = {
     setTimeout(function() {
         window.scrollTo(0, 0);
     }, 10);
-    this.manageActiveNavbarMenu();
   },
   showPage: function(href) {
     $('ul.navbar-nav li a[href="' + href + '"]').tab('show');
@@ -1350,17 +1352,6 @@ window.FlexDashboardUtils = {
       return url.substring(hashLoc);
     else
       return "";
-  },
-  manageActiveNavbarMenu: function () {
-    // remove active from currently active tabs
-    $('.navbar ul.nav .active').removeClass('active');
-    // find the active tab
-    var activeTab = $('.dashboard-page-wrapper.tab-pane.active');
-    if (activeTab.length > 0) {
-      var tabId = activeTab.attr('id');
-      if (tabId)
-        $(".navbar ul.nav a[href='#" + tabId + "']").tab("show");
-    }
   }
 };