93 lines
3.2 KiB
TypeScript
93 lines
3.2 KiB
TypeScript
// * Video frames.
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const videoFrameList = document.querySelectorAll(
|
|
".video-frame"
|
|
) as NodeListOf<HTMLLinkElement>;
|
|
for (const videoLink of videoFrameList) {
|
|
if (!videoLink.dataset.type) {
|
|
throw new Error("Missing dataset type");
|
|
}
|
|
if (!videoLink.dataset.frame) {
|
|
throw new Error("Missing dataset frame");
|
|
}
|
|
// @ts-ignore
|
|
window.__CN_VIDEO = window.__CN_VIDEO ?? {};
|
|
|
|
const newIframe = document.createElement("iframe");
|
|
newIframe.frameBorder = "0";
|
|
newIframe.allow = "fullscreen";
|
|
newIframe.width = "1920px";
|
|
newIframe.height = "1080px";
|
|
newIframe.setAttribute("allowfullscreen", "allowfullscreen");
|
|
|
|
// @ts-ignore
|
|
const instance = new FsLightbox();
|
|
instance.props.sources = [newIframe];
|
|
|
|
setTimeout(() => {
|
|
videoLink.addEventListener("click", (e) => {
|
|
e.preventDefault();
|
|
|
|
// * This comes fslightbox lib
|
|
// @ts-ignore
|
|
instance.open();
|
|
setTimeout(function () {
|
|
// @ts-ignore
|
|
newIframe.src = window.__CN_VIDEO[videoLink.dataset.type]
|
|
? String(videoLink.href)
|
|
: String(videoLink.dataset.frame);
|
|
}, 50);
|
|
return false;
|
|
});
|
|
}, 300);
|
|
}
|
|
|
|
const scrollTop = (target: string, offset: number = 0) => {
|
|
const targetElement = document.getElementById(target);
|
|
if (!targetElement) throw new Error(`scrollTop requires ${target} to exist`);
|
|
const top = targetElement.getBoundingClientRect().top,
|
|
t = window.scrollY + top - offset;
|
|
scrollTo({
|
|
top: t,
|
|
behavior: "smooth"
|
|
});
|
|
};
|
|
|
|
const pageUp = document.getElementById("page-up");
|
|
if (pageUp) {
|
|
pageUp.addEventListener("click", () => scrollTop("content-container", 250)),
|
|
document.addEventListener("scroll", () => {
|
|
if (window.scrollY > 250) {
|
|
pageUp.classList.add("show");
|
|
return;
|
|
}
|
|
pageUp.classList.remove("show");
|
|
});
|
|
}
|
|
});
|
|
|
|
// * Input Validation.
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
document.querySelectorAll("input.is-invalid").forEach((input) => {
|
|
let timer: NodeJS.Timeout|null = null;
|
|
input.addEventListener("change", () => {
|
|
const parent = input.parentElement;
|
|
input.classList.remove("is-invalid");
|
|
if (parent && parent.classList.contains("is-invalid")) {
|
|
parent.classList.remove("is-invalid");
|
|
}
|
|
});
|
|
input.addEventListener("input", () => {
|
|
if (timer) {
|
|
clearTimeout(timer);
|
|
}
|
|
timer = setTimeout(() => {
|
|
const parent = input.parentElement;
|
|
input.classList.remove("is-invalid");
|
|
if (parent && parent.classList.contains("is-invalid")) {
|
|
parent.classList.remove("is-invalid");
|
|
}
|
|
}, 250);
|
|
});
|
|
});
|
|
});
|