Fixes #32 Should fix the scrolling issue and clean up console messages
This commit is contained in:
parent
857680c3b1
commit
2941a5903f
209
public/assets/scaffolding-min.js
vendored
209
public/assets/scaffolding-min.js
vendored
@ -3187,13 +3187,8 @@ module.exports = {
|
|||||||
|
|
||||||
/***/ }),
|
/***/ }),
|
||||||
/* 10 */
|
/* 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
|
/* DS2 core (c) 2024 Alexander McIlwraith
|
||||||
Released under Creative Commons Attribution-ShareAlike 4.0 International
|
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;
|
var tabsetCount = 0;
|
||||||
function init() {
|
module.exports = {
|
||||||
var container = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document;
|
"init": function init() {
|
||||||
var spacer = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
|
var container = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document;
|
||||||
var args = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
var spacer = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
|
||||||
container.querySelectorAll(".tab-group, tabset").forEach(function (tabGroup) {
|
var args = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
||||||
if (tabGroup.querySelector("[role=tablist]") === null) {
|
container.querySelectorAll(".tab-group, tabset").forEach(function (tabGroup) {
|
||||||
if (tabGroup.getAttribute("id") == null) {
|
if (tabGroup.querySelector("[role=tablist]") === null) {
|
||||||
tabGroup.setAttribute("id", "tab-group-" + tabsetCount);
|
if (tabGroup.getAttribute("id") == null) {
|
||||||
tabsetCount++;
|
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 += "<li tabindex=\"0\" role=\"tab\" ".concat(cls, " id=\"tab-").concat(tabgroup, "-").concat(tabID, "\"><span>").concat(tab, "</span></li>");
|
|
||||||
} else {
|
|
||||||
child.classList.add("tab-hidden");
|
|
||||||
}
|
}
|
||||||
});
|
var tabgroup = tabGroup.getAttribute("id");
|
||||||
var ul = document.createElement('ul');
|
var tablist = "";
|
||||||
ul.setAttribute("role", "tablist");
|
Array.from(tabGroup.children).forEach(function (child) {
|
||||||
ul.innerHTML = spacer != true ? "".concat(tablist) : "".concat(tablist, "<li role=\"separator\" class=\"separator\"></li>");
|
// is details?
|
||||||
tabGroup.insertBefore(ul, tabGroup.firstChild);
|
var dtls = child.nodeName == "DETAILS" ? true : false;
|
||||||
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 tabPanels = Array.from(tab.parentNode.parentNode.children).filter(function (child) {
|
// get the tab text
|
||||||
return child.getAttribute("role") === "tabpanel";
|
var tab = dtls ? child.querySelector("summary").innerHTML : child.getAttribute("tab") || child.getAttribute("data-tab");
|
||||||
});
|
|
||||||
tabPanels.forEach(function (panel) {
|
// if the tab text is not blank
|
||||||
return panel.classList.remove("open");
|
if (tab !== null) {
|
||||||
});
|
var tabID = tab.replace(/\W+/g, "-").toLowerCase();
|
||||||
var tabPanelId = tab.getAttribute("id").replace("tab", "tab-panel");
|
|
||||||
document.getElementById(tabPanelId).classList.add("open");
|
// define the tab panel content
|
||||||
//}
|
var tabPanel = null;
|
||||||
});
|
if (dtls) {
|
||||||
tab.addEventListener("keypress", function (e) {
|
tabPanel = child;
|
||||||
e.preventDefault();
|
tabPanel.setAttribute("open", "");
|
||||||
if (e.which == 32 || e.which == 13) {
|
} else {
|
||||||
e.currentTarget.dispatchEvent(click);
|
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 += "<li tabindex=\"0\" role=\"tab\" ".concat(cls, " id=\"tab-").concat(tabgroup, "-").concat(tabID, "\"><span>").concat(tab, "</span></li>");
|
||||||
|
} else {
|
||||||
|
child.classList.add("tab-hidden");
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
var ul = document.createElement('ul');
|
||||||
}
|
ul.setAttribute("role", "tablist");
|
||||||
if (document.location.hash != "" && document.location.hash.substring(0, 5) == "#tab-") {
|
ul.innerHTML = spacer != true ? "".concat(tablist) : "".concat(tablist, "<li role=\"separator\" class=\"separator\"></li>");
|
||||||
waitForElement(document.location.hash).then(function (el) {
|
tabGroup.insertBefore(ul, tabGroup.firstChild);
|
||||||
el.scrollIntoView();
|
tabGroup.querySelectorAll('[role="tab"]').forEach(function (tab) {
|
||||||
el.focus();
|
tab.addEventListener("click", function (evt) {
|
||||||
el.dispatchEvent(click);
|
if (pushState == 0) {
|
||||||
});
|
window.history.pushState({
|
||||||
}
|
rand: Math.random(),
|
||||||
});
|
pushState: pushState,
|
||||||
addEventListener("hashchange", function (evt) {
|
tab: tab.parentNode.firstChild.getAttribute("id")
|
||||||
document.querySelector(window.location.hash).dispatchEvent(click);
|
}, "", "#".concat(tab.parentNode.firstChild.getAttribute("id")));
|
||||||
|
pushState++;
|
||||||
// window.location.hash
|
}
|
||||||
// console.log(window.location.hash)
|
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__ = __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_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__ = __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
|
// core and prism
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -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;
|
let tabsetCount = 0;
|
||||||
|
module.exports = {
|
||||||
export function init(container = document, spacer = true, args = {}) {
|
"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) {
|
||||||
|
if (tabGroup.getAttribute("id") == null) {
|
||||||
if (tabGroup.querySelector("[role=tablist]") === null) {
|
tabGroup.setAttribute("id", "tab-group-" + tabsetCount);
|
||||||
if (tabGroup.getAttribute("id") == null) {
|
tabsetCount++;
|
||||||
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");
|
|
||||||
}
|
}
|
||||||
});
|
|
||||||
|
|
||||||
const ul = document.createElement('ul');
|
const tabgroup = tabGroup.getAttribute("id");
|
||||||
ul.setAttribute("role", "tablist");
|
let tablist = "";
|
||||||
ul.innerHTML = spacer != true ? `${tablist}` : `${tablist}<li role="separator" class="separator"></li>`;
|
|
||||||
tabGroup.insertBefore(ul, tabGroup.firstChild);
|
|
||||||
|
|
||||||
tabGroup.querySelectorAll('[role="tab"]').forEach(tab => {
|
Array.from(tabGroup.children).forEach(child => {
|
||||||
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");
|
|
||||||
|
|
||||||
|
// is details?
|
||||||
|
let dtls = child.nodeName == "DETAILS" ? true : false;
|
||||||
|
|
||||||
let urlPath = window.location;
|
// get the tab text
|
||||||
urlPath.hash = evt.currentTarget.getAttribute("id");
|
let tab = dtls ? child.querySelector("summary").innerHTML : child.getAttribute("tab") || child.getAttribute("data-tab");
|
||||||
window.history.pushState({"pageTitle": window.title + " : " + evt.currentTarget.innerHTML},"", urlPath.toString());
|
|
||||||
// window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
|
|
||||||
|
|
||||||
|
// 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)
|
// define the tab panel content
|
||||||
.filter(child => child.getAttribute("role") === "tabpanel");
|
let tabPanel = null;
|
||||||
tabPanels.forEach(panel => panel.classList.remove("open"));
|
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");
|
tabPanel.id = `tab-panel-${tabgroup}-${tabID}`;
|
||||||
document.getElementById(tabPanelId).classList.add("open");
|
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) => {
|
tabGroup.querySelectorAll('[role="tab"]').forEach(tab => {
|
||||||
e.preventDefault();
|
tab.addEventListener("click", (evt) => {
|
||||||
if( e.which == 32 || e.which == 13 ) {
|
if (pushState == 0) {
|
||||||
e.currentTarget.dispatchEvent(click);
|
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-") {
|
chooseTab(evt.currentTarget);
|
||||||
waitForElement(document.location.hash).then((el) => {
|
window.history.pushState({rand: Math.random(), pushState: pushState, tab: tab.getAttribute("id")}, "", `#${tab.getAttribute("id")}`);
|
||||||
el.scrollIntoView();
|
pushState++;
|
||||||
el.focus();
|
});
|
||||||
el.dispatchEvent(click);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
addEventListener("hashchange", (evt) => {
|
tab.addEventListener("keypress", (e) => {
|
||||||
document.querySelector(window.location.hash).dispatchEvent(click);
|
e.preventDefault();
|
||||||
|
if( e.which == 32 || e.which == 13 ) {
|
||||||
|
e.currentTarget.dispatchEvent(click);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// window.location.hash
|
if (document.location.hash != "" && document.location.hash.substring(0,5) == "#tab-") {
|
||||||
// console.log(window.location.hash)
|
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>
|
</div>
|
||||||
</tabset>
|
</tabset>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@ -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;
|
let tabsetCount = 0;
|
||||||
|
module.exports = {
|
||||||
export function init(container = document, spacer = true, args = {}) {
|
"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) {
|
||||||
|
if (tabGroup.getAttribute("id") == null) {
|
||||||
if (tabGroup.querySelector("[role=tablist]") === null) {
|
tabGroup.setAttribute("id", "tab-group-" + tabsetCount);
|
||||||
if (tabGroup.getAttribute("id") == null) {
|
tabsetCount++;
|
||||||
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");
|
|
||||||
}
|
}
|
||||||
});
|
|
||||||
|
|
||||||
const ul = document.createElement('ul');
|
const tabgroup = tabGroup.getAttribute("id");
|
||||||
ul.setAttribute("role", "tablist");
|
let tablist = "";
|
||||||
ul.innerHTML = spacer != true ? `${tablist}` : `${tablist}<li role="separator" class="separator"></li>`;
|
|
||||||
tabGroup.insertBefore(ul, tabGroup.firstChild);
|
|
||||||
|
|
||||||
tabGroup.querySelectorAll('[role="tab"]').forEach(tab => {
|
Array.from(tabGroup.children).forEach(child => {
|
||||||
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");
|
|
||||||
|
|
||||||
|
// is details?
|
||||||
|
let dtls = child.nodeName == "DETAILS" ? true : false;
|
||||||
|
|
||||||
let urlPath = window.location;
|
// get the tab text
|
||||||
urlPath.hash = evt.currentTarget.getAttribute("id");
|
let tab = dtls ? child.querySelector("summary").innerHTML : child.getAttribute("tab") || child.getAttribute("data-tab");
|
||||||
window.history.pushState({"pageTitle": window.title + " : " + evt.currentTarget.innerHTML},"", urlPath.toString());
|
|
||||||
// window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
|
|
||||||
|
|
||||||
|
// 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)
|
// define the tab panel content
|
||||||
.filter(child => child.getAttribute("role") === "tabpanel");
|
let tabPanel = null;
|
||||||
tabPanels.forEach(panel => panel.classList.remove("open"));
|
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");
|
tabPanel.id = `tab-panel-${tabgroup}-${tabID}`;
|
||||||
document.getElementById(tabPanelId).classList.add("open");
|
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) => {
|
tabGroup.querySelectorAll('[role="tab"]').forEach(tab => {
|
||||||
e.preventDefault();
|
tab.addEventListener("click", (evt) => {
|
||||||
if( e.which == 32 || e.which == 13 ) {
|
if (pushState == 0) {
|
||||||
e.currentTarget.dispatchEvent(click);
|
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-") {
|
chooseTab(evt.currentTarget);
|
||||||
waitForElement(document.location.hash).then((el) => {
|
window.history.pushState({rand: Math.random(), pushState: pushState, tab: tab.getAttribute("id")}, "", `#${tab.getAttribute("id")}`);
|
||||||
el.scrollIntoView();
|
pushState++;
|
||||||
el.focus();
|
});
|
||||||
el.dispatchEvent(click);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
addEventListener("hashchange", (evt) => {
|
tab.addEventListener("keypress", (e) => {
|
||||||
document.querySelector(window.location.hash).dispatchEvent(click);
|
e.preventDefault();
|
||||||
|
if( e.which == 32 || e.which == 13 ) {
|
||||||
|
e.currentTarget.dispatchEvent(click);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// window.location.hash
|
if (document.location.hash != "" && document.location.hash.substring(0,5) == "#tab-") {
|
||||||
// console.log(window.location.hash)
|
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);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
|
||||||
Loading…
x
Reference in New Issue
Block a user