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;
});