fix: fix passive event warnings

stasson · Apr 29, 2018 · 2a0e886 · 2a0e886
1 parent d0f04e1
commit 2a0e886
Show file tree

Hide file tree

Showing 10 changed files with 164 additions and 102 deletions.
diff --git a/components/base/apply-passive.js b/components/base/apply-passive.js
@@ -0,0 +1,26 @@
+let supportsPassive_
+
+/**
+ * Determine whether the current browser supports passive event listeners, and if so, use them.
+ * @param {!Window=} globalObj
+ * @param {boolean=} forceRefresh
+ * @return {boolean|{passive: boolean}}
+ */
+export function applyPassive(globalObj = window, forceRefresh = false) {
+  if (supportsPassive_ === undefined || forceRefresh) {
+    let isSupported = false
+    try {
+      globalObj.document.addEventListener('test', null, {
+        get passive() {
+          isSupported = { passive: true }
+        }
+      })
+    } catch (e) {
+      //empty
+    }
+
+    supportsPassive_ = isSupported
+  }
+
+  return supportsPassive_
+}
diff --git a/components/base/index.js b/components/base/index.js
@@ -1,3 +1,4 @@
+export * from './apply-passive.js'
 export * from './auto-init.js'
 export * from './base-plugin.js'
 export * from './custom-element.js'

diff --git a/components/checkbox/mdc-checkbox.vue b/components/checkbox/mdc-checkbox.vue
@@ -1,25 +1,25 @@
 <template>
-  <div 
-    :class="formFieldClasses" 
+  <div
+    :class="formFieldClasses"
     class="mdc-checkbox-wrapper">
-    <div 
-      ref="root" 
+    <div
+      ref="root"
       :class="classes"
-      :style="styles" 
+      :style="styles"
       class="mdc-checkbox">
-      <input 
-        ref="control" 
-        :id="vma_uid_" 
-        :name="name" 
+      <input
+        ref="control"
+        :id="vma_uid_"
+        :name="name"
         :value="value"
-        type="checkbox" 
+        type="checkbox"
         class="mdc-checkbox__native-control"
         @change="onChange">
       <div class="mdc-checkbox__background">
-        <svg 
+        <svg
           class="mdc-checkbox__checkmark"
           viewBox="0 0 24 24">
-          <path 
+          <path
             class="mdc-checkbox__checkmark-path"
             fill="none"
             stroke="white"
@@ -28,8 +28,8 @@
         <div class="mdc-checkbox__mixedmark"/>
       </div>
     </div>
-    <label 
-      ref="label" 
+    <label
+      ref="label"
       :for="vma_uid_"
     ><slot>{{ label }}</slot></label>
   </div>
@@ -42,6 +42,7 @@ import MDCFormFieldFoundation from '@material/form-field/foundation'
 import { getCorrectEventName } from '@material/animation'
 import { DispatchFocusMixin, VMAUniqueIdMixin } from '../base'
 import { RippleBase } from '../ripple'
