yefeme 0.8.6 → 0.8.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a53d4e13b572c6fc98aa23ab01246954cb507ada25c039b2bbe23b411940f1e0
-  data.tar.gz: b0d9f04c159ffbb0461de0d3f7bc4c196d076b4e6306e617c853cc7793402878
+  metadata.gz: ce7aecef49db3c9b1eb4e27cf6834cb84dd58bf97fd329254583afe478921788
+  data.tar.gz: ebae52ad026ca234f6702308a02674a6e2136b408907350f50421c814bf5d477
 SHA512:
-  metadata.gz: 452d2b3a08470c568cf4ac73bdd7c029fef5e44ff0f3526c0cc2d23d301e14e15e4772f9bf78f8d190d9e95882477b0f401a36bf25eff9a674af6323b124bcdf
-  data.tar.gz: edbda65379bb1406841d8bb83c951a59b3e28be7238befc54623000169cd14ab033572fbb1fd8fed43c3e69923f1c2b6db4fca983b819294281fa413541095a2
+  metadata.gz: 47f8597e98ed5afc30468477bc98be4c980a25dcccb2393519b96108399ee71423d41f24cec9e9334d6c4b3ae80a622827faa1e3eeb340e840419dd2fc736744
+  data.tar.gz: 4316454c2484d435fade0b412b795bbe200b38b5310b6b77d701f4676d4b0a98c42a38f411634eae4d7bdd6409714c279d18ff48d2e5e25dc070fd611ca72b0c

data/README.md

