yefeme 0.8.9 → 0.8.10

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bbce7b62320b843aa7f3d3bf7b7d733a2ad22b2dfe02127673a7bd5f09ff6d7c
-  data.tar.gz: 7a6707abaefe1bf323fb5200204bcf03f0aa97d5c03504cbb376087540a93144
+  metadata.gz: '080bfd44d21f6f9ffe2dc4f171bb50fce8ce032d3feed441444c2c30ecb77bbe'
+  data.tar.gz: 48af270410eec82cf3953c2640978f7bcf47cb4c97a09f435d7d179d3c857dde
 SHA512:
-  metadata.gz: 75afa28eb150f953b963149929cb45f24a319a5435b4663d5e95adc0ed8de5b95a191f884a7b02ff6c032423ed689283453d93291340fee4f90b0f1de21b640d
-  data.tar.gz: 4f19e3f39202e576af151846dbb4c835c4f229b811bd9073183dde773e4b491f21e61ed9209eb1956a625872f80af11f928ae3f23f749aa32f0501e7f8ed46b9
+  metadata.gz: 4af6f45d6b415ee0a22b58c268573d3d9cca92b9008e6d26b26105e566af40bfb8fa3f2bc0e5e5763d029473fae8a685a802c630350cd9a4aa2dabc679c634d8
+  data.tar.gz: 491e1b847b25567d437ef9b7a479c0979b553c57aecffb562e88b08e57975effafb09424bed2fe2c31dff048ed72e343316fa8f8e93804a32c7805f41ba089c0

data/README.md

@@ -80,7 +80,7 @@ images:
 
 The optional `cover` field selects the Cloudflare image ID used for the shoot's link preview (`og:image`). It defaults to the first image and uses the configured `xl` variant.
 
-The theme decodes each BlurHash in the browser and displays it as an immediate placeholder behind the full thumbnail. Selecting a thumbnail opens the shoot in a full-screen lightbox with button, keyboard, horizontal swipe, and native pinch-to-zoom navigation. Scalar image IDs remain supported for existing sites, but do not provide intrinsic sizing or placeholder information.
+The theme decodes each BlurHash in the browser and displays it as an immediate placeholder behind the full thumbnail. Selecting a thumbnail opens the shoot in a full-screen lightbox with button, keyboard, and horizontal swipe navigation. Tap the backdrop or drag vertically to close; double-tap or pinch an image to zoom, then drag to pan. Scalar image IDs remain supported for existing sites, but do not provide intrinsic sizing or placeholder information.
 
 ## Contributing
 
@@ -92,6 +92,8 @@ To set up your environment to develop this theme, run `bundle install`.
 
 Check cover metadata with `bundle exec ruby test_cover.rb`.
 
+Check lightbox gesture handling with `node --test test_lightbox.js`.
+
 Your theme is setup just like a normal Jekyll site! To test your theme, run `bundle exec jekyll serve` and open your browser at `http://localhost:4000`. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.
 
 Gem releases are built from a clean checkout and include the tracked theme layouts, includes, Sass, and browser assets selected by `yefeme.gemspec`. The release workflow verifies the package and rejects site content from `_posts` or `_shoots`.

data/_includes/light-box.html

@@ -37,10 +37,17 @@
       justify-content: center;
       padding: 0;
       position: relative;
+      transition: opacity 0.25s, visibility 0.25s;
       width: 2rem;
       z-index: 2;
     }
 
+    .modal.zoomed button {
+      opacity: 0;
+      pointer-events: none;
+      visibility: hidden;
+    }
+
     button svg {
       display: block;
       fill: none;
@@ -91,8 +98,15 @@
       display: flex;
       flex: 0 0 100%;
       justify-content: center;
+      opacity: var(--drag-opacity, 1);
       position: relative;
       scroll-snap-align: center;
+      transition: opacity 0.33s ease;
+    }
+
+    .slide.zooming,
+    .slide.zooming img {
+      touch-action: none;
     }
 
     .slide img {
@@ -106,20 +120,53 @@
       opacity: var(--resolution-opacity, 1);
       position: absolute;
       top: 50%;
-      touch-action: manipulation;
-      transform: translate(-50%, calc(-50% - 1.5rem));
-      transition: opacity 0.3s ease;
+      touch-action: pan-x;
+      transform:
+        translate(-50%, calc(-50% - 1.5rem))
+        translateY(var(--drag-y, 0px));
+      transition: opacity 0.3s ease, transform 0.33s ease;
       user-select: none;
       width: auto;
       -webkit-user-drag: none;
     }
 
