[tab] Add information about tab order.
This commit is contained in:
@@ -44,98 +44,115 @@ const chooseTab = (tab) => {
|
||||
|
||||
let pushState = 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");
|
||||
let tablist = "";
|
||||
export function 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++;
|
||||
}
|
||||
|
||||
Array.from(tabGroup.children).forEach(child => {
|
||||
const tabgroup = tabGroup.getAttribute("id");
|
||||
let tablist = "";
|
||||
|
||||
// is details?
|
||||
let dtls = child.nodeName == "DETAILS" ? true : false;
|
||||
Array.from(tabGroup.children).forEach(child => {
|
||||
|
||||
// get the tab text
|
||||
let tab = dtls ? child.querySelector("summary").innerHTML : child.getAttribute("tab") || child.getAttribute("data-tab");
|
||||
// is details?
|
||||
let dtls = child.nodeName == "DETAILS" ? true : false;
|
||||
|
||||
// if the tab text is not blank
|
||||
if (tab !== null) {
|
||||
const tabID = tab.replace(/\W+/g, "-").toLowerCase();
|
||||
|
||||
// get the tab text
|
||||
let tab = dtls ? child.querySelector("summary").innerHTML : child.getAttribute("tab") || child.getAttribute("data-tab");
|
||||
|
||||
// define the tab panel content
|
||||
let tabPanel = null;
|
||||
if (dtls) {
|
||||
tabPanel = child;
|
||||
tabPanel.setAttribute("open", "");
|
||||
} else {
|
||||
tabPanel = document.createElement('div');
|
||||
tabPanel.appendChild(child.cloneNode(true));
|
||||
}
|
||||
// if the tab text is not blank
|
||||
if (tab !== null) {
|
||||
const tabID = tab.replace(/\W+/g, "-").toLowerCase();
|
||||
|
||||
|
||||
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);
|
||||
let cls = tablist === "" ? "class='selected'" : "";
|
||||
tablist += `<li tabindex="0" role="tab" ${cls} id="tab-${tabgroup}-${tabID}"><span>${tab}</span></li>`;
|
||||
// define the tab panel content
|
||||
let tabPanel = null;
|
||||
if (dtls) {
|
||||
tabPanel = child;
|
||||
tabPanel.setAttribute("open", "");
|
||||
} 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.setAttribute("role", "tablist");
|
||||
ul.innerHTML = spacer != true ? `${tablist}` : `${tablist}<li role="separator" class="separator"></li>`;
|
||||
tabGroup.insertBefore(ul, tabGroup.firstChild);
|
||||
ul.innerHTML = '';
|
||||
items.forEach(item => ul.appendChild(item));
|
||||
}
|
||||
|
||||
tabGroup.querySelectorAll('[role="tab"]').forEach(tab => {
|
||||
tab.addEventListener("click", (evt) => {
|
||||
if (pushState == 0) {
|
||||
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")}`);
|
||||
tabGroup.querySelectorAll('[role="tab"]').forEach(tab => {
|
||||
tab.addEventListener("click", (evt) => {
|
||||
if (pushState == 0) {
|
||||
window.history.pushState({rand: Math.random(), pushState: pushState, tab: tab.parentNode.firstChild.getAttribute("id")}, "", `#${tab.parentNode.firstChild.getAttribute("id")}`);
|
||||
pushState++;
|
||||
});
|
||||
}
|
||||
|
||||
tab.addEventListener("keypress", (e) => {
|
||||
e.preventDefault();
|
||||
if( e.which == 32 || e.which == 13 ) {
|
||||
e.currentTarget.dispatchEvent(click);
|
||||
}
|
||||
})
|
||||
chooseTab(evt.currentTarget);
|
||||
window.history.pushState({rand: Math.random(), pushState: pushState, tab: tab.getAttribute("id")}, "", `#${tab.getAttribute("id")}`);
|
||||
pushState++;
|
||||
});
|
||||
}
|
||||
|
||||
if (document.location.hash != "" && document.location.hash.substring(0,5) == "#tab-") {
|
||||
waitForElement(document.location.hash).then((el) => {
|
||||
el.scrollIntoView();
|
||||
el.focus();
|
||||
el.dispatchEvent(click);
|
||||
});
|
||||
}
|
||||
});
|
||||
tab.addEventListener("keypress", (e) => {
|
||||
e.preventDefault();
|
||||
if( e.which == 32 || e.which == 13 ) {
|
||||
e.currentTarget.dispatchEvent(click);
|
||||
}
|
||||
})
|
||||
});
|
||||
ul.querySelector("li").classList.add("selected");
|
||||
}
|
||||
|
||||
window.addEventListener("popstate", function (e) {
|
||||
e.preventDefault();
|
||||
if (e.state != null) {
|
||||
chooseTab(document.querySelector(`#${e.state.tab}`));
|
||||
} else {
|
||||
history.go(-1);
|
||||
}
|
||||
});
|
||||
if (document.location.hash != "" && document.location.hash.substring(0,5) == "#tab-") {
|
||||
waitForElement(document.location.hash).then((el) => {
|
||||
//el.scrollIntoView();
|
||||
el.focus();
|
||||
el.dispatchEvent(click);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
window.addEventListener("popstate", function (e) {
|
||||
e.preventDefault();
|
||||
if (e.state != null) {
|
||||
chooseTab(document.querySelector(`#${e.state.tab}`));
|
||||
} else {
|
||||
history.go(-1);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
tabset#uniqueID
|
||||
div(tab="[tab title]")
|
||||
div(tab="[tab title]")
|
||||
tabset#uniqueID(order="tab title 2,tab title 1")
|
||||
div(tab="[tab title 1]")
|
||||
div(tab="[tab title 2]")
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
tabset#uniqueID
|
||||
div(tab="[tab title]")
|
||||
div(tab="[tab title]")
|
||||
tabset#uniqueID(order="tab title 2,tab title 1")
|
||||
div(tab="[tab title 1]")
|
||||
div(tab="[tab title 2]")
|
||||
|
||||
@@ -20,19 +20,15 @@ block content
|
||||
|
||||
|
||||
+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:
|
||||
ul
|
||||
li altModifer (When the altKey is used)
|
||||
li shiftModifier (When the shift key is used)
|
||||
li metaModifier (When the Windows key or Apple key is used)
|
||||
p You can use these callbacks to create a custom event to get the tab information.
|
||||
+h(3)
|
||||
pre.language-pug(tab="pug").
|
||||
tabset(order="tab2, tab1")
|
||||
div(tab="tab1")
|
||||
div(tab="tab2")
|
||||
|
||||
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
|
||||
tabset#tabs(order= taborder)
|
||||
pre.language-html(tab="html")
|
||||
include _tabs.pug
|
||||
pre.language-pug(tab="pug")
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user