80 lines
2.6 KiB
JavaScript
80 lines
2.6 KiB
JavaScript
// core and prism
|
|
import * as core from './core/_core.js';
|
|
import * as Prism from "../../node_modules/prismjs/prism";
|
|
import "../../node_modules/prismjs/plugins/line-numbers/prism-line-numbers";
|
|
import "../../node_modules/prismjs/plugins/toolbar/prism-toolbar";
|
|
import '../../node_modules/prismjs/components/prism-json';
|
|
import '../../node_modules/prismjs/components/prism-pug';
|
|
import '../../node_modules/prismjs/components/prism-sass';
|
|
|
|
// import pattern stuff.
|
|
import * as stickynote from "../pg/patterns/core/sticky-note/_sticky-note.js";
|
|
import * as swtch from "../pg/patterns/core/switch/_switch.js";
|
|
import * as tabs from "../pg/patterns/core/tabs/_tabs.js";
|
|
|
|
// 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>`;
|
|
}
|
|
});
|
|
|
|
|
|
|
|
|
|
// deprecated switch handler
|
|
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
|
|
const click = new MouseEvent('click', {
|
|
view: window,
|
|
bubbles: false,
|
|
cancelable: true
|
|
});
|
|
|
|
// get the switch, initialize it and add the handler
|
|
let switches = document.querySelector(".info-switches");
|
|
swtch.init(switches);
|
|
|
|
let deprecated = document.querySelector("#deprecated");
|
|
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");
|