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

39
src/js/scaffolding.js
View File

@@ -26,12 +26,26 @@ core.init({
// deprecated switch handler
const flipDeprecated = (e, s = e.currentTarget) => {
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")
});
const flipInfoSwitch = (e, s = e.currentTarget) => {
switch(s.getAttribute("id")) {
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
@@ -42,15 +56,24 @@ const click = new MouseEvent('click', {
});
// get the switch, initialize it and add the handler
let switches = document.querySelector(".info-switches");
swtch.init(switches);
let deprecated = document.querySelector("#deprecated");
swtch.init(deprecated.parentNode)
deprecated.onclick = flipDeprecated;
deprecated.keypress = flipDeprecated;
let breakpoints = document.querySelector("#breakpoints");
deprecated.onclick = flipInfoSwitch;
deprecated.keypress = flipInfoSwitch;
breakpoints.onclick = flipInfoSwitch;
breakpoints.keypress = flipInfoSwitch;
// check a cookie to get the switch's state
if (core.cookie.get("show-deprecated") == "true") {
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
// 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) {
font-size: calc($font-size + 2pt);
}
&.show-breakpoints {
@include breakpoint-debug;
}
}
@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-row: 3;
grid-template-columns: auto repeat(2, max-content);
text-align: right;
@include switch;
label {
text-align: left;;
}
}
main {