Merge 0da491f into 7fca255

midstar · Jan 28, 2020 · 494a460 · 494a460
2 parents 7fca255 + 0da491f
commit 494a460
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -35,23 +35,35 @@ MediaWEB is well suited to run on small platforms such as Raspberry Pi, Banana P
 
 ## Screenshots
 
-Browse your media, multi-touch pitch to increase/decrease size of thumbnails:
+Browse your media.
+
+To increase/decrease size of thumbnails do one of following:
+
+* Touch: Use two fingers and pitch
+* Keboard: <kbd>+</kbd> (increase) or <kbd>-</kbd> (decrease) 
 
 ![browser](testmedia/screenshot_browser.jpg)
 
-View your images and play your videos:
+View your images and play your videos
 
 ![viewer](testmedia/screenshot_viewer.jpg)
 
-Swipe (mouse or mobile touch) to switch between images/videos. It is also possible to use keyboard; left arrow key (previous image), right (next image), page up (first image) and page down (last image):
+To navigate between the images do one of following:
+
+* Touch: Swipe right (previous) or left (next)
+* Mouse: Drag right (previous) or left (next)
+* Keyboard: <kbd><</KBD> (previous), <kbd>></KBD> (next), <kbd>Page Up</KBD> (first) or <kbd>Page Down</KBD> (last)
 
 ![viewer](testmedia/screenshot_viewer_swipe.jpg)
 
-Multi-touch pitch to zoom images, or double click/tap on image to zoom x2:
+To zoom image:
+
+* Touch: Use two fingers and pitch alternatively double tap to zoom x2
+* Mouse: Scroll up (zoom in), down (zoom out) alternatively double click to zoom x2
 
 ![viewer](testmedia/screenshot_viewer_zoom.jpg)
 
-Interface suited for mobile devices:
+Interface suited for mobile devices
 
 ![viewer](testmedia/screenshot_mobile.jpg)
 

diff --git a/templates/index.html b/templates/index.html
@@ -1,4 +1,5 @@
-<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+<meta charset="utf-8"/>
 <html>
 <head>
 <title>MediaWEB</title>
@@ -320,6 +321,7 @@
     // Setup CSS based on screen size
     onScreenSizeChange();
     window.addEventListener("resize", onScreenSizeChange);
+    document.onkeydown = browserOnKeyDown;
 
     // Check for URL path parameter
     var path = ""
@@ -359,22 +361,22 @@
     var minItemWidth = Math.max(40, unScaledMinItemWidth * scale);
     minItemWidth = Math.min(minItemWidth, windowWidth - itemMargin * 2);
 
-    // Decrease font size if necessary:
-    if (minItemWidth <= 80) {
-        itemFont = 5;
-    } else if (minItemWidth <= 100) {
-        itemFont = 8;
-    } else if (minItemWidth <= 140) {
-        itemFont = 11;
-    }
-
     // Adjust the item width so that the items are evently distributed
     // over the screen
     var itemsPerRow = Math.floor((windowWidth - itemMargin) / (itemMargin + minItemWidth));
     var extraWidthTotal = (windowWidth - itemMargin) - (itemsPerRow * (itemMargin + minItemWidth));
     var extraWidthPerItem = Math.floor(extraWidthTotal / itemsPerRow);
     var itemWidth = minItemWidth + extraWidthPerItem;
 
+    // Decrease font size if necessary:
+    if (itemWidth <= 80) {
+        itemFont = 5;
+    } else if (itemWidth <= 100) {
+        itemFont = 8;
+    } else if (itemWidth <= 140) {
+        itemFont = 11;
+    }
+
     root.setProperty("--global-item-width", itemWidth + "px");
     root.setProperty("--global-item-margin", itemMargin + "px");
     root.setProperty("--global-item-font", itemFont + "px");
@@ -547,7 +549,7 @@
             showItemsLoader();
 
             // Check again after 0.5 seconds
-            setTimeout(checkIfAllThumbsLoaded, 500)
+            setTimeout(checkIfAllThumbsLoaded, 500);
             return
         }
     }
@@ -585,6 +587,20 @@
 var generalTouchDist0;  // Initial touch distance
 var generalTouchScale0; // Initial touch scale
 
