gamv/ds2-core
1
0
Fork 0
Code Issues 8 Releases 7 Activity

Fixes #2 for performances issues

Browse Source
This commit is contained in:
A McIlwraith 2024-07-23 18:08:37 -04:00
parent c94d5e565f
commit fd53ee174a
4 changed files with 32 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
public/assets/scaffolding-min.js vendored
View File

@ -195,8 +195,11 @@ module.exports = {
articles.forEach(article => { articles.forEach(article => {
let a = article.target; 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"); let path = a.getAttribute("data-path");
path = "patterns/" + path = "patterns/" +
(a.getAttribute("data-core") == "true" ? (a.getAttribute("data-core") == "true" ?
@ -207,12 +210,11 @@ module.exports = {
let ajx = new XMLHttpRequest(); let ajx = new XMLHttpRequest();
ajx.onreadystatechange = () => { ajx.onreadystatechange = () => {
if (ajx.readyState == 4) { if (ajx.readyState == 4) {
observer.unobserve(article.target); observer.unobserve(article.target);
switch (ajx.status) { switch (ajx.status) {
case 200: case 200:
a.innerHTML = a.innerHTML + ajx.responseText; a.innerHTML = a.innerHTML + ajx.responseText;
a.style.height = "auto"
switch (a.getAttribute("data-template")) { switch (a.getAttribute("data-template")) {
case "pug": case "pug":
a.querySelectorAll("pre").forEach((aa) => { a.querySelectorAll("pre").forEach((aa) => {
@ -266,7 +268,6 @@ module.exports = {
break; break;
case 404: case 404:
if (typeof args.notFound == "function") args.notFound(a, path); if (typeof args.notFound == "function") args.notFound(a, path);
break; break;
@ -274,6 +275,8 @@ module.exports = {
console.log("uncaught http error", { status: ajx.status, path: a.getAttribute("data-path") }); 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); 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); observer.observe(a);
} else {
a.style.height = "auto";
} }
}) })

22
public/index.html
View File

@ -44,47 +44,47 @@
</p> </p>
<main id="main"> <main id="main">
<h1>DS2 core</h1> <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 <h1 class="status-deprecated"><span>This pattern doesn't exist
<tool-tip role="tooltip" inert="inert" tip-position="right">Deprecated</tool-tip></span></h1> <tool-tip role="tooltip" inert="inert" tip-position="right">Deprecated</tool-tip></span></h1>
</article> </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 <h1 class="status-complete"><span>Colours
<tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1> <tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
</article> </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 <h1 class="status-complete"><span>Components
<tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1> <tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
</article> </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 <h1 class="status-complete"><span>Sticky note
<tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1> <tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
</article> </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 <h1 class="status-complete"><span>Switch
<tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1> <tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
</article> </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 <h1 class="status-complete"><span>Tooltip
<tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1> <tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
</article> </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 <h1 class="status-complete"><span>Layouts
<tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1> <tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
</article> </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 <h1 class="status-complete"><span>Header
<tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1> <tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
</article> </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 <h1 class="status-complete"><span>Breakpoints
<tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1> <tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
</article> </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 <h1 class="status-complete"><span>Tabs
<tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1> <tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
</article> </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 <h1 class="status-complete"><span>Status
<tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1> <tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
</article> </article>

15
src/js/core/_core.js
View File

@ -189,8 +189,11 @@ module.exports = {
articles.forEach(article => { articles.forEach(article => {
let a = article.target; 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"); let path = a.getAttribute("data-path");
path = "patterns/" + path = "patterns/" +
(a.getAttribute("data-core") == "true" ? (a.getAttribute("data-core") == "true" ?
@ -201,12 +204,11 @@ module.exports = {
let ajx = new XMLHttpRequest(); let ajx = new XMLHttpRequest();
ajx.onreadystatechange = () => { ajx.onreadystatechange = () => {
if (ajx.readyState == 4) { if (ajx.readyState == 4) {
observer.unobserve(article.target); observer.unobserve(article.target);
switch (ajx.status) { switch (ajx.status) {
case 200: case 200:
a.innerHTML = a.innerHTML + ajx.responseText; a.innerHTML = a.innerHTML + ajx.responseText;
a.style.height = "auto"
switch (a.getAttribute("data-template")) { switch (a.getAttribute("data-template")) {
case "pug": case "pug":
a.querySelectorAll("pre").forEach((aa) => { a.querySelectorAll("pre").forEach((aa) => {
@ -260,7 +262,6 @@ module.exports = {
break; break;
case 404: case 404:
if (typeof args.notFound == "function") args.notFound(a, path); if (typeof args.notFound == "function") args.notFound(a, path);
break; break;
@ -268,6 +269,8 @@ module.exports = {
console.log("uncaught http error", { status: ajx.status, path: a.getAttribute("data-path") }); 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); 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); observer.observe(a);
} else {
a.style.height = "auto";
} }
}) })

1
src/pg/core/_master-index.pug
View File

@ -36,6 +36,7 @@ mixin show-content(items, path)
data-template=(items.template == undefined ? "pug" : items.template) data-template=(items.template == undefined ? "pug" : items.template)
data-core= (items.core ? "true" : "false") data-core= (items.core ? "true" : "false")
data-path=path data-path=path
style="height: 100vh"
) )
h1(class="status-" + items.status ) h1(class="status-" + items.status )