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

1
.gitinore
View File

@ -1 +0,0 @@
.DS_Store

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

File diff suppressed because one or more lines are too long

51
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>

92
src/js/_core.js
View File

@ -59,6 +59,8 @@ const showMessage = (m, s) => {
})
}
const getURLVars = () => {
var oResult = {};
if (location.search.length > 0) {
@ -114,7 +116,7 @@ module.exports = {
// showMessage(m, s);
// },
copy: (w, t) => {
let c = t.parent().attr("data-" + (w=="var" ? "token" : w));
let c = t.parentNode.getAttribute("data-" + (w=="var" ? "token" : w));
c = w == "var" ? `var(${c})` : c;
if (navigator.clipboard) {
@ -137,9 +139,93 @@ module.exports = {
})
}
},
init: (callback) => {
init: (args = {}) => {
const url = getURLVars();
if (url.p !== undefined) {
document.querySelectorAll("main article:not([data-path^='" + url.p + "'])").forEach((a) => {
a.remove();
});
callback();
if (url.p == -1) {
document.querySelector("title").innerHTML = `${url.p.toContent().toTitleCase()} | ${$("title").attr("data-site")}`;
} else {
document.querySelector("title").innerHTML = `${url.p.substring(url.p.lastIndexOf("/")+1).toContent().toTitleCase()} | ${$("title").attr("data-site")}`
}
document.querySelector("nav ul li a[href='./?p=" + (url.p.indexOf("/") == -1 ? url.p : url.p.substring(0, url.p.indexOf("/")) ) + "']").parentNode.classList.add("active");
} else {
document.querySelector("nav ul li a[href='./']").parentNode.classList.add("active");
}
document.querySelectorAll("article").forEach((a) => {
if ( a.getAttribute("data-template") != "none" ) {
let path = "patterns/" + a.getAttribute("data-path") + (a.getAttribute("data-core") == "true" ? "-core" : "") + "/index.html";
const ASYNC = true;
let ajx = new XMLHttpRequest();
ajx.onreadystatechange = () => {
if (ajx.readyState == 4) {
switch (ajx.status) {
case 200:
a.innerHTML = a.innerHTML + ajx.responseText;
switch (a.getAttribute("data-template")) {
case "pug":
a.querySelectorAll("pre").forEach((aa) => {
aa.innerHTML = `<code class="${aa.getAttribute("class")}">${aa.innerHTML}</code>`;
})
break;
case "md":
a.querySelectorAll("code").forEach((aa) => {
aa.classList.add("language-html");
})
break;
}
a.querySelectorAll("code").forEach((c)=> {
c.innerHTML = c.innerHTML.replace(/</g, "&lt;");
c.classList.add("line-numbers");
c.classList.add("copy-to-clipboard-button");
// add oneclickselect
})
if (typeof args.success == "function") args.success(a);
Prism.highlightAll();
module.exports.colour.positionTooltip();
window.onresize = () => {
module.exports.colour.positionTooltip();
}
a.querySelectorAll("name > span, color-pill > span").forEach((pill) => {
pill.onclick = (e) => {
e.preventDefault();
let w = "";
if (e.metaKey || e.ctrlKey || e.keyCode == 91 || e.keyCode == 224) {
w = "var";
} else if (e.altKey) {
w = "token"
} else if (e.shiftKey) {
w = "rgb";
} else {
w = "hex";
}
module.exports.colour.copy(w, pill);
}
})
break;
case 404:
if (typeof args.notFound == "function") args.notFound(a, path);
break;
default:
console.log("uncaught http error", { status: ajx.status, path: a.getAttribute("data-path") });
}
}
};
ajx.open("GET", path, ASYNC);
ajx.send();
}
})
}
};

122
src/js/scaffolding.js
View File

@ -1,3 +1,4 @@
// core and prism
import * as core from './_core.js';
import * as Prism from "../../node_modules/prismjs/prism";
import '../../node_modules/prismjs/components/prism-json';
@ -6,20 +7,31 @@ import '../../node_modules/prismjs/components/prism-sass';
import "../../node_modules/prismjs/plugins/toolbar/prism-toolbar";
import "../../node_modules/prismjs/plugins/line-numbers/prism-line-numbers";
import * as colours from "./_color-samples.js";
// import pattern stuff.
import * as swtch from "../pg/patterns/components/switch-core/_switch.js";
import * as stickynote from "../pg/patterns/components/sticky-note-core/_sticky-note.js";
import * as tabs from "../pg/patterns/layouts/tabs-core/_tabs.js";
const initComponents = (jQuery) => {
swtch.init();
tabs.init();
stickynote.init();
// init core
core.init({
success: (a) => {
tabs.init(a);
swtch.init(a);
stickynote.init(a);
},
notFound: (a, path) => {
a.innerHTML = `${a.innerHTML}<div class='notification-box error'><p>This pattern appears to be missing.<br><small>(${path} returned http status 404)</small></p></div>`;
}
});
// handler for the deprecated switch
/*
// selectable content
jQuery.fn.OneClickSelect = function () {
return jQuery(this).on('click', function () {
@ -38,116 +50,32 @@ jQuery.fn.OneClickSelect = function () {
}
});
};
*/
jQuery(document).ready(function($){
if (core.url.p != undefined) {
console.log("category:", core.url.p)
$("main article:not([data-path^='" + core.url.p + "'])").remove();
if (core.url.p == -1) {
$("title").html(`${core.url.p.toContent().toTitleCase()} | ${$("title").attr("data-site")}`);
} else {
$("title").html(`${core.url.p.substring(core.url.p.lastIndexOf("/")+1).toContent().toTitleCase()} | ${$("title").attr("data-site")}`);
}
console.log("get the 'directory'", (core.url.p.indexOf("/") == -1 ? core.url.p : core.url.p.substring(0, core.url.p.indexOf("/")) ));
$(".main-nav nav ul li a[href='./?p=" + (core.url.p.indexOf("/") == -1 ? core.url.p : core.url.p.substring(0, core.url.p.indexOf("/")) ) + "']").parent().addClass("active");
} else {
$("header").addClass("show-feature");
$(".main-nav nav ul li a[href='./']").parent().addClass("active");
}
// window.onresize = () => {
// console.log("resize called")
// initComponents($);
// }
let articles = $("article").length;
$("article").each(function(k,v){
if ($(this).attr("data-template") != "none") {
let path = "patterns/" + $(this).attr("data-path") + ($(this).attr("data-core") == "true" ? "-core" : "") + "/index.html";
console.log(path)
$( "#" + $(this).attr("id") ).load(path, "", function(response, status, xhr){
if ( status == "error" ) {
$( "#" + $(this).attr("id") ).html(`<div class='notification-box error'><p>This pattern appears to be missing.<br><small>(${path} returned http status 404)</small></p></div>`);
}
articles--;
if (articles == 0) {
$("article").each(function(){
try {
$(this).prepend(`<h1 class="status-${$(this).attr("data-status")}"><span>${($(this).attr("data-display-text") != undefined ? $(this).attr("data-display-text") : $(this).attr("data-pattern").toContent().toSentenceCase())}<div role="tooltip" inert tip-position="right">${$(this).attr("data-status").toContent().toSentenceCase()}</div></span></h1>`);
} catch (e) {
console.log("Problem creating heading", $(this).attr("data-pattern"));
$(this).prepend(`<div class='notification-box warning'><h1>Problem creating heading</h1><p>The content we found for this header was: ${$(this).attr("data-pattern")}. Check that the data-pattern attribute on the article is set properly. Also check that there is no article tag inside the article.</p></div>`);
}
switch ($(this).attr("data-template")) {
case "pug":
$(this).find("pre").each(function(){
$(this).wrapInner("<code class='" + $(this).parent().attr("class") + "'></code>");
})
break;
case "md":
$(this).find("code").addClass("language-html");
break;
}
})
// things we do on every template after it has been customised.
$("code").each(function(){
$(this).html($(this).html().replace(/</g, "&lt;"));
}).addClass("line-numbers").addClass('copy-to-clipboard-button').OneClickSelect();
initComponents($);
Prism.highlightAll();
core.colour.positionTooltip();
$( window ).on("resize", function(){core.colour.positionTooltip()});
$("name > span, color-pill > span").on("click", function(e){
e.preventDefault();
let w = "";
if (e.metaKey || e.ctrlKey || e.keyCode == 91 || e.keyCode == 224) {
w = "var";
} else if (e.altKey) {
w = "token"
} else if (e.shiftKey) {
w = "rgb";
} else {
w = "hex";
}
core.colour.copy(w, $(this));
});
}
})
} else {
articles--;
}
});
// show deprecated switch
initComponents($);
function flipDeprecated() {
setTimeout(function(){
if ($("#deprecated").attr("aria-checked") == "false") {
$(".status-deprecated").closest("article").addClass("status-deprecated");
core.cookie.set("hide-deprecated", false, 30, "/");
core.cookie.set("show-deprecated", false, 30, "/");
} else {
$("article.status-deprecated").removeClass("status-deprecated");
core.cookie.set("hide-deprecated", true, 30, "/");
core.cookie.set("show-deprecated", true, 30, "/");
}
}, 50);
}
$("#deprecated").on("click", flipDeprecated).on("keypress", flipDeprecated);
setTimeout( function() {
if (core.cookie.get("hide-deprecated") == "true") {
if (core.cookie.get("show-deprecated") == "true") {
$("#deprecated").attr("aria-checked", "true");
flipDeprecated();
}
}, 200);
console.log("hide deprecated", { "type": (typeof core.cookie.get("hide-deprecated")), "value": core.cookie.get("hide-deprecated") });
console.log("hide deprecated", { "type": (typeof core.cookie.get("show-deprecated")), "value": core.cookie.get("show-deprecated") });
// /hide deprecated switch
// import("../pg/patterns/layouts/main-navigation/_main-navigation.js");
})
// import("../pg/patterns/layouts/main-navigation/_main-navigation.js");

BIN
src/pg/.DS_Store vendored
View File

Binary file not shown.

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

@ -75,30 +75,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");
@ -119,18 +95,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
src/pg/patterns/layouts/tabs-core/_tabs.js
View File

@ -1,14 +1,11 @@
//- DS2 core (c) 2024 Alexander McIlwraith
//- Licensed under CC BY-SA 4.0
/* 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 = "";