Merge pull request #121 from astroDimitrios/feature/tab-admonition

Add support for tabs / tabset panels

source/javascripts/custom/tabs.js

@@ -0,0 +1,99 @@
+try {
+  var store = window.localStorage || {};
+} catch (e) {
+  var store = {};
+}
+
+window.addEventListener("DOMContentLoaded", () => {
+  const tabLists = document.querySelectorAll('[role="tablist"]');
+
+  tabLists.forEach(tabList => {
+    tabList.addEventListener("click", changeTabs);
+  });
+
+  tabLists.forEach(tabList => {
+    tabList.addEventListener("keydown", keyTabs);
+  });
+
+  // Restore group tab selection from store
+  const lastSelected = store.getItem('group-tabs-last-selected');
+  if (lastSelected != null) selectNamedTabs(lastSelected);
+});
+
+/**
+ * Key focus left and right between sibling elements using arrows
+ * @param  {Node} e the element in focus when key was pressed
+ */
+function keyTabs(e) {
+  var tab = e.target;
+  let nextTab = null;
+  if (e.keyCode === 39 || e.keyCode === 37) {
+    // Move right
+    if (e.keyCode === 39) {
+      nextTab = tab.nextElementSibling;
+      if (nextTab === null) {
+        nextTab = tab.parentNode.firstElementChild;
+      }
+    // Move left
+    } else if (e.keyCode === 37) {
+      nextTab = tab.previousElementSibling;
+      if (nextTab === null) {
+        nextTab = tab.parentNode.lastElementChild;
+      }
+    }
+  }
+
+  if (nextTab !== null) {
+      // Focus on the tab and tell bootstrap to show it
+      nextTab.focus();
+      tab = new bootstrap.Tab(nextTab);
+      tab.show();
+      // Show group-tab(s) with same name
+      if (nextTab.hasAttribute("name")) {
+        var group_name = nextTab.getAttribute("name");
+        selectNamedTabs(group_name, nextTab.id);
+        store.setItem('group-tabs-last-selected', group_name);
+      }
+  }
+}
+
+/**
+ * Select the group-tabs with the same name as e.
+ * This doesn't need to call show() on the
+ * target tab; Bootstrap handles that.
+ * @param  {Node} e the element that was clicked
+ */
+function changeTabs(e) {
+  // Using Bootstrap the clicks can be
+  // on the header or the button, if on
+  // the header target the button
+  if (e.target.classList.contains("tab-header")) {
+    var target = e.target.parentNode;
+  } else {
+    var target = e.target;
+  }
+  // Show group-tab(s) with same name
+  if (target.hasAttribute("name")) {
+    var group_name = target.getAttribute("name");
+    selectNamedTabs(group_name, target.id);
+    store.setItem('group-tabs-last-selected', group_name);
+  }
+}
+
+/**
+ * Select grouped tabs with the same name, but no the tab
+ * with the given id.
+ * @param  {Node} name name of grouped tab to be selected
+ * @param  {Node} clickedId id of clicked tab
+ */
+function selectNamedTabs(name, clickedId=null) {
+  const groupedTabs = document.getElementsByName(name);
+  groupedTabs
+    .forEach(groupTab => {
+      // Don't show the tab we already selected
+      if ( groupTab.id != clickedId ) {
+        var tab = new bootstrap.Tab(groupTab);
+        tab.show();
+      }
+    })
+}

source/javascripts/scripts.js

@@ -2,4 +2,5 @@
 #= require vendor/bootstrap/bootstrap
 #= require vendor/jquery-visible/jquery.visible
 #= require vendor/feather-icons/feather
-#= require custom/menu 
+#= require custom/menu
+#= require custom/tabs

source/stylesheets/styles.css.scss

@@ -10,6 +10,7 @@
 @import "footer";
 @import "schedule";
 @import "skiplinks";
+@import "tabs";
 
 
 /// Base path for assets (fonts, images...),

source/stylesheets/tabs.scss

@@ -0,0 +1,57 @@
+// add space between tabs and other elements
+div.tabs {
+  margin: 15px 0px;
+}
+
+// no borders
+// margin to offset the top border when active
+.nav-tabs .nav-link {
+  margin-top: 6px;
+  padding: 10px;
+  box-sizing: border-box;
+  border-top-width: 0;
+  border-right-width: 0;
+  border-bottom-width: 0;
+  border-left-width: 0;
+}
+
+.tab-header {
+  // border-bottom-style: solid;
+  // border-bottom-width: 2px;
+  // border-bottom-color: $gray-200;
+  text-decoration: underline;
+  text-decoration-color: $gray-400;
+  text-underline-offset: 6px;
+}
+
+.nav-tabs .nav-link.active {
+  // alter padding to account for border
+  padding: 4px 9px 10px 9px;
+  border-top-width: 6px;
+  border-top-color: $bright-blue;
+  border-right-width: 1px;
+  border-right-color: $gray-400;
+  border-left-width: 1px;
+  border-left-color: $gray-400;
+  .tab-header {
+    text-decoration: none;
+  }
+}
+
+.nav-link[role="tab"][aria-selected="false"]:hover {
+  outline: 2px solid $bright-blue;
+  z-index: 100;
+}
+
+div.tab-content {
+  border-style: solid;
+  padding: 20px 20px;
+  border-top: 0;
+  border-right-width: 1px;
+  border-right-color: $gray-400;
+  border-left-width: 1px;
+  border-left-color: $gray-400;
+  border-bottom-width: 1px;
+  border-bottom-color: $gray-400;
+  border-radius: 0px 0px 3px 3px;
+}

squash-a-script.sh

@@ -9,6 +9,7 @@ node_modules/.bin/uglifyjs ${vend}/jquery/jquery.js \
   ${vend}/jquery-visible/jquery.visible.js \
   ${vend}/feather-icons/feather.js \
   ${cust}/menu.js \
+  ${cust}/tabs.js \
   --compress \
   --output inst/pkgdown/assets/assets/scripts.js