46 lines
1.3 KiB
JavaScript
46 lines
1.3 KiB
JavaScript
|
const root = document.documentElement;
|
||
|
|
|
||
|
|
/* animation */
|
||
|
|
const setScroll = () => {
|
||
|
|
root.style.setProperty("--animate", window.scrollY / window.innerHeight);
|
||
|
|
};
|
||
|
|
setScroll();
|
||
|
|
window.addEventListener("scroll", setScroll); // debounce this in production
|
||
|
|
|
||
|
|
/* page aspect ratio */
|
||
|
|
const setWindowSize = () => {
|
||
|
|
const aspectRatio = window.innerWidth / window.innerHeight;
|
||
|
|
root.style.setProperty(
|
||
|
|
"--windowHeightScalar",
|
||
|
|
aspectRatio > 1 ? 1 : 1 / aspectRatio
|
||
|
|
);
|
||
|
|
root.style.setProperty(
|
||
|
|
"--windowWidthScalar",
|
||
|
|
aspectRatio < 1 ? 1 : aspectRatio
|
||
|
|
);
|
||
|
|
};
|
||
|
|
setWindowSize();
|
||
|
|
window.addEventListener("resize", setWindowSize); // debounce this in production
|
||
|
|
|
||
|
|
/* drag n drop */
|
||
|
|
const upload = document.getElementById("upload");
|
||
|
|
const uploadMask = document.getElementById("upload-mask");
|
||
|
|
upload.addEventListener("input", (e) => {
|
||
|
|
uploadMask.style.opacity = 0;
|
||
|
|
const input = e.target;
|
||
|
|
if (input.files && input.files[0]) {
|
||
|
|
const reader = new FileReader();
|
||
|
|
reader.onload = (readerE) => {
|
||
|
|
document
|
||
|
|
.getElementById("image")
|
||
|
|
.setAttribute("xlink:href", readerE.target.result);
|
||
|
|
};
|
||
|
|
reader.readAsDataURL(input.files[0]);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
upload.addEventListener("dragenter", () => {
|
||
|
|
uploadMask.style.opacity = 1;
|
||
|
|
});
|
||
|
|
upload.addEventListener("dragleave", () => {
|
||
|
|
uploadMask.style.opacity = 0;
|
||
|
|
});
|