Update div.tab-group to use tabset

Fixes #2 for performances issues
Fixes #5 Update sort
2024-07-23 20:50:36 -04:00 · 2024-07-23 18:08:37 -04:00 · 2024-07-22 18:39:14 -04:00 · 2024-07-22 18:24:29 -04:00 · 2024-07-22 12:01:15 -04:00 · 2024-07-22 12:00:26 -04:00
9 changed files with 52 additions and 40 deletions
--- 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";
 			}
 		})

--- 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>
--- a/public/patterns/core/tabs/index.html
+++ b/public/patterns/core/tabs/index.html
@@ -19,13 +19,13 @@
    <p>The tab module can be initialised by importing a file with the javascript module using import * as tabs from "../pg/patterns/layouts/tabs/_tabs.js"; contains a modularized version of the jQuery code, so that it can be called on demand. It is what is used in the design system so that the JavaScript can be called at run time (after loading content).</p>
    <tabset id="tabs">
      <pre class="language-html" tab="html">
-        <div class="tab-group" id="uniqueID">
-          <div data-tab="[tab title]"></div>
-          <div data-tab="[tab title]"></div>
-        </div></pre>
-      <pre class="language-pug" tab="pug">div#uniqueID.tab-group
-	div(data-tab="[tab title]")
-	div(data-tab="[tab title]")
+        <tabset id="uniqueID">
+          <div tab="[tab title]"></div>
+          <div tab="[tab title]"></div>
+        </tabset></pre>
+      <pre class="language-pug" tab="pug">tabset#uniqueID
+	div(tab="[tab title]")
+	div(tab="[tab title]")
 		</pre>
      <pre class="language-css" tab="css">tabset, .tab-group {
 	margin: 2rem 0 1rem 0;
--- 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";
 			}
 		})

--- 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 )
--- a/src/pg/patterns/core/breakpoints/_breakpoints.scss
+++ b/src/pg/patterns/core/breakpoints/_breakpoints.scss
@@ -1,7 +1,8 @@
 //-		DS2 core (c) 2024 Alexander McIlwraith 
 //-		Licensed under CC BY-SA 4.0 

-$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px ) !default;
+// default breakpoints match bootstrap 5 breakpoints.
+$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px ) !default;

@mixin breakpoint-debug {
 	body::before, body::after {
--- a/src/pg/patterns/core/status/index.pug
+++ b/src/pg/patterns/core/status/index.pug
@@ -6,23 +6,23 @@ block content
 	- 
 	- let list = []
 	- for(let i = 0; i < content.length; i++) {
-	-	list.push({ "name": content[i].name, "path": content[i].name, "status": content[i].status, "display": content[i].display } )
+	-	list.push({ "name": content[i].name, "path": content[i].name, "status": content[i].status, "display": (content[i].hasOwnProperty("display") && content[i].display != "" ? content[i].display : content[i].name.toSentenceCase().toContent())  } )
 	-	if (content[i].files != undefined) {
 	-		for (let ii = 0; ii < content[i].files.length; ii++) {
-	-			list.push({ "name": content[i].files[ii].name, "path": content[i].name +"."+ content[i].files[ii].name, "status": content[i].files[ii].status } )
+	-			list.push({ "name": content[i].files[ii].name, "path": content[i].name +"."+ content[i].files[ii].name, "status": content[i].files[ii].status, "display": (content[i].files[ii].hasOwnProperty("display") && content[i].files[ii].display != "" ? content[i].files[ii].display : content[i].files[ii].name.toSentenceCase().toContent()) } )
 	-			if (content[i].files[ii].files != undefined) {
 	-				for (let iii = 0; iii < content[i].files[ii].files.length; iii++) {
-	-					list.push({ "name": content[i].files[ii].files[iii].name, "path": content[i].name +"."+ content[i].files[ii].name + "." + content[i].files[ii].files[iii].name, "status": content[i].files[ii].files[iii].status } )
+	-					list.push({ "name": content[i].files[ii].files[iii].name, "path": content[i].name +"."+ content[i].files[ii].name + "." + content[i].files[ii].files[iii].name, "status": content[i].files[ii].files[iii].status, "display": (content[i].files[ii].files[iii].hasOwnProperty("display") && content[i].files[ii].files[iii].display != "" ? content[i].files[ii].files[iii].display : content[i].files[ii].files[iii].name.toSentenceCase().toContent()) } )
 	-				}
 	-			}
 	-		}
 	- 	}
 	- }
 	- list.sort((a, b) => {
-	-	if (a.name < b.name) {
+	-	if (a.display < b.display) {
 	-		return -1;
 	-	}
-	-	if (a.name > b.name) {
+	-	if (a.display > b.display) {
 	-		return 1;
 	-	}
 	-	return 0;
--- a/src/pg/patterns/core/tabs/_tabs.pp
+++ b/src/pg/patterns/core/tabs/_tabs.pp
@@ -1,4 +1,4 @@
-div#uniqueID.tab-group
-	div(data-tab="[tab title]")
-	div(data-tab="[tab title]")
+tabset#uniqueID
+	div(tab="[tab title]")
+	div(tab="[tab title]")
 		
--- a/src/pg/patterns/core/tabs/_tabs.pug
+++ b/src/pg/patterns/core/tabs/_tabs.pug
@@ -1,4 +1,4 @@
-div#uniqueID.tab-group
-	div(data-tab="[tab title]")
-	div(data-tab="[tab title]")
+tabset#uniqueID
+	div(tab="[tab title]")
+	div(tab="[tab title]")
Author	SHA1	Message	Date
Alexander (M2)	0b82aa4be6	Update div.tab-group to use tabset	2024-07-23 20:50:36 -04:00
Alexander (M2)	fd53ee174a	Fixes #2 for performances issues	2024-07-23 18:08:37 -04:00
A McIlwraith	c94d5e565f	Fixes #5 Update sort	2024-07-22 18:39:14 -04:00
A McIlwraith	552a204edd	Fixes #5 Update to include display text in status an alpha reports	2024-07-22 18:24:29 -04:00
A McIlwraith	e7d4e2ab48	Added bootstrap comment	2024-07-22 12:01:15 -04:00
A McIlwraith	fa165d530f	Added XXL breakpoint to match bootstrap v5.0	2024-07-22 12:00:26 -04:00