Now pan works as well

midstar · May 18, 2019 · 8b0600f · 8b0600f
1 parent d8d36e2
commit 8b0600f
Showing 1 changed file with 27 additions and 12 deletions.
diff --git a/templates/index.html b/templates/index.html
@@ -980,6 +980,10 @@
 var minZ = 0;
 var maxXOffset = 0; 
 var maxYOffset = 0; 
+var panX = 0; // Last X position during pan
+var panY = 0; // Last Y position during pan
+var pan = false; // Pan (when using single finger or mouse)
+
 
 // Starts zooming and initiates zooming global variables. Returns
 // false if this is a video (videos are not supported to be zoomed)
@@ -1006,12 +1010,9 @@
 
     // Set the x and y position so it match in zoom and swipe Window
     var rect = mediaObject.getBoundingClientRect();
-    xOffset = rect.left;
-    yOffset = rect.top;
-    maxXOffset = xOffset;
-    maxYOffset = yOffset;
-    mediaZoomObject.style.setProperty('--x',xOffset + "px");
-    mediaZoomObject.style.setProperty('--y',yOffset + "px");   
+    maxXOffset = rect.left;
+    maxYOffset = rect.top;
+    setZoomOffset(maxXOffset, maxYOffset); 
 
     // Show the zoom window
     mediaZoomContainer.style.display = "block";  
@@ -1042,9 +1043,13 @@
             // to figure out zoom level later
             dist0 = fingerDistance(e.targetTouches[0],e.targetTouches[1]);
             z0 = z;
+            pan = false;
             return
         }
     }
+    pan = true;
+    panX = unify(e).clientX; // Store start x position
+    panY = unify(e).clientY; // Store start y position
 }
 
 // Called on mouse/touch drag on zoom image
@@ -1061,10 +1066,18 @@
             zoomImage(center.x, center.y, newScale);
         }
     }
+    if (pan) {
+        var xDelta = unify(e).clientX - panX;
+        var yDelta = unify(e).clientY - panY;
+        setZoomOffset(xOffset + xDelta, yOffset + yDelta);
+        panX = unify(e).clientX;
+        panY = unify(e).clientY;
+    }
 }
 
 // Called on mouse/touch up on zoom image
 function zoomMouseOrTouchUp(e) {
+    pan = false;
     if (z == minZ) {
         // When zoomed to original size, close the zoom view.
         hideZoom();
@@ -1119,20 +1132,22 @@
     var xZNew = x * scale;
     var yZNew = y * scale;
 
-    // New offset 
-    xOffset = Math.min(centerX - xZNew, maxXOffset);
-    yOffset = Math.min(centerY - yZNew, maxYOffset);
-
     // Set new scale
     z = scale;
     mediaZoomObject.style.setProperty('--z',z);
 
-    // Set new offset
+    // New offset
+    setZoomOffset(centerX - xZNew, centerY - yZNew);
+}
+
+// Zoom offset will be limited by maxXOffset and maxYOffset.
+function setZoomOffset(x, y) {
+    xOffset = Math.min(x, maxXOffset);
+    yOffset = Math.min(y, maxYOffset);    
     mediaZoomObject.style.setProperty('--x',xOffset + "px");
     mediaZoomObject.style.setProperty('--y',yOffset + "px");
 }
 
-
 </script>
 </head>