From 64765ecfaf8ca4504339880717a7b4b34358e342 Mon Sep 17 00:00:00 2001 From: Brandon Morelli Date: Mon, 16 Aug 2021 16:04:50 -0700 Subject: [PATCH 1/8] add tabbed widget js and css to build --- resources/web/style/tab_widget.pcss | 74 +++++++++++++++++++++++++++++ resources/web/styles.pcss | 1 + resources/web/template.html | 7 ++- 3 files changed, 81 insertions(+), 1 deletion(-) create mode 100644 resources/web/style/tab_widget.pcss diff --git a/resources/web/style/tab_widget.pcss b/resources/web/style/tab_widget.pcss new file mode 100644 index 000000000000..358d1f864e62 --- /dev/null +++ b/resources/web/style/tab_widget.pcss @@ -0,0 +1,74 @@ +.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; +} diff --git a/resources/web/styles.pcss b/resources/web/styles.pcss index 7c4e5ffa6665..6e15d029946e 100644 --- a/resources/web/styles.pcss +++ b/resources/web/styles.pcss @@ -24,6 +24,7 @@ @import './style/settings_modal.pcss'; @import './style/sidebar.pcss'; @import './style/table.pcss'; +@import './style/tab_widget.pcss'; @import './style/this_page.pcss'; @import './style/toc.pcss'; @import './style/util.pcss'; diff --git a/resources/web/template.html b/resources/web/template.html index a9b500659ff7..3d2098154286 100644 --- a/resources/web/template.html +++ b/resources/web/template.html @@ -50,7 +50,7 @@ - + + + + From f98ed25099e7afaecd33835d923c15f50b31ff05 Mon Sep 17 00:00:00 2001 From: Brandon Morelli Date: Tue, 17 Aug 2021 08:23:06 -0700 Subject: [PATCH 2/8] move tabbed widget JS to /static/docs.js --- resources/web/docs.js.licenses | 16 ++--- resources/web/lib/prettify/prettify.js | 87 ++++++++++++++++++++++++++ resources/web/template.html | 5 -- 3 files changed, 95 insertions(+), 13 deletions(-) diff --git a/resources/web/docs.js.licenses b/resources/web/docs.js.licenses index 207281b04009..185f421b068d 100644 --- a/resources/web/docs.js.licenses +++ b/resources/web/docs.js.licenses @@ -53,19 +53,19 @@ * limitations under the License. */ /* details-polyfill * The MIT License (MIT) - * + * * Copyright (c) 2018 Rico Sta. Cruz - * + * * Permission is hereby granted, free of charge, to any person obtaining a copy * of this software and associated documentation files (the "Software"), to deal * in the Software without restriction, including without limitation the rights * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell * copies of the Software, and to permit persons to whom the Software is * furnished to do so, subject to the following conditions: - * + * * The above copyright notice and this permission notice shall be included in all * copies or substantial portions of the Software. - * + * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE @@ -86,7 +86,7 @@ * distribute, sublicense, and/or sell copies of the Software, and to * permit persons to whom the Software is furnished to do so, subject to * the following conditions: - * + * * The above copyright notice and this permission notice shall be * included in all copies or substantial portions of the Software. * @@ -130,10 +130,10 @@ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell * copies of the Software, and to permit persons to whom the Software is * furnished to do so, subject to the following conditions: - * + * * The above copyright notice and this permission notice shall be included in * all copies or substantial portions of the Software. - * + * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE @@ -289,4 +289,4 @@ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN - * THE SOFTWARE. */ + * THE SOFTWARE. */ \ No newline at end of file diff --git a/resources/web/lib/prettify/prettify.js b/resources/web/lib/prettify/prettify.js index a897b120df25..ef0e1596810b 100644 --- a/resources/web/lib/prettify/prettify.js +++ b/resources/web/lib/prettify/prettify.js @@ -1731,6 +1731,93 @@ var prettyPrint; : (prettyPrint = $prettyPrint) }; +// BEGIN TABBED WIDGET JS +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); + }); +} +// END TABBED WIDGET JS + // Begin modification to support parcel export default PR; // // Make PR available via the Asynchronous Module Definition (AMD) API. diff --git a/resources/web/template.html b/resources/web/template.html index 3d2098154286..144dce50226f 100644 --- a/resources/web/template.html +++ b/resources/web/template.html @@ -133,11 +133,6 @@

