import confetti from "https://cdn.skypack.dev/canvas-confetti";
confetti();
// this bit is for the scrolling logo:
// The debounce function receives our function as a parameter
const debounce = (fn) => {
// This holds the requestAnimationFrame reference, so we can cancel it if we wish
let frame;
// The debounce function returns a new function that can receive a variable number of arguments
return (...params) => {
// If the frame variable has been defined, clear it now, and queue for next frame
if (frame) {
cancelAnimationFrame(frame);
}
// Queue our function call for the next frame
frame = requestAnimationFrame(() => {
// Call our function and pass any params we received
fn(...params);
});
};
};
// Reads out the scroll position and stores it in the data attribute
// so we can use it in our stylesheets
const storeScroll = () => {
document.documentElement.dataset.scroll = window.scrollY;
};
// Listen for new scroll events, here we debounce our `storeScroll` function
document.addEventListener("scroll", debounce(storeScroll), { passive: true });
// Update scroll position for first time
storeScroll();
// Functionality for making scrolling rows draggable:
// const ele = document.getElementById('container');
let dragRows = document.querySelectorAll(".first-row-inner");
// console.log(dragRows);
dragRows.scrollTop = 100;
dragRows.scrollLeft = 150;
dragRows.forEach((element) => {
const ele = element;
ele.style.cursor = "grab";
let pos = { top: 0, left: 0, x: 0, y: 0 };
const mouseDownHandler = function (e) {
ele.style.cursor = "grabbing";
ele.style.userSelect = "none";
pos = {
left: ele.scrollLeft,
top: ele.scrollTop,
// Get the current mouse position
x: e.clientX,
y: e.clientY
};
document.addEventListener("mousemove", mouseMoveHandler);
document.addEventListener("mouseup", mouseUpHandler);
};
const mouseMoveHandler = function (e) {
// How far the mouse has been moved
const dx = e.clientX - pos.x;
const dy = e.clientY - pos.y;
// Scroll the element
ele.scrollTop = pos.top - dy;
ele.scrollLeft = pos.left - dx;
};
const mouseUpHandler = function () {
ele.style.cursor = "grab";
ele.style.removeProperty("user-select");
document.removeEventListener("mousemove", mouseMoveHandler);
document.removeEventListener("mouseup", mouseUpHandler);
};
// Attach the handler
ele.addEventListener("mousedown", mouseDownHandler);
});
// slide paddle functionality:
// this is for calculating how much to move the paddles by:
function getWidth() {
return Math.max(
document.body.scrollWidth,
document.documentElement.scrollWidth,
document.body.offsetWidth,
document.documentElement.offsetWidth,
document.documentElement.clientWidth
);
}
let theItemWidth = document.querySelectorAll(".item")[0].offsetWidth;
theItemWidth = Math.floor(getWidth() / theItemWidth) * (theItemWidth + 4);
// This is the bit that actually moves the slides along:
let nextPaddle = document.querySelectorAll(".next-paddle");
nextPaddle.forEach((element) => {
let theParent = element.parentElement;
let theParentMaxWidth = theParent.scrollWidth - theParent.clientWidth;
element.addEventListener(
"click",
function () {
theParent.scrollBy({
left: theItemWidth,
behavior: "smooth"
});
setTimeout(function () {
if (theParent.scrollLeft === theParentMaxWidth) {
element.style.opacity = "0";
element.style.pointerEvents = "none";
} else {
element.style.opacity = "1";
element.style.pointerEvents = "all";
}
if (theParent.scrollLeft != 0) {
element.parentNode.querySelector(".previous-paddle").style.opacity =
"1";
element.parentNode.querySelector(
".previous-paddle"
).style.pointerEvents = "all";
} else {
element.parentNode.querySelector(".previous-paddle").style.opacity =
"0";
element.parentNode.querySelector(
".previous-paddle"
).style.pointerEvents = "none";
}
}, 500);
},
false
);
});
let previousPaddle = document.querySelectorAll(".previous-paddle");
previousPaddle.forEach((element) => {
let theParent = element.parentElement;
let theParentMaxWidth = theParent.scrollWidth - theParent.clientWidth;
element.addEventListener(
"click",
function () {
theParent.scrollBy({
left: -theItemWidth,
behavior: "smooth"
});
setTimeout(function () {
if (theParent.scrollLeft === 0) {
element.style.opacity = "0";
element.style.pointerEvents = "none";
} else {
element.style.opacity = "1";
element.style.pointerEvents = "all";
}
if (theParent.scrollLeft != theParentMaxWidth) {
element.parentNode.querySelector(".next-paddle").style.opacity = "1";
element.parentNode.querySelector(".next-paddle").style.pointerEvents =
"all";
} else {
element.parentNode.querySelector(".next-paddle").style.opacity = "0";
element.parentNode.querySelector(".next-paddle").style.pointerEvents =
"none";
}
}, 500);
},
false
);
});
// lightbox functionality:
let lightBoxLink = document.querySelectorAll(".item");
let lightBoxContainer = document.getElementById("lightbox-container");
let lightBoxId = 1;
// console.log(lightBoxContainer);
// hero lightbox:
let hero = document.querySelector(".hero");
let heroInfoButton = document.querySelector(".hero-info");
let heroLightbox = document.querySelector(".hero-lightbox");
let heroLightboxInner = document.querySelector(".hero-lightbox-inner");
let heroLightboxExit = document.querySelector(".heroLightboxExit");
heroInfoButton.addEventListener("click", function () {
heroLightbox.classList.add("opacity-100", "pointer-events-auto");
heroLightboxInner.classList.add(
"opacity-100",
"popupMotion",
"pointer-events-auto"
);
});
function heroLightboxCloser() {
heroLightbox.classList.remove("opacity-100", "pointer-events-auto");
heroLightboxInner.classList.remove(
"opacity-100",
"popupMotion",
"pointer-events-auto"
);
}
heroLightboxExit.addEventListener("click", function () {
heroLightboxCloser();
});
heroLightbox.addEventListener("click", function () {
heroLightboxCloser();
});
heroLightboxInner.addEventListener("click", (e) => e.stopPropagation());
// normal lightboxes
lightBoxLink.forEach((element) => {
lightBoxId++;
element.id = "item" + lightBoxId;
const innerLightBoxId = lightBoxId;
element.addEventListener("click", function () {
let lightBoxHtml = document.createElement("div");
lightBoxHtml.classList.add("lightbox-outer");
lightBoxHtml.id = "lightBoxId" + innerLightBoxId;
lightBoxHtml.classList.add(
"fixed",
"top-0",
"bottom-0",
"left-0",
"right-0",
"overflow-y-auto",
"bg-gray-600",
"bg-opacity-75",
"z-50",
"pointer-events-none",
"transition-opacity",
"opacity-0"
);
// lightBoxHtml.appendChild(document.createTextNode(lightBoxId));
let lightBoxInner = document.createElement("div");
lightBoxInner.classList.add(
"lightbox-inner",
"rounded",
//"overflow-hidden",
"flex",
"flex-col",
"max-w-screen-sm",
"bg-gray-500",
"items-center",
"static",
"opacity-0",
"pointer-events-none",
"rounded",
"static",
"my-20",
"mx-auto",
// 'inline-block',
"transform",
"scale-100",
"z-50",
"transition-all"
);
let exitButton = document.createElement("i");
exitButton.classList.add(
"lightboxExit",
"fas",
"fa-times-circle",
"absolute",
"-top-5",
"-right-5",
"text-3xl",
"cursor-pointer",
"hover:text-gray-200"
);
lightBoxInner.appendChild(exitButton);
let lightBoxImageUrl = element.querySelector(".item_image").style
.backgroundImage;
// console.log(lightBoxImageUrl);
let lightBoxImage = document.createElement("div");
lightBoxImage.classList.add(
"lightbox-image",
"w-full",
"bg-cover",
"bg-no-repeat",
"bg-center",
"rounded-t"
);
lightBoxImage.style.backgroundImage = lightBoxImageUrl;
lightBoxImage.style.paddingTop = "56%";
let lightBoxText = element.querySelector(".item_content_text").innerText;
let lightBoxTextContain = document.createElement("p");
lightBoxTextContain.innerText = lightBoxText.repeat(2);
lightBoxTextContain.classList.add("w-full", "p-5");
let lightBoxAdd = document.createElement("div");
lightBoxAdd.classList.add(
"bg-white",
"text-black",
"hover:bg-opacity-75",
"px-4",
"py-2",
"rounded",
"text-xl",
"cursor-pointer",
// "w-min",
"flex",
"flex-row-reverse",
"items-center",
"mb-3"
);
let addIcon = document.createElement("i");
addIcon.classList.add("fa", "fa-plus", "mr-3");
// console.log(addIcon);
lightBoxAdd.innerText = "Add to list";
lightBoxAdd.appendChild(addIcon);
lightBoxInner.appendChild(lightBoxImage);
lightBoxInner.appendChild(lightBoxTextContain);
lightBoxInner.appendChild(lightBoxAdd);
lightBoxHtml.appendChild(lightBoxInner);
lightBoxContainer.appendChild(lightBoxHtml);
setTimeout(function () {
lightBoxHtml.classList.add("opacity-100", "pointer-events-auto");
}, 200);
setTimeout(function () {
lightBoxInner.classList.add(
"opacity-100",
"popupMotion",
"pointer-events-auto"
);
}, 300);
function lightboxCloser() {
lightBoxHtml.classList.remove("opacity-100", "pointer-events-auto");
lightBoxInner.classList.remove(
"opacity-100",
"popupMotion",
"pointer-events-auto"
);
// this clears the container at the end of the function:
setTimeout(function () {
lightBoxHtml.remove();
}, 300);
}
exitButton.addEventListener("click", function () {
lightboxCloser();
});
lightBoxHtml.addEventListener("click", function () {
lightboxCloser();
});
lightBoxInner.addEventListener("click", (e) => e.stopPropagation());
});
});
let vimeoVideo = document.getElementById("vimeo");
// if (vimeoVideo) {
// vimeoVideo.addEventListener("load", () => {
// console.log("video not yet loaded");
// vimeoVideo.style.visibility = "visible";
// vimeoVideo.style.opacity = "1";
// console.log("video fully loaded");
// confetti();
// });
// }
function checkIframeLoaded() {
// Get a handle to the iframe element
var iframe = vimeoVideo;
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
// Check if loading is complete
if (iframeDoc.readyState == "complete") {
//iframe.contentWindow.alert("Hello");
iframe.contentWindow.onload = function () {
alert("I am loaded");
};
// The loading is complete, call the function we want executed once the iframe is loaded
afterLoading();
return;
}
// If we are here, it is not loaded. Set things up so we check the status again in 100 milliseconds
window.setTimeout(checkIframeLoaded, 100);
}
function afterLoading() {
console.log("video not yet loaded");
vimeoVideo.style.visibility = "visible";
vimeoVideo.style.opacity = "1";
console.log("video fully loaded");
confetti();
}
if (vimeoVideo) {
vimeoVideo.addEventListener("load", () => {
checkIframeLoaded();
});
}
// This needs to be the last thing that runs:
document.body.className = "loadVisible";
!
