From fd53ee174a788cf6d8770c748f9f16ec1c505504 Mon Sep 17 00:00:00 2001
From: "Alexander (M2)" <alexander@gamv.ca>
Date: Tue, 23 Jul 2024 18:08:37 -0400
Subject: [PATCH] Fixes #2 for performances issues

---
 public/assets/scaffolding-min.js | 15 ++++++++++-----
 public/index.html                | 22 +++++++++++-----------
 src/js/core/_core.js             | 15 ++++++++++-----
 src/pg/core/_master-index.pug    |  1 +
 4 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/public/assets/scaffolding-min.js b/public/assets/scaffolding-min.js
index ff9a61f..879cb7e 100644
--- a/public/assets/scaffolding-min.js
+++ b/public/assets/scaffolding-min.js
@@ -195,8 +195,11 @@ module.exports = {
 					articles.forEach(article => {
 						let a = article.target;
 
-						if (article.isIntersecting) {
+						// console.log("observing: ", { id: a.getAttribute("id"), intersecting: a.isIntersecting } )
+						// if (article.intersectionRatio > 0) {
+							// console.log("Is interesecting: ", { id: article.target.getAttribute("id"), intersecting: article.isIntersecting, ratio: article.intersectionRatio } )
 
+						if (article.isIntersecting == true) {
 							let path = a.getAttribute("data-path");
 							path = "patterns/" + 
 							 		(a.getAttribute("data-core") == "true" ? 
@@ -207,12 +210,11 @@ module.exports = {
 							let ajx = new XMLHttpRequest();
 							ajx.onreadystatechange = () => {
 								if (ajx.readyState == 4) {
-
 									observer.unobserve(article.target);								
 									switch (ajx.status) {
 										case 200: 
 											a.innerHTML = a.innerHTML + ajx.responseText;
-											
+											a.style.height = "auto"
 											switch (a.getAttribute("data-template")) {
 											 	case "pug": 
 											 		a.querySelectorAll("pre").forEach((aa) => {
@@ -266,7 +268,6 @@ module.exports = {
 										break;
 
 										case 404: 
-
 											if (typeof args.notFound == "function") args.notFound(a, path);
 										break;
 
@@ -274,6 +275,8 @@ module.exports = {
 											console.log("uncaught http error", { status: ajx.status, path: a.getAttribute("data-path") });
 									}
 
+									a.style.height = "auto";
+									
 									if (typeof args.done == "function") args.done(a);
 
 								}
@@ -283,10 +286,12 @@ module.exports = {
 
 						}
 					})
-				}, { threshold: 0, rootMargin: (document.body.clientHeight / 2) + "px" })
+				}, { threshold: 0, rootMargin: "100%" })
 
 				observer.observe(a);
 
+			} else {
+				a.style.height = "auto";
 			}
 		})
 
diff --git a/public/index.html b/public/index.html
index b196475..feec188 100644
--- a/public/index.html
+++ b/public/index.html
@@ -44,47 +44,47 @@
       </p>
       <main id="main">
         <h1>DS2 core</h1>
-        <article id="this-pattern-doesnt-exist" data-name="this pattern doesn't exist" data-status="deprecated" data-template="pug" data-core="false" data-path="this-pattern-doesnt-exist">
+        <article id="this-pattern-doesnt-exist" data-name="this pattern doesn't exist" data-status="deprecated" data-template="pug" data-core="false" data-path="this-pattern-doesnt-exist" style="height: 100vh">
           <h1 class="status-deprecated"><span>This pattern doesn't exist
               <tool-tip role="tooltip" inert="inert" tip-position="right">Deprecated</tool-tip></span></h1>
         </article>
-        <article id="colours" data-name="colours" data-status="complete" data-template="pug" data-core="true" data-path="colours">
+        <article id="colours" data-name="colours" data-status="complete" data-template="pug" data-core="true" data-path="colours" style="height: 100vh">
           <h1 class="status-complete"><span>Colours
               <tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
         </article>
-        <article id="components" data-name="components" data-status="complete" data-template="none" data-core="false" data-path="components">
+        <article id="components" data-name="components" data-status="complete" data-template="none" data-core="false" data-path="components" style="height: 100vh">
           <h1 class="status-complete"><span>Components
               <tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
         </article>
-        <article id="components-sticky-note" data-name="sticky-note" data-status="complete" data-template="pug" data-core="true" data-path="components/sticky-note">
+        <article id="components-sticky-note" data-name="sticky-note" data-status="complete" data-template="pug" data-core="true" data-path="components/sticky-note" style="height: 100vh">
           <h1 class="status-complete"><span>Sticky note
               <tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
         </article>
-        <article id="components-switch" data-name="switch" data-status="complete" data-template="pug" data-core="true" data-path="components/switch">
+        <article id="components-switch" data-name="switch" data-status="complete" data-template="pug" data-core="true" data-path="components/switch" style="height: 100vh">
           <h1 class="status-complete"><span>Switch
               <tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
         </article>
-        <article id="components-tooltip" data-name="tooltip" data-status="complete" data-template="pug" data-core="true" data-path="components/tooltip">
+        <article id="components-tooltip" data-name="tooltip" data-status="complete" data-template="pug" data-core="true" data-path="components/tooltip" style="height: 100vh">
           <h1 class="status-complete"><span>Tooltip
               <tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
         </article>
-        <article id="layouts" data-name="layouts" data-status="complete" data-template="none" data-core="true" data-path="layouts">
+        <article id="layouts" data-name="layouts" data-status="complete" data-template="none" data-core="true" data-path="layouts" style="height: 100vh">
           <h1 class="status-complete"><span>Layouts
               <tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
         </article>
-        <article id="layouts-header" data-name="header" data-status="complete" data-template="pug" data-core="true" data-path="layouts/header">
+        <article id="layouts-header" data-name="header" data-status="complete" data-template="pug" data-core="true" data-path="layouts/header" style="height: 100vh">
           <h1 class="status-complete"><span>Header
               <tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
         </article>
-        <article id="layouts-breakpoints" data-name="breakpoints" data-status="complete" data-template="pug" data-core="true" data-path="layouts/breakpoints">
+        <article id="layouts-breakpoints" data-name="breakpoints" data-status="complete" data-template="pug" data-core="true" data-path="layouts/breakpoints" style="height: 100vh">
           <h1 class="status-complete"><span>Breakpoints
               <tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
         </article>
-        <article id="layouts-tabs" data-name="tabs" data-status="complete" data-template="pug" data-core="true" data-path="layouts/tabs">
+        <article id="layouts-tabs" data-name="tabs" data-status="complete" data-template="pug" data-core="true" data-path="layouts/tabs" style="height: 100vh">
           <h1 class="status-complete"><span>Tabs
               <tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
         </article>
-        <article id="status" data-name="status" data-status="complete" data-template="pug" data-core="true" data-path="status">
+        <article id="status" data-name="status" data-status="complete" data-template="pug" data-core="true" data-path="status" style="height: 100vh">
           <h1 class="status-complete"><span>Status
               <tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
         </article>
diff --git a/src/js/core/_core.js b/src/js/core/_core.js
index 0b5c8e7..cae10b8 100644
--- a/src/js/core/_core.js
+++ b/src/js/core/_core.js
@@ -189,8 +189,11 @@ module.exports = {
 					articles.forEach(article => {
 						let a = article.target;
 
-						if (article.isIntersecting) {
+						// console.log("observing: ", { id: a.getAttribute("id"), intersecting: a.isIntersecting } )
+						// if (article.intersectionRatio > 0) {
+							// console.log("Is interesecting: ", { id: article.target.getAttribute("id"), intersecting: article.isIntersecting, ratio: article.intersectionRatio } )
 
+						if (article.isIntersecting == true) {
 							let path = a.getAttribute("data-path");
 							path = "patterns/" + 
 							 		(a.getAttribute("data-core") == "true" ? 
@@ -201,12 +204,11 @@ module.exports = {
 							let ajx = new XMLHttpRequest();
 							ajx.onreadystatechange = () => {
 								if (ajx.readyState == 4) {
-
 									observer.unobserve(article.target);								
 									switch (ajx.status) {
 										case 200: 
 											a.innerHTML = a.innerHTML + ajx.responseText;
-											
+											a.style.height = "auto"
 											switch (a.getAttribute("data-template")) {
 											 	case "pug": 
 											 		a.querySelectorAll("pre").forEach((aa) => {
@@ -260,7 +262,6 @@ module.exports = {
 										break;
 
 										case 404: 
-
 											if (typeof args.notFound == "function") args.notFound(a, path);
 										break;
 
@@ -268,6 +269,8 @@ module.exports = {
 											console.log("uncaught http error", { status: ajx.status, path: a.getAttribute("data-path") });
 									}
 
+									a.style.height = "auto";
+									
 									if (typeof args.done == "function") args.done(a);
 
 								}
@@ -277,10 +280,12 @@ module.exports = {
 
 						}
 					})
-				}, { threshold: 0, rootMargin: (document.body.clientHeight / 2) + "px" })
+				}, { threshold: 0, rootMargin: "100%" })
 
 				observer.observe(a);
 
+			} else {
+				a.style.height = "auto";
 			}
 		})
 
diff --git a/src/pg/core/_master-index.pug b/src/pg/core/_master-index.pug
index a092f79..95646c5 100644
--- a/src/pg/core/_master-index.pug
+++ b/src/pg/core/_master-index.pug
@@ -36,6 +36,7 @@ mixin show-content(items, path)
 		data-template=(items.template == undefined ? "pug" : items.template) 
 		data-core= (items.core ? "true" : "false")
 		data-path=path
+		style="height: 100vh"
 		)
 
 		h1(class="status-" + items.status )