|
|
@@ -1,163 +0,0 @@
|
|
|
-// 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>
|
|
|
-++++
|
Adam Locke