[whimsy] branch master updated: experimental swipe support

[ru...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

rubys pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/whimsy.git


The following commit(s) were added to refs/heads/master by this push:
     new 2497db8  experimental swipe support
2497db8 is described below

commit 2497db8dabfc3064ea2473a8614b33b3f0d9e68b
Author: Sam Ruby <ru...@intertwingly.net>
AuthorDate: Mon Oct 2 09:15:57 2017 -0400

    experimental swipe support
---
 www/board/agenda/views/app.js.rb         |  1 +
 www/board/agenda/views/layout/main.js.rb |  3 +-
 www/board/agenda/views/touch.js.rb       | 53 ++++++++++++++++++++++++++++++++
 3 files changed, 56 insertions(+), 1 deletion(-)

diff --git a/www/board/agenda/views/app.js.rb b/www/board/agenda/views/app.js.rb
index 1386377..002c6f4 100644
--- a/www/board/agenda/views/app.js.rb
+++ b/www/board/agenda/views/app.js.rb
@@ -5,6 +5,7 @@ require_relative 'event-bus'
 # common
 require_relative 'router'
 require_relative 'keyboard'
+require_relative 'touch'
 require_relative 'utils'
 
 # General layout
diff --git a/www/board/agenda/views/layout/main.js.rb b/www/board/agenda/views/layout/main.js.rb
index a2de545..0f286dd 100644
--- a/www/board/agenda/views/layout/main.js.rb
+++ b/www/board/agenda/views/layout/main.js.rb
@@ -112,8 +112,9 @@ class Main < Vue
       end
     end
 
-    # start watching keystrokes
+    # start watching keystrokes and fingers
     Keyboard.initEventHandlers()
+    Touch.initEventHandlers()
 
     # whenever the window is resized, adjust margins of the main area to
     # avoid overlapping the header and footer areas
diff --git a/www/board/agenda/views/touch.js.rb b/www/board/agenda/views/touch.js.rb
new file mode 100644
index 0000000..2778081
--- /dev/null
+++ b/www/board/agenda/views/touch.js.rb
@@ -0,0 +1,53 @@
+#
+# Respond to swipes
+#
+
+class Touch
+  def self.initEventHandlers()
+    threshold = 150 # minimum distance required to be considered a swipe
+    limit = 100 # max distance in other direction
+    allowedTime = 500 # maximum time
+
+    startX = 0
+    startY = 0
+    startTime = 0
+
+    document.body.addEventListener :touchstart do |event|
+      touchobj = event.changedTouches[0]
+      startX = touchobj.pageX
+      startY = touchobj.pageY
+      startTime = Date.new().getTime()
+    end
+
+    document.body.addEventListener :touchend do |event|
+      elapsed = startTime - Date.new().getTime()
+      return if elapsed > allowedTime
+
+      touchobj = event.changedTouches[0]
+      distX = startX - touchobj.pageX
+      distY = startY - touchobj.pageY
+
+      swipedir = 'none'
+
+      if Math.abs(distX) >= threshold and Math.abs(distY) <= limit
+        swipedir = (distX < 0) ? 'left' : 'right'
+      elsif Math.abs(distY) >= threshold and Math.abs(distX) <= limit
+        swipedir = (distY < 0) ? 'up' : 'down'
+      end
+
+      case swipedir
+      when 'left'
+        link = document.querySelector("a[rel=prev]")
+        link.click() if link
+
+      when 'right'
+        link = document.querySelector("a[rel=prev]")
+        link.click() if link
+
+      when 'up', 'down'
+        Main.navigate history.state.path.sub(/\w+\/?$/, '') || '.'
+      end
+    end
+
+  end
+end

-- 
To stop receiving notification emails like this one, please contact
['"commits@whimsical.apache.org" <co...@whimsical.apache.org>'].