From df95905fe03e291748d70fbc02d3af932258f1f4 Mon Sep 17 00:00:00 2001 From: Alexander Date: Tue, 22 Apr 2025 15:25:41 -0400 Subject: [PATCH] Fix for render issue for tabs --- src/pg/patterns/core/tabs/_tabs.js | 128 ++++++++++++++--------------- 1 file changed, 63 insertions(+), 65 deletions(-) diff --git a/src/pg/patterns/core/tabs/_tabs.js b/src/pg/patterns/core/tabs/_tabs.js index 4818c2b..4283871 100644 --- a/src/pg/patterns/core/tabs/_tabs.js +++ b/src/pg/patterns/core/tabs/_tabs.js @@ -31,78 +31,76 @@ const waitForElement = (selector) => { } -module.exports = { - init: (container = document, spacer = true, args = {}) => { +export function init(container = document, spacer = true, args = {}) { - container.querySelectorAll(".tab-group, tabset").forEach(tabGroup => { + container.querySelectorAll(".tab-group, tabset").forEach(tabGroup => { - if (tabGroup.querySelector("[role=tablist]") === null) { - const tabgroup = tabGroup.getAttribute("id"); - let tablist = ""; + if (tabGroup.querySelector("[role=tablist]") === null) { + const tabgroup = tabGroup.getAttribute("id"); + let tablist = ""; - Array.from(tabGroup.children).forEach(child => { - const tab = child.getAttribute("tab") || child.getAttribute("data-tab"); - if (tab !== null) { - const tabID = tab.replace(/\W+/g, "-").toLowerCase(); - const tabPanel = document.createElement('div'); - 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}`); - tabPanel.appendChild(child.cloneNode(true)); - child.parentNode.replaceChild(tabPanel, child); - tablist += ``; + Array.from(tabGroup.children).forEach(child => { + const tab = child.getAttribute("tab") || child.getAttribute("data-tab"); + if (tab !== null) { + const tabID = tab.replace(/\W+/g, "-").toLowerCase(); + const tabPanel = document.createElement('div'); + 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}`); + tabPanel.appendChild(child.cloneNode(true)); + child.parentNode.replaceChild(tabPanel, child); + let cls = tablist === "" ? "class='selected'" : ""; + tablist += ``; + } else { + child.classList.add("tab-hidden"); + } + }); + + const ul = document.createElement('ul'); + ul.setAttribute("role", "tablist"); + ul.innerHTML = spacer != true ? `${tablist}` : `${tablist}`; + tabGroup.insertBefore(ul, tabGroup.firstChild); + + 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 { - child.classList.add("tab-hidden"); + 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) + .filter(child => child.getAttribute("role") === "tabpanel"); + tabPanels.forEach(panel => panel.classList.remove("open")); + + const tabPanelId = tab.getAttribute("id").replace("tab", "tab-panel"); + document.getElementById(tabPanelId).classList.add("open"); } }); - const ul = document.createElement('ul'); - ul.setAttribute("role", "tablist"); - ul.innerHTML = spacer != true ? `${tablist}` : `${tablist}`; - tabGroup.insertBefore(ul, tabGroup.firstChild); - tabGroup.querySelectorAll('[role="tab"]').forEach(tab => { - tab.addEventListener("click", (e) => { - if (e.altKey && typeof args.altModifier == "function") { - args.altModifier(tab); - } else if (e.shiftKey && typeof args.shiftModifier == "function") { - args.shiftModifier(tab); - } else if (e.metaKey && typeof args.metaModifier == "function") { - args.metaModifier(tab); - } else { - const siblings = Array.from(tab.parentNode.children); - siblings.forEach(sibling => sibling.classList.remove("selected")); - tab.classList.add("selected"); + tab.addEventListener("keypress", (e) => { + e.preventDefault(); + if( e.which == 32 || e.which == 13 ) { + e.currentTarget.dispatchEvent(click); + } + }) + }); + } - const tabPanels = Array.from(tab.parentNode.parentNode.children) - .filter(child => child.getAttribute("role") === "tabpanel"); - tabPanels.forEach(panel => panel.classList.remove("open")); - - const tabPanelId = tab.getAttribute("id").replace("tab", "tab-panel"); - document.getElementById(tabPanelId).classList.add("open"); - } - }); - - - tab.addEventListener("keypress", (e) => { - e.preventDefault(); - if( e.which == 32 || e.which == 13 ) { - e.currentTarget.dispatchEvent(click); - } - }) - }); - } - - if (document.location.hash != "" && document.location.hash.substring(0,5) == "#tab-") { - waitForElement(document.location.hash).then((el) => { - el.scrollIntoView(); - el.focus(); - el.dispatchEvent(click); - }); - - } - }); - } + if (document.location.hash != "" && document.location.hash.substring(0,5) == "#tab-") { + waitForElement(document.location.hash).then((el) => { + el.scrollIntoView(); + el.focus(); + el.dispatchEvent(click); + }); + } + }); } \ No newline at end of file