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) => {
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();
}
})