Update patterns and core JS

.gitinore

@@ -1 +0,0 @@
-.DS_Store

public/patterns/components/sticky-note-core/index.html

@@ -369,30 +369,6 @@ const css = (el, attr) => {
   	el.setAttribute("style",st.trim());
 }
 
-const setupStickies = () => {
-	let stickies = document.querySelectorAll("sticky-note");
-	stickies.forEach((s) => {
-		if (s.style.position !== "absolute") {
-			
-			let wrapper = document.createElement("sticky-note-wrapper");
-
-			s.parentNode.insertBefore(wrapper, s);
-    		wrapper.appendChild(s);
-
-			s.setAttribute("content", s.innerHTML.replace(/"/g, "\""));
-			s.innerHTML = `<div><svg width='0' height='0'><defs><clipPath id='stickyClip' clipPathUnits='objectBoundingBox'><path d='M 0 0 Q 0 0.69, 0.03 0.96 0.03 0.96, 1 0.96 Q 0.96 0.69, 0.96 0 0.96 0, 0 0' stroke-linejoin='round' stroke-linecap='square' /></clipPath></defs></svg></div><div><div>${s.innerHTML}</div></div>`;
-		}
-		calculateStickyPosition(s);
-		drag(s);
-		s.ondblclick = (e) => {
-			if (e.ctrlKey) {
-				calculateStickyPosition(s);
-			} else {
-				// add one click select
-			}
-		}
-	})
-}
 
 const calculateStickyPosition = (s) => {
 	let float = s.getAttribute("float");
@@ -413,18 +389,35 @@ const calculateStickyPosition = (s) => {
 	}
 }
 
