gamv/ds2-core
1
0
Fork 0
Code Issues 13 Releases 8 Activity

Make module definitions consistent

Browse Source
This commit is contained in:
A McIlwraith 2025-04-03 07:42:09 -04:00
parent ca3f9970a9
commit 89870edaaf
2 changed files with 97 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/pg/patterns/core/sticky-note/_sticky-note.js
View File

@ -95,37 +95,39 @@ const calculateStickyPosition = (s) => {
} }
} }
export function init(p = document){ module.exports = {
font.size = parseFloat(getComputedStyle(document.documentElement).fontSize.replace("px","")); init: (p = document) => {
p.querySelectorAll("sticky-note").forEach((s) => {
if (s.querySelectorAll("svg").length == 0) {
let wrapper = document.createElement("sticky-note-wrapper");
s.parentNode.insertBefore(wrapper, s);
wrapper.appendChild(s);
s.setAttribute("content", s.innerHTML.replace(/"/g, "\""));
s.innerHTML = `<div><svg width='0' height='0'><defs><clipPath id='stickyClip' clipPathUnits='objectBoundingBox'><path d='M 0 0 Q 0 0.69, 0.03 0.96 0.03 0.96, 1 0.96 Q 0.96 0.69, 0.96 0 0.96 0, 0 0' stroke-linejoin='round' stroke-linecap='square' /></clipPath></defs></svg></div><div><div>${s.innerHTML}</div></div>`;
}
calculateStickyPosition(s);
drag(s);
s.ondblclick = (e) => {
if (e.ctrlKey) {
calculateStickyPosition(s);
} else {
// add one click select
}
}
})
window.onresize = () => {
font.size = parseFloat(getComputedStyle(document.documentElement).fontSize.replace("px","")); font.size = parseFloat(getComputedStyle(document.documentElement).fontSize.replace("px",""));
let stickies = p.querySelectorAll("sticky-note");
stickies.forEach((s) => { p.querySelectorAll("sticky-note").forEach((s) => {
if (s.querySelectorAll("svg").length == 0) {
let wrapper = document.createElement("sticky-note-wrapper");
s.parentNode.insertBefore(wrapper, s);
wrapper.appendChild(s);
s.setAttribute("content", s.innerHTML.replace(/"/g, "\""));
s.innerHTML = `<div><svg width='0' height='0'><defs><clipPath id='stickyClip' clipPathUnits='objectBoundingBox'><path d='M 0 0 Q 0 0.69, 0.03 0.96 0.03 0.96, 1 0.96 Q 0.96 0.69, 0.96 0 0.96 0, 0 0' stroke-linejoin='round' stroke-linecap='square' /></clipPath></defs></svg></div><div><div>${s.innerHTML}</div></div>`;
}
calculateStickyPosition(s); calculateStickyPosition(s);
}); drag(s);
s.ondblclick = (e) => {
if (e.ctrlKey) {
calculateStickyPosition(s);
} else {
// add one click select
}
}
})
window.onresize = () => {
font.size = parseFloat(getComputedStyle(document.documentElement).fontSize.replace("px",""));
let stickies = p.querySelectorAll("sticky-note");
stickies.forEach((s) => {
calculateStickyPosition(s);
});
}
} }
} }

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

@ -31,76 +31,78 @@ const waitForElement = (selector) => {
} }
export function init(container = document, spacer = true, args = {}) { module.exports = {
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) {
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"); const tab = child.getAttribute("tab") || child.getAttribute("data-tab");
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'); const tabPanel = document.createElement('div');
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)); 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>`; tablist += `<li tabindex="0" role="tab" ${tablist === "" ? "class='selected'" : ""} 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);
tabGroup.querySelectorAll('[role="tab"]').forEach(tab => {
tab.addEventListener("click", (e) => {
if (e.altKey && typeof args.altModifier == "function") {
args.altModifier(tab);
} else if (e.shiftKey && typeof args.shiftModifier == "function") {
args.shiftModifier(tab);
} else if (e.metaKey && typeof args.metaModifier == "function") {
args.metaModifier(tab);
} else { } else {
const siblings = Array.from(tab.parentNode.children); child.classList.add("tab-hidden");
siblings.forEach(sibling => sibling.classList.remove("selected"));
tab.classList.add("selected");
const tabPanels = Array.from(tab.parentNode.parentNode.children)
.filter(child => child.getAttribute("role") === "tabpanel");
tabPanels.forEach(panel => panel.classList.remove("open"));
const tabPanelId = tab.getAttribute("id").replace("tab", "tab-panel");
document.getElementById(tabPanelId).classList.add("open");
} }
}); });
const ul = document.createElement('ul');
ul.setAttribute("role", "tablist");
ul.innerHTML = spacer != true ? `${tablist}` : `${tablist}<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", (e) => {
if( e.which == 32 || e.which == 13 ) { if (e.altKey && typeof args.altModifier == "function") {
e.currentTarget.dispatchEvent(click); args.altModifier(tab);
} } else if (e.shiftKey && typeof args.shiftModifier == "function") {
}) args.shiftModifier(tab);
}); } else if (e.metaKey && typeof args.metaModifier == "function") {
} args.metaModifier(tab);
} else {
const siblings = Array.from(tab.parentNode.children);
siblings.forEach(sibling => sibling.classList.remove("selected"));
tab.classList.add("selected");
if (document.location.hash != "" && document.location.hash.substring(0,5) == "#tab-") { const tabPanels = Array.from(tab.parentNode.parentNode.children)
waitForElement(document.location.hash).then((el) => { .filter(child => child.getAttribute("role") === "tabpanel");
el.scrollIntoView(); tabPanels.forEach(panel => panel.classList.remove("open"));
el.focus();
el.dispatchEvent(click);
});
} const tabPanelId = tab.getAttribute("id").replace("tab", "tab-panel");
}); document.getElementById(tabPanelId).classList.add("open");
} }
});
tab.addEventListener("keypress", (e) => {
e.preventDefault();
if( e.which == 32 || e.which == 13 ) {
e.currentTarget.dispatchEvent(click);
}
})
});
}
if (document.location.hash != "" && document.location.hash.substring(0,5) == "#tab-") {
waitForElement(document.location.hash).then((el) => {
el.scrollIntoView();
el.focus();
el.dispatchEvent(click);
});
}
});
}
}