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

Update ajax to use intersection observer

Browse Source
This commit is contained in:
A McIlwraith 2024-07-14 21:52:51 -04:00
parent 2f4c21397b
commit 1c0186d4fe
1 changed files with 84 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -185,88 +185,102 @@ module.exports = {
document.querySelectorAll("article").forEach((a) => { document.querySelectorAll("article").forEach((a) => {
if ( a.getAttribute("data-template") != "none" ) { if ( a.getAttribute("data-template") != "none" ) {
let path = a.getAttribute("data-path");
path = "patterns/" + const observer = new IntersectionObserver((articles, { threshold: 0, rootMargin: 50vh}) => {
(a.getAttribute("data-core") == "true" ? articles.forEach(article => {
"core/" + path.substring(path.lastIndexOf("/") + 1) : let a = article.target;
a.getAttribute("data-path"))
+ "/index.html"; if (article.isIntersecting) {
const ASYNC = true;
let ajx = new XMLHttpRequest(); let path = a.getAttribute("data-path");
ajx.onreadystatechange = () => { path = "patterns/" +
if (ajx.readyState == 4) { (a.getAttribute("data-core") == "true" ?
"core/" + path.substring(path.lastIndexOf("/") + 1) :
switch (ajx.status) { a.getAttribute("data-path"))
case 200: + "/index.html";
a.innerHTML = a.innerHTML + ajx.responseText; const ASYNC = true;
let ajx = new XMLHttpRequest();
ajx.onreadystatechange = () => {
if (ajx.readyState == 4) {
switch (a.getAttribute("data-template")) { switch (ajx.status) {
case "pug": case 200:
a.querySelectorAll("pre").forEach((aa) => { a.innerHTML = a.innerHTML + ajx.responseText;
aa.innerHTML = `<code class="${aa.getAttribute("class")}">${aa.innerHTML}</code>`;
}) switch (a.getAttribute("data-template")) {
break; case "pug":
case "md": a.querySelectorAll("pre").forEach((aa) => {
a.querySelectorAll("code").forEach((aa) => { aa.innerHTML = `<code class="${aa.getAttribute("class")}">${aa.innerHTML}</code>`;
aa.classList.add("language-html"); })
}) break;
break; case "md":
} a.querySelectorAll("code").forEach((aa) => {
aa.classList.add("language-html");
})
break;
}
a.querySelectorAll("code").forEach((c)=> { a.querySelectorAll("code").forEach((c)=> {
c.classList.add("line-numbers"); c.classList.add("line-numbers");
c.innerHTML = c.innerHTML.replace(/</g, "&lt;"); c.innerHTML = c.innerHTML.replace(/</g, "&lt;");
c.classList.add("copy-to-clipboard-button"); c.classList.add("copy-to-clipboard-button");
}) })
if (typeof args.success == "function") args.success(a); if (typeof args.success == "function") args.success(a);
Prism.highlightAll(); Prism.highlightAll();
a.querySelectorAll("code").forEach((c)=> { a.querySelectorAll("code").forEach((c)=> {
c.onclick = (e) => { c.onclick = (e) => {
oneClickSelect(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();
} }
}) })