Update switches to include breakpoints

public/assets/scaffolding-min.js

@@ -187,10 +187,16 @@ 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" ) {
+				const observer = new IntersectionObserver(articles => {
+					articles.forEach(article => {
+						let a = article.target;
+
+						if (article.isIntersecting) {
+
 							let path = a.getAttribute("data-path");
 							path = "patterns/" + 
 							 		(a.getAttribute("data-core") == "true" ? 
@@ -202,6 +208,7 @@ module.exports = {
 							ajx.onreadystatechange = () => {
 								if (ajx.readyState == 4) {
 
+									observer.unobserve(article.target);								
 									switch (ajx.status) {
 										case 200: 
 											a.innerHTML = a.innerHTML + ajx.responseText;
@@ -273,10 +280,17 @@ module.exports = {
 							};
 							ajx.open("GET", path, ASYNC);
 							ajx.send();
+
+						}
+					})
+				}, { threshold: 0, rootMargin: (document.body.clientHeight / 2) + "px" })
+
+				observer.observe(a);
+
 			}
 		})
 
-		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) => {
+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")
+				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)
+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
 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");

src/js/scaffolding.js

@@ -26,12 +26,26 @@ core.init({
 
 
 
+
 // deprecated switch handler
-const flipDeprecated = (e, s = e.currentTarget) => {
+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")
+				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)
+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
 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");

src/scss/scaffolding.scss

@@ -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 {