Provide a Polymer.setPassiveTouchGestures() function

Clean up event listener options inside gestures that use passive touch
Polymer · Sep 11, 2017 · 3547fd3 · 3547fd3
1 parent 6312da5
commit 3547fd3
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 6 deletions.
diff --git a/lib/utils/gestures.html b/lib/utils/gestures.html
@@ -59,8 +59,18 @@
     } catch(e) {}
   })();
 
-  // decide whether to use {passive: true} for gestures listening for touch events
-  let PASSIVE_TOUCH = Boolean(HAS_NATIVE_TA && SUPPORTS_PASSIVE && Polymer.passiveTouchGestures);
+  /**
+   * Generate settings for event listeners, dependant on `Polymer.passiveTouchGestures`
+   *
+   * @return {{passive: boolean} | undefined} Options to use for addEventListener and removeEventListener
+   */
+  function PASSIVE_TOUCH() {
+    if (HAS_NATIVE_TA && SUPPORTS_PASSIVE && Polymer.passiveTouchGestures) {
+      return {passive: true};
+    } else {
+      return;
+    }
+  }
 
   // Check for touch-only devices
   let IS_TOUCH_ONLY = navigator.userAgent.match(/iP(?:[oa]d|hone)|Android/);
@@ -470,7 +480,7 @@
           gobj[dep] = gd = {_count: 0};
         }
         if (gd._count === 0) {
-          let options = !isMouseEvent(dep) && PASSIVE_TOUCH ? {passive: true} : undefined;
+          let options = !isMouseEvent(dep) && PASSIVE_TOUCH();
           node.addEventListener(dep, this._handleNative, options);
         }
         gd[name] = (gd[name] || 0) + 1;
@@ -504,7 +514,7 @@
             gd[name] = (gd[name] || 1) - 1;
             gd._count = (gd._count || 1) - 1;
             if (gd._count === 0) {
-              let options = !isMouseEvent(dep) && PASSIVE_TOUCH ? {passive: true} : undefined;
+              let options = !isMouseEvent(dep) && PASSIVE_TOUCH();
               node.removeEventListener(dep, this._handleNative, options);
             }
           }

diff --git a/lib/utils/settings.html b/lib/utils/settings.html
@@ -102,6 +102,18 @@
    *
    * @memberof Polymer
    */
-  Polymer.passiveTouchGestures = Polymer.passiveTouchGestures || false;
+  let passiveTouchGestures = false;
+
+  Polymer.passiveTouchGestures = passiveTouchGestures;
+
+  /**
+   * Sets `passiveTouchGestures` globally for all elements using Polymer Gestures.
+   *
+   * @memberof Polymer
+   * @param {boolean} usePassive enable or disable passive touch gestures globally
+   */
+  Polymer.setPassiveTouchGestures = function(usePassive) {
+    Polymer.passiveTouchGestures = usePassive;
+  };
 })();
 </script>
diff --git a/test/smoke/passive-gestures.html b/test/smoke/passive-gestures.html
@@ -11,8 +11,8 @@
 <html>
 <head>
   <script src="../../../webcomponentsjs/webcomponents-loader.js"></script>
-  <script>Polymer = {passiveTouchGestures: true}</script>
   <link rel="import" href="../../polymer.html">
+  <script>Polymer.setPassiveTouchGestures(true);</script>
   <style>
     html, body {
       margin: 0;