gamv/ds2-core
1
0
Fork 0
Code Issues 10 Releases 9 Activity

[tab] Add information about tab order.

Browse Source
This commit is contained in:
A McIlwraith
2025-12-23 09:11:19 -05:00
parent d3f25a5ef1
commit 1354aac065
5 changed files with 158 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

169
src/pg/patterns/core/tabs/_tabs.js
View File

@@ -44,98 +44,115 @@ const chooseTab = (tab) => {
let pushState = 0; let pushState = 0;
let tabsetCount = 0; let tabsetCount = 0;
module.exports = {
"init": (container = document, spacer = true, args = {}) => {
container.querySelectorAll(".tab-group, tabset").forEach(tabGroup => {
if (tabGroup.querySelector("[role=tablist]") === null) {
if (tabGroup.getAttribute("id") == null) {
tabGroup.setAttribute("id", "tab-group-" + tabsetCount);
tabsetCount++;
}
const tabgroup = tabGroup.getAttribute("id"); export function init(container = document, spacer = true, args = {}) {
let tablist = ""; container.querySelectorAll(".tab-group, tabset").forEach(tabGroup => {
if (tabGroup.querySelector("[role=tablist]") === null) {
if (tabGroup.getAttribute("id") == null) {
tabGroup.setAttribute("id", "tab-group-" + tabsetCount);
tabsetCount++;
}
Array.from(tabGroup.children).forEach(child => { const tabgroup = tabGroup.getAttribute("id");
let tablist = "";
// is details? Array.from(tabGroup.children).forEach(child => {
let dtls = child.nodeName == "DETAILS" ? true : false;
// get the tab text // is details?
let tab = dtls ? child.querySelector("summary").innerHTML : child.getAttribute("tab") || child.getAttribute("data-tab"); let dtls = child.nodeName == "DETAILS" ? true : false;
// if the tab text is not blank // get the tab text
if (tab !== null) { let tab = dtls ? child.querySelector("summary").innerHTML : child.getAttribute("tab") || child.getAttribute("data-tab");
const tabID = tab.replace(/\W+/g, "-").toLowerCase();
// define the tab panel content // if the tab text is not blank
let tabPanel = null; if (tab !== null) {
if (dtls) { const tabID = tab.replace(/\W+/g, "-").toLowerCase();
tabPanel = child;
tabPanel.setAttribute("open", "");
} else {
tabPanel = document.createElement('div');
tabPanel.appendChild(child.cloneNode(true));
}
tabPanel.id = `tab-panel-${tabgroup}-${tabID}`; // define the tab panel content
tabPanel.className = tablist === "" ? "open" : ""; let tabPanel = null;
tabPanel.setAttribute("role", "tabpanel"); if (dtls) {
tabPanel.setAttribute("tabindex", "0"); tabPanel = child;
tabPanel.setAttribute("aria-labelledby", `tab-${tabgroup}-${tabID}`); tabPanel.setAttribute("open", "");
child.parentNode.replaceChild(tabPanel, child);
let cls = tablist === "" ? "class='selected'" : "";
tablist += `<li tabindex="0" role="tab" ${cls} id="tab-${tabgroup}-${tabID}"><span>${tab}</span></li>`;
} else { } else {
child.classList.add("tab-hidden"); tabPanel = document.createElement('div');
tabPanel.appendChild(child.cloneNode(true));
} }
tabPanel.id = `tab-panel-${tabgroup}-${tabID}`;
tabPanel.className = tablist === "" ? "open" : "";
tabPanel.setAttribute("role", "tabpanel");
tabPanel.setAttribute("tabindex", "0");
tabPanel.setAttribute("aria-labelledby", `tab-${tabgroup}-${tabID}`);
child.parentNode.replaceChild(tabPanel, child);
tablist += `<li tabindex="0" role="tab" id="tab-${tabgroup}-${tabID}"><span>${tab}</span></li>`;
} else {
child.classList.add("tab-hidden");
}
});
const ul = document.createElement('ul');
ul.setAttribute("role", "tablist");
tabGroup.insertBefore(ul, tabGroup.firstChild);
ul.innerHTML = spacer != true ? `${tablist}` : `${tablist}<li role="separator" class="separator"></li>`;
if ( tabGroup.hasAttribute("order") || tabGroup.hasAttribute("data-order") ) {
let order = (tabGroup.getAttribute("order") || tabGroup.getAttribute("data-order")).split(",");
const items = Array.from(ul.getElementsByTagName("li"));
items.sort((a, b) => {
console.log("here")
const aa = order.indexOf(a.textContent.trim());
const bb = order.indexOf(b.textContent.trim());
// Check if both items exist in orderArray
if (aa === -1) return 1; // Move to the end if not found
if (bb === -1) return -1; // Move to the end if not found
return aa - bb; // Sort based on the defined order
}); });
const ul = document.createElement('ul'); ul.innerHTML = '';
ul.setAttribute("role", "tablist"); items.forEach(item => ul.appendChild(item));
ul.innerHTML = spacer != true ? `${tablist}` : `${tablist}<li role="separator" class="separator"></li>`; }
tabGroup.insertBefore(ul, tabGroup.firstChild);
tabGroup.querySelectorAll('[role="tab"]').forEach(tab => { tabGroup.querySelectorAll('[role="tab"]').forEach(tab => {
tab.addEventListener("click", (evt) => { tab.addEventListener("click", (evt) => {
if (pushState == 0) { if (pushState == 0) {
window.history.pushState({rand: Math.random(), pushState: pushState, tab: tab.parentNode.firstChild.getAttribute("id")}, "", `#${tab.parentNode.firstChild.getAttribute("id")}`); window.history.pushState({rand: Math.random(), pushState: pushState, tab: tab.parentNode.firstChild.getAttribute("id")}, "", `#${tab.parentNode.firstChild.getAttribute("id")}`);
pushState++;
}
chooseTab(evt.currentTarget);
window.history.pushState({rand: Math.random(), pushState: pushState, tab: tab.getAttribute("id")}, "", `#${tab.getAttribute("id")}`);
pushState++; pushState++;
}); }
tab.addEventListener("keypress", (e) => { chooseTab(evt.currentTarget);
e.preventDefault(); window.history.pushState({rand: Math.random(), pushState: pushState, tab: tab.getAttribute("id")}, "", `#${tab.getAttribute("id")}`);
if( e.which == 32 || e.which == 13 ) { pushState++;
e.currentTarget.dispatchEvent(click);
}
})
}); });
}
if (document.location.hash != "" && document.location.hash.substring(0,5) == "#tab-") { tab.addEventListener("keypress", (e) => {
waitForElement(document.location.hash).then((el) => { e.preventDefault();
el.scrollIntoView(); if( e.which == 32 || e.which == 13 ) {
el.focus(); e.currentTarget.dispatchEvent(click);
el.dispatchEvent(click); }
}); })
} });
}); ul.querySelector("li").classList.add("selected");
}
window.addEventListener("popstate", function (e) { if (document.location.hash != "" && document.location.hash.substring(0,5) == "#tab-") {
e.preventDefault(); waitForElement(document.location.hash).then((el) => {
if (e.state != null) { //el.scrollIntoView();
chooseTab(document.querySelector(`#${e.state.tab}`)); el.focus();
} else { el.dispatchEvent(click);
history.go(-1); });
} }
}); });
} window.addEventListener("popstate", function (e) {
e.preventDefault();
if (e.state != null) {
chooseTab(document.querySelector(`#${e.state.tab}`));
} else {
history.go(-1);
}
});
} }