Most Popular

- - - From 31971fe8cb5a16624cd88f58c03b9c33887a07ce Mon Sep 17 00:00:00 2001 From: Brandon Morelli Date: Tue, 17 Aug 2021 11:09:39 -0700 Subject: [PATCH 3/8] fix CSS --- resources/web/style/tab_widget.pcss | 74 ------------------------- resources/web/style/tabbed_widget.pcss | 76 ++++++++++++++++++++++++++ resources/web/styles.pcss | 2 +- 3 files changed, 77 insertions(+), 75 deletions(-) delete mode 100644 resources/web/style/tab_widget.pcss create mode 100644 resources/web/style/tabbed_widget.pcss diff --git a/resources/web/style/tab_widget.pcss b/resources/web/style/tab_widget.pcss deleted file mode 100644 index 358d1f864e62..000000000000 --- a/resources/web/style/tab_widget.pcss +++ /dev/null @@ -1,74 +0,0 @@ -.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; -} diff --git a/resources/web/style/tabbed_widget.pcss b/resources/web/style/tabbed_widget.pcss new file mode 100644 index 000000000000..e3dd9f83afb9 --- /dev/null +++ b/resources/web/style/tabbed_widget.pcss @@ -0,0 +1,76 @@ +#guide { + .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; + } +} \ No newline at end of file diff --git a/resources/web/styles.pcss b/resources/web/styles.pcss index 6e15d029946e..ebecdfa8971a 100644 --- a/resources/web/styles.pcss +++ b/resources/web/styles.pcss @@ -24,7 +24,7 @@ @import './style/settings_modal.pcss'; @import './style/sidebar.pcss'; @import './style/table.pcss'; -@import './style/tab_widget.pcss'; +@import './style/tabbed_widget.pcss'; @import './style/this_page.pcss'; @import './style/toc.pcss'; @import './style/util.pcss'; From d8b96830ee6446d92dc6b44a25dbffe70d4d3378 Mon Sep 17 00:00:00 2001 From: Brandon Morelli Date: Thu, 19 Aug 2021 12:13:06 -0700 Subject: [PATCH 4/8] =?UTF-8?q?docs:=20=F0=9F=A6=81=20i=20like=20to=20move?= =?UTF-8?q?=20it=20move=20it=20=F0=9F=A6=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/docs_js/components/tabbed_widget.js | 86 ++++++++++++++++++ resources/web/docs_js/index.js | 6 ++ resources/web/lib/prettify/prettify.js | 87 ------------------- 3 files changed, 92 insertions(+), 87 deletions(-) create mode 100644 resources/web/docs_js/components/tabbed_widget.js diff --git a/resources/web/docs_js/components/tabbed_widget.js b/resources/web/docs_js/components/tabbed_widget.js new file mode 100644 index 000000000000..468f373dae1b --- /dev/null +++ b/resources/web/docs_js/components/tabbed_widget.js @@ -0,0 +1,86 @@ +export const switchTabs = () => { + 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(); + } + }); + }); +} + +export const 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"); +} + +export const 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); + }); +} diff --git a/resources/web/docs_js/index.js b/resources/web/docs_js/index.js index e578e6fa2f15..e8ae49273cc1 100644 --- a/resources/web/docs_js/index.js +++ b/resources/web/docs_js/index.js @@ -2,6 +2,7 @@ import AlternativeSwitcher from "./components/alternative_switcher"; import ConsoleWidget from "./components/console_widget"; import Modal from "./components/modal"; import mount from "./components/mount"; +import {switchTabs, setActiveTab, changeTabs} from "./components/tabbed_widget"; import {Cookies, $} from "./deps"; import {lang_strings} from "./localization"; import store from "./store"; @@ -281,3 +282,8 @@ $(function() { // Test comment used to detect unminifed JS in tests }); + +// Tabbed widgets +switchTabs(); +setActiveTab(); +changeTabs(); diff --git a/resources/web/lib/prettify/prettify.js b/resources/web/lib/prettify/prettify.js index ef0e1596810b..a897b120df25 100644 --- a/resources/web/lib/prettify/prettify.js +++ b/resources/web/lib/prettify/prettify.js @@ -1731,93 +1731,6 @@ var prettyPrint; : (prettyPrint = $prettyPrint) }; -// BEGIN TABBED WIDGET JS -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); - }); -} -// END TABBED WIDGET JS - // Begin modification to support parcel export default PR; // // Make PR available via the Asynchronous Module Definition (AMD) API. From 9b56afd544a50c0b1bda82d4e03ab31179c1dd73 Mon Sep 17 00:00:00 2001 From: Brandon Morelli Date: Fri, 20 Aug 2021 07:30:13 -0700 Subject: [PATCH 5/8] docs: only export and invoke switchTabs() in index --- resources/web/docs_js/components/tabbed_widget.js | 4 ++-- resources/web/docs_js/index.js | 4 +--- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/resources/web/docs_js/components/tabbed_widget.js b/resources/web/docs_js/components/tabbed_widget.js index 468f373dae1b..fab9f1db9f7e 100644 --- a/resources/web/docs_js/components/tabbed_widget.js +++ b/resources/web/docs_js/components/tabbed_widget.js @@ -33,7 +33,7 @@ export const switchTabs = () => { }); } -export const setActiveTab = (target) => { +const setActiveTab = (target) => { const parent = target.parentNode; const grandparent = parent.parentNode; // console.log(grandparent); @@ -53,7 +53,7 @@ export const setActiveTab = (target) => { .removeAttribute("hidden"); } -export const changeTabs = (e) => { +const changeTabs = (e) => { // get the containing list of the tab that was just clicked const tabList = e.target.parentNode; diff --git a/resources/web/docs_js/index.js b/resources/web/docs_js/index.js index e8ae49273cc1..e83da8757374 100644 --- a/resources/web/docs_js/index.js +++ b/resources/web/docs_js/index.js @@ -2,7 +2,7 @@ import AlternativeSwitcher from "./components/alternative_switcher"; import ConsoleWidget from "./components/console_widget"; import Modal from "./components/modal"; import mount from "./components/mount"; -import {switchTabs, setActiveTab, changeTabs} from "./components/tabbed_widget"; +import {switchTabs} from "./components/tabbed_widget"; import {Cookies, $} from "./deps"; import {lang_strings} from "./localization"; import store from "./store"; @@ -285,5 +285,3 @@ $(function() { // Tabbed widgets switchTabs(); -setActiveTab(); -changeTabs(); From 306b050bfe73933a7b4b2392cd2976c23cebeff6 Mon Sep 17 00:00:00 2001 From: Brandon Morelli Date: Mon, 23 Aug 2021 12:47:58 -0700 Subject: [PATCH 6/8] docs: document it --- README.asciidoc | 81 ++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 80 insertions(+), 1 deletion(-) diff --git a/README.asciidoc b/README.asciidoc index 0b4c3bf04f23..cc48013335c4 100644 --- a/README.asciidoc +++ b/README.asciidoc @@ -656,7 +656,7 @@ endif::[] == Shared attributes To facilitate consistency across the documentation, there are shared attributes -for common terms and URLs: https://github.com/elastic/docs/blob/master/shared/attributes.asciidoc. +for common terms and URLs: https://github.com/elastic/docs/blob/master/shared/attributes.asciidoc. There are also attributes related to the versions and branches that are used to build our books (for example: https://github.com/elastic/docs/blob/master/shared/versions/stack/master.asciidoc). @@ -1893,3 +1893,82 @@ named for their IDs: To link to "Section two" from an external document, you would use the URL: `section-one.html#section-two` + +[[tabbed-widgets]] +== Tabbed widgets + +Improve the usability of your docs by adding tabbed widgets. +These handy widgets let you conditionally display content based on the selected tab. +Best of all, tabbed widgets listen to each other – all widgets on the same page and with the same `data-tab-group` will change content when any tab on the page is selected. + +How do they work? I'm glad you asked. +Tabbed widgets use https://docs.asciidoctor.org/asciidoc/latest/pass/pass-block/[HTML passthrough blocks] to pass raw HTML into the build. +Because of this hack, you must use `include::` statements to render content within a tabbed widget. + +Here's an example: + +**`widget.asciidoc`** + +[source,asciidoc] +---- +++++ +
<1> +
+ + +
+
+++++ + +// You must use a tagged region for Asciidoc content to render. +include::content.asciidoc[tag=central-config] + +++++ +
+ +
+++++ +---- +<1> Any tabbed widgets on the same page and with the same name will sync tabs when switched +<2> Only one tab should have aria-selected set to true. This tab will be selected by default +<3> The `button.aria-controls` value must match the `div.id` value of its corresponding content bucket +<4> The `button.id` value must match the `div.aria-labelledby` value of its corresponding content bucket +<5> All unselected tabs must have a `tabindex` of `-1` + +**`content.asciidoc`** + +[source,asciidoc] +---- +// tag::central-config[] +This is where the content for tab #1 goes. +// end::central-config[] + +// tag::reg-config[] +This is the content for tab #2 goes. +// end::reg-config[] +---- From 21f6e9ba3d2320c541f722bac4a6154b07ec1cee Mon Sep 17 00:00:00 2001 From: Brandon Morelli Date: Mon, 23 Aug 2021 12:50:34 -0700 Subject: [PATCH 7/8] docs: clean it up --- README.asciidoc | 2 +- resources/web/docs_js/components/tabbed_widget.js | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/README.asciidoc b/README.asciidoc index cc48013335c4..9844c444b0e5 100644 --- a/README.asciidoc +++ b/README.asciidoc @@ -1947,7 +1947,7 @@ include::content.asciidoc[tag=central-config] ++++ // You must use a tagged region for Asciidoc content to render. -include::content.asciidoc[tag=self-managed-config] +include::content.asciidoc[tag=reg-config] ++++ diff --git a/resources/web/docs_js/components/tabbed_widget.js b/resources/web/docs_js/components/tabbed_widget.js index fab9f1db9f7e..585270aefe3d 100644 --- a/resources/web/docs_js/components/tabbed_widget.js +++ b/resources/web/docs_js/components/tabbed_widget.js @@ -36,7 +36,6 @@ export const switchTabs = () => { const setActiveTab = (target) => { const parent = target.parentNode; const grandparent = parent.parentNode; - // console.log(grandparent); // Remove all current selected tabs parent .querySelectorAll('[aria-selected="true"]') From b96d9e7183d861dfa5f81db127e2eb65585729a4 Mon Sep 17 00:00:00 2001 From: Brandon Morelli Date: Mon, 23 Aug 2021 13:19:04 -0700 Subject: [PATCH 8/8] docs: comment out includes to fix build --- README.asciidoc | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.asciidoc b/README.asciidoc index 9844c444b0e5..a09f78c3ef97 100644 --- a/README.asciidoc +++ b/README.asciidoc @@ -1934,8 +1934,8 @@ Here's an example: aria-labelledby="cloud-config-agent"> ++++ -// You must use a tagged region for Asciidoc content to render. -include::content.asciidoc[tag=central-config] +// You must use a tagged region for Asciidoc content to render. For example: +// include::content.asciidoc[tag=central-config] ++++ @@ -1946,8 +1946,8 @@ include::content.asciidoc[tag=central-config] hidden=""> ++++ -// You must use a tagged region for Asciidoc content to render. -include::content.asciidoc[tag=reg-config] +// You must use a tagged region for Asciidoc content to render. For example: +// include::content.asciidoc[tag=reg-config] ++++