From 4c14194b5bc3824a29c13c67d374357203877968 Mon Sep 17 00:00:00 2001
From: Samuel Diebolt <stryars@gmail.com>
Date: Wed, 24 Feb 2021 10:06:34 +0100
Subject: [PATCH 1/2] tabset-dropdown now uses Boostrap instead of CSS

Headers using the tabset-dropdown class now work similarly to regular
tabsets: all subheaders are included in a bootstrap dropdown. This
dropdown will be included inside the tabset just above.
---
 inst/rmd/h/default.html              |  56 ---------
 inst/rmd/h/navigation-1.1/tabsets.js | 167 +++++++++++++++++++++------
 2 files changed, 134 insertions(+), 89 deletions(-)

diff --git a/inst/rmd/h/default.html b/inst/rmd/h/default.html
index 39a8db77b7..79623e0ad2 100644
--- a/inst/rmd/h/default.html
+++ b/inst/rmd/h/default.html
@@ -284,62 +284,6 @@
 </script>
 $endif$
 
-<!-- tabsets -->
-
-<style type="text/css">
-.tabset-dropdown > .nav-tabs {
-  display: inline-table;
-  max-height: 500px;
-  min-height: 44px;
-  overflow-y: auto;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-}
-
-.tabset-dropdown > .nav-tabs > li.active:before {
-  content: "";
-  font-family: 'Glyphicons Halflings';
-  display: inline-block;
-  padding: 10px;
-  border-right: 1px solid #ddd;
-}
-
-.tabset-dropdown > .nav-tabs.nav-tabs-open > li.active:before {
-  content: "&#xe258;";
-  border: none;
-}
-
-.tabset-dropdown > .nav-tabs.nav-tabs-open:before {
-  content: "";
-  font-family: 'Glyphicons Halflings';
-  display: inline-block;
-  padding: 10px;
-  border-right: 1px solid #ddd;
-}
-
-.tabset-dropdown > .nav-tabs > li.active {
-  display: block;
-}
-
-.tabset-dropdown > .nav-tabs > li > a,
-.tabset-dropdown > .nav-tabs > li > a:focus,
-.tabset-dropdown > .nav-tabs > li > a:hover {
-  border: none;
-  display: inline-block;
-  border-radius: 4px;
-  background-color: transparent;
-}
-
-.tabset-dropdown > .nav-tabs.nav-tabs-open > li {
-  display: block;
-  float: none;
-}
-
-.tabset-dropdown > .nav-tabs > li {
-  display: none;
-}
-</style>
-
 <!-- code folding -->
 $if(code_menu)$
 <style type="text/css">