6
src/pg/patterns/core/tabs/_tabs.pp
View File

@@ -1,4 +1,4 @@
tabset#uniqueID tabset#uniqueID(order="tab title 2,tab title 1")
div(tab="[tab title]") div(tab="[tab title 1]")
div(tab="[tab title]") div(tab="[tab title 2]")

6
src/pg/patterns/core/tabs/_tabs.pug
View File

@@ -1,4 +1,4 @@
tabset#uniqueID tabset#uniqueID(order="tab title 2,tab title 1")
div(tab="[tab title]") div(tab="[tab title 1]")
div(tab="[tab title]") div(tab="[tab title 2]")

18
src/pg/patterns/core/tabs/index.pug
View File

@@ -20,19 +20,15 @@ block content
+h(2) +h(2)
p The structure of the tab set is defined in html. There are two forms supported. Adding a class of #[code.inline .tab-group] to the container element will work in place of the #[code.inline tabset] tag, and the tab panels can be defined using either #[code.inline tab=""] or #[code.inline data-tab=""]. Passing an optional element to the init function will initialise tabs within that element. p The structure of the tab set is defined in html. There are two forms supported. Adding a class of #[code.inline .tab-group] to the container element will work in place of the #[code.inline tabset] tag, and the tab panels can be defined using either #[code.inline tab=""] or #[code.inline data-tab=""]. Passing an optional element to the init function will initialise tabs within that element. Adding a #[code.inline order=""] or #[code.inline data-order=""] element to the tabset you can have the tabs sorted in a consistent order across tabsets.
p The tab initalize function now takes a new function parameter in the form of an third argument is an object that can take the following callbacks: +h(3)
ul pre.language-pug(tab="pug").
li altModifer (When the altKey is used) tabset(order="tab2, tab1")
li shiftModifier (When the shift key is used) div(tab="tab1")
li metaModifier (When the Windows key or Apple key is used) div(tab="tab2")
p You can use these callbacks to create a custom event to get the tab information.
p Note: There is a new core function (core.getTabPath) that will generate the query string and url hash for use in DS2 Core. You may wish to update your scaffolding.js file to make use of this functionality. tabset#tabs(order= taborder)
tabset#tabs
pre.language-html(tab="html") pre.language-html(tab="html")
include _tabs.pug include _tabs.pug
pre.language-pug(tab="pug") pre.language-pug(tab="pug")

