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

Fixes #4, #29, #32 Creates links as tabs in history, fixed tab error line.

Browse Source
This commit is contained in:
A McIlwraith
2025-06-09 19:16:59 -04:00
parent 0b5e54faa6
commit 5f050066e9
7 changed files with 360 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3014,13 +3014,8 @@ Prism.languages.webmanifest = Prism.languages.json;
/***/ }), /***/ }),
/* 8 */ /* 8 */
/***/ (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 */ });
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); } function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } } function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
@@ -3122,7 +3117,8 @@ var calculateStickyPosition = function calculateStickyPosition(s) {
}); });
} }
}; };
function init() { module.exports = {
init: function init() {
var p = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document; var p = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document;
font.size = parseFloat(getComputedStyle(document.documentElement).fontSize.replace("px", "")); font.size = parseFloat(getComputedStyle(document.documentElement).fontSize.replace("px", ""));
p.querySelectorAll("sticky-note").forEach(function (s) { p.querySelectorAll("sticky-note").forEach(function (s) {
@@ -3150,7 +3146,8 @@ function init() {
calculateStickyPosition(s); calculateStickyPosition(s);
}); });
}; };
} }
};
/***/ }), /***/ }),
/* 9 */ /* 9 */
@@ -3226,27 +3223,47 @@ var waitForElement = function waitForElement(selector) {
}); });
}); });
}; };
var tabsetCount = 0;
function 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] : {};
container.querySelectorAll(".tab-group, tabset").forEach(function (tabGroup) { container.querySelectorAll(".tab-group, tabset").forEach(function (tabGroup) {
if (tabGroup.querySelector("[role=tablist]") === null) { if (tabGroup.querySelector("[role=tablist]") === null) {
if (tabGroup.getAttribute("id") == null) {
tabGroup.setAttribute("id", "tab-group-" + tabsetCount);
tabsetCount++;
}
var tabgroup = tabGroup.getAttribute("id"); var tabgroup = tabGroup.getAttribute("id");
var tablist = ""; var tablist = "";
Array.from(tabGroup.children).forEach(function (child) { Array.from(tabGroup.children).forEach(function (child) {
var tab = child.getAttribute("tab") || child.getAttribute("data-tab"); // 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) { if (tab !== null) {
var tabID = tab.replace(/\W+/g, "-").toLowerCase(); var tabID = tab.replace(/\W+/g, "-").toLowerCase();
var tabPanel = document.createElement('div');
// 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.id = "tab-panel-".concat(tabgroup, "-").concat(tabID);
tabPanel.className = tablist === "" ? "open" : ""; tabPanel.className = tablist === "" ? "open" : "";
tabPanel.setAttribute("role", "tabpanel"); tabPanel.setAttribute("role", "tabpanel");
tabPanel.setAttribute("tabindex", "0"); tabPanel.setAttribute("tabindex", "0");
tabPanel.setAttribute("aria-labelledby", "tab-".concat(tabgroup, "-").concat(tabID)); tabPanel.setAttribute("aria-labelledby", "tab-".concat(tabgroup, "-").concat(tabID));
tabPanel.appendChild(child.cloneNode(true));
child.parentNode.replaceChild(tabPanel, child); child.parentNode.replaceChild(tabPanel, child);
tablist += "<li tabindex=\"0\" role=\"tab\" ".concat(tablist === "" ? "class='selected'" : "", " id=\"tab-").concat(tabgroup, "-").concat(tabID, "\"><span>").concat(tab, "</span></li>"); 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 { } else {
child.classList.add("tab-hidden"); child.classList.add("tab-hidden");
} }
@@ -3256,19 +3273,26 @@ function init() {
ul.innerHTML = spacer != true ? "".concat(tablist) : "".concat(tablist, "<li role=\"separator\" class=\"separator\"></li>"); ul.innerHTML = spacer != true ? "".concat(tablist) : "".concat(tablist, "<li role=\"separator\" class=\"separator\"></li>");
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 (e) { tab.addEventListener("click", function (evt) {
if (e.altKey && typeof args.altModifier == "function") { // if (evt.altKey && typeof args.altModifier == "function") {
args.altModifier(tab); // args.altModifier(tab, evt);
} else if (e.shiftKey && typeof args.shiftModifier == "function") { // } else if (evt.shiftKey && typeof args.shiftModifier == "function") {
args.shiftModifier(tab); // args.shiftModifier(tab, evt);
} else if (e.metaKey && typeof args.metaModifier == "function") { // } else if (evt.metaKey && typeof args.metaModifier == "function") {
args.metaModifier(tab); // args.metaModifier(tab, evt);
} else { // } else {
var siblings = Array.from(tab.parentNode.children); var siblings = Array.from(tab.parentNode.children);
siblings.forEach(function (sibling) { siblings.forEach(function (sibling) {
return sibling.classList.remove("selected"); return sibling.classList.remove("selected");
}); });
tab.classList.add("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) { var tabPanels = Array.from(tab.parentNode.parentNode.children).filter(function (child) {
return child.getAttribute("role") === "tabpanel"; return child.getAttribute("role") === "tabpanel";
}); });
@@ -3277,7 +3301,7 @@ function init() {
}); });
var tabPanelId = tab.getAttribute("id").replace("tab", "tab-panel"); var tabPanelId = tab.getAttribute("id").replace("tab", "tab-panel");
document.getElementById(tabPanelId).classList.add("open"); document.getElementById(tabPanelId).classList.add("open");
} //}
}); });
tab.addEventListener("keypress", function (e) { tab.addEventListener("keypress", function (e) {
e.preventDefault(); e.preventDefault();
@@ -3295,6 +3319,12 @@ function init() {
}); });
} }
}); });
addEventListener("hashchange", function (evt) {
document.querySelector(window.location.hash).dispatchEvent(click);
// window.location.hash
// console.log(window.location.hash)
});
} }
/***/ }) /***/ })
@@ -3398,6 +3428,7 @@ __webpack_require__.r(__webpack_exports__);
/* harmony import */ var _node_modules_prismjs_components_prism_sass__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(7); /* harmony import */ var _node_modules_prismjs_components_prism_sass__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(7);
/* harmony import */ var _node_modules_prismjs_components_prism_sass__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_node_modules_prismjs_components_prism_sass__WEBPACK_IMPORTED_MODULE_6__); /* harmony import */ var _node_modules_prismjs_components_prism_sass__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_node_modules_prismjs_components_prism_sass__WEBPACK_IMPORTED_MODULE_6__);
/* harmony import */ var _pg_patterns_core_sticky_note_sticky_note_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(8); /* harmony import */ var _pg_patterns_core_sticky_note_sticky_note_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(8);
/* harmony import */ var _pg_patterns_core_sticky_note_sticky_note_js__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_pg_patterns_core_sticky_note_sticky_note_js__WEBPACK_IMPORTED_MODULE_7__);
/* 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);

2
public/assets/scaffolding.css
View File

File diff suppressed because one or more lines are too long

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

@@ -42,7 +42,7 @@
div(tab="[tab title]") div(tab="[tab title]")
div(tab="[tab title]") div(tab="[tab title]")
</pre> </pre>
<pre class="language-css" tab="css">.tab-group,tabset{margin:2rem 0 1rem 0}.tab-group>ul,tabset>ul{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0;padding:0}.tab-group>ul li.separator,tabset>ul li.separator{border-bottom:1px solid #7f7f7f;border-left:1px solid #7f7f7f;display:inline-block;margin:0.45rem 0 0 0;width:100%}.tab-group .tab-hidden,tabset .tab-hidden{display:none}.tab-group [role=tab],tabset [role=tab]{background-color:#FFF;border-left:1px solid #7f7f7f;border-radius:0.5rem 0.5rem 0 0;border-top:1px solid #7f7f7f;color:#000;cursor:pointer;display:inline;margin:0;padding:1rem 1.5rem 0.14rem 1.5rem;z-index:2}.tab-group [role=tab]:last-of-type,tabset [role=tab]:last-of-type{border-right:1px solid #7f7f7f}.tab-group [role=tab]:not(.selected),tabset [role=tab]:not(.selected){background-color:#f0f0f0;border-bottom:1px solid #7f7f7f;color:#000}.tab-group [role=tab] span,tabset [role=tab] span{display:block;margin:0 0 0.5rem 0}.tab-group [role=tabpanel],tabset [role=tabpanel]{background-color:#FFF;border:1px solid #7f7f7f;border-top:#7f7f7f solid 1px;padding:1rem;z-index:1}.tab-group [role=tabpanel]:not(.open),tabset [role=tabpanel]:not(.open){display:none}</pre> <pre class="language-css" tab="css">@media (min-width:450px){.tab-group,tabset{margin:2rem 0 1rem 0}}.tab-group>ul,tabset>ul{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0;padding:0}.tab-group>ul li.separator,tabset>ul li.separator{border-bottom:1px solid #7f7f7f;border-left:1px solid #7f7f7f;display:inline-block;margin:0.45rem 0 0 0;width:100%}.tab-group .tab-hidden,tabset .tab-hidden{display:none}.tab-group [role=tab],tabset [role=tab]{background-color:#FFF;border-left:1px solid #7f7f7f;border-top:1px solid #7f7f7f;border-radius:0.5rem 0.5rem 0 0;cursor:pointer;margin:0;display:inline;padding:1rem 1.5rem 0.14rem 1.5rem;z-index:2}.tab-group [role=tab]:last-of-type,tabset [role=tab]:last-of-type{border-right:1px solid #7f7f7f}.tab-group [role=tab]:not(.selected),tabset [role=tab]:not(.selected){background-color:#f0f0f0;border-bottom:1px solid #7f7f7f}.tab-group [role=tab] span,tabset [role=tab] span{display:block;margin:0 0 0.5rem 0}.tab-group [role=tabpanel],tabset [role=tabpanel]{background-color:#FFF;border:1px solid #7f7f7f;border-top:none;padding:1rem;z-index:1}@media (min-width:450px){.tab-group [role=tabpanel][open] summary,tabset [role=tabpanel][open] summary{display:none}}@media (min-width:450px){.tab-group [role=tabpanel]:not(.open),tabset [role=tabpanel]:not(.open){display:none}}@media (max-width:450px){.tab-group:has(details) [role=tablist],tabset:has(details) [role=tablist]{display:none}.tab-group:has(details) [role=tabpanel],tabset:has(details) [role=tabpanel]{border:none}}</pre>
<div tab="scss"> <div tab="scss">
<pre class="language-sass">@import "scss/core/tabs/_tabs"; <pre class="language-sass">@import "scss/core/tabs/_tabs";
@include tabs{ @include tabs{
@@ -52,23 +52,23 @@
<pre class="language-sass">// DS2 core (c) 2024 Alexander McIlwraith <pre class="language-sass">// DS2 core (c) 2024 Alexander McIlwraith
// Licensed under CC BY-SA 4.0 // Licensed under CC BY-SA 4.0
$tab-border: #7f7f7f !default; $tab-border: #7f7f7f !default;
$tab-panel-background-color: #FFF !default;
$tab-panel-top-border: #7f7f7f !default;
$tab-panel-top-border-width: 1px !default;
$tab-selected: #FFF !default; $tab-selected: #FFF !default;
$tab-selected-text: #000 !default;
$tab-notselected: #f0f0f0 !default; $tab-notselected: #f0f0f0 !default;
$tab-notselected-text: #000 !default; $tab-break: 450px !default;
@mixin tabs { @mixin tabs {
tabset, .tab-group { tabset, .tab-group {
@media (min-width: $tab-break) {
margin: 2rem 0 1rem 0; margin: 2rem 0 1rem 0;
}
> ul { > ul {
display: flex; display: flex;
margin: 0; margin: 0;
padding: 0; padding: 0;
li.separator { li.separator {
border-bottom: 1px solid $tab-border; border-bottom: 1px solid $tab-border;
border-left: 1px solid $tab-border; border-left: 1px solid $tab-border;
@@ -78,6 +78,8 @@ $tab-notselected-text: #000 !default;
} }
} }
.tab-hidden { .tab-hidden {
display: none; display: none;
} }
@@ -85,12 +87,11 @@ $tab-notselected-text: #000 !default;
[role="tab"] { [role="tab"] {
background-color: $tab-selected; background-color: $tab-selected;
border-left: 1px solid $tab-border; border-left: 1px solid $tab-border;
border-radius: .5rem .5rem 0 0;
border-top: 1px solid $tab-border; border-top: 1px solid $tab-border;
color: $tab-selected-text; border-radius: .5rem .5rem 0 0;
cursor:pointer; cursor:pointer;
display: inline;
margin: 0; margin: 0;
display: inline;
padding: 1rem 1.5rem .14rem 1.5rem; padding: 1rem 1.5rem .14rem 1.5rem;
z-index: 2; z-index: 2;
@@ -101,7 +102,6 @@ $tab-notselected-text: #000 !default;
&:not(.selected) { &:not(.selected) {
background-color: $tab-notselected; background-color: $tab-notselected;
border-bottom: 1px solid $tab-border; border-bottom: 1px solid $tab-border;
color: $tab-notselected-text;
} }
span { span {
@@ -111,17 +111,41 @@ $tab-notselected-text: #000 !default;
} }
[role="tabpanel"] { [role="tabpanel"] {
background-color: $tab-panel-background-color; background-color: $tab-selected;
border: 1px solid $tab-border; border: 1px solid $tab-border;
border-top: $tab-panel-top-border solid $tab-panel-top-border-width; border-top: none;
padding: 1rem; padding: 1rem;
z-index: 1; z-index: 1;
@media (min-width: $tab-break) {
&[open] summary {
display: none;
}
}
@media (min-width: $tab-break) {
&:not(.open) { &:not(.open) {
display: none; display: none;
} }
@content;
} }
@content;
}
@media (max-width: $tab-break) {
&:has(details) {
[role="tablist"] {
display: none;
}
[role="tabpanel"] {
border: none;
}
}
}
} }
}</pre> }</pre>
</div> </div>
@@ -160,28 +184,53 @@ const waitForElement = (selector) => {
}); });
} }
let tabsetCount = 0;
export function 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) { if (tabGroup.querySelector("[role=tablist]") === null) {
if (tabGroup.getAttribute("id") == null) {
tabGroup.setAttribute("id", "tab-group-" + tabsetCount);
tabsetCount++;
}
const tabgroup = tabGroup.getAttribute("id"); const tabgroup = tabGroup.getAttribute("id");
let tablist = ""; let tablist = "";
Array.from(tabGroup.children).forEach(child => { Array.from(tabGroup.children).forEach(child => {
const tab = child.getAttribute("tab") || child.getAttribute("data-tab");
// 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) { if (tab !== null) {
const tabID = tab.replace(/\W+/g, "-").toLowerCase(); const tabID = tab.replace(/\W+/g, "-").toLowerCase();
const tabPanel = document.createElement('div');
// 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.id = `tab-panel-${tabgroup}-${tabID}`;
tabPanel.className = tablist === "" ? "open" : ""; tabPanel.className = tablist === "" ? "open" : "";
tabPanel.setAttribute("role", "tabpanel"); tabPanel.setAttribute("role", "tabpanel");
tabPanel.setAttribute("tabindex", "0"); tabPanel.setAttribute("tabindex", "0");
tabPanel.setAttribute("aria-labelledby", `tab-${tabgroup}-${tabID}`); tabPanel.setAttribute("aria-labelledby", `tab-${tabgroup}-${tabID}`);
tabPanel.appendChild(child.cloneNode(true));
child.parentNode.replaceChild(tabPanel, child); child.parentNode.replaceChild(tabPanel, child);
tablist += `<li tabindex="0" role="tab" ${tablist === "" ? "class='selected'" : ""} id="tab-${tabgroup}-${tabID}"><span>${tab}</span></li>`; let cls = tablist === "" ? "class='selected'" : "";
tablist += `<li tabindex="0" role="tab" ${cls} id="tab-${tabgroup}-${tabID}"><span>${tab}</span></li>`;
} else { } else {
child.classList.add("tab-hidden"); child.classList.add("tab-hidden");
} }
@@ -193,25 +242,32 @@ export function init(container = document, spacer = true, args = {}) {
tabGroup.insertBefore(ul, tabGroup.firstChild); tabGroup.insertBefore(ul, tabGroup.firstChild);
tabGroup.querySelectorAll('[role="tab"]').forEach(tab => { tabGroup.querySelectorAll('[role="tab"]').forEach(tab => {
tab.addEventListener("click", (e) => { tab.addEventListener("click", (evt) => {
if (e.altKey && typeof args.altModifier == "function") { // if (evt.altKey && typeof args.altModifier == "function") {
args.altModifier(tab); // args.altModifier(tab, evt);
} else if (e.shiftKey && typeof args.shiftModifier == "function") { // } else if (evt.shiftKey && typeof args.shiftModifier == "function") {
args.shiftModifier(tab); // args.shiftModifier(tab, evt);
} else if (e.metaKey && typeof args.metaModifier == "function") { // } else if (evt.metaKey && typeof args.metaModifier == "function") {
args.metaModifier(tab); // args.metaModifier(tab, evt);
} else { // } else {
const siblings = Array.from(tab.parentNode.children); const siblings = Array.from(tab.parentNode.children);
siblings.forEach(sibling => sibling.classList.remove("selected")); siblings.forEach(sibling => sibling.classList.remove("selected"));
tab.classList.add("selected"); tab.classList.add("selected");
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);
const tabPanels = Array.from(tab.parentNode.parentNode.children) const tabPanels = Array.from(tab.parentNode.parentNode.children)
.filter(child => child.getAttribute("role") === "tabpanel"); .filter(child => child.getAttribute("role") === "tabpanel");
tabPanels.forEach(panel => panel.classList.remove("open")); tabPanels.forEach(panel => panel.classList.remove("open"));
const tabPanelId = tab.getAttribute("id").replace("tab", "tab-panel"); const tabPanelId = tab.getAttribute("id").replace("tab", "tab-panel");
document.getElementById(tabPanelId).classList.add("open"); document.getElementById(tabPanelId).classList.add("open");
} //}
}); });
@@ -230,11 +286,18 @@ export function init(container = document, spacer = true, args = {}) {
el.focus(); el.focus();
el.dispatchEvent(click); el.dispatchEvent(click);
}); });
} }
}); });
}
</pre> addEventListener("hashchange", (evt) => {
document.querySelector(window.location.hash).dispatchEvent(click);
// window.location.hash
// console.log(window.location.hash)
})
}</pre>
</div> </div>
</tabset> </tabset>
</body> </body>

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

@@ -30,29 +30,53 @@ const waitForElement = (selector) => {
}); });
} }
let tabsetCount = 0;
export function 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) { if (tabGroup.querySelector("[role=tablist]") === null) {
if (tabGroup.getAttribute("id") == null) {
tabGroup.setAttribute("id", "tab-group-" + tabsetCount);
tabsetCount++;
}
const tabgroup = tabGroup.getAttribute("id"); const tabgroup = tabGroup.getAttribute("id");
let tablist = ""; let tablist = "";
Array.from(tabGroup.children).forEach(child => { Array.from(tabGroup.children).forEach(child => {
const tab = child.getAttribute("tab") || child.getAttribute("data-tab");
// 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) { if (tab !== null) {
const tabID = tab.replace(/\W+/g, "-").toLowerCase(); const tabID = tab.replace(/\W+/g, "-").toLowerCase();
const tabPanel = document.createElement('div');
// 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.id = `tab-panel-${tabgroup}-${tabID}`;
tabPanel.className = tablist === "" ? "open" : ""; tabPanel.className = tablist === "" ? "open" : "";
tabPanel.setAttribute("role", "tabpanel"); tabPanel.setAttribute("role", "tabpanel");
tabPanel.setAttribute("tabindex", "0"); tabPanel.setAttribute("tabindex", "0");
tabPanel.setAttribute("aria-labelledby", `tab-${tabgroup}-${tabID}`); tabPanel.setAttribute("aria-labelledby", `tab-${tabgroup}-${tabID}`);
tabPanel.appendChild(child.cloneNode(true));
child.parentNode.replaceChild(tabPanel, child); child.parentNode.replaceChild(tabPanel, child);
let cls = tablist === "" ? "class='selected'" : ""; let cls = tablist === "" ? "class='selected'" : "";
tablist += `<li tabindex="0" role="tab" ${cls}="" id="tab-${tabgroup}-${tabID}"><span>${tab}</span></li>`; tablist += `<li tabindex="0" role="tab" ${cls} id="tab-${tabgroup}-${tabID}"><span>${tab}</span></li>`;
} else { } else {
child.classList.add("tab-hidden"); child.classList.add("tab-hidden");
} }
@@ -65,24 +89,31 @@ 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 (evt.altKey && typeof args.altModifier == "function") {
args.altModifier(tab, evt); // args.altModifier(tab, evt);
} else if (evt.shiftKey && typeof args.shiftModifier == "function") { // } else if (evt.shiftKey && typeof args.shiftModifier == "function") {
args.shiftModifier(tab, evt); // args.shiftModifier(tab, evt);
} else if (evt.metaKey && typeof args.metaModifier == "function") { // } else if (evt.metaKey && typeof args.metaModifier == "function") {
args.metaModifier(tab, evt); // args.metaModifier(tab, evt);
} else { // } else {
const siblings = Array.from(tab.parentNode.children); const siblings = Array.from(tab.parentNode.children);
siblings.forEach(sibling => sibling.classList.remove("selected")); siblings.forEach(sibling => sibling.classList.remove("selected"));
tab.classList.add("selected"); tab.classList.add("selected");
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);
const tabPanels = Array.from(tab.parentNode.parentNode.children) const tabPanels = Array.from(tab.parentNode.parentNode.children)
.filter(child => child.getAttribute("role") === "tabpanel"); .filter(child => child.getAttribute("role") === "tabpanel");
tabPanels.forEach(panel => panel.classList.remove("open")); tabPanels.forEach(panel => panel.classList.remove("open"));
const tabPanelId = tab.getAttribute("id").replace("tab", "tab-panel"); const tabPanelId = tab.getAttribute("id").replace("tab", "tab-panel");
document.getElementById(tabPanelId).classList.add("open"); document.getElementById(tabPanelId).classList.add("open");
} //}
}); });
@@ -103,4 +134,13 @@ export function init(container = document, spacer = true, args = {}) {
}); });
} }
}); });
addEventListener("hashchange", (evt) => {
document.querySelector(window.location.hash).dispatchEvent(click);
// window.location.hash
// console.log(window.location.hash)
})
} }

48
src/pg/patterns/core/tabs/_tabs.scss
View File

@@ -1,23 +1,23 @@
// DS2 core (c) 2024 Alexander McIlwraith // DS2 core (c) 2024 Alexander McIlwraith
// Licensed under CC BY-SA 4.0 // Licensed under CC BY-SA 4.0
$tab-border: #7f7f7f !default; $tab-border: #7f7f7f !default;
$tab-panel-background-color: #FFF !default;
$tab-panel-top-border: #7f7f7f !default;
$tab-panel-top-border-width: 1px !default;
$tab-selected: #FFF !default; $tab-selected: #FFF !default;
$tab-selected-text: #000 !default;
$tab-notselected: #f0f0f0 !default; $tab-notselected: #f0f0f0 !default;
$tab-notselected-text: #000 !default; $tab-break: 450px !default;
@mixin tabs { @mixin tabs {
tabset, .tab-group { tabset, .tab-group {
@media (min-width: $tab-break) {
margin: 2rem 0 1rem 0; margin: 2rem 0 1rem 0;
}
> ul { > ul {
display: flex; display: flex;
margin: 0; margin: 0;
padding: 0; padding: 0;
li.separator { li.separator {
border-bottom: 1px solid $tab-border; border-bottom: 1px solid $tab-border;
border-left: 1px solid $tab-border; border-left: 1px solid $tab-border;
@@ -27,6 +27,8 @@ $tab-notselected-text: #000 !default;
} }
} }
.tab-hidden { .tab-hidden {
display: none; display: none;
} }
@@ -34,12 +36,11 @@ $tab-notselected-text: #000 !default;
[role="tab"] { [role="tab"] {
background-color: $tab-selected; background-color: $tab-selected;
border-left: 1px solid $tab-border; border-left: 1px solid $tab-border;
border-radius: .5rem .5rem 0 0;
border-top: 1px solid $tab-border; border-top: 1px solid $tab-border;
color: $tab-selected-text; border-radius: .5rem .5rem 0 0;
cursor:pointer; cursor:pointer;
display: inline;
margin: 0; margin: 0;
display: inline;
padding: 1rem 1.5rem .14rem 1.5rem; padding: 1rem 1.5rem .14rem 1.5rem;
z-index: 2; z-index: 2;
@@ -50,7 +51,6 @@ $tab-notselected-text: #000 !default;
&:not(.selected) { &:not(.selected) {
background-color: $tab-notselected; background-color: $tab-notselected;
border-bottom: 1px solid $tab-border; border-bottom: 1px solid $tab-border;
color: $tab-notselected-text;
} }
span { span {
@@ -60,16 +60,40 @@ $tab-notselected-text: #000 !default;
} }
[role="tabpanel"] { [role="tabpanel"] {
background-color: $tab-panel-background-color; background-color: $tab-selected;
border: 1px solid $tab-border; border: 1px solid $tab-border;
border-top: $tab-panel-top-border solid $tab-panel-top-border-width; border-top: none;
padding: 1rem; padding: 1rem;
z-index: 1; z-index: 1;
@media (min-width: $tab-break) {
&[open] summary {
display: none;
}
}
@media (min-width: $tab-break) {
&:not(.open) { &:not(.open) {
display: none; display: none;
} }
@content;
} }
@content;
}
@media (max-width: $tab-break) {
&:has(details) {
[role="tablist"] {
display: none;
}
[role="tabpanel"] {
border: none;
}
}
}
} }
} }

2
src/pg/patterns/core/tabs/tabs.css
View File

@@ -1 +1 @@
.tab-group,tabset{margin:2rem 0 1rem 0}.tab-group>ul,tabset>ul{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0;padding:0}.tab-group>ul li.separator,tabset>ul li.separator{border-bottom:1px solid #7f7f7f;border-left:1px solid #7f7f7f;display:inline-block;margin:0.45rem 0 0 0;width:100%}.tab-group .tab-hidden,tabset .tab-hidden{display:none}.tab-group [role=tab],tabset [role=tab]{background-color:#FFF;border-left:1px solid #7f7f7f;border-radius:0.5rem 0.5rem 0 0;border-top:1px solid #7f7f7f;color:#000;cursor:pointer;display:inline;margin:0;padding:1rem 1.5rem 0.14rem 1.5rem;z-index:2}.tab-group [role=tab]:last-of-type,tabset [role=tab]:last-of-type{border-right:1px solid #7f7f7f}.tab-group [role=tab]:not(.selected),tabset [role=tab]:not(.selected){background-color:#f0f0f0;border-bottom:1px solid #7f7f7f;color:#000}.tab-group [role=tab] span,tabset [role=tab] span{display:block;margin:0 0 0.5rem 0}.tab-group [role=tabpanel],tabset [role=tabpanel]{background-color:#FFF;border:1px solid #7f7f7f;border-top:#7f7f7f solid 1px;padding:1rem;z-index:1}.tab-group [role=tabpanel]:not(.open),tabset [role=tabpanel]:not(.open){display:none} @media (min-width:450px){.tab-group,tabset{margin:2rem 0 1rem 0}}.tab-group>ul,tabset>ul{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0;padding:0}.tab-group>ul li.separator,tabset>ul li.separator{border-bottom:1px solid #7f7f7f;border-left:1px solid #7f7f7f;display:inline-block;margin:0.45rem 0 0 0;width:100%}.tab-group .tab-hidden,tabset .tab-hidden{display:none}.tab-group [role=tab],tabset [role=tab]{background-color:#FFF;border-left:1px solid #7f7f7f;border-top:1px solid #7f7f7f;border-radius:0.5rem 0.5rem 0 0;cursor:pointer;margin:0;display:inline;padding:1rem 1.5rem 0.14rem 1.5rem;z-index:2}.tab-group [role=tab]:last-of-type,tabset [role=tab]:last-of-type{border-right:1px solid #7f7f7f}.tab-group [role=tab]:not(.selected),tabset [role=tab]:not(.selected){background-color:#f0f0f0;border-bottom:1px solid #7f7f7f}.tab-group [role=tab] span,tabset [role=tab] span{display:block;margin:0 0 0.5rem 0}.tab-group [role=tabpanel],tabset [role=tabpanel]{background-color:#FFF;border:1px solid #7f7f7f;border-top:none;padding:1rem;z-index:1}@media (min-width:450px){.tab-group [role=tabpanel][open] summary,tabset [role=tabpanel][open] summary{display:none}}@media (min-width:450px){.tab-group [role=tabpanel]:not(.open),tabset [role=tabpanel]:not(.open){display:none}}@media (max-width:450px){.tab-group:has(details) [role=tablist],tabset:has(details) [role=tablist]{display:none}.tab-group:has(details) [role=tabpanel],tabset:has(details) [role=tabpanel]{border:none}}

14
src/scss/scaffolding.scss
View File

@@ -27,7 +27,15 @@ $tooltip-dark-allow: false;
@use "../pg/patterns/core/header/_header"; @use "../pg/patterns/core/header/_header";
@use "../pg/patterns/core/tabs/_tabs"; @use "../pg/patterns/core/tabs/_tabs";
@use "../pg/patterns/core/status/_status"; @use "../pg/patterns/core/status/_status";
use
@include core.core-colour-samples;
@include tooltip.tooltip;
@include sticky-note.sticky-note;
@include status.status;
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
@@ -43,11 +51,7 @@ html {
} }
} }
@include core.core-colour-samples;
@include tooltip.tooltip;
@include sticky-note.sticky-note;
@include status.status;
article[data-status=deprecated]:not(.show-deprecated) { article[data-status=deprecated]:not(.show-deprecated) {
display: none; display: none;