add full page image view

src/build.tsx

@@ -21,6 +21,7 @@ import IndexPage from "./templates";
 import type { ReactNode } from "react";
 import ImagesPage from "./templates/images";
 import VideosPage from "./templates/videos";
+import ImagePage from "./templates/viewImage";
 
 const S3 = new S3Client({
   region: "auto",
@@ -224,6 +225,17 @@ generateHTMLFile(
   "out/images/index.html"
 );
 
+generateHTMLFile(
+  "Wah-Collection/Image:",
+  "/image/",
+  `View the full image on the WAH-Collection`,
+  [
+    environment == "dev" ? "/static/imagePageUtils.js" : "/static/imagePageUtils.min.js",
+  ],
+  <ImagePage />,
+  "out/image/index.html"
+);
+
 generateHTMLFile(
   "Wah-Collection/Images",
   "/videos/",

src/icons.css

@@ -56,4 +56,67 @@
     mask-repeat: no-repeat;
     -webkit-mask-size: 100% 100%;
     mask-size: 100% 100%;
+}
+
+/* cover */
+.material-symbols--crop {
+    display: inline-block;
+    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M17 23v-4H7q-.825 0-1.412-.587T5 17V7H1V5h4V1h2v16h16v2h-4v4zm0-8V7H9V5h8q.825 0 1.413.588T19 7v8z'/%3E%3C/svg%3E");
+    background-color: currentColor;
+    -webkit-mask-image: var(--svg);
+    mask-image: var(--svg);
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-size: 100% 100%;
+    mask-size: 100% 100%;
+}
+
+/* full size */
+.material-symbols--open-in-full {
+    display: inline-block;
+    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 21v-8h2v4.6L17.6 5H13V3h8v8h-2V6.4L6.4 19H11v2z'/%3E%3C/svg%3E");
+    background-color: currentColor;
+    -webkit-mask-image: var(--svg);
+    mask-image: var(--svg);
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-size: 100% 100%;
+    mask-size: 100% 100%;
+}
+
+/* contain */
+.material-symbols--fullscreen-exit {
+    display: inline-block;
+    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6 21v-3H3v-2h5v5zm10 0v-5h5v2h-3v3zM3 8V6h3V3h2v5zm13 0V3h2v3h3v2z'/%3E%3C/svg%3E");
+    background-color: currentColor;
+    -webkit-mask-image: var(--svg);
+    mask-image: var(--svg);
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-size: 100% 100%;
+    mask-size: 100% 100%;
+}
+
+.material-symbols--download {
+    display: inline-block;
+    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z'/%3E%3C/svg%3E");
+    background-color: currentColor;
+    -webkit-mask-image: var(--svg);
+    mask-image: var(--svg);
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-size: 100% 100%;
+    mask-size: 100% 100%;
+}
+
+.material-symbols--open-in-new {
+    display: inline-block;
+    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h7v2H5v14h14v-7h2v7q0 .825-.587 1.413T19 21zm4.7-5.3l-1.4-1.4L17.6 5H14V3h7v7h-2V6.4z'/%3E%3C/svg%3E");
+    background-color: currentColor;
+    -webkit-mask-image: var(--svg);
+    mask-image: var(--svg);
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-size: 100% 100%;
+    mask-size: 100% 100%;
 }

src/static/imagePageUtils.js

@@ -0,0 +1,217 @@
+async function get(url) {
+  const res = await fetch(url);
+  if (!res.ok) {
+    throw new Error(`Failed to fetch ${url}`);
+  }
+  return await res.json();
+}
+
+function changeImgFit() {
+  const fit = getFit();
+  const image = document.querySelector("[data-hi]");
+
+  const placeholder = document.querySelector(
+    '[data-type="placeholder__image"]'
+  );
+
+  if (fit == "contain") {
+    image.className = "w-full h-full object-contain";
+    placeholder.classList.add("bg-black");
+    placeholder.classList.add("aspect-video");
+  }
+  if (fit == "cover") {
+    image.className = "w-full h-full object-cover";
+    placeholder.classList.add("bg-black");
+    placeholder.classList.add("aspect-video");
+  }
+  if (fit == "full") {
+    image.className = "w-auto h-auto mx-auto";
+    placeholder.classList.remove("bg-black");
+    placeholder.classList.remove("aspect-video");
+  }
+}
+
+function renderImage(endpoint, bucket, prefix, isrc, placeholder) {
+  const src = `${endpoint}/${bucket}/${prefix}/${isrc}`;
+  const loader = placeholder.querySelector(
+    '[data-type="placeholder__image__loader"]'
+  );
+  const blurImg = document.createElement("img");
+  const Img = document.createElement("img");
+  blurImg.src = `https://wsrv.nl/?url=${encodeURI(src)}&w=16&h=16`;
+  blurImg.className = "object-cover w-full h-full absolute inset-0";
+  Img.dataset.hi = "fit";
+  Img.src = `https://wsrv.nl/?url=${encodeURI(src)}`;
+  Img.className = "invisible w-full h-full object-contain";
+  Img.loading = "lazy";
+
+  placeholder.appendChild(blurImg);
+  placeholder.appendChild(Img);
+
+  Img.addEventListener("load", () => {
+    changeImgFit();
+    Img.classList.remove("invisible");
+    blurImg.remove();
+    loader.remove();
+    Img.removeEventListener("load", this);
+  });
+}
+
+async function _tmp_loadImage(iid) {
+  const config = await get("/data/config.json");
+  const images = await get("/data/images.json");
+
+  if (iid < 0 || iid > images.length) {
+    window.location.href = "/image/?id=0";
+  }
+
+  const image = images[iid];
+  const placeholder = document.querySelector(
+    '[data-type="placeholder__image"]'
+  );
+  renderImage(
+    config.endpoint,
+    config.bucket,
+    config.prefix,
+    image,
+    placeholder
+  );
+}
+
+function setFit(fit) {
+  localStorage.setItem("fit", fit);
+}
+function getFit() {
+  let fit = localStorage.getItem("fit");
+  if (!fit || !["contain", "cover", "full"].includes(fit)) {
+    setFit("contain");
+    fit = "contain";
+  }
+
+  const FitContain = document.querySelectorAll("#fit_contain");
+  const FitCover = document.querySelectorAll("#fit_cover");
+  const FitFull = document.querySelectorAll("#fit_full");
+
+  switch (fit) {
+    case "contain": {
+      FitContain.forEach((item) =>
+        item.classList.add("text-orange-500", "font-bold")
+      );
+      FitCover.forEach((item) =>
+        item.classList.remove("text-orange-500", "font-bold")
+      );
+      FitFull.forEach((item) =>
+        item.classList.remove("text-orange-500", "font-bold")
+      );
+      break;
+    }
+    case "cover": {
+      FitContain.forEach((item) =>
+        item.classList.remove("text-orange-500", "font-bold")
+      );
+      FitCover.forEach((item) =>
+        item.classList.add("text-orange-500", "font-bold")
+      );
+      FitFull.forEach((item) =>
+        item.classList.remove("text-orange-500", "font-bold")
+      );
+      break;
+    }
+    case "full": {
+      FitContain.forEach((item) =>
+        item.classList.remove("text-orange-500", "font-bold")
+      );
+      FitCover.forEach((item) =>
+        item.classList.remove("text-orange-500", "font-bold")
+      );
+      FitFull.forEach((item) =>
+        item.classList.add("text-orange-500", "font-bold")
+      );
+      break;
+    }
+  }
+
+  return fit;
+}
+
+function _tmp_loadNav(url, iid) {
+  const prev = document.querySelectorAll("#nav_prev");
+  const next = document.querySelectorAll("#nav_next");
+  const fit = getFit();
+  const FitContain = document.querySelectorAll("#fit_contain");
+  const FitCover = document.querySelectorAll("#fit_cover");
+  const FitFull = document.querySelectorAll("#fit_full");
+  const download = document.querySelectorAll("#act_download");
+  const newtab = document.querySelectorAll("#act_newtab");
+
+  function handleClickPrev() {
+    window.location.href = `/image/?id=${Number(iid) - 1}`;
+  }
+  function handleClickNext() {
+    window.location.href = `/image/?id=${Number(iid) + 1}`;
+  }
+  function handleClickContain() {
+    setFit("contain");
+    changeImgFit();
+  }
+  function handleClickCover() {
+    setFit("cover");
+    changeImgFit();
+  }
+  function handleClickFull() {
+    setFit("full");
+    changeImgFit();
+  }
+  async function handleClickDownload() {
+    const config = await get("/data/config.json");
+    const images = await get("/data/images.json");
+    const blob = await fetch(
+      `https://wsrv.nl/?url=${config.endpoint}/${config.bucket}/${config.prefix}/${images[iid]}?encoding=base64`
+    )
+      .then((res) => res)
+      .then((data) => data.blob());
+    const fileURL = URL.createObjectURL(blob);
+    const downloadLink = document.createElement("a");
+    downloadLink.href = fileURL;
+    downloadLink.download = images[iid];
+    document.body.appendChild(downloadLink);
+    downloadLink.click();
+    downloadLink.remove();
+  }
+  function handleClickNewTab() {
+    const image = document.querySelector("[data-hi]");
+    window.open(image.src, "_blank").focus();
+  }
+  prev.forEach((item) => {
+    item.addEventListener("click", handleClickPrev);
+  });
+  next.forEach((item) => {
+    item.addEventListener("click", handleClickNext);
+  });
+  FitContain.forEach((item) => {
+    item.addEventListener("click", handleClickContain);
+  });
+  FitCover.forEach((item) => {
+    item.addEventListener("click", handleClickCover);
+  });
+  FitFull.forEach((item) => {
+    item.addEventListener("click", handleClickFull);
+  });
+  download.forEach((item) => {
+    item.addEventListener("click", handleClickDownload);
+  });
+  newtab.forEach((item) => {
+    item.addEventListener("click", handleClickNewTab);
+  });
+}
+
+window.onload = () => {
+  const u = new URL(window.location.href);
+  const iid = u.searchParams.get("id");
+
+  if (!iid) {
+    window.location.href = "/images/";
+  }
+  _tmp_loadNav(u, iid);
+  _tmp_loadImage(iid);
+};

src/static/tailwind.css

@@ -611,6 +611,9 @@
   .aspect-square {
     aspect-ratio: 1 / 1;
   }
+  .aspect-video {
+    aspect-ratio: var(--aspect-video);
+  }
   .h-6 {
     height: calc(var(--spacing) * 6);
   }
@@ -620,6 +623,9 @@
   .h-16 {
     height: calc(var(--spacing) * 16);
   }
+  .h-auto {
+    height: auto;
+  }
   .h-full {
     height: 100%;
   }
@@ -638,6 +644,9 @@
   .w-16 {
     width: calc(var(--spacing) * 16);
   }
+  .w-auto {
+    width: auto;
+  }
   .w-full {
     width: 100%;
   }
@@ -696,9 +705,15 @@
   .bg-\[\#faebeb\] {
     background-color: #faebeb;
   }
+  .bg-black {
+    background-color: var(--color-black);
+  }
   .bg-gray-400 {
     background-color: var(--color-gray-400);
   }
+  .bg-gray-400\/50 {
+    background-color: color-mix(in oklab, var(--color-gray-400) 50%, transparent);
+  }
   .bg-orange-800\/50 {
     background-color: color-mix(in oklab, var(--color-orange-800) 50%, transparent);
   }
@@ -708,6 +723,9 @@
   .bg-yellow-950 {
     background-color: var(--color-yellow-950);
   }
+  .object-contain {
+    object-fit: contain;
+  }
   .object-cover {
     object-fit: cover;
   }
@@ -826,6 +844,16 @@
       display: block;
     }
   }
