|
|
@@ -0,0 +1,163 @@
|
|
|
+// Defining styles and script here for simplicity.
|
|
|
+++++
|
|
|
+<style>
|
|
|
+.tabs {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+[role="tablist"] {
|
|
|
+ margin: 0 0 -0.1em;
|
|
|
+ overflow: visible;
|
|
|
+}
|
|
|
+[role="tab"] {
|
|
|
+ position: relative;
|
|
|
+ padding: 0.3em 0.5em 0.4em;
|
|
|
+ border: 1px solid hsl(219, 1%, 72%);
|
|
|
+ border-radius: 0.2em 0.2em 0 0;
|
|
|
+ overflow: visible;
|
|
|
+ font-family: inherit;
|
|
|
+ font-size: inherit;
|
|
|
+ background: hsl(220, 20%, 94%);
|
|
|
+}
|
|
|
+[role="tab"]:hover::before,
|
|
|
+[role="tab"]:focus::before,
|
|
|
+[role="tab"][aria-selected="true"]::before {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 100%;
|
|
|
+ right: -1px;
|
|
|
+ left: -1px;
|
|
|
+ border-radius: 0.2em 0.2em 0 0;
|
|
|
+ border-top: 3px solid hsl(219, 1%, 72%);
|
|
|
+ content: '';
|
|
|
+}
|
|
|
+[role="tab"][aria-selected="true"] {
|
|
|
+ border-radius: 0;
|
|
|
+ background: hsl(220, 43%, 99%);
|
|
|
+ outline: 0;
|
|
|
+}
|
|
|
+[role="tab"][aria-selected="true"]:not(:focus):not(:hover)::before {
|
|
|
+ border-top: 5px solid hsl(218, 96%, 48%);
|
|
|
+}
|
|
|
+[role="tab"][aria-selected="true"]::after {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 3;
|
|
|
+ bottom: -1px;
|
|
|
+ right: 0;
|
|
|
+ left: 0;
|
|
|
+ height: 0.3em;
|
|
|
+ background: hsl(220, 43%, 99%);
|
|
|
+ box-shadow: none;
|
|
|
+ content: '';
|
|
|
+}
|
|
|
+[role="tab"]:hover,
|
|
|
+[role="tab"]:focus,
|
|
|
+[role="tab"]:active {
|
|
|
+ outline: 0;
|
|
|
+ border-radius: 0;
|
|
|
+ color: inherit;
|
|
|
+}
|
|
|
+[role="tab"]:hover::before,
|
|
|
+[role="tab"]:focus::before {
|
|
|
+ border-color: hsl(218, 96%, 48%);
|
|
|
+}
|
|
|
+[role="tabpanel"] {
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
+ padding: 1em;
|
|
|
+ border: 1px solid hsl(219, 1%, 72%);
|
|
|
+ border-radius: 0 0.2em 0.2em 0.2em;
|
|
|
+ box-shadow: 0 0 0.2em hsl(219, 1%, 72%);
|
|
|
+ background: hsl(220, 43%, 99%);
|
|
|
+ margin-bottom: 1em;
|
|
|
+}
|
|
|
+[role="tabpanel"] p {
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+[role="tabpanel"] * + p {
|
|
|
+ margin-top: 1em;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<script>
|
|
|
+window.addEventListener("DOMContentLoaded", () => {
|
|
|
+ const tabs = document.querySelectorAll('[role="tab"]');
|
|
|
+ const tabList = document.querySelector('[role="tablist"]');
|
|
|
+ // Add a click event handler to each tab
|
|
|
+ tabs.forEach(tab => {
|
|
|
+ tab.addEventListener("click", changeTabs);
|
|
|
+ });
|
|
|
+ // Enable arrow navigation between tabs in the tab list
|
|
|
+ let tabFocus = 0;
|
|
|
+ tabList.addEventListener("keydown", e => {
|
|
|
+ // Move right
|
|
|
+ if (e.keyCode === 39 || e.keyCode === 37) {
|
|
|
+ tabs[tabFocus].setAttribute("tabindex", -1);
|
|
|
+ if (e.keyCode === 39) {
|
|
|
+ tabFocus++;
|
|
|
+ // If we're at the end, go to the start
|
|
|
+ if (tabFocus >= tabs.length) {
|
|
|
+ tabFocus = 0;
|
|
|
+ }
|
|
|
+ // Move left
|
|
|
+ } else if (e.keyCode === 37) {
|
|
|
+ tabFocus--;
|
|
|
+ // If we're at the start, move to the end
|
|
|
+ if (tabFocus < 0) {
|
|
|
+ tabFocus = tabs.length - 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ tabs[tabFocus].setAttribute("tabindex", 0);
|
|
|
+ tabs[tabFocus].focus();
|
|
|
+ }
|
|
|
+ });
|
|
|
+});
|
|
|
+function setActiveTab(target) {
|
|
|
+ const parent = target.parentNode;
|
|
|
+ const grandparent = parent.parentNode;
|
|
|
+ // console.log(grandparent);
|
|
|
+ // Remove all current selected tabs
|
|
|
+ parent
|
|
|
+ .querySelectorAll('[aria-selected="true"]')
|
|
|
+ .forEach(t => t.setAttribute("aria-selected", false));
|
|
|
+ // Set this tab as selected
|
|
|
+ target.setAttribute("aria-selected", true);
|
|
|
+ // Hide all tab panels
|
|
|
+ grandparent
|
|
|
+ .querySelectorAll('[role="tabpanel"]')
|
|
|
+ .forEach(p => p.setAttribute("hidden", true));
|
|
|
+ // Show the selected panel
|
|
|
+ grandparent.parentNode
|
|
|
+ .querySelector(`#${target.getAttribute("aria-controls")}`)
|
|
|
+ .removeAttribute("hidden");
|
|
|
+}
|
|
|
+function changeTabs(e) {
|
|
|
+ // get the containing list of the tab that was just clicked
|
|
|
+ const tabList = e.target.parentNode;
|
|
|
+
|
|
|
+ // get all of the sibling tabs
|
|
|
+ const buttons = Array.apply(null, tabList.querySelectorAll('button'));
|
|
|
+
|
|
|
+ // loop over the siblings to discover which index thje clicked one was
|
|
|
+ const { index } = buttons.reduce(({ found, index }, button) => {
|
|
|
+ if (!found && buttons[index] === e.target) {
|
|
|
+ return { found: true, index };
|
|
|
+ } else if (!found) {
|
|
|
+ return { found, index: index + 1 };
|
|
|
+ } else {
|
|
|
+ return { found, index };
|
|
|
+ }
|
|
|
+ }, { found: false, index: 0 });
|
|
|
+
|
|
|
+ // get the tab container
|
|
|
+ const container = tabList.parentNode;
|
|
|
+ // read the data-tab-group value from the container, e.g. "os"
|
|
|
+ const { tabGroup } = container.dataset;
|
|
|
+ // get a list of all the tab groups that match this value on the page
|
|
|
+ const groups = document.querySelectorAll('[data-tab-group=' + tabGroup + ']');
|
|
|
+
|
|
|
+ // for each of the found tab groups, find the tab button at the previously discovered index and select it for each group
|
|
|
+ groups.forEach((group) => {
|
|
|
+ const target = group.querySelectorAll('button')[index];
|
|
|
+ setActiveTab(target);
|
|
|
+ });
|
|
|
+}
|
|
|
+</script>
|
|
|
+++++
|
James Rodewig