Implement pinch zooming on mobile (#11)

Fixes #10

Author: bep

assets/css/gallerydeluxe/styles.css

@@ -27,6 +27,12 @@
   background-color: rgba(0, 0, 0, 0.8);
 }
 
+.gd-modal-content-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
 /* Modal Content (image) */
 .gd-modal-content {
   max-width: 100%;

assets/js/gallerydeluxe/src/helpers.js

@@ -1,16 +1,25 @@
 'use strict';
 
 export function newSwiper(el, callback) {
+	const debug = 0 ? console.log.bind(console, '[swiper]') : function () {};
+
+	const simulateTwoFingers = false;
+
 	// Number of pixels between touch start/end for us to consider it a swipe.
 	const moveThreshold = 50;
 
-	var touches = {
-		touchstart: { x: -1, y: -1 },
-		touchmove: { x: -1, y: -1 },
+	const fingerDistance = (touches) => {
+		return Math.hypot(touches[0].pageX - touches[1].pageX, touches[0].pageY - touches[1].pageY);
+	};
+
+	var touch = {
+		touchstart: { x: -1, y: -1, d: -1 },
+		touchmove: { x: -1, y: -1, d: -1 },
+		multitouch: false,
 	};
 
 	// direction returns right, left, up or down  or empty if below moveThreshold.
-	touches.direction = function () {
+	touch.direction = function () {
 		if (this.touchmove.x == -1) {
 			// A regular click.
 			return '';
@@ -27,32 +36,78 @@ export function newSwiper(el, callback) {
 		return distancex > 0 ? 'right' : 'left';
 	};
 
-	touches.reset = function () {
+	touch.reset = function () {
 		(this.touchstart.x = -1), (this.touchstart.y = -1);
 		(this.touchmove.x = -1), (this.touchmove.y = -1);
+		(this.touchstart.d = -1), (this.touchmove.d = -1);
+		this.multitouch = false;
+	};
+
+	touch.update = function (event, touches) {
+		this.multitouch = this.multitouch || touches.length > 1;
+		if (touches.length > 1) {
+			this[event.type].d = fingerDistance(touches);
+		}
+		this[event.type].x = touches[0].pageX;
+		this[event.type].y = touches[0].pageY;
 	};
 
-	touches.update = function (event, touch) {
-		this[event.type].x = touch.pageX;
-		this[event.type].y = touch.pageY;
+	const pinch = function (event, touches) {
+		let scale = 1;
+		if (touches.length === 2) {
+			// Two fingers on screen.
+			if (event.scale) {
+				scale = event.scale;
+			} else {
+				scale = touch.touchmove.d / touch.touchstart.d;
+				scale = Math.round(scale * 100) / 100;
+			}
+			if (scale < 1) {
+				scale = 1;
+			}
+			let distancex = touch.touchmove.x - touch.touchstart.x;
+			let distancey = touch.touchmove.y - touch.touchstart.y;
+
+			el.style.transform = `translate3d(${distancex}px, ${distancey}px, 0) scale(${scale})`;
+			el.style.zIndex = 1000;
+		} else {
+			// One finger on screen.
+			el.style.transform = '';
+			el.style.zIndex = '';
+		}
 	};
 
 	var handleTouch = function (event) {
+		debug('event', event.type);
 		if (typeof event !== 'undefined' && typeof event.touches !== 'undefined') {
-			var touch = event.touches[0];
+			let touches = event.touches;
+
+			if (simulateTwoFingers && touches.length === 1) {
+				touches = [
+					{ pageX: touches[0].pageX, pageY: touches[0].pageY },
+					{ pageX: 0, pageY: 0 },
+				];
+			}
 			switch (event.type) {
 				case 'touchstart':
-					touches.reset();
-					touches.update(event, touch);
+					touch.reset();
+					touch.update(event, touches);
 					break;
 				case 'touchmove':
-					touches.update(event, touch);
+					touch.update(event, touches);
+					pinch(event, touches);
 					break;
 				case 'touchend':
-					let direction = touches.direction();
-					if (direction) {
-						callback(direction);
+					el.style.transform = '';
+					if (!touch.multitouch) {
+						// Only consider a swipe if we have one finger on screen.
+						let direction = touch.direction();
+						debug('direction', direction);
+						if (direction) {
+							callback(direction);
+						}
 					}
+
 					break;
 				default:
 					break;

assets/js/gallerydeluxe/src/index.js

@@ -8,6 +8,17 @@ var debug = 0 ? console.log.bind(console, '[gallery-deluxe]') : function () {};
 
 let GalleryDeluxe = {
 	init: async function () {
+		// Having the gallery zoomable makes for a very confusing UI.
+		// This seem to be the only way to disable it on Safari on IOS.
+		document.addEventListener(
+			'touchmove',
+			function (event) {
+				if (event.scale !== 1) {
+					event.preventDefault();
+				}
+			},
+			{ passive: false }
+		);
 		// One gallery per page (for now).
 		const galleryId = 'gallerydeluxe';
 		const dataAttributeName = 'data-gd-image-data-url';
@@ -22,22 +33,28 @@ let GalleryDeluxe = {
 
 		// The image opened in the lightbox.
 		let activeImage;
+		let exifTimeoutId;
 
 		// Lightbox setup.
 		const modal = document.getElementById('gd-modal');
-		const modalClose = document.getElementById('gd-modal-close');
+		const modalClose = modal.querySelector('#gd-modal-close');
 
 		const preventDefault = function (e) {
 			// For iphone.
 			e.preventDefault();
 		};
 
+		let imageWrapper = document.createElement('div');
+		imageWrapper.classList.add('gd-modal-content-wrapper');
+		modal.insertBefore(imageWrapper, modal.firstChild);
+
 		const closeModal = (e) => {
 			if (e) {
 				e.preventDefault();
 			}
 
-			modal.removeEventListener('touchmove', preventDefault);
+			imageWrapper.removeEventListener('touchmove', preventDefault);
+			imageWrapper.removeEventListener('gesturestart', preventDefault);
 
 			// Hide the modal.
 			modal.style.display = 'none';
@@ -67,7 +84,7 @@ let GalleryDeluxe = {
 		};
 
 		// Add some basic swipe logic.
-		newSwiper(modal, function (direction) {
+		newSwiper(imageWrapper, function (direction) {
 			swipe(direction);
 		});
 
@@ -86,10 +103,12 @@ let GalleryDeluxe = {
 		});
 
 		const openActiveImage = () => {
-			modal.addEventListener('touchmove', preventDefault);
+			imageWrapper.addEventListener('touchmove', preventDefault);
+			imageWrapper.addEventListener('gesturestart', preventDefault);
 
 			const classLoaded = 'gd-modal-loaded';
 			const classThumbnail = 'gd-modal-thumbnail';
+
 			// Prevent scrolling of the background.
 			document.body.style.overflow = 'hidden';
 			let oldEls = modal.querySelectorAll('.gd-modal-content');
@@ -112,9 +131,13 @@ let GalleryDeluxe = {
 				let modal = document.getElementById('gd-modal');
 
 				if (params.enable_exif) {
-					let exif = document.getElementById('gd-modal-exif');
+					if (exifTimeoutId) {
+						clearTimeout(exifTimeoutId);
+					}
+
+					let exif = modal.querySelector('#gd-modal-exif');
 					const onTimeOutClass = 'gd-modal-exif-ontimeout';
-					exif.classList.remove(onTimeOutClass);
+
 					let child = exif.lastElementChild;
 					while (child) {
 						exif.removeChild(child);
@@ -139,10 +162,11 @@ let GalleryDeluxe = {
 					for (const tag in tags) {
 						addTag(tag, tags[tag]);
 					}
+					exif.classList.remove(onTimeOutClass);
 
-					setTimeout(() => {
+					exifTimeoutId = setTimeout(() => {
 						exif.classList.add(onTimeOutClass);
-					}, 1000);
+					}, 1200);
 				}
 
 				let thumbnail = new Image();
@@ -160,14 +184,14 @@ let GalleryDeluxe = {
 
 				thumbnail.onload = function () {
 					if (thumbnail) {
-						modal.appendChild(thumbnail);
+						imageWrapper.appendChild(thumbnail);
 						removeOldEls();
 					}
 				};
 
 				fullImage.onload = function () {
 					if (fullImage) {
-						modal.appendChild(fullImage);
+						imageWrapper.appendChild(fullImage);
 						fullImage.classList.add(classLoaded);
 						if (thumbnail) {
 							thumbnail.classList.add(classLoaded);

exampleSite/config.toml

@@ -6,6 +6,15 @@ disableKinds = ["taxonomy", "term", "section"]
     [[module.imports]]
         path = "github.com/bep/gallerydeluxe_starter"
 
+[params]
+    # Set to enable Plausible Analytics.
+    plausible_domain = ""
+
+    [params.gallerydeluxe]
+        shuffle     = false
+        reverse     = true
+        enable_exif = false
+
 [imaging]
     resampleFilter = "CatmullRom"
     quality        = 71

exampleSite/hugo.work

@@ -0,0 +1,4 @@
+go 1.19
+
+use .
+use ../../gallerydeluxe_starter