Merge pull request #4836 from Polymer/optional-passive-gestures-1.x

Backport passive touch gestures #4829
Polymer · Sep 12, 2017 · 0b9c659 · 0b9c659
2 parents d491f7c + 6775a60
commit 0b9c659
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 4 deletions.
diff --git a/src/lib/settings.html b/src/lib/settings.html
@@ -57,6 +57,8 @@
 
       settings.isIE = navigator.userAgent.match('Trident');
 
+      settings.passiveTouchGestures = settings.passiveTouchGestures || false;
+
       return settings;
     })()
   };

diff --git a/src/standard/gestures.html b/src/standard/gestures.html
@@ -38,6 +38,14 @@
     }
   })();
 
+  /**
+   * @param {string} name Possible mouse event name
+   * @return {boolean} true if mouse event, false if not
+   */
+   function isMouseEvent(name) {
+    return MOUSE_EVENTS.indexOf(name) > -1;
+  }
+
   /* eslint no-empty: ["error", { "allowEmptyCatch": true }] */
   // check for passive event listeners
   var SUPPORTS_PASSIVE = false;
@@ -49,6 +57,13 @@
     } catch(e) {}
   })();
 
+  // decide whether to use {passive: true} for gestures listening for touch events
+  function PASSIVE_TOUCH() {
+    if (HAS_NATIVE_TA && SUPPORTS_PASSIVE && Polymer.Settings.passiveTouchGestures) {
+      return {passive: true};
+    }
+  }
+
   // Check for touch-only devices
   var IS_TOUCH_ONLY = navigator.userAgent.match(/iP(?:[oa]d|hone)|Android/);
 
@@ -110,7 +125,7 @@
   function hasLeftMouseButton(ev) {
     var type = ev.type;
     // exit early if the event is not a mouse event
-    if (MOUSE_EVENTS.indexOf(type) === -1) {
+    if (!isMouseEvent(type)) {
       return false;
     }
     // ev.button is not reliable for mousemove (0 is overloaded as both left button and no buttons)
@@ -326,15 +341,16 @@
       for (var i = 0, dep, gd; i < deps.length; i++) {
         dep = deps[i];
         // don't add mouse handlers on iOS because they cause gray selection overlays
-        if (IS_TOUCH_ONLY && MOUSE_EVENTS.indexOf(dep) > -1 && dep !== 'click') {
+        if (IS_TOUCH_ONLY && isMouseEvent(dep) && dep !== 'click') {
           continue;
         }
         gd = gobj[dep];
         if (!gd) {
           gobj[dep] = gd = {_count: 0};
         }
         if (gd._count === 0) {
-          node.addEventListener(dep, this.handleNative);
+          var options = !isMouseEvent(dep) && PASSIVE_TOUCH();
+          node.addEventListener(dep, this.handleNative, options);
         }
         gd[name] = (gd[name] || 0) + 1;
         gd._count = (gd._count || 0) + 1;
@@ -361,7 +377,8 @@
             gd[name] = (gd[name] || 1) - 1;
             gd._count = (gd._count || 1) - 1;
             if (gd._count === 0) {
-              node.removeEventListener(dep, this.handleNative);
+              var options = !isMouseEvent(dep) && PASSIVE_TOUCH();
+              node.removeEventListener(dep, this.handleNative, options);
             }
           }
         }

diff --git a/test/smoke/passive-gestures.html b/test/smoke/passive-gestures.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+<head>
+  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
+  <script>Polymer = {passiveTouchGestures: true}</script>
+  <link rel="import" href="../../polymer.html">
+  <style>
+    html, body {
+      margin: 0;
+      padding: 0;
+    }
+  </style>
+</head>
+<body>
+  <dom-module id="x-passive">
+    <template>
+      <style>
+        :host {
+          display: block;
+          height: 2000px;
+          background-color: -webkit-gradient(linear, left top, left bottom, from(blue), to(red));
+          background-image: -webkit-linear-gradient(top, blue, red);
+          background-image: -moz-linear-gradient(top, blue, red);
+          background-image: linear-gradient(to bottom, blue, red);
+        }
+      </style>
+    </template>
+  </dom-module>
+  <script>
+    Polymer({
+      is: 'x-passive',
+      listeners: {
+        'down': 'prevent',
+        'move': 'prevent'
+      },
+      prevent: function(e) {
+        e.preventDefault();
+        console.log('prevented!');
+      }
+    });
+  </script>
+  <x-passive></x-passive>
+</body>
+</html>