From 16b38e0bebaaaa00579ddfbe2eb269126ecaa4fc Mon Sep 17 00:00:00 2001
From: Chad Miller <chadtmiller15@gmail.com>
Date: Tue, 13 May 2025 16:43:23 -0700
Subject: [PATCH] add justified gallery layout, add toggle to switch between
 layouts

---
 input.css         |  12 +----
 main.tsx          | 123 +++++++++++++++++++++++++++++++++++++++++++++-
 static/masonry.js |  86 +++++++++++++++++++++++++++++++-
 static/styles.css |  26 ++++++----
 4 files changed, 223 insertions(+), 24 deletions(-)

diff --git a/input.css b/input.css
index 972626a..cc30f36 100644
--- a/input.css
+++ b/input.css
@@ -1,12 +1,4 @@
 @import "tailwindcss";
 
-.htmx-request.htmx-indicator {
-  display: inline;
-}
-.htmx-indicator {
-  display: none;
-}
-.htmx-request #submit-button {
-  opacity: 0.5;
-  pointer-events: none;
-}
+/* use to test light mode */
+/* @custom-variant dark (&:where(.dark, .dark *)); */
diff --git a/main.tsx b/main.tsx
index a8750ad..cf8ee33 100644
--- a/main.tsx
+++ b/main.tsx
@@ -59,6 +59,7 @@ const PUBLIC_URL = Deno.env.get("BFF_PUBLIC_URL") ?? "http://localhost:8080";
 const GOATCOUNTER_URL = Deno.env.get("GOATCOUNTER_URL");
 
 let cssContentHash: string = "";
