client/post: Add swipe left and swipe right gestures to post content

client/post: Add swipe left and swipe right gestures to post content

2 files changed, 106 insertions, 10 deletions

diff --git a/client/js/util/touch.js b/client/js/util/touch.js
new file mode 100644
index 0000000..6863eb8
--- /dev/null
+++ b/client/js/util/touch.js
@@ -0,0 +1,85 @@
+const direction = {
+    NONE: null,
+    LEFT: 'left',
+    RIGHT: 'right',
+    DOWN: 'down',
+    UP: 'up'
+};
+
+function handleTouchStart(handler, evt) {
+    const touchEvent = evt.touches[0];
+    handler._xStart = touchEvent.clientX;
+    handler._yStart = touchEvent.clientY;
+}
+
+function handleTouchMove(handler, evt) {
+    if (!handler._xStart || !handler._yStart) {
+        return;
+    }
+
+    const xDirection = handler._xStart - evt.touches[0].clientX;
+    const yDirection = handler._yStart - evt.touches[0].clientY;
+
+    if (Math.abs(xDirection) > Math.abs(yDirection)) {
+        if (xDirection > 0) {
+            handler._direction = direction.LEFT;
+        } else {
+            handler._direction = direction.RIGHT;
+        }
+    } else {
+        if (yDirection > 0) {
+            handler._direction = direction.DOWN;
+        } else {
+            handler._direction = direction.UP;
+        }
+    }
+}
+
+function handleTouchEnd(handler) {
+    switch (handler._direction) {
+        case direction.NONE:
+            return;
+        case direction.LEFT:
+            handler._swipeLeftTask();
+            break;
+        case direction.RIGHT:
+            handler._swipeRightTask();
+            break;
+        case direction.DOWN:
+            handler._swipeDownTask();
+            break;
+        case direction.UP:
+            handler._swipeUpTask();
+    }
+
+    handler._xStart = null;
+    handler._yStart = null;
+}
+
+class Touch {
+    constructor(target,
+                swipeLeft = () => {},
+                swipeRight = () => {},
+                swipeUp = () => {},
+                swipeDown = () => {}) {
+        this._target = target;
+
+        this._swipeLeftTask = swipeLeft;
+        this._swipeRightTask = swipeRight;
+        this._swipeUpTask = swipeUp;
+        this._swipeDownTask = swipeDown;
+
+        this._xStart = null;
+        this._yStart = null;
+        this._direction = direction.NONE;
+
+        this._target.addEventListener('touchstart',
+            (evt) => { handleTouchStart(this, evt); });
+        this._target.addEventListener('touchmove',
+            (evt) => { handleTouchMove(this, evt); });
+        this._target.addEventListener('touchend',
+            () => { handleTouchEnd(this); });
+    }
+}
+
+module.exports = Touch;
\ No newline at end of file
diff --git a/client/js/views/post_main_view.js b/client/js/views/post_main_view.js
index 141de71..20f559d 100644
--- a/client/js/views/post_main_view.js
+++ b/client/js/views/post_main_view.js
@@ -5,6 +5,7 @@ const router = require('../router.js');
 const views = require('../util/views.js');
 const uri = require('../util/uri.js');
 const keyboard = require('../util/keyboard.js');
+const Touch = require('../util/touch.js');
 const PostContentControl = require('../controls/post_content_control.js');
 const PostNotesOverlayControl =
     require('../controls/post_notes_overlay_control.js');
@@ -58,28 +59,38 @@ class PostMainView {
         this._installCommentForm();
         this._installComments(ctx.post.comments);
 
-        keyboard.bind('e', () => {
-            if (ctx.editMode) {
-                router.show(uri.formatClientLink('post', ctx.post.id));
-            } else {
-                router.show(uri.formatClientLink('post', ctx.post.id, 'edit'));
-            }
-        });
-        keyboard.bind(['a', 'left'], () => {
+        const showPreviousImage = () => {
             if (ctx.prevPostId) {
                 router.show(ctx.getPostUrl(ctx.prevPostId, ctx.parameters));
             }
-        });
-        keyboard.bind(['d', 'right'], () => {
+        };
+
+        const showNextImage = () => {
             if (ctx.nextPostId) {
                 router.show(ctx.getPostUrl(ctx.nextPostId, ctx.parameters));
             }
+        };
+
+        keyboard.bind('e', () => {
+            if (ctx.editMode) {
+                router.show(uri.formatClientLink('post', ctx.post.id));
+            } else {
+                router.show(uri.formatClientLink('post', ctx.post.id, 'edit'));
+            }
         });
+        keyboard.bind(['a', 'left'], showPreviousImage);
+        keyboard.bind(['d', 'right'], showNextImage);
         keyboard.bind('del', (e) => {
             if (ctx.editMode) {
                 this.sidebarControl._evtDeleteClick(e);
             }
         });
+
+        new Touch(
+            postContainerNode,
+            showPreviousImage,
+            showNextImage
+        )
     }
 
     _installSidebar(ctx) {