+  .md\:flex-row {
+    @media (width >= 48rem) {
+      flex-direction: row;
+    }
+  }
+  .md\:gap-8 {
+    @media (width >= 48rem) {
+      gap: calc(var(--spacing) * 8);
+    }
+  }
   .md\:text-lg {
     @media (width >= 48rem) {
       font-size: var(--text-lg);
@@ -934,6 +962,61 @@
   -webkit-mask-size: 100% 100%;
   mask-size: 100% 100%;
 }
+.material-symbols--crop {
+  display: inline-block;
+  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M17 23v-4H7q-.825 0-1.412-.587T5 17V7H1V5h4V1h2v16h16v2h-4v4zm0-8V7H9V5h8q.825 0 1.413.588T19 7v8z'/%3E%3C/svg%3E");
+  background-color: currentColor;
+  -webkit-mask-image: var(--svg);
+  mask-image: var(--svg);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+}
+.material-symbols--open-in-full {
+  display: inline-block;
+  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 21v-8h2v4.6L17.6 5H13V3h8v8h-2V6.4L6.4 19H11v2z'/%3E%3C/svg%3E");
+  background-color: currentColor;
+  -webkit-mask-image: var(--svg);
+  mask-image: var(--svg);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+}
+.material-symbols--fullscreen-exit {
+  display: inline-block;
+  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6 21v-3H3v-2h5v5zm10 0v-5h5v2h-3v3zM3 8V6h3V3h2v5zm13 0V3h2v3h3v2z'/%3E%3C/svg%3E");
+  background-color: currentColor;
+  -webkit-mask-image: var(--svg);
+  mask-image: var(--svg);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+}
+.material-symbols--download {
+  display: inline-block;
+  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z'/%3E%3C/svg%3E");
+  background-color: currentColor;
+  -webkit-mask-image: var(--svg);
+  mask-image: var(--svg);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+}
+.material-symbols--open-in-new {
+  display: inline-block;
+  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h7v2H5v14h14v-7h2v7q0 .825-.587 1.413T19 21zm4.7-5.3l-1.4-1.4L17.6 5H14V3h7v7h-2V6.4z'/%3E%3C/svg%3E");
+  background-color: currentColor;
+  -webkit-mask-image: var(--svg);
+  mask-image: var(--svg);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+}
 @keyframes spin {
   to {
     transform: rotate(360deg);

src/templates/Components/ImagePageNavigation.tsx

@@ -0,0 +1,59 @@
+export default function ImagePageNav() {
+  return (
+    <div className="bg-orange-800/50 rounded-sm p-2 text-white">
+      <div className="flex gap-4 justify-between items-center">
+        <button
+          className="flex justify-center items-center cursor-pointer"
+          id="nav_prev"
+        >
+          <div className="material-symbols--navigate-before w-16 h-16"></div>
+        </button>
+
+        <div className="flex gap-4 md:gap-8 flex-col md:flex-row">
+            <div className="flex gap-4">
+              <button
+                className="flex justify-center items-center cursor-pointer"
+                id="fit_cover"
+              >
+                <div className="material-symbols--crop w-8 h-8"></div>
+              </button>
+              <button
+                className="flex justify-center items-center cursor-pointer"
+                id="fit_contain"
+              >
+                <div className="material-symbols--fullscreen-exit w-8 h-8"></div>
+              </button>
+              <button
+                className="flex justify-center items-center cursor-pointer"
+                id="fit_full"
+              >
+                <div className="material-symbols--open-in-full w-8 h-8"></div>
+              </button>
+            </div>
+    
+            <div className="flex gap-4">
+              <button
+                className="flex justify-center items-center cursor-pointer"
+                id="act_download"
+              >
+                <div className="material-symbols--download w-8 h-8"></div>
+              </button>
+              <button
+                className="flex justify-center items-center cursor-pointer"
+                id="act_newtab"
+              >
+                <div className="material-symbols--open-in-new w-8 h-8"></div>
+              </button>
+            </div>
+        </div>
+        
+        <button
+          className="flex justify-center items-center cursor-pointer"
+          id="nav_next"
+        >
+          <div className="material-symbols--navigate-next w-16 h-16"></div>
+        </button>
+      </div>
+    </div>
+  );
+}

src/templates/viewImage.tsx

@@ -0,0 +1,19 @@
+import ImagePageNav from "./Components/ImagePageNavigation";
+
+export default function ImagePage() {
+  return (
+    <div className="flex flex-col gap-4 mb-4">
+      <ImagePageNav />
+      <div
+        data-type="placeholder__image"
+        className="relative w-full rounded-sm aspect-video overflow-hidden bg-black"
+      >
+        <div
+          data-type="placeholder__image__loader"
+          className="w-full h-full absolute inset-0 bg-gray-400/50 opacity-30 animate-pulse z-[3]"
+        ></div>
+      </div>
+      <ImagePageNav />
+    </div>
+  );
+}