@hoangyell/gallery 1.0.5 → 1.0.7

package/README.md

@@ -27,6 +27,7 @@
 ## Features
 
 - **Pyramid layout** — distribute images across rows with `rows` prop
+- **Two fit modes** — `cover` (default, uniform photo grid) or `contain` (natural aspect, for diagrams and tall portraits)
 - **Lightbox** — click to open, keyboard arrows, swipe, ESC to close
 - **Corner rounding** — only the four outer corners of each group are rounded
 - **Hover zoom** — image scales inside its cell without changing layout
@@ -79,9 +80,36 @@ import { Gallery } from "@hoangyell/gallery";
 | `rows` | `number` | auto (~3 per row) | Number of visual rows |
 | `orientation` | `"landscape" \| "portrait"` | `"landscape"` | Item aspect ratio hint |
 | `scale` | `number` | `1` | Gallery width scale (0–1) |
-| `fit` | `ObjectFit` | `"cover"` | Default CSS object-fit |
+| `fit` | `ObjectFit` | `"cover"` | Default CSS object-fit — see Fit modes below |
 | `class` | `string` | — | Extra wrapper class |
 
+## Fit modes
+
+The `fit` prop controls **both** the image's `object-fit` **and** the
+container's aspect ratio. Pick the right one for your content:
+
+| Mode | What you get | When to use |
+|---|---|---|
+| `"cover"` (default) | Uniform 4:3 grid (1:1 on mobile). Images are cropped to fill. | Photo galleries — travel, products, faces. The Pinterest aesthetic. |
+| `"contain"` | Container hugs each image's natural aspect ratio. No cropping. | Diagrams, charts, screenshots, comics, tall portraits. |
+
+Set it at the gallery level:
+
+```mdx
+<Gallery items={["/diagram.png"]} rows={1} fit="contain" />
+```
+
+Or per-item (mix and match in the same gallery):
+
+```mdx
+<Gallery
+  items={[
+    "/cover-photo.jpg",
+    { src: "/architecture-diagram.png", fit: "contain" },
+  ]}
+/>
+```
+
 ## Dark mode
 
 The component auto-themes via three mechanisms (last one wins):

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoangyell/gallery",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "Astro image gallery with lightbox, pyramid multi-row layout, and accessible controls.",
   "license": "MIT",
   "type": "module",

package/src/Gallery.astro