diff --git a/inst/rmd/h/navigation-1.1/tabsets.js b/inst/rmd/h/navigation-1.1/tabsets.js
index d7284e60d9..bc350c6a5e 100644
--- a/inst/rmd/h/navigation-1.1/tabsets.js
+++ b/inst/rmd/h/navigation-1.1/tabsets.js
@@ -1,5 +1,3 @@
-
-
 /**
  * jQuery Plugin: Sticky Tabs
  *
@@ -75,58 +73,162 @@ window.buildTabsets = function(tocID) {
     var tabContent = $('<div class="tab-content"></div>');
     $(tabs[0]).before(tabContent);
 
-    // build the tabset
-    var activeTab = 0;
+    var activeTabIndex = 0;
+    var activeDropdownTabIndex = 0;
     tabs.each(function(i) {
 
       // get the tab div
       var tab = $(tabs[i]);
 
       // get the id then sanitize it for use with bootstrap tabs
-      var id = tab.attr('id');
-
-      // see if this is marked as the active tab
-      if (tab.hasClass('active'))
-        activeTab = i;
+      var tabId = tab.attr('id');
 
       // remove any table of contents entries associated with
       // this ID (since we'll be removing the heading element)
-      $("div#" + tocID + " li a[href='#" + id + "']").parent().remove();
+      $("div#" + tocID + " li a[href='#" + tabId + "']").parent().remove();
 
       // sanitize the id for use with bootstrap tabs
-      id = id.replace(/[.\/?&!#<>]/g, '').replace(/\s/g, '_');
-      tab.attr('id', id);
+      tabId = tabId.replace(/[.\/?&!#<>]/g, '').replace(/\s/g, '_');
+      tab.attr('id', tabId);
 
       // get the heading element within it, grab it's text, then remove it
-      var heading = tab.find('h' + tabLevel + ':first');
-      var headingText = heading.html();
-      heading.remove();
+      var tabHeading = tab.find('h' + tabLevel + ':first');
+      var tabHeadingText = tabHeading.html();
+      tabHeading.remove();
 
       // build and append the tab list item
-      var a = $('<a role="tab" data-toggle="tab">' + headingText + '</a>');
-      a.attr('href', '#' + id);
-      a.attr('aria-controls', id);
       var li = $('<li role="presentation"></li>');
-      li.append(a);
       tabList.append(li);
 
-      // set it's attributes
-      tab.attr('role', 'tabpanel');
-      tab.addClass('tab-pane');
-      tab.addClass('tabbed-pane');
-      if (fade)
-        tab.addClass('fade');
+      // see if this is marked as the active tab, or set the first tab by
+      // default
+      if (tab.hasClass('active')) {
+        activeTabIndex = i;
+        li.addClass('active');
+        tab.addClass('active');
+        tab.addClass('in');
+      }
+
+      // check if this is a dropdown tab and process it accordingly
+      var dropdown = tab.hasClass("tabset-dropdown");
+      if (dropdown) {
+        li.addClass('dropdown');
+
+        // build and append the dropdown toggle
+        var a = $('<a class="dropdown-toggle" data-toggle="dropdown" href="#">'
+          + tabHeadingText
+          + ' <span class="caret"></span></a>');
+        li.append(a);
+
+        // build and append the dropdown menu
+        var dropdownMenu = $('<ul class="dropdown-menu"></ul>');
+        li.append(dropdownMenu)
+
+        // determine the heading level of the dropdown tabs
+        var match = tab.attr('class').match(/level(\d) /);
+        if (match === null)
+          return;
+        var dropdownLevel = Number(match[1]);
+        var dropdownTabLevel = dropdownLevel + 1;
+
+        // find all subheadings immediately below
+        var dropdownTabs = tab.find("div.section.level" + dropdownTabLevel);
+        if (!dropdownTabs.length)
+          return;
+
+        dropdownTabs.each(function(j) {
+
+          // get the dropdown tab div
+          var dropdownTab = $(dropdownTabs[j]);
+
+          // get the id then sanitize it for use with bootstrap tabs
+          var dropdownId = dropdownTab.attr('id');
+
+          // remove any table of contents entries associated with
+          // this ID (since we'll be removing the heading element)
+          $("div#" + tocID + " li a[href='#" + dropdownId + "']")
+            .parent().remove();
+
+          // sanitize the id for use with bootstrap tabs
+          dropdownId = dropdownId
+            .replace(/[.\/?&!#<>]/g, '')
+            .replace(/\s/g, '_');
+          dropdownTab.attr('id', dropdownId);
+
+          // get the heading element within it, grab it's text, then remove it
+          var dropdownHeading = dropdownTab
+            .find('h' + dropdownTabLevel + ':first');
+          var dropdownHeadingText = dropdownHeading.html();
+          dropdownHeading.remove();
+
+          // build and append the dropdown tab list item
+          var dropdownLi = $('<li role="presentation"></li>');
+          dropdownMenu.append(dropdownLi);
+
+          // see if this is marked as the active tab
+          if (dropdownTab.hasClass('active')) {
+            activeTabIndex = i;
+            activeDropdownTabIndex = j;
+            li.addClass('active');
+            dropdownLi.addClass('active');
+            dropdownTab.addClass('active');
+            dropdownTab.addClass('in');
+          }
 
-      // move it into the tab content div
-      tab.detach().appendTo(tabContent);
+          // build and append the dropdown tab link
+          var dropdownA = $('<a role="tab" data-toggle="tab">'
+            + dropdownHeadingText
+            + '</a>');
+          dropdownA.attr('href', '#' + dropdownId);
+          dropdownA.attr('aria-controls', dropdownId);
+          dropdownLi.append(dropdownA);
+
+          // set its attributes
+          dropdownTab.attr('role', 'tabpanel');
+          dropdownTab.addClass('tab-pane');
+          dropdownTab.addClass('tabbed-pane');
+          if (fade)
+            dropdownTab.addClass('fade');
+
+          // move it into the tab content div
+          dropdownTab.detach().appendTo(tabContent);
+        });
+      } else {
+        // build and append the tab link
+        var a = $('<a role="tab" data-toggle="tab">' + tabHeadingText + '</a>');
+        a.attr('href', '#' + tabId);
+        a.attr('aria-controls', tabId);
+        li.append(a);
+
+        // set its attributes
+        tab.attr('role', 'tabpanel');
+        tab.addClass('tab-pane');
+        tab.addClass('tabbed-pane');
+        if (fade)
+          tab.addClass('fade');
+
+        // move it into the tab content div
+        tab.detach().appendTo(tabContent);
+      }
     });
 
-    // set active tab
-    $(tabList.children('li')[activeTab]).addClass('active');
-    var active = $(tabContent.children('div.section')[activeTab]);
-    active.addClass('active');
+    // set active dropdown item
+    var activeTab = $(tabList.children('li')[activeTabIndex])
+    activeTab.addClass('active');
+    var contentTabID = activeTab.children('a').attr('aria-controls');
+
+    // set active dropdown tab if necessary
+    if (activeTab.hasClass("dropdown")) {
+      var activeDropdownTab = $(activeTab.find('li')[activeDropdownTabIndex]);
+      activeDropdownTab.addClass('active');
+
+      var contentTabID = activeDropdownTab.children('a').attr('aria-controls');
+    }
+
+    // set active content tab
+    $('#'+contentTabID).addClass('active');
     if (fade)
-      active.addClass('in');
+      $('#'+contentTabID).addClass('in');
 
     if (tabset.hasClass("tabset-sticky"))
       tabset.rmarkdownStickyTabs();
@@ -138,4 +240,3 @@ window.buildTabsets = function(tocID) {
     buildTabset($(tabsets[i]));
   });
 };
-

From 735051e5fc0394a159188c216e9c3874c61960c1 Mon Sep 17 00:00:00 2001
From: Samuel Diebolt <stryars@gmail.com>
Date: Wed, 24 Feb 2021 10:39:48 +0100
Subject: [PATCH 2/2] Removed left over code from active tab management

---
 inst/rmd/h/navigation-1.1/tabsets.js | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/inst/rmd/h/navigation-1.1/tabsets.js b/inst/rmd/h/navigation-1.1/tabsets.js
index bc350c6a5e..7374d297a9 100644
--- a/inst/rmd/h/navigation-1.1/tabsets.js
+++ b/inst/rmd/h/navigation-1.1/tabsets.js
@@ -104,9 +104,6 @@ window.buildTabsets = function(tocID) {
       // default
       if (tab.hasClass('active')) {
         activeTabIndex = i;
-        li.addClass('active');
-        tab.addClass('active');
-        tab.addClass('in');
       }
 
       // check if this is a dropdown tab and process it accordingly
@@ -169,10 +166,6 @@ window.buildTabsets = function(tocID) {
           if (dropdownTab.hasClass('active')) {
             activeTabIndex = i;
             activeDropdownTabIndex = j;
-            li.addClass('active');
-            dropdownLi.addClass('active');
-            dropdownTab.addClass('active');
-            dropdownTab.addClass('in');
           }
 
           // build and append the dropdown tab link