Update switches to include breakpoints
This commit is contained in:
parent
c0ea225d03
commit
3c261881e9
195
public/assets/scaffolding-min.js
vendored
195
public/assets/scaffolding-min.js
vendored
@ -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) => {
|
||||
if ( a.getAttribute("data-template") != "none" ) {
|
||||
let path = a.getAttribute("data-path");
|
||||
path = "patterns/" +
|
||||
(a.getAttribute("data-core") == "true" ?
|
||||
"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) {
|
||||
const observer = new IntersectionObserver(articles => {
|
||||
articles.forEach(article => {
|
||||
let a = article.target;
|
||||
|
||||
switch (ajx.status) {
|
||||
case 200:
|
||||
a.innerHTML = a.innerHTML + ajx.responseText;
|
||||
if (article.isIntersecting) {
|
||||
|
||||
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;
|
||||
}
|
||||
let path = a.getAttribute("data-path");
|
||||
path = "patterns/" +
|
||||
(a.getAttribute("data-core") == "true" ?
|
||||
"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) {
|
||||
|
||||
a.querySelectorAll("code").forEach((c)=> {
|
||||
c.classList.add("line-numbers");
|
||||
c.innerHTML = c.innerHTML.replace(/</g, "<");
|
||||
c.classList.add("copy-to-clipboard-button");
|
||||
})
|
||||
if (typeof args.success == "function") args.success(a);
|
||||
observer.unobserve(article.target);
|
||||
switch (ajx.status) {
|
||||
case 200:
|
||||
a.innerHTML = a.innerHTML + ajx.responseText;
|
||||
|
||||
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)=> {
|
||||
c.onclick = (e) => {
|
||||
oneClickSelect(e);
|
||||
a.querySelectorAll("code").forEach((c)=> {
|
||||
c.classList.add("line-numbers");
|
||||
c.innerHTML = c.innerHTML.replace(/</g, "<");
|
||||
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
|
||||
const flipDeprecated = (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) => {
|
||||
a.classList[( s.getAttribute("aria-checked") == "true" ? "add" : "remove" )]("show-deprecated")
|
||||
});
|
||||
const flipInfoSwitch = (e, s = e.currentTarget) => {
|
||||
|
||||
switch(s.getAttribute("id")) {
|
||||
|
||||
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
|
||||
@ -3370,15 +3398,24 @@ const click = new MouseEvent('click', {
|
||||
});
|
||||
|
||||
// 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");
|
||||
_pg_patterns_core_switch_switch_js__WEBPACK_IMPORTED_MODULE_8__.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_core_js__WEBPACK_IMPORTED_MODULE_0__.cookie.get("show-deprecated") == "true") {
|
||||
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
|
||||
// document.querySelector(`#${core.url.p.replace(/\//g, "-")}`).classList.add("show-deprecated");
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -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");
|
||||
|
||||
@ -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 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user