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

Update patterns and core JS

Browse Source
This commit is contained in:
A McIlwraith
2024-07-12 22:19:12 -04:00
parent 4a18341cf5
commit dcbc471c4d
10 changed files with 3565 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
public/patterns/components/sticky-note-core/index.html
View File

@@ -369,30 +369,6 @@ const css = (el, attr) => {
el.setAttribute("style",st.trim());
}
const setupStickies = () => {
let stickies = document.querySelectorAll("sticky-note");
stickies.forEach((s) => {
if (s.style.position !== "absolute") {
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
}
}
})
}
const calculateStickyPosition = (s) => {
let float = s.getAttribute("float");
@@ -413,18 +389,35 @@ const calculateStickyPosition = (s) => {
}
}
export function init(callback){
export function init(p = document){
font.size = parseFloat(getComputedStyle(document.documentElement).fontSize.replace("px",""));
setupStickies();
let stickies = document.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);
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 = document.querySelectorAll("sticky-note");
let stickies = p.querySelectorAll("sticky-note");
stickies.forEach((s) => {
calculateStickyPosition(s);
});

15
public/patterns/layouts/tabs-core/index.html
View File

@@ -143,17 +143,14 @@ $tab-notselected: var(--color-grey-xxl) !default;
}
}
}</pre>
<pre class="language-css" tab="js">//- DS2 core (c) 2024 Alexander McIlwraith
//- Licensed under CC BY-SA 4.0
<pre class="language-css" tab="js">/* DS2 core (c) 2024 Alexander McIlwraith
import * as tabs from "../pg/patterns/layouts/tabs/_tabs.js";
tabs.init();
*/
//- import * as tabs from "../pg/patterns/layouts/tabs/_tabs-core.js";
//- tabs.init();
export function init(p = document) {
p.querySelectorAll(".tab-group, tabset").forEach(tabGroup => {
export function init() {
const tabGroups = document.querySelectorAll(".tab-group, tabset");
tabGroups.forEach(tabGroup => {
if (tabGroup.querySelector("[role=tablist]") === null) {
const tabgroup = tabGroup.getAttribute("id");
let tablist = "";

18
public/patterns/status-core/index.html
View File

@@ -8,6 +8,13 @@
<div class="status-report status-report-structure" data-tab="by&amp;nbsp;structure">
<table class="custom" role="presentation">
<tbody>
<tr>
<td colspan="2">This pattern doesn't exist (1)</td>
</tr>
<tr>
<td><a href="./?p=this-pattern-doesn't-exist"> This pattern doesn't exist</a></td>
<td><span class="status-deprecated">Deprecated</span></td>
</tr>
<tr>
<td colspan="2">Colours (1)</td>
</tr>
@@ -116,7 +123,11 @@
<td>Layouts</td>
</tr>
<tr>
<td colspan="2"><span class="status-deprecated">Deprecated (0)</span></td>
<td colspan="2"><span class="status-deprecated">Deprecated (1)</span></td>
</tr>
<tr>
<td> <a href="./?p=this-pattern-doesn't-exist">This pattern doesn't exist</a></td>
<td></td>
</tr>
</tbody>
</table>
@@ -169,6 +180,11 @@
<td><span><span class="status-complete">Complete</span></span></td>
<td>Layouts</td>
</tr>
<tr>
<td> <a href="./?p=this-pattern-doesn't-exist">This pattern doesn't exist</a></td>
<td><span><span class="status-deprecated">Deprecated</span></span></td>
<td></td>
</tr>
<tr>
<td> <a href="./?p=components/tooltip">Tooltip</a></td>
<td><span><span class="status-in-progress">In Progress</span></span></td>