+const staticJsFiles = new Map<string, string>();
 
 bff({
   appName: "Grain Social",
@@ -80,6 +81,18 @@ bff({
     cssContentHash = Array.from(new Uint8Array(hashBuffer))
       .map((b) => b.toString(16).padStart(2, "0"))
       .join("");
+    for (const entry of Deno.readDirSync(join(Deno.cwd(), "static"))) {
+      if (entry.isFile && entry.name.endsWith(".js")) {
+        const fileContent = await Deno.readFile(
+          join(Deno.cwd(), "static", entry.name),
+        );
+        const hashBuffer = await crypto.subtle.digest("SHA-256", fileContent);
+        const hash = Array.from(new Uint8Array(hashBuffer))
+          .map((b) => b.toString(16).padStart(2, "0"))
+          .join("");
+        staticJsFiles.set(entry.name, hash);
+      }
+    }
   },
   onError: (err) => {
     if (err instanceof UnauthorizedError) {
@@ -1059,7 +1072,12 @@ function Root(props: Readonly<RootProps<State>>) {
           href="https://unpkg.com/@fortawesome/fontawesome-free@6.7.2/css/all.min.css"
           preload
         />
-        {scripts?.map((file) => <script key={file} src={`/static/${file}`} />)}
+        {scripts?.map((file) => (
+          <script
+            key={file}
+            src={`/static/${file}?${staticJsFiles.get(file)}`}
+          />
+        ))}
       </head>
       <body class="h-full w-full dark:bg-zinc-950 dark:text-white">
         <Layout id="layout" class="border-zinc-200 dark:border-zinc-800">
@@ -1675,10 +1693,111 @@ function GalleryPage({
           )
           : null}
       </div>
+      <div class="flex justify-end mb-2">
+        <Button
+          id="justified-button"
+          variant="primary"
+          class="flex justify-center w-full sm:w-fit bg-zinc-100 dark:bg-zinc-800 border-zinc-100 dark:border-zinc-800 data-[selected=false]:bg-transparent data-[selected=false]:border-transparent text-zinc-950 dark:text-zinc-50"
+          _="on click call toggleLayout('justified')
+            set @data-selected to 'true'
+            set #masonry-button's @data-selected to 'false'"
+        >
+          <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <rect x="2" y="2" width="8" height="6" fill="currentColor" rx="1" />
+            <rect
+              x="12"
+              y="2"
+              width="10"
+              height="6"
+              fill="currentColor"
+              rx="1"
+            />
+            <rect
+              x="2"
+              y="10"
+              width="6"
+              height="6"
+              fill="currentColor"
+              rx="1"
+            />
+            <rect
+              x="10"
+              y="10"
+              width="12"
+              height="6"
+              fill="currentColor"
+              rx="1"
+            />
+            <rect
+              x="2"
+              y="18"
+              width="20"
+              height="4"
+              fill="currentColor"
+              rx="1"
+            />
+          </svg>
+        </Button>
+        <Button
+          id="masonry-button"
+          variant="primary"
+          data-selected="false"
+          class="flex justify-center w-full sm:w-fit bg-zinc-100 dark:bg-zinc-800 border-zinc-100 dark:border-zinc-800 data-[selected=false]:bg-transparent data-[selected=false]:border-transparent text-zinc-950 dark:text-zinc-50"
+          _="on click call toggleLayout('masonry')
+            set @data-selected to 'true'
+            set #justified-button's @data-selected to 'false'"
+        >
+          <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <rect x="2" y="2" width="8" height="8" fill="currentColor" rx="1" />
+            <rect
+              x="12"
+              y="2"
+              width="8"
+              height="4"
+              fill="currentColor"
+              rx="1"
+            />
+            <rect
+              x="12"
+              y="8"
+              width="8"
+              height="6"
+              fill="currentColor"
+              rx="1"
+            />
+            <rect
+              x="2"
+              y="12"
+              width="8"
+              height="8"
+              fill="currentColor"
+              rx="1"
+            />
+            <rect
+              x="12"
+              y="16"
+              width="8"
+              height="4"
+              fill="currentColor"
+              rx="1"
+            />
+          </svg>
+        </Button>
+      </div>
       <div
         id="masonry-container"
         class="h-0 overflow-hidden relative mx-auto w-full"
-        _="on load or htmx:afterSettle call computeMasonry()"
+        _="on load or htmx:afterSettle call computeLayout()"
       >
         {gallery.items?.filter(isPhotoView)?.length
           ? gallery?.items
diff --git a/static/masonry.js b/static/masonry.js
index 67c1eb4..abb5180 100644
--- a/static/masonry.js
+++ b/static/masonry.js
@@ -1,6 +1,20 @@
 // deno-lint-ignore-file
 
 let masonryObserverInitialized = false;
+let layoutMode = "justified";
+
+function computeLayout() {
+  if (layoutMode === "masonry") {
+    computeMasonry();
+  } else {
+    computeJustified();
+  }
+}
+
+function toggleLayout(layout = "justified") {
+  layoutMode = layout;
+  computeLayout();
+}
 
 function computeMasonry() {
   const container = document.getElementById("masonry-container");
@@ -52,6 +66,74 @@ function computeMasonry() {
   container.style.height = `${Math.max(...columnHeights)}px`;
 }
 
+function computeJustified() {
+  const container = document.getElementById("masonry-container");
+  if (!container) return;
+
+  const spacing = 8;
+  const containerWidth = container.offsetWidth;
+
+  if (containerWidth === 0) {
+    requestAnimationFrame(computeJustified);
+    return;
+  }
+
+  const tiles = Array.from(container.querySelectorAll(".masonry-tile"));
+  let currentRow = [];
+  let rowAspectRatioSum = 0;
+  let yOffset = 0;
+
+  // Clear all styles before layout
+  tiles.forEach((tile) => {
+    Object.assign(tile.style, {
+      position: "absolute",
+      left: "0px",
+      top: "0px",
+      width: "auto",
+      height: "auto",
+    });
+  });
+
+  for (let i = 0; i < tiles.length; i++) {
+    const tile = tiles[i];
+    const imgW = parseFloat(tile.dataset.width);
+    const imgH = parseFloat(tile.dataset.height);
+    if (!imgW || !imgH) continue;
+
+    const aspectRatio = imgW / imgH;
+    currentRow.push({ tile, aspectRatio, imgW, imgH });
+    rowAspectRatioSum += aspectRatio;
+
+    // Estimate if row is "full" enough
+    const estimatedRowHeight =
+      (containerWidth - (currentRow.length - 1) * spacing) / rowAspectRatioSum;
+
+    // If height is reasonable or we're at the end, render the row
+    if (estimatedRowHeight < 300 || i === tiles.length - 1) {
+      let xOffset = 0;
+
+      for (const item of currentRow) {
+        const width = estimatedRowHeight * item.aspectRatio;
+        Object.assign(item.tile.style, {
+          position: "absolute",
+          top: `${yOffset}px`,
+          left: `${xOffset}px`,
+          width: `${width}px`,
+          height: `${estimatedRowHeight}px`,
+        });
+        xOffset += width + spacing;
+      }
+
+      yOffset += estimatedRowHeight + spacing;
+      currentRow = [];
+      rowAspectRatioSum = 0;
+    }
+  }
+
+  container.style.position = "relative";
+  container.style.height = `${yOffset}px`;
+}
+
 function observeMasonry() {
   if (masonryObserverInitialized) return;
   masonryObserverInitialized = true;
@@ -61,7 +143,7 @@ function observeMasonry() {
 
   // Observe parent resize
   if (typeof ResizeObserver !== "undefined") {
-    const resizeObserver = new ResizeObserver(() => computeMasonry());
+    const resizeObserver = new ResizeObserver(() => computeLayout());
     if (container.parentElement) {
       resizeObserver.observe(container.parentElement);
     }
@@ -69,7 +151,7 @@ function observeMasonry() {
 
   // Observe inner content changes (tiles being added/removed)
   const mutationObserver = new MutationObserver(() => {
-    computeMasonry();
+    computeLayout();
   });
 
   mutationObserver.observe(container, {
diff --git a/static/styles.css b/static/styles.css
index ac209b3..b3f39b7 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -414,6 +414,9 @@
   .justify-center {
     justify-content: center;
   }
+  .justify-end {
+    justify-content: flex-end;
+  }
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
@@ -463,6 +466,9 @@
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
   }
+  .border-zinc-100 {
+    border-color: var(--color-zinc-100);
+  }
   .border-zinc-200 {
     border-color: var(--color-zinc-200);
   }
@@ -610,6 +616,16 @@
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
+  .data-\[selected\=false\]\:border-transparent {
+    &[data-selected="false"] {
+      border-color: transparent;
+    }
+  }
+  .data-\[selected\=false\]\:bg-transparent {
+    &[data-selected="false"] {
+      background-color: transparent;
+    }
+  }
   .data-\[state\=pending\]\:opacity-50 {
     &[data-state="pending"] {
       opacity: 50%;
@@ -721,16 +737,6 @@
     }
   }
 }
-.htmx-request.htmx-indicator {
-  display: inline;
-}
-.htmx-indicator {
-  display: none;
-}
-.htmx-request #submit-button {
-  opacity: 0.5;
-  pointer-events: none;
-}
 @property --tw-space-y-reverse {
   syntax: "*";
   inherits: false;
-- 
2.51.2