diff options
author | 2019-03-09 14:00:26 +0100 | |
---|---|---|
committer | 2019-03-11 20:23:19 -0700 | |
commit | fc473f1d11a29bc8ae54d08322542245f6481da1 (patch) | |
tree | f19e558f2694de6c6e24361764684dfb1be4b22c /ui/static/js | |
parent | 22b68eefd864a119bac1ba4784d60011c96659af (diff) |
Add double tap detection for next/previous page navigation
Diffstat (limited to 'ui/static/js')
-rw-r--r-- | ui/static/js/bootstrap.js | 6 | ||||
-rw-r--r-- | ui/static/js/touch_handler.js | 34 |
2 files changed, 36 insertions, 4 deletions
diff --git a/ui/static/js/bootstrap.js b/ui/static/js/bootstrap.js index 5c0bfac..5a8c701 100644 --- a/ui/static/js/bootstrap.js +++ b/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); diff --git a/ui/static/js/touch_handler.js b/ui/static/js/touch_handler.js index d7ec359..9e4b7bc 100644 --- a/ui/static/js/touch_handler.js +++ b/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); + }); + } } } |