From e9a0788a6fd8c6004be47e7c608f811110b9d327 Mon Sep 17 00:00:00 2001
From: Weera Wu <weera@oozou.com>
Date: Sat, 25 Aug 2018 21:13:13 +0700
Subject: [PATCH 1/7] Disable double tap and pinch zoom

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/index.html b/index.html
index f614232..befadde 100644
--- a/index.html
+++ b/index.html
@@ -1,6 +1,6 @@
 <!doctype html>
 <meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
 <title>mithril-slides</title>
 <style>
   /* base */

From c736e37552615ec704b20b820e057e2f6ef73947 Mon Sep 17 00:00:00 2001
From: Weera Wu <weera@oozou.com>
Date: Sat, 25 Aug 2018 22:49:02 +0700
Subject: [PATCH 2/7] Touch and hold to change theme

---
 index.html | 33 ++++++++++++++++++++++++---------
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index befadde..5ac262f 100644
--- a/index.html
+++ b/index.html
@@ -130,7 +130,7 @@
 <script src="//unpkg.com/mithril@^1.1.6/mithril.js"></script>
 <script>
   // setup
-  var Touch = {LEFT: 0, RIGHT: 1};
+  var Direction = {LEFT: 0, RIGHT: 1};
   var Theme = {BLACK: 0, WHITE: 1, GRADIENT: 2, SHOWROOM: 3};
 
   var Fullscreen = {
@@ -170,7 +170,7 @@
     index: 0,
     pointer: true,
     theme: Theme.GRADIENT,
-    touch: null,
+    touch: {direction: null, time: null},
 
     setIndex: function(value) {
       if (value >= 0 && value < state.slides.length) {
@@ -188,8 +188,9 @@
       }
     },
     setTouch: function(value) {
-      if (value in Object.values(Touch)) {
-        state.touch = value;
+      if (value in Object.values(Direction)) {
+        state.touch.direction = value;
+        state.touch.time = Date.now();
       }
     },
 
@@ -197,7 +198,8 @@
       state.setIndex(state.index - 1);
     },
     clearTouch: function() {
-      state.touch = null;
+      state.touch.direction = null;
+      state.touch.time = null;
     },
     currentSlide: function() {
       return state.slides.length > 0 ? state.slides[state.index] : {};
@@ -227,6 +229,10 @@
     nextTheme: function() {
       state.setTheme((state.theme + 1) % Object.keys(Theme).length);
     },
+    touchTime: function() {
+      var startTime = state.touch.time;
+      return startTime ? Date.now() - startTime : 0;
+    },
     togglePointer: function() {
       state.pointer = !state.pointer;
     },
@@ -266,19 +272,28 @@
   var Presentation = {
     handleTouchstart: function(event) {
       event.preventDefault();
-      var firstTouch = event.touches[0];
+      if (event.touches.length > 1) {
+        return;
+      }
+      var touch = event.touches[0];
       var pageCenter = document.body.clientWidth / 2;
-      state.setTouch(firstTouch.pageX < pageCenter ? Touch.LEFT : Touch.RIGHT);
+      state.setTouch(
+        touch.pageX < pageCenter ? Direction.LEFT : Direction.RIGHT
+      );
     },
     handleTouchend: function(event) {
       event.preventDefault();
       if (event.touches.length > 0) {
         return;
       }
-      if (state.touch === Touch.LEFT) {
+      var time = state.touchTime();
+      if (time > 1000) {
+        state.nextTheme();
+      } else if (time > 250) {
+      } else if (state.touch.direction === Direction.LEFT) {
         this.play(state.backward);
         m.redraw();
-      } else if (state.touch === Touch.RIGHT) {
+      } else if (state.touch.direction === Direction.RIGHT) {
         this.play(state.forward);
       }
       state.clearTouch();

From a29b4e1bb8303a6255a3cb746adfb8417c977206 Mon Sep 17 00:00:00 2001
From: Weera Wu <weera@oozou.com>
Date: Sat, 25 Aug 2018 23:00:18 +0700
Subject: [PATCH 3/7] Ignore touchmove event

---
 index.html | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 5ac262f..50a7ceb 100644
--- a/index.html
+++ b/index.html
@@ -251,6 +251,7 @@
         style: {cursor: vnode.attrs.pointer ? 'default' : 'none'},
         onclick: vnode.attrs.onclick,
         ontouchstart: vnode.attrs.ontouchstart,
+        ontouchmove: vnode.attrs.ontouchmove,
         ontouchend: vnode.attrs.ontouchend
       }, [
         m('#objects', [
@@ -281,13 +282,17 @@
         touch.pageX < pageCenter ? Direction.LEFT : Direction.RIGHT
       );
     },
+    handleTouchmove: function(event) {
+      event.preventDefault();
+      state.clearTouch();
+    },
     handleTouchend: function(event) {
       event.preventDefault();
       if (event.touches.length > 0) {
         return;
       }
       var time = state.touchTime();
-      if (time > 1000) {
+      if (time > 500) {
         state.nextTheme();
       } else if (time > 250) {
       } else if (state.touch.direction === Direction.LEFT) {
@@ -363,6 +368,7 @@
         theme: state.theme,
         onclick: this.handleClick.bind(this),
         ontouchstart: this.handleTouchstart.bind(this),
+        ontouchmove: this.handleTouchmove.bind(this),
         ontouchend: this.handleTouchend.bind(this),
         oncontextmenu: this.handleContextmenu.bind(this),
         onkeydown: this.handleKeydown.bind(this)

From 615506703e4248da59d13de76d4270c3eb4f2fe6 Mon Sep 17 00:00:00 2001
From: Weera Wu <weera@oozou.com>
Date: Sat, 25 Aug 2018 15:12:40 +0700
Subject: [PATCH 4/7] Add touch gestures section to README.md

---
 README.md | 30 ++++++++++++++++++++----------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index 9e7727c..86b6aef 100644
--- a/README.md
+++ b/README.md
@@ -25,7 +25,8 @@ A Keynote-inspired presentation app written with Mithril
 
 3. Using a browser, go to `http://localhost:8000` and you'll see example slides.
 
-4. To add or edit slides, make changes to the `slides.json` file and reload your browser.
+4. To add or edit slides, make changes to the `slides.json` file and reload your
+   browser.
 
 ## Keyboard shortcuts
 Shortcuts for navigating slides are listed below.
@@ -38,25 +39,34 @@ Quit presentation mode    | <kbd>Esc</kbd> or <kbd>Q</kbd>
 Show or hide the pointer  | <kbd>C</kbd>
 Change presentation theme | <kbd>T</kbd>
 
+## Touch gestures
+Gestures for navigating slides on touchscreen devices.
+
+Action                    | Gesture
+------------------------- | --------------------------------------------
+Advance to the next slide | Tap on the right side of the slide
+Go to previous slide      | Tap on the left side of the slide
+Change presentation theme | Touch and hold
+
 ## Offline mode
-mithril-slides requires an internet connection to work. If you are to present in a
-place without one. You can still use mithril-slides by checking out `offline` branch
-before starting a web server:
+mithril-slides requires an internet connection to work. If you are to present in
+a place without one. You can still use mithril-slides by checking out `offline`
+branch before starting a web server:
 
         $ git checkout offline
         $ python -m SimpleHTTPServer 8000       # Python 2
         $ python -m http.server 8000            # Python 3
 
-You also need to change src properties of all image and embed objects in your
-`slides.json` file to local files.
+You also need to point the `src` property of all images and embed objects in
+your `slides.json` file to local files.
 
 ## Known issues
 Some websites can not be embedded because they have secure HTTP headers (either
-`X-Frame-Options` or `Content-Security-Policy`) set in their responses. To remove
-those headers, you need a browser extension. For Google Chrome, install
+`X-Frame-Options` or `Content-Security-Policy`) set in their responses. To
+remove those headers, you need a browser extension. For Google Chrome, install
 [ModHeader][1] extension and add response headers for above headers with empty
-values. For Firefox, install [Modify Response Headers][2] add-on and add filters for
-those headers. The following slide can be used to test your setup:
+values. For Firefox, install [Modify Response Headers][2] add-on and add filters
+for those headers. The following slide can be used to test your setup:
 
         {
             "embed": {

From fc06a4e565257a8263a9b91eb7032833b68bc75d Mon Sep 17 00:00:00 2001
From: Weera Wu <weera@oozou.com>
Date: Sat, 25 Aug 2018 23:34:35 +0700
Subject: [PATCH 5/7] Use enums for touch times

---
 index.html | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 50a7ceb..0d820ae 100644
--- a/index.html
+++ b/index.html
@@ -132,6 +132,7 @@
   // setup
   var Direction = {LEFT: 0, RIGHT: 1};
   var Theme = {BLACK: 0, WHITE: 1, GRADIENT: 2, SHOWROOM: 3};
+  var Time = {TAP: 250, HOLD: 500};
 
   var Fullscreen = {
     isEnabled: function() {
@@ -292,9 +293,9 @@
         return;
       }
       var time = state.touchTime();
-      if (time > 500) {
+      if (time > Time.HOLD) {
         state.nextTheme();
-      } else if (time > 250) {
+      } else if (time > Time.TAP) {
       } else if (state.touch.direction === Direction.LEFT) {
         this.play(state.backward);
         m.redraw();

From 69de268076ce5d5855d68931b2de16ac13674710 Mon Sep 17 00:00:00 2001
From: Weera Wu <weera@oozou.com>
Date: Sun, 26 Aug 2018 10:18:25 +0700
Subject: [PATCH 6/7] Use enums for touch types

---
 index.html | 39 ++++++++++++++++++++++++---------------
 1 file changed, 24 insertions(+), 15 deletions(-)

diff --git a/index.html b/index.html
index 0d820ae..88f0295 100644
--- a/index.html
+++ b/index.html
@@ -130,9 +130,9 @@
 <script src="//unpkg.com/mithril@^1.1.6/mithril.js"></script>
 <script>
   // setup
-  var Direction = {LEFT: 0, RIGHT: 1};
   var Theme = {BLACK: 0, WHITE: 1, GRADIENT: 2, SHOWROOM: 3};
-  var Time = {TAP: 250, HOLD: 500};
+  var TouchDirection = {LEFT: 0, CENTER: 1, RIGHT: 2};
+  var TouchType = {TAP: 0, PRESS: 1, HOLD: 2};
 
   var Fullscreen = {
     isEnabled: function() {
@@ -171,7 +171,7 @@
     index: 0,
     pointer: true,
     theme: Theme.GRADIENT,
-    touch: {direction: null, time: null},
+    touch: {direction: null, start: null},
 
     setIndex: function(value) {
       if (value >= 0 && value < state.slides.length) {
@@ -189,9 +189,9 @@
       }
     },
     setTouch: function(value) {
-      if (value in Object.values(Direction)) {
+      if (value in Object.values(TouchDirection)) {
         state.touch.direction = value;
-        state.touch.time = Date.now();
+        state.touch.start = Date.now();
       }
     },
 
@@ -200,7 +200,7 @@
     },
     clearTouch: function() {
       state.touch.direction = null;
-      state.touch.time = null;
+      state.touch.start = null;
     },
     currentSlide: function() {
       return state.slides.length > 0 ? state.slides[state.index] : {};
@@ -230,9 +230,18 @@
     nextTheme: function() {
       state.setTheme((state.theme + 1) % Object.keys(Theme).length);
     },
-    touchTime: function() {
-      var startTime = state.touch.time;
-      return startTime ? Date.now() - startTime : 0;
+    touchType: function() {
+      if (!state.touch.start) {
+        return null;
+      }
+      var elapsedTime = Date.now() - state.touch.start;
+      if (elapsedTime > 500) {
+        return TouchType.HOLD;
+      } else if (elapsedTime > 250) {
+        return TouchType.PRESS;
+      } else {
+        return TouchType.TAP;
+      }
     },
     togglePointer: function() {
       state.pointer = !state.pointer;
@@ -280,7 +289,7 @@
       var touch = event.touches[0];
       var pageCenter = document.body.clientWidth / 2;
       state.setTouch(
-        touch.pageX < pageCenter ? Direction.LEFT : Direction.RIGHT
+        touch.pageX < pageCenter ? TouchDirection.LEFT : TouchDirection.RIGHT
       );
     },
     handleTouchmove: function(event) {
@@ -292,14 +301,14 @@
       if (event.touches.length > 0) {
         return;
       }
-      var time = state.touchTime();
-      if (time > Time.HOLD) {
+      var type = state.touchType();
+      var direction = state.touch.direction;
+      if (type === TouchType.HOLD) {
         state.nextTheme();
-      } else if (time > Time.TAP) {
-      } else if (state.touch.direction === Direction.LEFT) {
+      } else if (type === TouchType.TAP && direction === TouchDirection.LEFT) {
         this.play(state.backward);
         m.redraw();
-      } else if (state.touch.direction === Direction.RIGHT) {
+      } else if (type === TouchType.TAP && direction === TouchDirection.RIGHT) {
         this.play(state.forward);
       }
       state.clearTouch();

From 2a54233f7ddc4e85cd7a10ff5ce1ec173d0b0460 Mon Sep 17 00:00:00 2001
From: Weera Wu <weera@oozou.com>
Date: Sun, 26 Aug 2018 10:38:14 +0700
Subject: [PATCH 7/7] Ignore touch on the center of the slide

---
 index.html | 46 ++++++++++++++++++++++++++++------------------
 1 file changed, 28 insertions(+), 18 deletions(-)

diff --git a/index.html b/index.html
index 88f0295..5cd875d 100644
--- a/index.html
+++ b/index.html
@@ -213,6 +213,31 @@
         return Theme[key] === value;
       });
     },
+    getTouchDirection: function(x, width) {
+      if (!x || !width) {
+        return null;
+      }
+      if (x > width * 2 / 3) {
+        return TouchDirection.RIGHT;
+      } else if (x > width / 3) {
+        return TouchDirection.CENTER;
+      } else {
+        return TouchDirection.LEFT;
+      }
+    },
+    getTouchType: function() {
+      if (!state.touch.start) {
+        return null;
+      }
+      var elapsedTime = Date.now() - state.touch.start;
+      if (elapsedTime > 500) {
+        return TouchType.HOLD;
+      } else if (elapsedTime > 250) {
+        return TouchType.PRESS;
+      } else {
+        return TouchType.TAP;
+      }
+    },
     loadSlides: function(url) {
       return m.request({method: 'GET', url: url}).
         then(state.setSlides).
@@ -230,19 +255,6 @@
     nextTheme: function() {
       state.setTheme((state.theme + 1) % Object.keys(Theme).length);
     },
-    touchType: function() {
-      if (!state.touch.start) {
-        return null;
-      }
-      var elapsedTime = Date.now() - state.touch.start;
-      if (elapsedTime > 500) {
-        return TouchType.HOLD;
-      } else if (elapsedTime > 250) {
-        return TouchType.PRESS;
-      } else {
-        return TouchType.TAP;
-      }
-    },
     togglePointer: function() {
       state.pointer = !state.pointer;
     },
@@ -287,10 +299,8 @@
         return;
       }
       var touch = event.touches[0];
-      var pageCenter = document.body.clientWidth / 2;
-      state.setTouch(
-        touch.pageX < pageCenter ? TouchDirection.LEFT : TouchDirection.RIGHT
-      );
+      var direction = state.getTouchDirection(touch.pageX, document.body.clientWidth);
+      state.setTouch(direction);
     },
     handleTouchmove: function(event) {
       event.preventDefault();
@@ -301,7 +311,7 @@
       if (event.touches.length > 0) {
         return;
       }
-      var type = state.touchType();
+      var type = state.getTouchType();
       var direction = state.touch.direction;
       if (type === TouchType.HOLD) {
         state.nextTheme();
