Merge pull request #87 from readium/fixes/gestures

Take into account more interactive elements when handling EPUB gesture events

Author: aferditamuriqi

.travis.yml

@@ -1,5 +1,9 @@
 language: swift
 osx_image: xcode11
+xcode_project: r2-navigator-swift.xcodeproj
+xcode_scheme: r2-navigator-swift
+xcode_destination: platform=iOS Simulator,OS=11.3,name=iPhone X
+xcode_sdk: iphonesimulator13.0
 
 branches:
   only:
@@ -13,7 +17,8 @@ cache:
 before_install:
   - brew update
   - brew outdated carthage || brew upgrade carthage
-  - carthage update --verbose --no-use-binaries --platform iOS --cache-builds
+  - carthage bootstrap --verbose --no-use-binaries --platform iOS --cache-builds
 
 script:
-  - xcodebuild clean build -project r2-navigator-swift.xcodeproj -scheme r2-navigator-swift -quiet
+  - xcodebuild clean build -quiet
+

Cartfile

@@ -1 +1 @@
-github "readium/r2-shared-swift" == 1.4.1
+github "readium/r2-shared-swift" == 1.4.2

Cartfile.resolved

@@ -1 +1 @@
-github "readium/r2-shared-swift" "1.4.1"
+github "readium/r2-shared-swift" "1.4.2"

R2Navigator.podspec

@@ -1,12 +1,12 @@
 Pod::Spec.new do |s|
 
   s.name         = "R2Navigator"
-  s.version      = "1.2.2"
+  s.version      = "1.2.3"
   s.license      = "BSD 3-Clause License"
   s.summary      = "R2 Navigator"
   s.homepage     = "http://readium.github.io"
   s.author       = { "Aferdita Muriqi" => "aferdita.muriqi@gmail.com" }
-  s.source       = { :git => "https://github.com/readium/r2-navigator-swift.git", :tag => "1.2.2" }
+  s.source       = { :git => "https://github.com/readium/r2-navigator-swift.git", :tag => "1.2.3" }
   s.exclude_files = ["**/Info*.plist"]
   s.requires_arc = true
   s.resources    = ['r2-navigator-swift/Resources/**']

r2-navigator-swift/EPUB/Resources/Scripts/gestures.js

@@ -1,61 +1,41 @@
 (function() {
-  var isTapping = false;
-  var touchStartTime = null;
-  var startX = 0;
-  var startY = 0;
-
-  document.addEventListener('touchstart', touchstart, false);
-  document.addEventListener('touchend', touchend, false);
-
-  function touchstart(event) {
-    isTapping = (event.touches.length == 1);
-    if (isInteractiveElement(event.target) || !isTapping) {
-      return;
-    }
-
-    var touch = event.changedTouches[0];
-    startX = touch.pageX;
-    startY = touch.pageY;
-    touchStartTime = Date.now();
-  }
+  window.addEventListener('DOMContentLoaded', function(event) {
+    // If we don't set the CSS cursor property to pointer, then the click events are not triggered pre-iOS 13.
+    document.body.style.cursor = 'pointer';
+    
+    document.addEventListener('click', onClick, false);
+  });
 
-  function touchend(event) {
-    if (!isTapping || touchStartTime == null || Date.now() - touchStartTime > 500) {
+  function onClick(event) {
+    if (event.defaultPrevented || isInteractiveElement(event.target)) {
       return;
     }
-    isTapping = false;
-
-    var touch = event.changedTouches[0];
 
-    function approximatelyEqual(a, b) {
-      return Math.abs(a - b) < 2;
-    }
-
-    if (!approximatelyEqual(startX, touch.pageX) || !approximatelyEqual(startY, touch.pageY)) {
-      return;
-    }
- 
     if (!window.getSelection().isCollapsed) {
       // There's an on-going selection, the tap will dismiss it so we don't forward it.
       return;
     }
 
     webkit.messageHandlers.tap.postMessage({
-      "screenX": touch.screenX,
-      "screenY": touch.screenY,
-      "clientX": touch.clientX,
-      "clientY": touch.clientY,
+      "screenX": event.screenX,
+      "screenY": event.screenY,
+      "clientX": event.clientX,
+      "clientY": event.clientY,
     });
 
     // We don't want to disable the default WebView behavior as it breaks some features without bringing any value.
 //    event.stopPropagation();
 //    event.preventDefault();
   }
 
+  // See. https://github.com/JayPanoz/architecture/tree/touch-handling/misc/touch-handling
   function isInteractiveElement(element) {
     var interactiveTags = [
       'a',
+      'audio',
       'button',
+      'canvas',
+      'details',
       'input',
       'label',
       'option',
@@ -64,10 +44,13 @@
       'textarea',
       'video',
     ]
-
-    // https://stackoverflow.com/questions/4878484/difference-between-tagname-and-nodename
     if (interactiveTags.indexOf(element.nodeName.toLowerCase()) != -1) {
-        return true;
+      return true;
+    }
+
+    // Checks whether the element is editable by the user.
+    if (element.hasAttribute('contenteditable') && element.getAttribute('contenteditable').toLowerCase() != 'false') {
+      return true;
     }
 
     // Checks parents recursively because the touch might be for example on an <em> inside a <a>.