diff --git a/public/assets/scaffolding-min.js b/public/assets/scaffolding-min.js
index 2f0b9a1..78ffd23 100644
--- a/public/assets/scaffolding-min.js
+++ b/public/assets/scaffolding-min.js
@@ -3187,13 +3187,8 @@ module.exports = {
/***/ }),
/* 10 */
-/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+/***/ (function(module) {
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */ init: function() { return /* binding */ init; }
-/* harmony export */ });
/* DS2 core (c) 2024 Alexander McIlwraith
Released under Creative Commons Attribution-ShareAlike 4.0 International
*/
@@ -3223,109 +3218,114 @@ var waitForElement = function waitForElement(selector) {
});
});
};
+var chooseTab = function chooseTab(tab) {
+ var siblings = Array.from(tab.parentNode.children);
+ siblings.forEach(function (sibling) {
+ return sibling.classList.remove("selected");
+ });
+ tab.classList.add("selected");
+ var tabPanels = Array.from(tab.parentNode.parentNode.children);
+ tabPanels.forEach(function (panel) {
+ return panel.classList.remove("open");
+ });
+ var tabPanelId = tab.getAttribute("id").replace("tab", "tab-panel");
+ document.getElementById(tabPanelId).classList.add("open");
+};
+var pushState = 0;
var tabsetCount = 0;
-function init() {
- var container = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document;
- var spacer = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
- var args = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
- container.querySelectorAll(".tab-group, tabset").forEach(function (tabGroup) {
- if (tabGroup.querySelector("[role=tablist]") === null) {
- if (tabGroup.getAttribute("id") == null) {
- tabGroup.setAttribute("id", "tab-group-" + tabsetCount);
- tabsetCount++;
- }
- var tabgroup = tabGroup.getAttribute("id");
- var tablist = "";
- Array.from(tabGroup.children).forEach(function (child) {
- // is details?
- var dtls = child.nodeName == "DETAILS" ? true : false;
-
- // get the tab text
- var tab = dtls ? child.querySelector("summary").innerHTML : child.getAttribute("tab") || child.getAttribute("data-tab");
-
- // if the tab text is not blank
- if (tab !== null) {
- var tabID = tab.replace(/\W+/g, "-").toLowerCase();
-
- // define the tab panel content
- var tabPanel = null;
- if (dtls) {
- tabPanel = child;
- tabPanel.setAttribute("open", "");
- } else {
- tabPanel = document.createElement('div');
- tabPanel.appendChild(child.cloneNode(true));
- }
- tabPanel.id = "tab-panel-".concat(tabgroup, "-").concat(tabID);
- tabPanel.className = tablist === "" ? "open" : "";
- tabPanel.setAttribute("role", "tabpanel");
- tabPanel.setAttribute("tabindex", "0");
- tabPanel.setAttribute("aria-labelledby", "tab-".concat(tabgroup, "-").concat(tabID));
- child.parentNode.replaceChild(tabPanel, child);
- var cls = tablist === "" ? "class='selected'" : "";
- tablist += "").concat(tab, "");
- } else {
- child.classList.add("tab-hidden");
+module.exports = {
+ "init": function init() {
+ var container = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document;
+ var spacer = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+ var args = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+ container.querySelectorAll(".tab-group, tabset").forEach(function (tabGroup) {
+ if (tabGroup.querySelector("[role=tablist]") === null) {
+ if (tabGroup.getAttribute("id") == null) {
+ tabGroup.setAttribute("id", "tab-group-" + tabsetCount);
+ tabsetCount++;
}
- });
- var ul = document.createElement('ul');
- ul.setAttribute("role", "tablist");
- ul.innerHTML = spacer != true ? "".concat(tablist) : "".concat(tablist, "");
- tabGroup.insertBefore(ul, tabGroup.firstChild);
- tabGroup.querySelectorAll('[role="tab"]').forEach(function (tab) {
- tab.addEventListener("click", function (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 {
- var siblings = Array.from(tab.parentNode.children);
- siblings.forEach(function (sibling) {
- return sibling.classList.remove("selected");
- });
- tab.classList.add("selected");
- var 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);
+ var tabgroup = tabGroup.getAttribute("id");
+ var tablist = "";
+ Array.from(tabGroup.children).forEach(function (child) {
+ // is details?
+ var dtls = child.nodeName == "DETAILS" ? true : false;
- var tabPanels = Array.from(tab.parentNode.parentNode.children).filter(function (child) {
- return child.getAttribute("role") === "tabpanel";
- });
- tabPanels.forEach(function (panel) {
- return panel.classList.remove("open");
- });
- var tabPanelId = tab.getAttribute("id").replace("tab", "tab-panel");
- document.getElementById(tabPanelId).classList.add("open");
- //}
- });
- tab.addEventListener("keypress", function (e) {
- e.preventDefault();
- if (e.which == 32 || e.which == 13) {
- e.currentTarget.dispatchEvent(click);
+ // get the tab text
+ var tab = dtls ? child.querySelector("summary").innerHTML : child.getAttribute("tab") || child.getAttribute("data-tab");
+
+ // if the tab text is not blank
+ if (tab !== null) {
+ var tabID = tab.replace(/\W+/g, "-").toLowerCase();
+
+ // define the tab panel content
+ var tabPanel = null;
+ if (dtls) {
+ tabPanel = child;
+ tabPanel.setAttribute("open", "");
+ } else {
+ tabPanel = document.createElement('div');
+ tabPanel.appendChild(child.cloneNode(true));
+ }
+ tabPanel.id = "tab-panel-".concat(tabgroup, "-").concat(tabID);
+ tabPanel.className = tablist === "" ? "open" : "";
+ tabPanel.setAttribute("role", "tabpanel");
+ tabPanel.setAttribute("tabindex", "0");
+ tabPanel.setAttribute("aria-labelledby", "tab-".concat(tabgroup, "-").concat(tabID));
+ child.parentNode.replaceChild(tabPanel, child);
+ var cls = tablist === "" ? "class='selected'" : "";
+ tablist += "").concat(tab, "");
+ } else {
+ child.classList.add("tab-hidden");
}
});
- });
- }
- if (document.location.hash != "" && document.location.hash.substring(0, 5) == "#tab-") {
- waitForElement(document.location.hash).then(function (el) {
- el.scrollIntoView();
- el.focus();
- el.dispatchEvent(click);
- });
- }
- });
- addEventListener("hashchange", function (evt) {
- document.querySelector(window.location.hash).dispatchEvent(click);
-
- // window.location.hash
- // console.log(window.location.hash)
- });
-}
+ var ul = document.createElement('ul');
+ ul.setAttribute("role", "tablist");
+ ul.innerHTML = spacer != true ? "".concat(tablist) : "".concat(tablist, "");
+ tabGroup.insertBefore(ul, tabGroup.firstChild);
+ tabGroup.querySelectorAll('[role="tab"]').forEach(function (tab) {
+ tab.addEventListener("click", function (evt) {
+ if (pushState == 0) {
+ window.history.pushState({
+ rand: Math.random(),
+ pushState: pushState,
+ tab: tab.parentNode.firstChild.getAttribute("id")
+ }, "", "#".concat(tab.parentNode.firstChild.getAttribute("id")));
+ pushState++;
+ }
+ chooseTab(evt.currentTarget);
+ window.history.pushState({
+ rand: Math.random(),
+ pushState: pushState,
+ tab: tab.getAttribute("id")
+ }, "", "#".concat(tab.getAttribute("id")));
+ pushState++;
+ });
+ tab.addEventListener("keypress", function (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(function (el) {
+ el.scrollIntoView();
+ el.focus();
+ el.dispatchEvent(click);
+ });
+ }
+ });
+ window.addEventListener("popstate", function (e) {
+ e.preventDefault();
+ if (e.state != null) {
+ chooseTab(document.querySelector("#".concat(e.state.tab)));
+ } else {
+ history.go(-1);
+ }
+ });
+ }
+};
/***/ })
/******/ ]);
@@ -3432,6 +3432,7 @@ __webpack_require__.r(__webpack_exports__);
/* harmony import */ var _pg_patterns_core_switch_switch_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(9);
/* harmony import */ var _pg_patterns_core_switch_switch_js__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(_pg_patterns_core_switch_switch_js__WEBPACK_IMPORTED_MODULE_8__);
/* harmony import */ var _pg_patterns_core_tabs_tabs_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(10);
+/* harmony import */ var _pg_patterns_core_tabs_tabs_js__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(_pg_patterns_core_tabs_tabs_js__WEBPACK_IMPORTED_MODULE_9__);
// core and prism
diff --git a/public/patterns/core/tabs/index.html b/public/patterns/core/tabs/index.html
index f9fd8e2..9586b7f 100644
--- a/public/patterns/core/tabs/index.html
+++ b/public/patterns/core/tabs/index.html
@@ -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 += `${tab}`;
- } 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}`;
- 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 += `${tab}`;
+ } 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);
- 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);
+ }
+ });
-}
+ }
+}
+
+
diff --git a/src/pg/patterns/core/tabs/_tabs.js b/src/pg/patterns/core/tabs/_tabs.js
index b23b031..fe879a1 100644
--- a/src/pg/patterns/core/tabs/_tabs.js
+++ b/src/pg/patterns/core/tabs/_tabs.js
@@ -30,117 +30,112 @@ 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 += `