+// Called if key is pressed
+// Will be disabled when media viewer is opened
+function browserOnKeyDown(e) {
+    e = e || window.event;
+    if (e.key == '+') {
+        // + = zoom in
+        setupFileItemSizes(getCurrentScale() + 0.2);
+    }
+    else if (e.key == '-') {
+        // - = zoom out
+        setupFileItemSizes(getCurrentScale() - 0.2);
+    } 
+}
+
 // Called on touch down independently on the view
 function touchDown(e) { 
     if(!isMediaViewerOpen() && e.touches.length == 2) {
@@ -608,7 +624,7 @@
 function getCurrentScale() {
     const params = new URLSearchParams(window.location.search);
     if (params.has("scale")) {
-        return params.get("scale");
+        return parseFloat(params.get("scale"));
     }
     return 1;
 }
@@ -669,6 +685,7 @@
         mediaContainers.addEventListener('touchend', viewMouseOrTouchUp, false);
 
         mediaContainers.addEventListener('dblclick', viewMouseOrTouchDblClick, false);
+        mediaContainers.addEventListener('wheel', viewMouseWheel, false);
 
         mediaZoomContainer.addEventListener('mousemove', zoomMouseOrTouchMove, false);
         mediaZoomContainer.addEventListener('touchmove', zoomMouseOrTouchMove, false);
@@ -679,7 +696,8 @@
         mediaZoomContainer.addEventListener('mouseup', zoomMouseOrTouchUp, false);
         mediaZoomContainer.addEventListener('touchend', zoomMouseOrTouchUp, false); 
 
-        mediaZoomContainer.addEventListener('dblclick', zoomMouseOrTouchDblClick, false);      
+        mediaZoomContainer.addEventListener('dblclick', zoomMouseOrTouchDblClick, false);     
+        mediaZoomContainer.addEventListener('wheel', zoomViewMouseWheel, false); 
 
         document.getElementById("mediaViewerClose").onclick = closeMediaViewer;
 
@@ -698,6 +716,7 @@
     setMediaContainersTo(mediaIndex);
     updateURL(mediaIndex);
     mediaViewer.style.display = "block";
+    // Replace browser keydown with viewer keydown
     document.onkeydown = function(e) {
         e = e || window.event;
         if (e.keyCode == '27') {
@@ -733,7 +752,7 @@
 function closeMediaViewer() {
     hideZoom();
     mediaViewer.style.display = "none";
-    document.onkeydown = null; // Disable arrow keys
+    document.onkeydown = browserOnKeyDown; // Put back browser key down
 
     // Remove file for URL
     const params = new URLSearchParams(window.location.search);
@@ -1127,6 +1146,16 @@
     zoomImage(unify(e).clientX, unify(e).clientY, z0 * 2);
 }
 
+// Called on mouse wheel in viewer
+function viewMouseWheel(e) {
+    e.preventDefault();
+    if (e.deltaY < 0) {
+        // Mouse wheel scrolled uppwards - start zoom
+        showZoom();
+        zoomImage(unify(e).clientX, unify(e).clientY, z0 * 1.4);
+    }
+}
+
 // Common for one finger touch and mouse
 function unify(e) { 
     return e.changedTouches ? e.changedTouches[0] : e 
@@ -1290,12 +1319,31 @@
     }
 }
 
-// Called on mouse/touch double click om zoom image
+// Called on mouse/touch double click on zoom image
 // Will exit zooming
 function zoomMouseOrTouchDblClick(e) {
     hideZoom();
 }
 
+// Called on mouse wheel in viewer on zoom image
+// Will zoom in/out
+function zoomViewMouseWheel(e) {
+    e.preventDefault();
+    if (e.deltaY < 0) {
+        // Mouse wheel scrolled uppwards - zoom in
+        zoomImage(unify(e).clientX, unify(e).clientY, z + 0.2);
+    } else if (e.deltaY > 0) {
+        // Mouse wheel scrolled downwards - zoom out
+        var newZ = z - 0.2;
+        if (newZ <= minZ) {
+            // When zoomed to original size, close the zoom view.
+            hideZoom();
+        } else {
+            zoomImage(unify(e).clientX, unify(e).clientY, z - 0.2);
+        }
+    }
+}
+
 
 // Calculate distance between two fingers in touch
 function fingerDistance(finger1, finger2) {
@@ -1416,5 +1464,5 @@
     </div>
 </div>
 
-  </body>
+</body>
 </html>