feat(ripple): refactor adapter as per mdc 0.28.0

stasson · Jan 13, 2018 · 10afb2e · 10afb2e
1 parent 05d3475
commit 10afb2e
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 936 deletions.
diff --git a/components/ripple/mdc-ripple-base.js b/components/ripple/mdc-ripple-base.js
@@ -1,5 +1,5 @@
 import MDCRippleFoundation from '@material/ripple/foundation.js'
-import { supportsCssVariables, getMatchesProperty } from '@material/ripple/util'
+import {supportsCssVariables, getMatchesProperty, applyPassive} from '@material/ripple/util'
 
 export class RippleBase extends MDCRippleFoundation {
 
@@ -18,21 +18,9 @@ export class RippleBase extends MDCRippleFoundation {
       browserSupportsCssVars: () => {
         return supportsCssVariables(window)
       },
-      registerResizeHandler: (handler) => {
-        return window.addEventListener('resize', handler)
-      },
-      deregisterResizeHandler: (handler) => {
-        return window.removeEventListener('resize', handler)
-      },
-      getWindowPageOffset: () => {
-        return ({x: window.pageXOffset, y: window.pageYOffset})
-      },
       isUnbounded: () => {
         return false
       },
-      computeBoundingRect: () => {
-        return vm.$el.getBoundingClientRect()
-      },
       isSurfaceActive: () => {
         return vm.$el[RippleBase.MATCHES](':active')
       },
@@ -42,7 +30,6 @@ export class RippleBase extends MDCRippleFoundation {
       addClass (className) {
         vm.$set(vm.classes, className, true)
       },
-      // assumes a data 'classes' property on the root element
       removeClass (className) {
         vm.$delete(vm.classes, className)
       },
@@ -52,9 +39,25 @@ export class RippleBase extends MDCRippleFoundation {
       deregisterInteractionHandler: (evt, handler) => {
         vm.$el.removeEventListener(evt, handler)
       },
+      registerDocumentInteractionHandler: (evtType, handler) =>
+        document.documentElement.addEventListener(evtType, handler, applyPassive()),
+      deregisterDocumentInteractionHandler: (evtType, handler) =>
+        document.documentElement.removeEventListener(evtType, handler, applyPassive()),
+      registerResizeHandler: (handler) => {
+        return window.addEventListener('resize', handler)
+      },
+      deregisterResizeHandler: (handler) => {
+        return window.removeEventListener('resize', handler)
+      },
       updateCssVariable: (varName, value) => {
         vm.$set(vm.styles, varName, value)
-      }
+      },
+      computeBoundingRect: () => {
+        return vm.$el.getBoundingClientRect()
+      },
+      getWindowPageOffset: () => {
+        return ({x: window.pageXOffset, y: window.pageYOffset})
+      },
     }, options))
   }
 }

diff --git a/components/ripple/mdc-ripple.vue b/components/ripple/mdc-ripple.vue
@@ -7,26 +7,13 @@
 
 <script>
 import {CustomElementMixin} from '../base'
-import {RippleBase} from './mdc-ripple-base'
+import {RippleMixin} from './mdc-ripple-base'
 
 export default {
   name: 'mdc-ripple',
-  mixins:[CustomElementMixin],
+  mixins:[CustomElementMixin, RippleMixin],
   props: {
     tag: String
   },
-  data () {
-    return {
-      classes: {},
-      styles: {},
-    }
-  },
-  mounted () {
-    this.ripple = new RippleBase(this)
-    this.ripple.init()
-  },
-  beforeDestroy () {
-    this.ripple.destroy()
-  }
 }
 </script>