+    .slide.dragging,
+    .slide.dragging img {
+      transition: none;
+    }
+
+    .slide.settling {
+      transition: opacity 0.33s ease-out;
+    }
+
+    .slide.settling img {
+      transition: opacity 0.3s ease, transform 0.33s ease-out;
+    }
+
+    .slide.zooming img {
+      transform:
+        translate(-50%, calc(-50% - 1.5rem))
+        translate(var(--pan-x, 0px), var(--pan-y, 0px))
+        scale(var(--scale, 1));
+      transition: none;
+    }
+
+    .slide.zooming.zooming-paused img {
+      transition: opacity 0.3s ease, transform 0.33s ease;
+    }
+
+    .slide.zooming.panning img {
+      transition: none;
+    }
+
     .slide img.high-resolution {
       --resolution-opacity: 0;
+      pointer-events: none;
     }
 
     .slide img.high-resolution.loaded {
       --resolution-opacity: 1;
+      pointer-events: auto;
     }
 
     .status {
@@ -143,7 +190,16 @@
         max-height: 98dvh;
         max-width: calc(98vw - 6rem);
         max-width: calc(98dvw - 6rem);
-        transform: translate(-50%, -50%);
+        transform:
+          translate(-50%, -50%)
+          translateY(var(--drag-y, 0px));
+      }
+
+      .slide.zooming img {
+        transform:
+          translate(-50%, -50%)
+          translate(var(--pan-x, 0px), var(--pan-y, 0px))
+          scale(var(--scale, 1));
       }
     }
 
