From 1c0186d4fee1d5be9f5a1740a280741483be383f Mon Sep 17 00:00:00 2001
From: A McIlwraith <am@noreply.localhost>
Date: Sun, 14 Jul 2024 21:52:51 -0400
Subject: [PATCH] Update ajax to use intersection observer

---
 src/js/core/_core.js | 154 +++++++++++++++++++++++--------------------
 1 file changed, 84 insertions(+), 70 deletions(-)

diff --git a/src/js/core/_core.js b/src/js/core/_core.js
index f605a91..769db82 100644
--- a/src/js/core/_core.js
+++ b/src/js/core/_core.js
@@ -185,88 +185,102 @@ module.exports = {
 
 		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) {
-					
-						switch (ajx.status) {
-							case 200: 
-								a.innerHTML = a.innerHTML + ajx.responseText;
+
+				const observer = new IntersectionObserver((articles, { threshold: 0, rootMargin: 50vh}) => {
+					articles.forEach(article => {
+						let a = article.target;
+
+						if (article.isIntersecting) {
+
+							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) {
 								
-								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;
-								}
+									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.classList.add("line-numbers");
-									c.innerHTML = c.innerHTML.replace(/</g, "&lt;");
-									c.classList.add("copy-to-clipboard-button");
-								})
-								if (typeof args.success == "function") args.success(a);
+											a.querySelectorAll("code").forEach((c)=> {
+												c.classList.add("line-numbers");
+												c.innerHTML = c.innerHTML.replace(/</g, "&lt;");
+												c.classList.add("copy-to-clipboard-button");
+											})
+											if (typeof args.success == "function") args.success(a);
 
-								Prism.highlightAll();
+											Prism.highlightAll();
 
-								a.querySelectorAll("code").forEach((c)=> {
-									c.onclick = (e) => {
-										oneClickSelect(e);
+											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") });
 						}
+					})
+				})
 
-						if (typeof args.done == "function") args.done(a);
+				observer.observe(a);
 
-					}
-				};
-				ajx.open("GET", path, ASYNC);
-				ajx.send();
 			}
 		})