-export function init(callback){
+export function init(p = document){
 	font.size = parseFloat(getComputedStyle(document.documentElement).fontSize.replace("px",""));
-	setupStickies(); 
+
-	
+	p.querySelectorAll("sticky-note").forEach((s) => {
-	let stickies = document.querySelectorAll("sticky-note");
+		if (s.querySelectorAll("svg").length == 0) {
-	stickies.forEach((s) => {
+			
-		
+			let wrapper = document.createElement("sticky-note-wrapper");
+
+			s.parentNode.insertBefore(wrapper, s);
+    		wrapper.appendChild(s);
+
+			s.setAttribute("content", s.innerHTML.replace(/"/g, "\""));
+			s.innerHTML = `<div><svg width='0' height='0'><defs><clipPath id='stickyClip' clipPathUnits='objectBoundingBox'><path d='M 0 0 Q 0 0.69, 0.03 0.96 0.03 0.96, 1 0.96 Q 0.96 0.69, 0.96 0 0.96 0, 0 0' stroke-linejoin='round' stroke-linecap='square' /></clipPath></defs></svg></div><div><div>${s.innerHTML}</div></div>`;
+		}
+		calculateStickyPosition(s);
+		drag(s);
+		s.ondblclick = (e) => {
+			if (e.ctrlKey) {
+				calculateStickyPosition(s);
+			} else {
+				// add one click select
+			}
+		}
 	})
 
+
 	window.onresize = () => {
 		font.size = parseFloat(getComputedStyle(document.documentElement).fontSize.replace("px",""));
-		let stickies = document.querySelectorAll("sticky-note");
+		let stickies = p.querySelectorAll("sticky-note");
 		stickies.forEach((s) => {
 			calculateStickyPosition(s);
 		});

public/patterns/layouts/tabs-core/index.html

@@ -143,17 +143,14 @@ $tab-notselected: var(--color-grey-xxl) !default;
 		}
 	}
 }</pre>
-      <pre class="language-css" tab="js">//-		DS2 core (c) 2024 Alexander McIlwraith 
+      <pre class="language-css" tab="js">/*  DS2 core (c) 2024 Alexander McIlwraith 
-//-		Licensed under CC BY-SA 4.0 
+	import * as tabs from "../pg/patterns/layouts/tabs/_tabs.js";
+	tabs.init();
+ */
 
-//-		import * as tabs from "../pg/patterns/layouts/tabs/_tabs-core.js";
+export function init(p = document) { 
-//-		tabs.init();
+	p.querySelectorAll(".tab-group, tabset").forEach(tabGroup => {
 
-
-export function init() {
-	const tabGroups = document.querySelectorAll(".tab-group, tabset");
-
-	tabGroups.forEach(tabGroup => {
 		if (tabGroup.querySelector("[role=tablist]") === null) {
 			const tabgroup = tabGroup.getAttribute("id");
 			let tablist = "";

public/patterns/status-core/index.html

@@ -8,6 +8,13 @@
       <div class="status-report status-report-structure" data-tab="by&amp;nbsp;structure">
         <table class="custom" role="presentation">
           <tbody> 
+            <tr>
+              <td colspan="2">This pattern doesn't exist (1)</td>
+            </tr>
+            <tr>
+              <td><a href="./?p=this-pattern-doesn't-exist"> This pattern doesn't exist</a></td>
+              <td><span class="status-deprecated">Deprecated</span></td>
+            </tr>
             <tr>
               <td colspan="2">Colours (1)</td>
             </tr>
@@ -116,7 +123,11 @@
               <td>Layouts</td>
             </tr>
             <tr> 
-              <td colspan="2"><span class="status-deprecated">Deprecated (0)</span></td>
+              <td colspan="2"><span class="status-deprecated">Deprecated (1)</span></td>
+            </tr>
+            <tr> 
+              <td> <a href="./?p=this-pattern-doesn't-exist">This pattern doesn't exist</a></td>
+              <td></td>
             </tr>
           </tbody>
         </table>
@@ -169,6 +180,11 @@
               <td><span><span class="status-complete">Complete</span></span></td>
               <td>Layouts</td>
             </tr>
+            <tr> 
+              <td> <a href="./?p=this-pattern-doesn't-exist">This pattern doesn't exist</a></td>
+              <td><span><span class="status-deprecated">Deprecated</span></span></td>
+              <td></td>
+            </tr>
             <tr> 
               <td> <a href="./?p=components/tooltip">Tooltip</a></td>
               <td><span><span class="status-in-progress">In Progress</span></span></td>

src/js/_core.js

@@ -59,6 +59,8 @@ const showMessage = (m, s) => {
 	})
 }
 
+
+
 const getURLVars = () => {
 	var oResult = {};
 	if (location.search.length > 0) {
@@ -114,7 +116,7 @@ module.exports = {
 		// 	showMessage(m, s);
 		// },
 		copy:  (w, t) => {
-			let c = t.parent().attr("data-" + (w=="var" ? "token" : w));
+			let c = t.parentNode.getAttribute("data-" + (w=="var" ? "token" : w));
 			c = w == "var" ? `var(${c})` : c;
 
 			if (navigator.clipboard) {
@@ -137,9 +139,93 @@ module.exports = {
 			})
 		}
 	},
-	init: (callback) => {
+	init: (args = {}) => {
+		const url = getURLVars();
 
+		if (url.p !== undefined) {
+			document.querySelectorAll("main article:not([data-path^='" + url.p + "'])").forEach((a) => {
+				a.remove();
+			});
 
-		callback();
+			if (url.p == -1) {
+				document.querySelector("title").innerHTML = `${url.p.toContent().toTitleCase()} | ${$("title").attr("data-site")}`;
+			} else {
+				document.querySelector("title").innerHTML = `${url.p.substring(url.p.lastIndexOf("/")+1).toContent().toTitleCase()} | ${$("title").attr("data-site")}`
+			}
+			document.querySelector("nav ul li a[href='./?p=" + (url.p.indexOf("/") == -1 ? url.p : url.p.substring(0, url.p.indexOf("/")) ) + "']").parentNode.classList.add("active");
+		} else {
+			document.querySelector("nav ul li a[href='./']").parentNode.classList.add("active");
+		}
+
+		document.querySelectorAll("article").forEach((a) => {
+			if ( a.getAttribute("data-template") != "none" ) {
+				let path = "patterns/" + a.getAttribute("data-path") + (a.getAttribute("data-core") == "true" ? "-core" : "") + "/index.html";
+				const ASYNC = true;
+				let ajx = new XMLHttpRequest();
+				ajx.onreadystatechange = () => {
+					if (ajx.readyState == 4) {
+					
+						switch (ajx.status) {
+							case 200: 
+								a.innerHTML = a.innerHTML + ajx.responseText;
+								
+								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.innerHTML = c.innerHTML.replace(/</g, "&lt;");
+									c.classList.add("line-numbers");
+									c.classList.add("copy-to-clipboard-button");
+			// add oneclickselect
+								})
+								if (typeof args.success == "function") args.success(a);
+
+								Prism.highlightAll();
+
+								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") });
+						}
+					}
+				};
+				ajx.open("GET", path, ASYNC);
+				ajx.send();
+			}
+		})
 	}
 };

src/js/scaffolding.js

@@ -1,3 +1,4 @@
+// core and prism
 import * as core from './_core.js';
 import * as Prism from "../../node_modules/prismjs/prism";
 import '../../node_modules/prismjs/components/prism-json';
@@ -6,20 +7,31 @@ import '../../node_modules/prismjs/components/prism-sass';
 import "../../node_modules/prismjs/plugins/toolbar/prism-toolbar";
 import "../../node_modules/prismjs/plugins/line-numbers/prism-line-numbers";
 
-import * as colours from "./_color-samples.js";
+// import pattern stuff.
-
 import * as swtch from "../pg/patterns/components/switch-core/_switch.js";
 import * as stickynote from "../pg/patterns/components/sticky-note-core/_sticky-note.js";
 import * as tabs from "../pg/patterns/layouts/tabs-core/_tabs.js";
 
-const initComponents = (jQuery) => {
+// init core
-	swtch.init();
+core.init({
-	tabs.init();
+	success: (a) => { 
-	stickynote.init();
+		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>`;
+	}
+});
 
 
 
+
+
+
+// handler for the deprecated switch
+
+/*
 // selectable content
 jQuery.fn.OneClickSelect = function () {
 	return jQuery(this).on('click', function () {
@@ -38,116 +50,32 @@ jQuery.fn.OneClickSelect = function () {
 		}
 	});
 };
-
+*/
-
 
 jQuery(document).ready(function($){
-	
-	if (core.url.p != undefined) {
-		console.log("category:", core.url.p)
-		$("main article:not([data-path^='" + core.url.p + "'])").remove();
-
-		if (core.url.p == -1) {
-			$("title").html(`${core.url.p.toContent().toTitleCase()} | ${$("title").attr("data-site")}`);
-		} else {
-			$("title").html(`${core.url.p.substring(core.url.p.lastIndexOf("/")+1).toContent().toTitleCase()} | ${$("title").attr("data-site")}`);
-		}
-		
-		console.log("get the 'directory'", (core.url.p.indexOf("/") == -1 ? core.url.p : core.url.p.substring(0, core.url.p.indexOf("/")) ));
-		$(".main-nav nav ul li a[href='./?p=" + (core.url.p.indexOf("/") == -1 ? core.url.p : core.url.p.substring(0, core.url.p.indexOf("/")) ) + "']").parent().addClass("active");
-	} else {
-		$("header").addClass("show-feature");
-		$(".main-nav nav ul li a[href='./']").parent().addClass("active");
-	}
-
-	// window.onresize = () => {
-	// 	console.log("resize called")
-	// 	initComponents($);
-	// }
-
-	let articles = $("article").length;
-	$("article").each(function(k,v){
-		if ($(this).attr("data-template") != "none") {
-			let path = "patterns/" + $(this).attr("data-path") + ($(this).attr("data-core") == "true" ? "-core" : "") + "/index.html";
-			console.log(path)
-			$( "#" + $(this).attr("id") ).load(path, "", function(response, status, xhr){
-				if ( status == "error" ) {
-					$( "#" + $(this).attr("id") ).html(`<div class='notification-box error'><p>This pattern appears to be missing.<br><small>(${path} returned http status 404)</small></p></div>`);
-				}
-				articles--;
-				if (articles == 0) {
-					$("article").each(function(){
-						try {
-							$(this).prepend(`<h1 class="status-${$(this).attr("data-status")}"><span>${($(this).attr("data-display-text") != undefined ? $(this).attr("data-display-text") : $(this).attr("data-pattern").toContent().toSentenceCase())}<div role="tooltip" inert tip-position="right">${$(this).attr("data-status").toContent().toSentenceCase()}</div></span></h1>`);
-						} catch (e) {
-							console.log("Problem creating heading", $(this).attr("data-pattern"));
-							$(this).prepend(`<div class='notification-box warning'><h1>Problem creating heading</h1><p>The content we found for this header was: ${$(this).attr("data-pattern")}. Check that the data-pattern attribute on the article is set properly. Also check that there is no article tag inside the article.</p></div>`);
-						}
-						switch ($(this).attr("data-template")) {
-							case "pug": 
-								$(this).find("pre").each(function(){
-									$(this).wrapInner("<code class='" + $(this).parent().attr("class") +  "'></code>");
-								})
-							break;
-							case "md": 
-								$(this).find("code").addClass("language-html");
-							break;
-						}
-					})
-
-					// things we do on every template after it has been customised. 
-					$("code").each(function(){
-						$(this).html($(this).html().replace(/</g, "&lt;"));
-					}).addClass("line-numbers").addClass('copy-to-clipboard-button').OneClickSelect();
-					initComponents($);
-					Prism.highlightAll();
-
-					core.colour.positionTooltip();
-					$( window ).on("resize", function(){core.colour.positionTooltip()});
-					$("name > span, color-pill > span").on("click", function(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";
-						}
-						core.colour.copy(w, $(this));
-					});
-				}
-			})
-		} else {
-			articles--;
-		}
-	});
-
 	// show deprecated switch
-	initComponents($);
 	function flipDeprecated() {
 		setTimeout(function(){
 			if ($("#deprecated").attr("aria-checked") == "false") {
 				$(".status-deprecated").closest("article").addClass("status-deprecated");
-				core.cookie.set("hide-deprecated", false, 30, "/");
+				core.cookie.set("show-deprecated", false, 30, "/");
 			} else {
 				$("article.status-deprecated").removeClass("status-deprecated");
-				core.cookie.set("hide-deprecated", true, 30, "/");
+				core.cookie.set("show-deprecated", true, 30, "/");
 			}
 		}, 50);
 	}
 
 	$("#deprecated").on("click", flipDeprecated).on("keypress", flipDeprecated);
 	setTimeout( function() {
-		if (core.cookie.get("hide-deprecated") == "true") {
+		if (core.cookie.get("show-deprecated") == "true") {
 			$("#deprecated").attr("aria-checked", "true");
 			flipDeprecated();
 		}
 	}, 200);
-	console.log("hide deprecated", { "type": (typeof core.cookie.get("hide-deprecated")), "value": core.cookie.get("hide-deprecated") });
+	console.log("hide deprecated", { "type": (typeof core.cookie.get("show-deprecated")), "value": core.cookie.get("show-deprecated") });
 	// /hide deprecated switch
 
-	// import("../pg/patterns/layouts/main-navigation/_main-navigation.js");
 })
+
+	// import("../pg/patterns/layouts/main-navigation/_main-navigation.js");

src/pg/patterns/components/sticky-note-core/_sticky-note.js

@@ -75,30 +75,6 @@ const css = (el, attr) => {
   	el.setAttribute("style",st.trim());
 }
 
-const setupStickies = () => {
-	let stickies = document.querySelectorAll("sticky-note");
-	stickies.forEach((s) => {
-		if (s.style.position !== "absolute") {
-			
-			let wrapper = document.createElement("sticky-note-wrapper");
-
-			s.parentNode.insertBefore(wrapper, s);
-    		wrapper.appendChild(s);
-
-			s.setAttribute("content", s.innerHTML.replace(/"/g, "\""));
-			s.innerHTML = `<div><svg width='0' height='0'><defs><clipPath id='stickyClip' clipPathUnits='objectBoundingBox'><path d='M 0 0 Q 0 0.69, 0.03 0.96 0.03 0.96, 1 0.96 Q 0.96 0.69, 0.96 0 0.96 0, 0 0' stroke-linejoin='round' stroke-linecap='square' /></clipPath></defs></svg></div><div><div>${s.innerHTML}</div></div>`;
-		}
-		calculateStickyPosition(s);
-		drag(s);
-		s.ondblclick = (e) => {
-			if (e.ctrlKey) {
-				calculateStickyPosition(s);
-			} else {
-				// add one click select
-			}
-		}
-	})
-}
 
 const calculateStickyPosition = (s) => {
 	let float = s.getAttribute("float");
@@ -119,18 +95,35 @@ const calculateStickyPosition = (s) => {
 	}
 }
 
-export function init(callback){
+export function init(p = document){
 	font.size = parseFloat(getComputedStyle(document.documentElement).fontSize.replace("px",""));
-	setupStickies(); 
+
-	
+	p.querySelectorAll("sticky-note").forEach((s) => {
-	let stickies = document.querySelectorAll("sticky-note");
+		if (s.querySelectorAll("svg").length == 0) {
-	stickies.forEach((s) => {
+			
-		
+			let wrapper = document.createElement("sticky-note-wrapper");
+
+			s.parentNode.insertBefore(wrapper, s);
+    		wrapper.appendChild(s);
+
+			s.setAttribute("content", s.innerHTML.replace(/"/g, "\""));
+			s.innerHTML = `<div><svg width='0' height='0'><defs><clipPath id='stickyClip' clipPathUnits='objectBoundingBox'><path d='M 0 0 Q 0 0.69, 0.03 0.96 0.03 0.96, 1 0.96 Q 0.96 0.69, 0.96 0 0.96 0, 0 0' stroke-linejoin='round' stroke-linecap='square' /></clipPath></defs></svg></div><div><div>${s.innerHTML}</div></div>`;
+		}
+		calculateStickyPosition(s);
+		drag(s);
+		s.ondblclick = (e) => {
+			if (e.ctrlKey) {
+				calculateStickyPosition(s);
+			} else {
+				// add one click select
+			}
+		}
 	})
 
+
 	window.onresize = () => {
 		font.size = parseFloat(getComputedStyle(document.documentElement).fontSize.replace("px",""));
-		let stickies = document.querySelectorAll("sticky-note");
+		let stickies = p.querySelectorAll("sticky-note");
 		stickies.forEach((s) => {
 			calculateStickyPosition(s);
 		});

src/pg/patterns/layouts/tabs-core/_tabs.js

@@ -1,14 +1,11 @@
-//-		DS2 core (c) 2024 Alexander McIlwraith 
+/*  DS2 core (c) 2024 Alexander McIlwraith 
-//-		Licensed under CC BY-SA 4.0 
+	import * as tabs from "../pg/patterns/layouts/tabs/_tabs.js";
+	tabs.init();
+ */
 
-//-		import * as tabs from "../pg/patterns/layouts/tabs/_tabs-core.js";
+export function init(p = document) { 
-//-		tabs.init();
+	p.querySelectorAll(".tab-group, tabset").forEach(tabGroup => {
 
-
-export function init() {
-	const tabGroups = document.querySelectorAll(".tab-group, tabset");
-
-	tabGroups.forEach(tabGroup => {
 		if (tabGroup.querySelector("[role=tablist]") === null) {
 			const tabgroup = tabGroup.getAttribute("id");
 			let tablist = "";