@@ -77,7 +77,7 @@ images:
 ---
 ```
 
-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 swipe 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, 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.
 
 ## Contributing
 

data/_includes/light-box.html

@@ -106,7 +106,7 @@
       opacity: var(--resolution-opacity, 1);
       position: absolute;
       top: 50%;
-      touch-action: pan-x;
+      touch-action: manipulation;
       transform: translate(-50%, calc(-50% - 1.5rem));
       transition: opacity 0.3s ease;
       user-select: none;
@@ -122,16 +122,6 @@
       --resolution-opacity: 1;
     }
 
-    .slide img.dragging {
-      opacity: calc(var(--resolution-opacity, 1) * var(--drag-opacity, 1));
-      transform: translate(-50%, calc(-50% - 1.5rem)) translateY(var(--drag-y, 0));
-      transition: none;
-    }
-
-    .slide img.dismissing {
-      transition: opacity 0.2s ease-out, transform 0.2s ease-out;
-    }
-
     .status {
       clip: rect(0 0 0 0);
       clip-path: inset(50%);
@@ -155,10 +145,6 @@
         max-width: calc(98dvw - 6rem);
         transform: translate(-50%, -50%);
       }
-
-      .slide img.dragging {
-        transform: translate(-50%, -50%) translateY(var(--drag-y, 0));
-      }
     }
 
     @media (prefers-color-scheme: dark) {
@@ -178,7 +164,7 @@
 
     @media (prefers-reduced-motion: reduce) {
       .modal,
-      .slide img.dismissing {
+      .slide img {
         transition: none;
       }
     }

data/assets/lightbox.js

@@ -3,8 +3,6 @@
 
   if (!window.customElements || window.customElements.get("shoot-lightbox")) return;
 
-  var VERTICAL_DRAG_DISTANCE = 10;
-
   function getImage(photo) {
     return photo.querySelector("img");
   }
@@ -51,7 +49,7 @@
         image.loading = "eager";
         image.decoding = "async";
         image.draggable = false;
-        this.bindImageEvents(image);
+        image.addEventListener("click", (event) => event.stopPropagation());
 
         slide.appendChild(image);
         this.track.appendChild(slide);
@@ -60,14 +58,6 @@
       this.slides = Array.from(this.track.querySelectorAll(".slide"));
     }
 
-    bindImageEvents(image) {
-      image.addEventListener("click", (event) => event.stopPropagation());
-      image.addEventListener("touchstart", this.startTouch, { passive: true });
-      image.addEventListener("touchmove", this.dragVertically, { passive: false });
-      image.addEventListener("touchend", this.endTouch);
-      image.addEventListener("touchcancel", this.resetGesture);
-    }
-
     loadHighResolutionImage(slide, photo) {
       if (!slide || !photo.href || slide.dataset.highResolutionRequested) return;
 
@@ -90,7 +80,7 @@
       image.loading = "eager";
       image.decoding = "async";
       image.draggable = false;
-      this.bindImageEvents(image);
+      image.addEventListener("click", (event) => event.stopPropagation());
 
       var reveal = () => {
         if (revealed) return;
@@ -121,7 +111,6 @@
       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 });
@@ -150,7 +139,6 @@
       this.modal.classList.add("hidden");
       this.modal.setAttribute("aria-hidden", "true");
       document.documentElement.classList.remove("lightbox-open");
-      this.resetGesture();
 
       if (this.previouslyFocused) this.previouslyFocused.focus({ preventScroll: true });
     };
@@ -216,89 +204,6 @@
       if (this.modal.classList.contains("hidden")) return;
       this.updateCurrentPhoto(this.currentPhoto, "auto");
     };
-
-    startTouch = (event) => {
-      if (event.touches.length !== 1) return;
-
-      this.touchStartX = event.touches[0].clientX;
-      this.touchStartY = event.touches[0].clientY;
-      this.gestureDirection = "undecided";
-    };
-
-    dragVertically = (event) => {
-      if (event.touches.length !== 1 || this.gestureDirection === "horizontal") return;
-
-      var deltaX = Math.abs(event.touches[0].clientX - this.touchStartX);
-      var deltaY = Math.abs(event.touches[0].clientY - this.touchStartY);
-
-      if (this.gestureDirection === "undecided") {
-        if (deltaX < VERTICAL_DRAG_DISTANCE && deltaY < VERTICAL_DRAG_DISTANCE) return;
-        this.gestureDirection = deltaX > deltaY ? "horizontal" : "vertical";
-      }
-
-      if (this.gestureDirection !== "vertical") return;
-
-      event.preventDefault();
-      this.track.style.scrollSnapType = "none";
-      this.track.style.overflowX = "hidden";
-      this.applyVerticalDrag(event.touches[0].clientY - this.touchStartY);
-    };
-
-    applyVerticalDrag(distance) {
-      var images = this.currentImages();
-      if (!images.length) return;
-
-      var maxDrag = window.innerHeight * 0.5;
-      var opacity = Math.max(0, Math.min(1, 1 - Math.abs(distance) / maxDrag));
-
-      images.forEach((image) => {
-        image.classList.add("dragging");
-        image.style.setProperty("--drag-y", distance + "px");
-        image.style.setProperty("--drag-opacity", opacity);
-      });
-    }
-
-    endTouch = (event) => {
-      if (this.gestureDirection !== "vertical") return;
-
-      var distance = event.changedTouches[0].clientY - this.touchStartY;
-      var dismissDistance = Math.min(window.innerHeight * 0.3, 150);
-
-      if (Math.abs(distance) < dismissDistance) {
-        this.resetGesture();
-        return;
-      }
-
-      var images = this.currentImages();
-      if (!images.length) return;
-
-      images.forEach((image) => {
-        image.classList.add("dismissing");
-        image.style.setProperty("--drag-y", (distance > 0 ? distance + 200 : distance - 200) + "px");
-        image.style.setProperty("--drag-opacity", "0");
-      });
-      window.setTimeout(() => this.close(), 200);
-    };
-
-    currentImages() {
-      var slide = this.slides && this.slides[this.currentPhoto];
-      return slide ? Array.from(slide.querySelectorAll("img")) : [];
-    }
-
-    resetGesture = () => {
-      this.currentImages().forEach((image) => {
-        image.classList.remove("dragging", "dismissing");
-        image.style.removeProperty("--drag-y");
-        image.style.removeProperty("--drag-opacity");
-      });
-
-      if (this.track) {
-        this.track.style.removeProperty("scroll-snap-type");
-        this.track.style.removeProperty("overflow-x");
-      }
-
-      this.gestureDirection = "undecided";
-    };
   }
 
   window.customElements.define("shoot-lightbox", ShootLightbox);

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: yefeme
 version: !ruby/object:Gem::Version
-  version: 0.8.6
+  version: 0.8.8
 platform: ruby
 authors:
 - Yefim Vedernikoff