@@ -164,6 +220,7 @@
 
     @media (prefers-reduced-motion: reduce) {
       .modal,
+      .slide,
       .slide img {
         transition: none;
       }

data/assets/lightbox.js

@@ -1,12 +1,21 @@
 (function () {
   "use strict";
 
+  var DOUBLE_TAP_MAX_MS = 300;
+  var DOUBLE_TAP_MAX_DISTANCE = 30;
+  var DOUBLE_TAP_ZOOM_SCALE = 2;
+  var TAP_MAX_DISTANCE = 10;
+
   if (!window.customElements || window.customElements.get("shoot-lightbox")) return;
 
   function getImage(photo) {
     return photo.querySelector("img");
   }
 
+  function distanceBetween(first, second) {
+    return Math.hypot(second.clientX - first.clientX, second.clientY - first.clientY);
+  }
+
   class ShootLightbox extends HTMLElement {
     constructor() {
       super();
@@ -25,6 +34,14 @@
       if (!this.photos.length) return;
 
       this.currentPhoto = 0;
+      this.maxTouches = 0;
+      this.touchStarts = [];
+      this.zoomScale = 1;
+      this.panX = 0;
+      this.panY = 0;
+      this.startPan = { x: null, y: null };
+      this.lastTap = null;
+
       this.modal = this.shadowRoot.querySelector(".modal");
       this.track = this.shadowRoot.querySelector(".track");
       this.previousButton = this.shadowRoot.querySelector(".previous");
@@ -49,7 +66,7 @@
         image.loading = "eager";
         image.decoding = "async";
         image.draggable = false;
-        image.addEventListener("click", (event) => event.stopPropagation());
+        this.bindImageEvents(image);
 
         slide.appendChild(image);
         this.track.appendChild(slide);
@@ -58,6 +75,14 @@
       this.slides = Array.from(this.track.querySelectorAll(".slide"));
     }
 
+    bindImageEvents(image) {
+      image.addEventListener("click", (event) => event.stopPropagation());
+      image.addEventListener("touchstart", this.onTouchStart, { passive: false });
+      image.addEventListener("touchmove", this.onTouchMove, { passive: false });
+      image.addEventListener("touchend", this.onTouchEnd, { passive: false });
+      image.addEventListener("touchcancel", this.onTouchCancel, { passive: false });
+    }
+
     loadHighResolutionImage(slide, photo) {
       if (!slide || !photo.href || slide.dataset.highResolutionRequested) return;
 
@@ -80,7 +105,7 @@
       image.loading = "eager";
       image.decoding = "async";
       image.draggable = false;
-      image.addEventListener("click", (event) => event.stopPropagation());
+      this.bindImageEvents(image);
 
       var reveal = () => {
         if (revealed) return;
@@ -111,6 +136,7 @@
       this.previousButton.addEventListener("click", this.previous);
       this.nextButton.addEventListener("click", this.next);
       this.closeButton.addEventListener("click", this.close);
+      this.modal.addEventListener("click", this.close);
       this.track.addEventListener("scroll", this.onScroll, { passive: true });
       document.addEventListener("keydown", this.onKeydown);
       window.addEventListener("resize", this.onResize, { passive: true });
@@ -134,11 +160,20 @@
         event.stopPropagation();
       }
 
-      if (this.modal.classList.contains("hidden")) return;
+      if (this.modal.classList.contains("hidden") || this.zoomScale !== 1) return;
+
+      var slide = this.getCurrentSlide();
 
       this.modal.classList.add("hidden");
       this.modal.setAttribute("aria-hidden", "true");
       document.documentElement.classList.remove("lightbox-open");
+      this.lastTap = null;
+
+      if (slide && slide.classList.contains("settling")) {
+        this.scheduleGestureReset(slide);
+      } else {
+        this.resetGestureState(slide);
+      }
 
       if (this.previouslyFocused) this.previouslyFocused.focus({ preventScroll: true });
     };
@@ -163,7 +198,18 @@
       return this.currentPhoto >= this.photos.length - 1;
     }
 
+    getCurrentSlide() {
+      return this.slides[this.currentPhoto];
+    }
+
+    getCurrentImage() {
+      var slide = this.getCurrentSlide();
+      return slide && (slide.querySelector(".high-resolution.loaded") || slide.querySelector("img"));
+    }
+
     updateCurrentPhoto(index, behavior) {
+      if (this.zoomScale !== 1) this.resetZoomState(this.getCurrentSlide());
+
       this.currentPhoto = Math.max(0, Math.min(this.photos.length - 1, index));
       this.track.scrollTo({
         left: this.currentPhoto * this.track.clientWidth,
@@ -180,7 +226,7 @@
     }
 
     onKeydown = (event) => {
-      if (this.modal.classList.contains("hidden")) return;
+      if (this.modal.classList.contains("hidden") || this.zoomScale !== 1) return;
 
       if (event.key === "ArrowLeft") this.previous(event);
       if (event.key === "ArrowRight") this.next(event);
@@ -191,10 +237,16 @@
       window.clearTimeout(this.scrollSyncTimeout);
       this.scrollSyncTimeout = window.setTimeout(() => {
         var width = this.track.clientWidth || window.innerWidth;
-        this.currentPhoto = Math.max(
+        var nextPhoto = Math.max(
           0,
           Math.min(this.photos.length - 1, Math.round(this.track.scrollLeft / width))
         );
+
+        if (nextPhoto !== this.currentPhoto && this.zoomScale !== 1) {
+          this.resetZoomState(this.getCurrentSlide());
+        }
+
+        this.currentPhoto = nextPhoto;
         this.updateControls();
         this.loadHighResolutionImage(this.slides[this.currentPhoto], this.photos[this.currentPhoto]);
       }, 100);
@@ -204,6 +256,256 @@
       if (this.modal.classList.contains("hidden")) return;
       this.updateCurrentPhoto(this.currentPhoto, "auto");
     };
+
+    onTouchStart = (event) => {
+      if (this.getCurrentSlide().classList.contains("settling")) this.resetGestureState();
+
+      this.touchStarts = Array.from(event.targetTouches);
+      this.maxTouches = Math.max(this.maxTouches, event.targetTouches.length);
+      this.startPan = { x: null, y: null };
+
+      if (this.touchStarts.length === 1) this.gestureDirection = undefined;
+    };
+
+    onTouchMove = (event) => {
+      this.maxTouches = Math.max(this.maxTouches, event.targetTouches.length);
+
+      if (this.maxTouches >= 2) {
+        this.pinchToZoom(event);
+      } else if (this.zoomScale === 1) {
+        this.maybeApplyVerticalDrag(event);
+      } else {
+        this.panZoomedImage(event);
+      }
+    };
+
+    onTouchEnd = (event) => {
+      if (event.targetTouches.length !== 0) return;
+
+      var slide = this.getCurrentSlide();
+
+      if (this.isDoubleTap(event)) {
+        if (this.zoomScale === 1) {
+          this.doubleTapZoomIn(event);
+        } else {
+          this.resetZoomState(slide);
+        }
+      } else if (this.zoomScale === 1) {
+        if (this.maxTouches === 1) this.finishVerticalDrag(event);
+        if (this.maxTouches >= 2) this.resetZoomState(slide);
+      } else if (this.maxTouches === 1) {
+        this.finishPanning();
+      } else if (this.maxTouches >= 2) {
+        this.pauseZooming();
+      }
+
+      this.maxTouches = 0;
+    };
+
+    onTouchCancel = () => {
+      this.lastTap = null;
+      this.maxTouches = 0;
+
+      if (this.zoomScale === 1) {
+        this.resetGestureState();
+      } else {
+        this.pauseZooming();
+      }
+    };
+
+    isDoubleTap(event) {
+      var touch = event.changedTouches[0];
+      var startedAsTap = touch &&
+        this.maxTouches === 1 &&
+        !this.gestureDirection &&
+        this.touchStarts[0] &&
+        distanceBetween(this.touchStarts[0], touch) < TAP_MAX_DISTANCE;
+
+      if (!startedAsTap) {
+        this.lastTap = null;
+        return false;
+      }
+
+      var isDoubleTap = this.lastTap &&
+        event.timeStamp - this.lastTap.time < DOUBLE_TAP_MAX_MS &&
+        distanceBetween(this.lastTap.touch, touch) < DOUBLE_TAP_MAX_DISTANCE;
+
+      this.lastTap = isDoubleTap ? null : { time: event.timeStamp, touch: touch };
+      return Boolean(isDoubleTap);
+    }
+
+    doubleTapZoomIn(event) {
+      this.resetGestureState();
+
+      var slide = this.getCurrentSlide();
+      var image = this.getCurrentImage();
+      var rect = image.getBoundingClientRect();
+
+      this.zoomScale = DOUBLE_TAP_ZOOM_SCALE;
+      this.panX = (1 - DOUBLE_TAP_ZOOM_SCALE) *
+        ((event.changedTouches[0].clientX - rect.left) - image.offsetWidth / 2);
+      this.panY = (1 - DOUBLE_TAP_ZOOM_SCALE) *
+        ((event.changedTouches[0].clientY - rect.top) - image.offsetHeight / 2);
+
+      slide.classList.add("zooming", "zooming-paused");
+      this.modal.classList.add("zoomed");
+      this.applyZoomStyles(slide);
+    }
+
+    pinchToZoom(event) {
+      var slide = this.getCurrentSlide();
+      if (slide.classList.contains("dragging") || event.targetTouches.length < 2) return;
+
+      var image = this.getCurrentImage();
+      var rect = image.getBoundingClientRect();
+      var firstTouch = event.targetTouches[0];
+      var secondTouch = event.targetTouches[1];
+      var distance = distanceBetween(firstTouch, secondTouch);
+      var previousScale = this.zoomScale;
+
+      event.preventDefault();
+      slide.classList.add("zooming");
+      slide.classList.remove("zooming-paused");
+      this.modal.classList.add("zoomed");
+
+      if (this.startDistance == null) {
+        this.startDistance = distanceBetween(this.touchStarts[0], this.touchStarts[1]);
+        this.startScale = this.zoomScale;
+        this.zoomAnchorPhotoX = ((firstTouch.clientX + secondTouch.clientX) / 2 - rect.left) / previousScale;
+        this.zoomAnchorPhotoY = ((firstTouch.clientY + secondTouch.clientY) / 2 - rect.top) / previousScale;
+      }
+
+      this.zoomScale = Math.max(1, this.startScale * (distance / this.startDistance));
+
+      var midpointX = (firstTouch.clientX + secondTouch.clientX) / 2;
+      var midpointY = (firstTouch.clientY + secondTouch.clientY) / 2;
+
+      this.panX += (midpointX - rect.left) - this.zoomScale * this.zoomAnchorPhotoX +
+        (image.offsetWidth / 2) * (this.zoomScale - previousScale);
+      this.panY += (midpointY - rect.top) - this.zoomScale * this.zoomAnchorPhotoY +
+        (image.offsetHeight / 2) * (this.zoomScale - previousScale);
+
+      this.applyZoomStyles(slide);
+    }
+
+    panZoomedImage(event) {
+      event.preventDefault();
+
+      var slide = this.getCurrentSlide();
+      var image = this.getCurrentImage();
+      var rect = image.getBoundingClientRect();
+      var touch = event.targetTouches[0];
+
+      if (this.startPan.x == null || this.startPan.y == null) {
+        slide.classList.add("panning");
+        this.startPan = {
+          x: (touch.clientX - rect.left) / this.zoomScale,
+          y: (touch.clientY - rect.top) / this.zoomScale
+        };
+      }
+
+      this.panX += (touch.clientX - rect.left) - this.startPan.x * this.zoomScale;
+      this.panY += (touch.clientY - rect.top) - this.startPan.y * this.zoomScale;
+      this.applyZoomStyles(slide);
+    }
+
+    applyZoomStyles(slide) {
+      slide.style.setProperty("--scale", this.zoomScale);
+      slide.style.setProperty("--pan-x", this.panX + "px");
+      slide.style.setProperty("--pan-y", this.panY + "px");
+    }
+
+    maybeApplyVerticalDrag(event) {
+      var touch = event.targetTouches[0];
+      if (!touch || !this.touchStarts[0]) return;
+
+      if (!this.gestureDirection && distanceBetween(this.touchStarts[0], touch) >= TAP_MAX_DISTANCE) {
+        this.gestureDirection = Math.abs(touch.clientX - this.touchStarts[0].clientX) >
+          Math.abs(touch.clientY - this.touchStarts[0].clientY) ? "horizontal" : "vertical";
+      }
+
+      if (this.gestureDirection !== "vertical") return;
+
+      event.preventDefault();
+      this.track.style.scrollSnapType = "none";
+      this.track.style.overflowX = "hidden";
+      this.applyVerticalDrag(touch.clientY - this.touchStarts[0].clientY);
+    }
+
+    applyVerticalDrag(distance) {
+      var slide = this.getCurrentSlide();
+      var maxDrag = window.innerHeight * 0.5;
+      var opacity = Math.max(0, Math.min(1, 1 - Math.abs(distance) / maxDrag));
+
+      slide.classList.add("dragging");
+      slide.style.setProperty("--drag-y", distance + "px");
+      slide.style.setProperty("--drag-opacity", opacity);
+    }
+
+    finishVerticalDrag(event) {
+      if (this.gestureDirection !== "vertical") return;
+
+      var slide = this.getCurrentSlide();
+      var distance = event.changedTouches[0].clientY - this.touchStarts[0].clientY;
+      var threshold = Math.min(window.innerHeight * 0.3, 150);
+
+      slide.classList.add("settling");
+
+      if (Math.abs(distance) < threshold) {
+        slide.style.setProperty("--drag-y", "0px");
+        slide.style.setProperty("--drag-opacity", "1");
+        this.scheduleGestureReset(slide);
+        return;
+      }
+
+      slide.style.setProperty("--drag-y", (distance > 0 ? distance + 200 : distance - 200) + "px");
+      slide.style.setProperty("--drag-opacity", "0");
+      this.close();
+    }
+
+    finishPanning() {
+      this.startPan = { x: null, y: null };
+      this.getCurrentSlide().classList.remove("panning");
+    }
+
+    pauseZooming() {
+      this.startDistance = null;
+      this.getCurrentSlide().classList.add("zooming-paused");
+    }
+
+    resetZoomState(slide) {
+      if (!slide) return;
+
+      this.resetGestureState(slide);
+      slide.classList.remove("zooming", "zooming-paused", "panning");
+      slide.style.removeProperty("--scale");
+      slide.style.removeProperty("--pan-x");
+      slide.style.removeProperty("--pan-y");
+      this.modal.classList.remove("zoomed");
+      this.zoomScale = 1;
+      this.panX = 0;
+      this.panY = 0;
+    }
+
+    scheduleGestureReset(slide) {
+      window.clearTimeout(this.gestureResetTimeout);
+      this.gestureResetTimeout = window.setTimeout(() => this.resetGestureState(slide), 350);
+    }
+
+    resetGestureState = (slide) => {
+      slide = slide || this.getCurrentSlide();
+      if (!slide) return;
+
+      window.clearTimeout(this.gestureResetTimeout);
+      slide.classList.remove("dragging", "settling");
+      slide.style.removeProperty("--drag-y");
+      slide.style.removeProperty("--drag-opacity");
+      this.track.style.scrollSnapType = "";
+      this.track.style.overflowX = "";
+      this.maxTouches = 0;
+      this.startDistance = null;
+      this.gestureDirection = undefined;
+    };
   }
 
   window.customElements.define("shoot-lightbox", ShootLightbox);

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: yefeme
 version: !ruby/object:Gem::Version
-  version: 0.8.9
+  version: 0.8.10
 platform: ruby
 authors:
 - Yefim Vedernikoff
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-09-14 00:00:00.000000000 Z
+date: 2026-10-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll