68 lines
2 KiB
TypeScript
68 lines
2 KiB
TypeScript
declare global {
|
|
interface Window {
|
|
Splide: any;
|
|
Alpine: any;
|
|
}
|
|
}
|
|
|
|
import Splide from "@splidejs/splide";
|
|
window.Splide = Splide;
|
|
|
|
import Alpine from "alpinejs";
|
|
window.Alpine = Alpine;
|
|
Alpine.start();
|
|
|
|
window.addEventListener("scroll", () => {
|
|
const html = document.documentElement;
|
|
const scroll = html.scrollTop;
|
|
if (scroll > 100) {
|
|
document.querySelector("header")?.classList.add("small");
|
|
} else {
|
|
document.querySelector("header")?.classList.remove("small");
|
|
}
|
|
});
|
|
|
|
// * 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);
|
|
}
|
|
});
|