Kaynağa Gözat

Add double tap detection for next/previous page navigation

3ddysan 7 yıl önce
ebeveyn
işleme
fc473f1d11
3 değiştirilmiş dosya ile 38 ekleme ve 6 silme
  1. 2 2
      ui/static/js.go
  2. 3 3
      ui/static/js/bootstrap.js
  3. 33 1
      ui/static/js/touch_handler.js

Dosya farkı çok büyük olduğundan ihmal edildi
+ 2 - 2
ui/static/js.go


+ 3 - 3
ui/static/js/bootstrap.js

@@ -1,9 +1,6 @@
 document.addEventListener("DOMContentLoaded", function() {
     FormHandler.handleSubmitButtons();
 
-    let touchHandler = new TouchHandler();
-    touchHandler.listen();
-
     let navHandler = new NavHandler();
     let keyboardHandler = new KeyboardHandler();
     keyboardHandler.on("g u", () => navHandler.goToPage("unread"));
@@ -33,6 +30,9 @@ document.addEventListener("DOMContentLoaded", function() {
     keyboardHandler.on("Escape", () => ModalHandler.close());
     keyboardHandler.listen();
 
+    let touchHandler = new TouchHandler(navHandler);
+    touchHandler.listen();
+
     let mouseHandler = new MouseHandler();
     mouseHandler.onClick("a[data-save-entry]", (event) => {
         EntryHandler.saveEntry(event.target);

+ 33 - 1
ui/static/js/touch_handler.js

@@ -1,5 +1,6 @@
 class TouchHandler {
-    constructor() {
+    constructor(navHandler) {
+        this.navHandler = navHandler;
         this.reset();
     }
 
@@ -93,5 +94,36 @@ class TouchHandler {
             element.addEventListener("touchend", (e) => this.onTouchEnd(e), hasPassiveOption ? { passive: true } : false);
             element.addEventListener("touchcancel", () => this.reset(), hasPassiveOption ? { passive: true } : false);
         });
+
+        let entryContentElement = document.querySelector(".entry-content");
+        if (entryContentElement) {
+            let doubleTapTimers = {
+                previous: null,
+                next: null
+            };
+    
+            const detectDoubleTap = (doubleTapTimer, event) => {
+                const timer = doubleTapTimers[doubleTapTimer];
+                if (timer === null) {
+                    doubleTapTimers[doubleTapTimer] = setTimeout(() => {
+                        doubleTapTimers[doubleTapTimer] = null;
+                    }, 200);
+                } else {
+                    event.preventDefault();
+                    this.navHandler.goToPage(doubleTapTimer);
+                }
+            };
+    
+            entryContentElement.addEventListener("touchend", (e) => {
+                    if (e.changedTouches[0].clientX >= (entryContentElement.offsetWidth / 2)) {
+                        detectDoubleTap("next", e);
+                    } else {
+                        detectDoubleTap("previous", e);
+                    }
+                }, hasPassiveOption ? { passive: false } : false);
+            entryContentElement.addEventListener("touchmove", (e) => {
+                Object.keys(doubleTapTimers).forEach(timer => doubleTapTimers[timer] = null);
+            });
+        }
     }
 }

Bu fark içinde çok fazla dosya değişikliği olduğu için bazı dosyalar gösterilmiyor