add swipes by gestures in settings as an option, hammer.js for mobile

2025-10-29 20:37:15 +01:00
parent d8fbf967b3
commit 560e8e132d
4 changed files with 1430 additions and 59 deletions
@@ -24,33 +24,114 @@ var reader;
        $("#bookmark, #show-Bookmarks").remove();
    }

-    // Enable swipe support
-    // I have no idea why swiperRight/swiperLeft from plugins is not working, events just don't get fired
-    var touchStart = 0;
-    var touchEnd = 0;
+    // Navigation mode: 'sides' or 'gestures'
+    var hammerManagers = [];

-    reader.rendition.on("touchstart", function (event) {
-        touchStart = event.changedTouches[0].screenX;
-    });
-    reader.rendition.on("touchend", function (event) {
-        touchEnd = event.changedTouches[0].screenX;
-        if (touchStart < touchEnd) {
-            if (reader.book.package.metadata.direction === "rtl") {
-                reader.rendition.next();
-            } else {
-                reader.rendition.prev();
-            }
-            // Swiped Right
+    function hasActiveSelection(win) {
+        try {
+            var sel = win.getSelection && win.getSelection();
+            return sel && sel.type === "Range" && sel.toString().length > 0;
+        } catch (e) {
+            return false;
        }
-        if (touchStart > touchEnd) {
-            if (reader.book.package.metadata.direction === "rtl") {
-                reader.rendition.prev();
-            } else {
-                reader.rendition.next();
-            }
-            // Swiped Left
+    }
+
+    function bindHammer(target, isIframeDoc) {
+        if (typeof Hammer === "undefined") {
+            return;
        }
-    });
+        var mc = new Hammer(target);
+        mc.get("swipe").set({
+            direction: Hammer.DIRECTION_HORIZONTAL,
+            threshold: 25,
+            velocity: 0.3,
+        });
+        mc.on("swipeleft swiperight", function (ev) {
+            if (!window.cwGesturesEnabled) return;
+            if (ev.pointers && ev.pointers.length > 1) return; // ignore multi-touch
+            var win = isIframeDoc ? target.defaultView : window;
+            if (hasActiveSelection(win)) return; // do not navigate when selecting text
+            // Mapping per requirement: L->R = PREV, R->L = NEXT (independent of RTL)
+            if (ev.type === "swipeleft") reader.rendition.next();
+            else reader.rendition.prev();
+        });
+        hammerManagers.push(mc);
+    }
+
+    function destroyHammers() {
+        while (hammerManagers.length) {
+            var mc = hammerManagers.pop();
+            try {
+                mc.destroy();
+            } catch (e) {}
+        }
+    }
+
+    function enableSideClicks() {
+        var prevBtn = document.getElementById("prev");
+        var nextBtn = document.getElementById("next");
+        if (prevBtn) {
+            prevBtn.style.display = "";
+            prevBtn.onclick = function () {
+                reader.rendition.prev();
+            };
+        }
+        if (nextBtn) {
+            nextBtn.style.display = "";
+            nextBtn.onclick = function () {
+                reader.rendition.next();
+            };
+        }
+    }
+
+    function disableSideClicks() {
+        var prevBtn = document.getElementById("prev");
+        var nextBtn = document.getElementById("next");
+        if (prevBtn) {
+            prevBtn.onclick = null;
+            prevBtn.style.display = "none";
+        }
+        if (nextBtn) {
+            nextBtn.onclick = null;
+            nextBtn.style.display = "none";
+        }
+    }
+
+    function enableGestures() {
+        // Bind to outer container
+        if (reader && reader.rendition && reader.rendition.container) {
+            bindHammer(reader.rendition.container, false);
+        }
+        // Bind to inner iframes when rendered
+        reader.rendition.on("rendered", function (section, contents) {
+            var docEl = contents.document;
+            if (docEl && docEl.documentElement && docEl.documentElement.style) {
+                docEl.documentElement.style.touchAction = "pan-y";
+            }
+            bindHammer(docEl, true);
+        });
+    }
+
+    window.applyNavigationMode = function (mode) {
+        if (!window.cwInitialized) {
+            destroyHammers();
+            enableGestures();
+            window.cwInitialized = true;
+        }
+
+        if (mode === "sides") {
+            enableSideClicks();
+            window.cwGesturesEnabled = false;
+        } else {
+            disableSideClicks();
+            window.cwGesturesEnabled = true;
+        }
+    };
+
+    // Apply saved or default mode on load
+    var savedMode =
+        localStorage.getItem("calibre.reader.navMode") || "gestures";
+    window.applyNavigationMode(savedMode);

    // Update progress percentage
    let progressDiv = document.getElementById("progress");