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

Update switches to include breakpoints

Browse Source
This commit is contained in:
A McIlwraith 2024-07-16 03:44:48 -04:00
parent c0ea225d03
commit 3c261881e9
4 changed files with 161 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -187,96 +187,110 @@ module.exports = {
} }
} }
if (typeof args.beforeArticleLoad == "function") args.beforeArticleLoad(a); if (typeof args.beforeArticleLoad == "function") args.beforeArticleLoad();
document.querySelectorAll("article").forEach((a) => { document.querySelectorAll("article").forEach((a) => {
if ( a.getAttribute("data-template") != "none" ) { if ( a.getAttribute("data-template") != "none" ) {
let path = a.getAttribute("data-path"); const observer = new IntersectionObserver(articles => {
path = "patterns/" + articles.forEach(article => {
(a.getAttribute("data-core") == "true" ? let a = article.target;
"core/" + path.substring(path.lastIndexOf("/") + 1) :
a.getAttribute("data-path"))
+ "/index.html";
const ASYNC = true;
let ajx = new XMLHttpRequest();
ajx.onreadystatechange = () => {
if (ajx.readyState == 4) {
switch (ajx.status) { if (article.isIntersecting) {
case 200:
a.innerHTML = a.innerHTML + ajx.responseText;
switch (a.getAttribute("data-template")) { let path = a.getAttribute("data-path");
case "pug": path = "patterns/" +
a.querySelectorAll("pre").forEach((aa) => { (a.getAttribute("data-core") == "true" ?
aa.innerHTML = `<code class="${aa.getAttribute("class")}">${aa.innerHTML}</code>`; "core/" + path.substring(path.lastIndexOf("/") + 1) :
}) a.getAttribute("data-path"))
break; + "/index.html";
case "md": const ASYNC = true;
a.querySelectorAll("code").forEach((aa) => { let ajx = new XMLHttpRequest();
aa.classList.add("language-html"); ajx.onreadystatechange = () => {
}) if (ajx.readyState == 4) {
break;
}
a.querySelectorAll("code").forEach((c)=> { observer.unobserve(article.target);
c.classList.add("line-numbers"); switch (ajx.status) {
c.innerHTML = c.innerHTML.replace(/</g, "&lt;"); case 200:
c.classList.add("copy-to-clipboard-button"); a.innerHTML = a.innerHTML + ajx.responseText;
})
if (typeof args.success == "function") args.success(a);
Prism.highlightAll(); 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)=> { a.querySelectorAll("code").forEach((c)=> {
c.onclick = (e) => { c.classList.add("line-numbers");
oneClickSelect(e); c.innerHTML = c.innerHTML.replace(/</g, "&lt;");
c.classList.add("copy-to-clipboard-button");
})
if (typeof args.success == "function") args.success(a);
Prism.highlightAll();
a.querySelectorAll("code").forEach((c)=> {
c.onclick = (e) => {
oneClickSelect(e);
}
})
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") });
} }
})
if (typeof args.done == "function") args.done(a);
module.exports.colour.positionTooltip();
window.onresize = () => {
module.exports.colour.positionTooltip();
} }
};
ajx.open("GET", path, ASYNC);
ajx.send();
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") });
} }
})
}, { threshold: 0, rootMargin: (document.body.clientHeight / 2) + "px" })
if (typeof args.done == "function") args.done(a); observer.observe(a);
}
};
ajx.open("GET", path, ASYNC);
ajx.send();
} }
}) })
if (typeof args.afterArticleLoad == "function") args.afterArticleLoad(a); if (typeof args.afterArticleLoad == "function") args.afterArticleLoad();
} }
}; };
@ -3354,12 +3368,26 @@ _core_core_js__WEBPACK_IMPORTED_MODULE_0__.init({
// deprecated switch handler // deprecated switch handler
const flipDeprecated = (e, s = e.currentTarget) => { const flipInfoSwitch = (e, s = e.currentTarget) => {
_core_core_js__WEBPACK_IMPORTED_MODULE_0__.cookie.set("show-deprecated", s.getAttribute("aria-checked"), 30, "/");
document.querySelector("main").querySelectorAll("article[data-status=deprecated]").forEach((a) => { switch(s.getAttribute("id")) {
a.classList[( s.getAttribute("aria-checked") == "true" ? "add" : "remove" )]("show-deprecated")
}); case "deprecated" :
_core_core_js__WEBPACK_IMPORTED_MODULE_0__.cookie.set("show-deprecated", s.getAttribute("aria-checked"), 30, "/");
document.querySelector("main").querySelectorAll("article[data-status=deprecated]").forEach((a) => {
a.classList[( s.getAttribute("aria-checked") == "true" ? "add" : "remove" )]("show-deprecated");
});
break;
case "breakpoints" :
console.log("here")
_core_core_js__WEBPACK_IMPORTED_MODULE_0__.cookie.set("show-breakpoints", s.getAttribute("aria-checked"), 30, "/");
document.querySelector("html").classList[( s.getAttribute("aria-checked") == "true" ? "add" : "remove" )]("show-breakpoints");
break;
}
} }
// create a pure JS mouse click event // create a pure JS mouse click event
@ -3370,15 +3398,24 @@ const click = new MouseEvent('click', {
}); });
// get the switch, initialize it and add the handler // get the switch, initialize it and add the handler
let switches = document.querySelector(".info-switches");
_pg_patterns_core_switch_switch_js__WEBPACK_IMPORTED_MODULE_8__.init(switches);
let deprecated = document.querySelector("#deprecated"); let deprecated = document.querySelector("#deprecated");
_pg_patterns_core_switch_switch_js__WEBPACK_IMPORTED_MODULE_8__.init(deprecated.parentNode) let breakpoints = document.querySelector("#breakpoints");
deprecated.onclick = flipDeprecated;
deprecated.keypress = flipDeprecated; deprecated.onclick = flipInfoSwitch;
deprecated.keypress = flipInfoSwitch;
breakpoints.onclick = flipInfoSwitch;
breakpoints.keypress = flipInfoSwitch;
// check a cookie to get the switch's state // check a cookie to get the switch's state
if (_core_core_js__WEBPACK_IMPORTED_MODULE_0__.cookie.get("show-deprecated") == "true") { if (_core_core_js__WEBPACK_IMPORTED_MODULE_0__.cookie.get("show-deprecated") == "true") {
deprecated.dispatchEvent(click); deprecated.dispatchEvent(click);
} }
if (_core_core_js__WEBPACK_IMPORTED_MODULE_0__.cookie.get("show-breakpoints") == "true") {
breakpoints.dispatchEvent(click);
}
// just for fun... We'll show deprecated if they match the path // just for fun... We'll show deprecated if they match the path
// document.querySelector(`#${core.url.p.replace(/\//g, "-")}`).classList.add("show-deprecated"); // document.querySelector(`#${core.url.p.replace(/\//g, "-")}`).classList.add("show-deprecated");