+import { applyPassive } from '../base'
 
 export default {
   name: 'mdc-checkbox',
@@ -123,10 +124,10 @@ export default {
       isUnbounded: () => true,
       isSurfaceActive: () => RippleBase.isSurfaceActive(this.$refs.control),
       registerInteractionHandler: (evt, handler) => {
-        this.$refs.control.addEventListener(evt, handler)
+        this.$refs.control.addEventListener(evt, handler, applyPassive())
       },
       deregisterInteractionHandler: (evt, handler) => {
-        this.$refs.control.addEventListener(evt, handler)
+        this.$refs.control.removeEventListener(evt, handler, applyPassive())
       },
       computeBoundingRect: () => {
         return this.$refs.root.getBoundingClientRect()

diff --git a/components/chips/mdc-chip.vue b/components/chips/mdc-chip.vue
@@ -1,45 +1,45 @@
 <template>
-  <div 
-    :class="classes" 
-    :style="styles" 
-    tabindex="0" 
+  <div
+    :class="classes"
+    :style="styles"
+    tabindex="0"
     v-on="$listeners">
-    <i 
-      v-if="haveleadingIcon" 
+    <i
+      v-if="haveleadingIcon"
       ref="leadingIcon"
-      :class="leadingClasses" 
+      :class="leadingClasses"
       class="mdc-chip__icon mdc-chip__icon--leading"
     >{{ leadingIcon }}</i>
-    <div 
-      v-if="isFilter" 
+    <div
+      v-if="isFilter"
       class="mdc-chip__checkmark">
-      <svg 
-        class="mdc-chip__checkmark-svg" 
+      <svg
+        class="mdc-chip__checkmark-svg"
         viewBox="-2 -3 30 30">
-        <path 
-          class="mdc-chip__checkmark-path" 
-          fill="none" 
+        <path
+          class="mdc-chip__checkmark-path"
+          fill="none"
           stroke="black"
           d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
       </svg>
     </div>
     <div class="mdc-chip__text">
       <slot/>
     </div>
-    <i 
-      v-if="havetrailingIcon" 
-      ref="trailingIcon" 
-      :class="trailingClasses" 
+    <i
+      v-if="havetrailingIcon"
+      ref="trailingIcon"
+      :class="trailingClasses"
       class="mdc-chip__icon mdc-chip__icon--trailing"
-      tabindex="0" 
+      tabindex="0"
       role="button"
     >{{ trailingIcon }}</i>
   </div>
 </template>
-
+applyPassive
 <script>
 import MDCChipFoundation from '@material/chips/chip/foundation'
-import { CustomLinkMixin, emitCustomEvent } from '../base'
+import { CustomLinkMixin, emitCustomEvent, applyPassive } from '../base'
 import { RippleBase } from '../ripple'
 
 export default {
@@ -134,12 +134,20 @@ export default {
 
       registerTrailingIconInteractionHandler: (evtType, handler) => {
         if (this.$refs.trailingIcon) {
-          this.$refs.trailingIcon.addEventListener(evtType, handler)
+          this.$refs.trailingIcon.addEventListener(
+            evtType,
+            handler,
+            applyPassive()
+          )
         }
       },
       deregisterTrailingIconInteractionHandler: (evtType, handler) => {
         if (this.$refs.trailingIcon) {
-          this.$refs.trailingIcon.removeEventListener(evtType, handler)
+          this.$refs.trailingIcon.removeEventListener(
+            evtType,
+            handler,
+            applyPassive()
+          )
         }
       },
       notifyRemoval: () =>

diff --git a/components/drawer/mdc-persistent-drawer.vue b/components/drawer/mdc-persistent-drawer.vue
@@ -1,12 +1,12 @@
 <template>
-  <aside 
-    :class="classes" 
+  <aside
+    :class="classes"
     class="mdc-persistent-drawer mdc-drawer--persistent mdc-typography">
-    <nav 
-      ref="drawer" 
+    <nav
+      ref="drawer"
       class="mdc-drawer__drawer">
-      <div 
-        v-if="toolbarSpacer" 
+      <div
+        v-if="toolbarSpacer"
         class="mdc-drawer__toolbar-spacer"/>
       <slot />
     </nav>
@@ -66,10 +66,18 @@ export default {
         )
       },
       registerDrawerInteractionHandler: (evt, handler) => {
-        this.$refs.drawer.addEventListener(util.remapEvent(evt), handler)
+        this.$refs.drawer.addEventListener(
+          util.remapEvent(evt),
+          handler,
+          util.applyPassive()
+        )
       },
       deregisterDrawerInteractionHandler: (evt, handler) => {
-        this.$refs.drawer.removeEventListener(util.remapEvent(evt), handler)
+        this.$refs.drawer.removeEventListener(
+          util.remapEvent(evt),
+          handler,
+          util.applyPassive()
+        )
       },
       registerTransitionEndHandler: handler => {
         this.$refs.drawer.addEventListener('transitionend', handler)

diff --git a/components/drawer/mdc-temporary-drawer.vue b/components/drawer/mdc-temporary-drawer.vue
@@ -1,12 +1,12 @@
 <template>
-  <aside 
-    :class="classes" 
+  <aside
+    :class="classes"
     class="mdc-temporary-drawer mdc-drawer--temporary mdc-typography">
-    <nav 
-      ref="drawer" 
+    <nav
+      ref="drawer"
       class="mdc-drawer__drawer">
-      <div 
-        v-if="toolbarSpacer" 
+      <div
+        v-if="toolbarSpacer"
         class="mdc-drawer__toolbar-spacer"/>
       <slot />
     </nav>
@@ -73,10 +73,18 @@ export default {
         )
       },
       registerDrawerInteractionHandler: (evt, handler) => {
-        this.$refs.drawer.addEventListener(util.remapEvent(evt), handler)
+        this.$refs.drawer.addEventListener(
+          util.remapEvent(evt),
+          handler,
+          util.applyPassive()
+        )
       },
       deregisterDrawerInteractionHandler: (evt, handler) => {
-        this.$refs.drawer.removeEventListener(util.remapEvent(evt), handler)
+        this.$refs.drawer.removeEventListener(
+          util.remapEvent(evt),
+          handler,
+          util.applyPassive()
+        )
       },
       registerTransitionEndHandler: handler => {
         this.$refs.drawer.addEventListener('transitionend', handler)

diff --git a/components/radio/mdc-radio.vue b/components/radio/mdc-radio.vue
@@ -1,29 +1,29 @@
 <template>
-  <div 
-    :class="formFieldClasses" 
+  <div
+    :class="formFieldClasses"
     class="mdc-radio-wrapper">
-    <div 
-      ref="root" 
-      :class="classes" 
-      :style="styles" 
+    <div
+      ref="root"
+      :class="classes"
+      :style="styles"
       class="mdc-radio">
-      <input 
-        ref="control" 
-        :id="vma_uid_" 
-        :name="name" 
+      <input
+        ref="control"
+        :id="vma_uid_"
+        :name="name"
         type="radio"
-        class="mdc-radio__native-control" 
+        class="mdc-radio__native-control"
         @change="sync">
 
-      <div 
-        ref="label" 
+      <div
+        ref="label"
         class="mdc-radio__background">
         <div class="mdc-radio__outer-circle"/>
         <div class="mdc-radio__inner-circle"/>
       </div>
     </div>
-    <label 
-      ref="label" 
+    <label
+      ref="label"
       :for="vma_uid_"><slot>{{ label }}</slot></label>
   </div>
 </template>
@@ -33,6 +33,7 @@ import MDCRadioFoundation from '@material/radio/foundation'
 import MDCFormFieldFoundation from '@material/form-field/foundation'
 import { DispatchFocusMixin, VMAUniqueIdMixin } from '../base'
 import { RippleBase } from '../ripple'
+import { applyPassive } from '../base'
 
 export default {
   name: 'mdc-radio',
@@ -78,10 +79,10 @@ export default {
       isUnbounded: () => true,
       isSurfaceActive: () => false,
       registerInteractionHandler: (evt, handler) => {
-        this.$refs.control.addEventListener(evt, handler)
+        this.$refs.control.addEventListener(evt, handler, applyPassive())
       },
       deregisterInteractionHandler: (evt, handler) => {
-        this.$refs.control.removeEventListener(evt, handler)
+        this.$refs.control.removeEventListener(evt, handler, applyPassive())
       },
       computeBoundingRect: () => {
         return this.$refs.root.getBoundingClientRect()

diff --git a/components/ripple/mdc-ripple-base.js b/components/ripple/mdc-ripple-base.js
@@ -42,10 +42,10 @@ export class RippleBase extends MDCRippleFoundation {
           },
           containsEventTarget: target => vm.$el.contains(target),
           registerInteractionHandler: (evt, handler) => {
-            vm.$el.addEventListener(evt, handler)
+            vm.$el.addEventListener(evt, handler, applyPassive())
           },
           deregisterInteractionHandler: (evt, handler) => {
-            vm.$el.removeEventListener(evt, handler)
+            vm.$el.removeEventListener(evt, handler, applyPassive())
           },
           registerDocumentInteractionHandler: (evtType, handler) =>
             document.documentElement.addEventListener(