From 79827c26cc8686c17429fb77874fe2b271cf4258 Mon Sep 17 00:00:00 2001 From: Kentai Radiquum Date: Sun, 2 Feb 2025 04:17:59 +0500 Subject: [PATCH] add full page image view --- src/build.tsx | 12 + src/icons.css | 63 +++++ src/static/imagePageUtils.js | 217 ++++++++++++++++++ src/static/tailwind.css | 83 +++++++ .../Components/ImagePageNavigation.tsx | 59 +++++ src/templates/viewImage.tsx | 19 ++ 6 files changed, 453 insertions(+) create mode 100644 src/static/imagePageUtils.js create mode 100644 src/templates/Components/ImagePageNavigation.tsx create mode 100644 src/templates/viewImage.tsx diff --git a/src/build.tsx b/src/build.tsx index 46768fa..5d31894 100644 --- a/src/build.tsx +++ b/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", + ], + , + "out/image/index.html" +); + generateHTMLFile( "Wah-Collection/Images", "/videos/", diff --git a/src/icons.css b/src/icons.css index c9978ea..42d7cd3 100644 --- a/src/icons.css +++ b/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%; } \ No newline at end of file diff --git a/src/static/imagePageUtils.js b/src/static/imagePageUtils.js new file mode 100644 index 0000000..6f80dde --- /dev/null +++ b/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); +}; diff --git a/src/static/tailwind.css b/src/static/tailwind.css index 6131cca..f40557c 100644 --- a/src/static/tailwind.css +++ b/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); diff --git a/src/templates/Components/ImagePageNavigation.tsx b/src/templates/Components/ImagePageNavigation.tsx new file mode 100644 index 0000000..bfe5cdf --- /dev/null +++ b/src/templates/Components/ImagePageNavigation.tsx @@ -0,0 +1,59 @@ +export default function ImagePageNav() { + return ( +
+
+ + +
+
+ + + +
+ +
+ + +
+
+ + +
+
+ ); +} diff --git a/src/templates/viewImage.tsx b/src/templates/viewImage.tsx new file mode 100644 index 0000000..9b1dff9 --- /dev/null +++ b/src/templates/viewImage.tsx @@ -0,0 +1,19 @@ +import ImagePageNav from "./Components/ImagePageNavigation"; + +export default function ImagePage() { + return ( +
+ +
+
+
+ +
+ ); +}