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

Fixes #32 Should fix the scrolling issue and clean up console messages

Browse Source
This commit is contained in:
A McIlwraith
2025-06-12 18:53:17 -04:00
parent 857680c3b1
commit 2941a5903f
3 changed files with 290 additions and 298 deletions
Download Patch File Download Diff File Expand all files Collapse all files

190
public/patterns/core/tabs/index.html
View File

@@ -184,120 +184,116 @@ const waitForElement = (selector) => {
});
}
const chooseTab = (tab) => {
const siblings = Array.from(tab.parentNode.children);
siblings.forEach(sibling => sibling.classList.remove("selected"));
tab.classList.add("selected");
const tabPanels = Array.from(tab.parentNode.parentNode.children)
tabPanels.forEach(panel => panel.classList.remove("open"));
const tabPanelId = tab.getAttribute("id").replace("tab", "tab-panel");
document.getElementById(tabPanelId).classList.add("open");
}
let pushState = 0;
let tabsetCount = 0;
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++;
}
const tabgroup = tabGroup.getAttribute("id");
let tablist = "";
Array.from(tabGroup.children).forEach(child => {
// is details?
let dtls = child.nodeName == "DETAILS" ? true : false;
// get the tab text
let tab = dtls ? child.querySelector("summary").innerHTML : child.getAttribute("tab") || child.getAttribute("data-tab");
// if the tab text is not blank
if (tab !== null) {
const tabID = tab.replace(/\W+/g, "-").toLowerCase();
// 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));
}
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>`;
} else {
child.classList.add("tab-hidden");
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 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);
const tabgroup = tabGroup.getAttribute("id");
let tablist = "";
tabGroup.querySelectorAll('[role="tab"]').forEach(tab => {
tab.addEventListener("click", (evt) => {
// if (evt.altKey && typeof args.altModifier == "function") {
// args.altModifier(tab, evt);
// } else if (evt.shiftKey && typeof args.shiftModifier == "function") {
// args.shiftModifier(tab, evt);
// } else if (evt.metaKey && typeof args.metaModifier == "function") {
// args.metaModifier(tab, evt);
// } else {
const siblings = Array.from(tab.parentNode.children);
siblings.forEach(sibling => sibling.classList.remove("selected"));
tab.classList.add("selected");
Array.from(tabGroup.children).forEach(child => {
// is details?
let dtls = child.nodeName == "DETAILS" ? true : false;
let urlPath = window.location;
urlPath.hash = evt.currentTarget.getAttribute("id");
window.history.pushState({"pageTitle": window.title + " : " + evt.currentTarget.innerHTML},"", urlPath.toString());
// window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
// get the tab text
let tab = dtls ? child.querySelector("summary").innerHTML : child.getAttribute("tab") || child.getAttribute("data-tab");
// if the tab text is not blank
if (tab !== null) {
const tabID = tab.replace(/\W+/g, "-").toLowerCase();
const tabPanels = Array.from(tab.parentNode.parentNode.children)
.filter(child => child.getAttribute("role") === "tabpanel");
tabPanels.forEach(panel => panel.classList.remove("open"));
// 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));
}
const tabPanelId = tab.getAttribute("id").replace("tab", "tab-panel");
document.getElementById(tabPanelId).classList.add("open");
//}
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>`;
} else {
child.classList.add("tab-hidden");
}
});
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);
tab.addEventListener("keypress", (e) => {
e.preventDefault();
if( e.which == 32 || e.which == 13 ) {
e.currentTarget.dispatchEvent(click);
}
})
});
}
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++;
}
if (document.location.hash != "" && document.location.hash.substring(0,5) == "#tab-") {
waitForElement(document.location.hash).then((el) => {
el.scrollIntoView();
el.focus();
el.dispatchEvent(click);
});
}
});
chooseTab(evt.currentTarget);
window.history.pushState({rand: Math.random(), pushState: pushState, tab: tab.getAttribute("id")}, "", `#${tab.getAttribute("id")}`);
pushState++;
});
addEventListener("hashchange", (evt) => {
document.querySelector(window.location.hash).dispatchEvent(click);
tab.addEventListener("keypress", (e) => {
e.preventDefault();
if( e.which == 32 || e.which == 13 ) {
e.currentTarget.dispatchEvent(click);
}
})
});
}
// window.location.hash
// console.log(window.location.hash)
})
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);
}
});
}</pre>
}
}
</pre>
</div>
</tabset>
</body>