@@ -100,6 +100,7 @@ if (resolvedRows <= 1 || galleryItems.length <= 1) {
       class={`hy-gallery ${className}`}
       data-hy-gallery
       data-orientation={orientation}
+      data-fit={fit}
       style={scale !== 1 ? `width: ${scale * 100}%; margin: 2rem auto;` : undefined}
     >
       {groupedItems.map((group, rowIdx) => {
@@ -124,6 +125,7 @@ if (resolvedRows <= 1 || galleryItems.length <= 1) {
                   class={`hy-gallery-item ${cornerClasses}`}
                   data-zoom-src={item.src}
                   data-alt={item.alt}
+                  data-fit={item.fit}
                   aria-label={
                     item.alt ? `View full size: ${item.alt}` : "View full size image"
                   }
@@ -263,6 +265,16 @@ if (resolvedRows <= 1 || galleryItems.length <= 1) {
     }
   }
 
+  /* fit="contain" — show the whole image at its natural aspect ratio.
+     Drops the forced 4:3 / 1:1 container so diagrams, charts, screenshots,
+     and tall portraits render fully without cropping or letterboxing.
+     Applied either at the wrapper (global) or per-item via data-fit. */
+  .hy-gallery[data-fit="contain"] .hy-gallery-item,
+  .hy-gallery .hy-gallery-item[data-fit="contain"] {
+    aspect-ratio: auto;
+    background: transparent;
+  }
+
   .hy-gallery-img {
     position: absolute;
     inset: 0;
@@ -279,6 +291,16 @@ if (resolvedRows <= 1 || galleryItems.length <= 1) {
     transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   }
 
+  /* In contain mode the image is the primary content — let it drive height
+     instead of being absolutely positioned inside a fixed-aspect box. */
+  .hy-gallery[data-fit="contain"] .hy-gallery-img,
+  .hy-gallery .hy-gallery-item[data-fit="contain"] .hy-gallery-img {
+    position: static;
+    width: 100%;
+    height: auto;
+    inset: auto;
+  }
+
   .hy-gallery-item:hover .hy-gallery-img,
   .hy-gallery-item:focus-visible .hy-gallery-img {
     will-change: transform;
@@ -478,6 +500,12 @@ if (resolvedRows <= 1 || galleryItems.length <= 1) {
     currentIndex: number;
     touchStartX: number;
     touchStartY: number;
+    lockedScrollY: number;
+    previousBodyOverflow: string;
+    previousBodyPosition: string;
+    previousBodyTop: string;
+    previousBodyWidth: string;
+    previousHtmlOverflow: string;
 
     constructor(el: HTMLElement) {
       this.gallery = el;
@@ -492,6 +520,12 @@ if (resolvedRows <= 1 || galleryItems.length <= 1) {
       this.currentIndex = -1;
       this.touchStartX = 0;
       this.touchStartY = 0;
+      this.lockedScrollY = -1;
+      this.previousBodyOverflow = "";
+      this.previousBodyPosition = "";
+      this.previousBodyTop = "";
+      this.previousBodyWidth = "";
+      this.previousHtmlOverflow = "";
 
       this.bind();
       document.addEventListener("astro:before-swap", this.forceClose);
@@ -517,10 +551,10 @@ if (resolvedRows <= 1 || galleryItems.length <= 1) {
 
         document.removeEventListener("keydown", this.handleKey);
         document.removeEventListener("gesturestart", this.preventZoom);
-        document.body.style.overflow = "";
         const main = document.querySelector("main");
         if (main) main.removeAttribute("inert");
       }
+      this.unlockBackgroundScroll();
       document.removeEventListener("astro:before-swap", this.forceClose);
     };
 
@@ -539,7 +573,7 @@ if (resolvedRows <= 1 || galleryItems.length <= 1) {
       this.preload(index + 1);
 
       document.body.appendChild(this.overlay);
-      document.body.style.overflow = "hidden";
+      this.lockBackgroundScroll();
       const main = document.querySelector("main");
       if (main) main.setAttribute("inert", "");
       this.overlay.focus();
@@ -628,7 +662,7 @@ if (resolvedRows <= 1 || galleryItems.length <= 1) {
         this.imgEl = null;
         this.counterEl = null;
 
-        document.body.style.overflow = "";
+        this.unlockBackgroundScroll();
         const main = document.querySelector("main");
         if (main) main.removeAttribute("inert");
 
@@ -641,6 +675,35 @@ if (resolvedRows <= 1 || galleryItems.length <= 1) {
       }, 300);
     };
 
+    lockBackgroundScroll = () => {
+      if (this.lockedScrollY >= 0) return;
+
+      this.lockedScrollY = window.scrollY;
+      this.previousBodyOverflow = document.body.style.overflow;
+      this.previousBodyPosition = document.body.style.position;
+      this.previousBodyTop = document.body.style.top;
+      this.previousBodyWidth = document.body.style.width;
+      this.previousHtmlOverflow = document.documentElement.style.overflow;
+
+      document.documentElement.style.overflow = "hidden";
+      document.body.style.overflow = "hidden";
+      document.body.style.position = "fixed";
+      document.body.style.top = `-${this.lockedScrollY}px`;
+      document.body.style.width = "100%";
+    };
+
+    unlockBackgroundScroll = () => {
+      if (this.lockedScrollY < 0) return;
+
+      document.documentElement.style.overflow = this.previousHtmlOverflow;
+      document.body.style.overflow = this.previousBodyOverflow;
+      document.body.style.position = this.previousBodyPosition;
+      document.body.style.top = this.previousBodyTop;
+      document.body.style.width = this.previousBodyWidth;
+      window.scrollTo(0, this.lockedScrollY);
+      this.lockedScrollY = -1;
+    };
+
     navigate = (dir: number) => {
       const next = this.currentIndex + dir;
       if (next < 0 || next >= this.items.length) return;