gamv/ds2-core
1
0
Fork 0
Code Issues 9 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
public/assets/scaffolding-min.js vendored
View File

@ -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,8 +3218,23 @@ 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 = {
"init": function init() {
var container = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document; var container = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document;
var spacer = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true; var spacer = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
var args = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; var args = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
@ -3274,34 +3284,21 @@ function init() {
tabGroup.insertBefore(ul, tabGroup.firstChild); tabGroup.insertBefore(ul, tabGroup.firstChild);
tabGroup.querySelectorAll('[role="tab"]').forEach(function (tab) { tabGroup.querySelectorAll('[role="tab"]').forEach(function (tab) {
tab.addEventListener("click", function (evt) { tab.addEventListener("click", function (evt) {
// if (evt.altKey && typeof args.altModifier == "function") { if (pushState == 0) {
// 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({ window.history.pushState({
"pageTitle": window.title + " : " + evt.currentTarget.innerHTML rand: Math.random(),
}, "", urlPath.toString()); pushState: pushState,
// window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath); tab: tab.parentNode.firstChild.getAttribute("id")
}, "", "#".concat(tab.parentNode.firstChild.getAttribute("id")));
var tabPanels = Array.from(tab.parentNode.parentNode.children).filter(function (child) { pushState++;
return child.getAttribute("role") === "tabpanel"; }
}); chooseTab(evt.currentTarget);
tabPanels.forEach(function (panel) { window.history.pushState({
return panel.classList.remove("open"); rand: Math.random(),
}); pushState: pushState,
var tabPanelId = tab.getAttribute("id").replace("tab", "tab-panel"); tab: tab.getAttribute("id")
document.getElementById(tabPanelId).classList.add("open"); }, "", "#".concat(tab.getAttribute("id")));
//} pushState++;
}); });
tab.addEventListener("keypress", function (e) { tab.addEventListener("keypress", function (e) {
e.preventDefault(); e.preventDefault();
@ -3319,13 +3316,16 @@ function init() {
}); });
} }
}); });
addEventListener("hashchange", function (evt) { window.addEventListener("popstate", function (e) {
document.querySelector(window.location.hash).dispatchEvent(click); e.preventDefault();
if (e.state != null) {
// window.location.hash chooseTab(document.querySelector("#".concat(e.state.tab)));
// console.log(window.location.hash) } 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

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

@ -184,19 +184,29 @@ 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.querySelector("[role=tablist]") === null) {
if (tabGroup.getAttribute("id") == null) { if (tabGroup.getAttribute("id") == null) {
tabGroup.setAttribute("id", "tab-group-" + tabsetCount); tabGroup.setAttribute("id", "tab-group-" + tabsetCount);
tabsetCount++; tabsetCount++;
} }
const tabgroup = tabGroup.getAttribute("id"); const tabgroup = tabGroup.getAttribute("id");
let tablist = ""; let tablist = "";
@ -243,34 +253,16 @@ export function init(container = document, spacer = true, args = {}) {
tabGroup.querySelectorAll('[role="tab"]').forEach(tab => { tabGroup.querySelectorAll('[role="tab"]').forEach(tab => {
tab.addEventListener("click", (evt) => { tab.addEventListener("click", (evt) => {
// if (evt.altKey && typeof args.altModifier == "function") { if (pushState == 0) {
// args.altModifier(tab, evt); window.history.pushState({rand: Math.random(), pushState: pushState, tab: tab.parentNode.firstChild.getAttribute("id")}, "", `#${tab.parentNode.firstChild.getAttribute("id")}`);
// } else if (evt.shiftKey && typeof args.shiftModifier == "function") { pushState++;
// 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");
chooseTab(evt.currentTarget);
let urlPath = window.location; window.history.pushState({rand: Math.random(), pushState: pushState, tab: tab.getAttribute("id")}, "", `#${tab.getAttribute("id")}`);
urlPath.hash = evt.currentTarget.getAttribute("id"); pushState++;
window.history.pushState({"pageTitle": window.title + " : " + evt.currentTarget.innerHTML},"", urlPath.toString());
// window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
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) => { tab.addEventListener("keypress", (e) => {
e.preventDefault(); e.preventDefault();
if( e.which == 32 || e.which == 13 ) { if( e.which == 32 || e.which == 13 ) {
@ -289,15 +281,19 @@ export function init(container = document, spacer = true, args = {}) {
} }
}); });
addEventListener("hashchange", (evt) => { window.addEventListener("popstate", function (e) {
document.querySelector(window.location.hash).dispatchEvent(click); e.preventDefault();
if (e.state != null) {
chooseTab(document.querySelector(`#${e.state.tab}`));
} else {
history.go(-1);
}
});
// window.location.hash }
// console.log(window.location.hash) }
})
</pre>
}</pre>
</div> </div>
</tabset> </tabset>
</body> </body>

69
src/pg/patterns/core/tabs/_tabs.js
View File

@ -30,19 +30,29 @@ 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.querySelector("[role=tablist]") === null) {
if (tabGroup.getAttribute("id") == null) { if (tabGroup.getAttribute("id") == null) {
tabGroup.setAttribute("id", "tab-group-" + tabsetCount); tabGroup.setAttribute("id", "tab-group-" + tabsetCount);
tabsetCount++; tabsetCount++;
} }
const tabgroup = tabGroup.getAttribute("id"); const tabgroup = tabGroup.getAttribute("id");
let tablist = ""; let tablist = "";
@ -89,34 +99,16 @@ export function init(container = document, spacer = true, args = {}) {
tabGroup.querySelectorAll('[role="tab"]').forEach(tab => { tabGroup.querySelectorAll('[role="tab"]').forEach(tab => {
tab.addEventListener("click", (evt) => { tab.addEventListener("click", (evt) => {
// if (evt.altKey && typeof args.altModifier == "function") { if (pushState == 0) {
// args.altModifier(tab, evt); window.history.pushState({rand: Math.random(), pushState: pushState, tab: tab.parentNode.firstChild.getAttribute("id")}, "", `#${tab.parentNode.firstChild.getAttribute("id")}`);
// } else if (evt.shiftKey && typeof args.shiftModifier == "function") { pushState++;
// 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");
chooseTab(evt.currentTarget);
let urlPath = window.location; window.history.pushState({rand: Math.random(), pushState: pushState, tab: tab.getAttribute("id")}, "", `#${tab.getAttribute("id")}`);
urlPath.hash = evt.currentTarget.getAttribute("id"); pushState++;
window.history.pushState({"pageTitle": window.title + " : " + evt.currentTarget.innerHTML},"", urlPath.toString());
// window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
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) => { tab.addEventListener("keypress", (e) => {
e.preventDefault(); e.preventDefault();
if( e.which == 32 || e.which == 13 ) { if( e.which == 32 || e.which == 13 ) {
@ -135,12 +127,15 @@ export function init(container = document, spacer = true, args = {}) {
} }
}); });
addEventListener("hashchange", (evt) => { window.addEventListener("popstate", function (e) {
document.querySelector(window.location.hash).dispatchEvent(click); e.preventDefault();
if (e.state != null) {
// window.location.hash chooseTab(document.querySelector(`#${e.state.tab}`));
// console.log(window.location.hash) } else {
}) history.go(-1);
}
});
}
} }