53
src/pg/patterns/core/tabs/tabs.css
View File

@@ -1 +1,52 @@
.tab-group,tabset{margin:2rem 0 1rem 0}.tab-group [role=tablist],tabset [role=tablist]{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0;padding:0}.tab-group [role=tablist] li.separator,tabset [role=tablist] li.separator{border-bottom:1px solid #7f7f7f;display:inline-block;margin:0.45rem 0 0 0;width:100%}.tab-group [role=tablist] li[role=tab],tabset [role=tablist] li[role=tab]{background-color:#FFF;border-left:1px solid #7f7f7f;border-right:1px solid #7f7f7f;border-radius:0.5rem 0.5rem 0 0;border-top:1px solid #7f7f7f;cursor:pointer;display:inline;margin:0;padding:1rem 1.5rem 0.14rem 1.5rem;z-index:2}.tab-group [role=tablist] li[role=tab]:last-of-type,tabset [role=tablist] li[role=tab]:last-of-type{border-right:1px solid #7f7f7f}.tab-group [role=tablist] li[role=tab]:not(.selected),tabset [role=tablist] li[role=tab]:not(.selected){background-color:#f0f0f0;border-bottom:1px solid #7f7f7f}.tab-group [role=tablist] li[role=tab] span,tabset [role=tablist] li[role=tab] span{display:block;margin:0 0 0.5rem 0}.tab-group .tab-hidden,tabset .tab-hidden{display:none}.tab-group [role=tabpanel],tabset [role=tabpanel]{background-color:#FFF;border:1px solid #7f7f7f;border-top:none;padding:1rem;z-index:1}.tab-group [role=tabpanel]:not(.open),tabset [role=tabpanel]:not(.open){display:none} tabset, .tab-group {
margin: 2rem 0 1rem 0;
}
tabset [role=tablist], .tab-group [role=tablist] {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 0;
padding: 0;
}
tabset [role=tablist] li.separator, .tab-group [role=tablist] li.separator {
border-bottom: 1px solid #7f7f7f;
display: inline-block;
margin: 0.45rem 0 0 0;
width: 100%;
}
tabset [role=tablist] li[role=tab], .tab-group [role=tablist] li[role=tab] {
background-color: #FFF;
border-left: 1px solid #7f7f7f;
border-right: 1px solid #7f7f7f;
border-radius: 0.5rem 0.5rem 0 0;
border-top: 1px solid #7f7f7f;
cursor: pointer;
display: inline;
margin: 0;
padding: 1rem 1.5rem 0.14rem 1.5rem;
z-index: 2;
}
tabset [role=tablist] li[role=tab]:last-of-type, .tab-group [role=tablist] li[role=tab]:last-of-type {
border-right: 1px solid #7f7f7f;
}
tabset [role=tablist] li[role=tab]:not(.selected), .tab-group [role=tablist] li[role=tab]:not(.selected) {
background-color: #f0f0f0;
border-bottom: 1px solid #7f7f7f;
}
tabset [role=tablist] li[role=tab] span, .tab-group [role=tablist] li[role=tab] span {
display: block;
margin: 0 0 0.5rem 0;
}
tabset .tab-hidden, .tab-group .tab-hidden {
display: none;
}
tabset [role=tabpanel], .tab-group [role=tabpanel] {
background-color: #FFF;
border: 1px solid #7f7f7f;
border-top: none;
padding: 1rem;
z-index: 1;
}
tabset [role=tabpanel]:not(.open), .tab-group [role=tabpanel]:not(.open) {
display: none;
}