2
public/assets/scaffolding.css
View File

File diff suppressed because one or more lines are too long

39
src/js/scaffolding.js
View File

@ -26,12 +26,26 @@ core.init({
// deprecated switch handler // deprecated switch handler
const flipDeprecated = (e, s = e.currentTarget) => { const flipInfoSwitch = (e, s = e.currentTarget) => {
core.cookie.set("show-deprecated", s.getAttribute("aria-checked"), 30, "/");
document.querySelector("main").querySelectorAll("article[data-status=deprecated]").forEach((a) => { switch(s.getAttribute("id")) {
a.classList[( s.getAttribute("aria-checked") == "true" ? "add" : "remove" )]("show-deprecated")
}); case "deprecated" :
core.cookie.set("show-deprecated", s.getAttribute("aria-checked"), 30, "/");
document.querySelector("main").querySelectorAll("article[data-status=deprecated]").forEach((a) => {
a.classList[( s.getAttribute("aria-checked") == "true" ? "add" : "remove" )]("show-deprecated");
});
break;
case "breakpoints" :
console.log("here")
core.cookie.set("show-breakpoints", s.getAttribute("aria-checked"), 30, "/");
document.querySelector("html").classList[( s.getAttribute("aria-checked") == "true" ? "add" : "remove" )]("show-breakpoints");
break;
}
} }
// create a pure JS mouse click event // create a pure JS mouse click event
@ -42,15 +56,24 @@ const click = new MouseEvent('click', {
}); });
// get the switch, initialize it and add the handler // get the switch, initialize it and add the handler
let switches = document.querySelector(".info-switches");
swtch.init(switches);
let deprecated = document.querySelector("#deprecated"); let deprecated = document.querySelector("#deprecated");
swtch.init(deprecated.parentNode) let breakpoints = document.querySelector("#breakpoints");
deprecated.onclick = flipDeprecated;
deprecated.keypress = flipDeprecated; deprecated.onclick = flipInfoSwitch;
deprecated.keypress = flipInfoSwitch;
breakpoints.onclick = flipInfoSwitch;
breakpoints.keypress = flipInfoSwitch;
// check a cookie to get the switch's state // check a cookie to get the switch's state
if (core.cookie.get("show-deprecated") == "true") { if (core.cookie.get("show-deprecated") == "true") {
deprecated.dispatchEvent(click); deprecated.dispatchEvent(click);
} }
if (core.cookie.get("show-breakpoints") == "true") {
breakpoints.dispatchEvent(click);
}
// just for fun... We'll show deprecated if they match the path // just for fun... We'll show deprecated if they match the path
// document.querySelector(`#${core.url.p.replace(/\//g, "-")}`).classList.add("show-deprecated"); // document.querySelector(`#${core.url.p.replace(/\//g, "-")}`).classList.add("show-deprecated");

12
src/scss/scaffolding.scss
View File

@ -35,6 +35,9 @@ html {
@include break(-md) { @include break(-md) {
font-size: calc($font-size + 2pt); font-size: calc($font-size + 2pt);
} }
&.show-breakpoints {
@include breakpoint-debug;
}
} }
@include core-colour-samples; @include core-colour-samples;
@ -87,11 +90,18 @@ body {
} }
p.deprecated-switch { p.info-switches {
align-items: center;
display: grid;
gap: .25rem;
grid-column: 2 / 4; grid-column: 2 / 4;
grid-row: 3; grid-row: 3;
grid-template-columns: auto repeat(2, max-content);
text-align: right; text-align: right;
@include switch; @include switch;
label {
text-align: left;;
}
} }
main { main {