From f446a11f1aafb5f96adae8317b476ca3a32fc4b2 Mon Sep 17 00:00:00 2001
From: Sebastien Tasson <sebastien.tasson@gmail.com>
Date: Fri, 27 Oct 2017 19:34:07 +0000
Subject: [PATCH] fix(drawer): fix drawer behavior

add missing adapter callbacks
fix drawer open/close behavior
temporary drawer close on item click
cleanup un-implemented styles

closes #92
---
 components/drawer/README.md                 | 21 +------
 components/drawer/mdc-drawer-item.vue       | 12 +++-
 components/drawer/mdc-drawer.vue            | 18 +++---
 components/drawer/mdc-permanent-drawer.vue  |  2 +-
 components/drawer/mdc-persistent-drawer.vue | 45 +++++++-------
 components/drawer/mdc-temporary-drawer.vue  | 65 +++++++++++++--------
 demo/drawer.vue                             | 11 ++--
 7 files changed, 90 insertions(+), 84 deletions(-)

diff --git a/components/drawer/README.md b/components/drawer/README.md
index 44b2c5b0..8afc39cb 100644
--- a/components/drawer/README.md
+++ b/components/drawer/README.md
@@ -43,26 +43,6 @@
 > (*) by default drawer is responsive and will switch from temporary to 
 > persistent design according to viewport width
 
-### Drawer Layout
-
-```html
-<mdc-toolbar />
-<mdc-drawer-layout>
-  <mdc-drawer />
-  <!--Body markup here... -->
-</mdc-drawer-layout>
-```
-
-or drawer is above toolbar
-
-```html
-<mdc-drawer-layout>
-  <mdc-drawer toolbar-spacer />
-  <mdc-toolbar />
-  <!--Body markup here... -->
-</mdc-drawer-layout>
-```
-
 ### Drawer Header
 
 | prop | Type | Default | Description |
@@ -82,6 +62,7 @@ or drawer is above toolbar
 |`event`|String| optional | optional event to emit on click  |
 |`event-target`|Object| vm.$root | optional event target, defaults to root bus |
 |`event-args`|Array| [] | optional event args |
+|`temporary-close`|Boolean| true | whether temporary drawer closes on click |
 
 ```html
 <mdc-drawer>
diff --git a/components/drawer/mdc-drawer-item.vue b/components/drawer/mdc-drawer-item.vue
index 3c08e6d4..1bba4d23 100644
--- a/components/drawer/mdc-drawer-item.vue
+++ b/components/drawer/mdc-drawer-item.vue
@@ -1,7 +1,7 @@
 <template>
   <a :href="href" class="mdc-drawer-item mdc-list-item" 
     :class="classes" :style="styles"
-    @click="dispatchEvent">
+    @click="onClick">
     <span class="mdc-list-item__start-detail" v-if="hasStartDetail">
       <slot name="start-detail">
         <i class="material-icons" aria-hidden="true">{{startIcon}}</i>
@@ -20,7 +20,8 @@ export default {
   mixins: [DispatchEventMixin],
   props: {
     'start-icon': String,
-    'href': String
+    'href': String,
+    'temporary-close': {type: Boolean, default: true}
   },
   data () {
     return {
@@ -33,6 +34,13 @@ export default {
       return this.startIcon || this.$slots['start-detail']
     }
   },
+  methods: {
+    onClick (evt) {
+      this.mdcDrawer.isTemporary && this.temporaryClose 
+        && this.mdcDrawer.close()
+      this.dispatchEvent(evt)
+    }
+  },
   mounted () {
     this.ripple = new RippleBase(this)
     this.ripple.init()
diff --git a/components/drawer/mdc-drawer.vue b/components/drawer/mdc-drawer.vue
index 1a021449..cbada32f 100644
--- a/components/drawer/mdc-drawer.vue
+++ b/components/drawer/mdc-drawer.vue
@@ -1,6 +1,6 @@
 <template>
   <component ref="drawer" class="mdc-drawer"
-    :is="type" :open="open_" 
+    :is="type" v-model="open_" 
     :toolbar-spacer="toolbarSpacer">
     <slot />
   </component>
@@ -77,13 +77,13 @@ export default {
       this.open_ = true
     },
     close () {
-      this.open_ = false
+      this.isPermanent || (this.open_ = false)
     },
     toggle () {
-      this.open_ ? this.close() : this.open()
+      this.isPermanent || (this.isOpen() ? this.close() : this.open())
     },
     isOpen () {
-      return this.open_
+      return this.isPermanent|| ( this.open_ )
     },
     refreshMedia () {
       this.mobile = media.mobile.matches
@@ -91,9 +91,11 @@ export default {
       if (this.xlarge && this.isPersistent) this.open()
     }
   },
-  beforeMount () {
-    this.mobile = media.mobile.matches
-    this.xlarge = media.xlarge.matches
+  created () {
+    if (window && window.matchMedia) {
+      this.mobile = media.mobile.matches
+      this.xlarge = media.xlarge.matches
+    }    
   },
   mounted () {
     if (this.toggleOn) {
@@ -102,7 +104,7 @@ export default {
     }
     media.mobile.addListener(this.refreshMedia)
     media.xlarge.addListener(this.refreshMedia)
-    this.refreshMedia()
+    this.$nextTick(() => this.refreshMedia())
   },
   beforeDestroy () {
     media.mobile.removeListener(this.refreshMedia)
diff --git a/components/drawer/mdc-permanent-drawer.vue b/components/drawer/mdc-permanent-drawer.vue
index 34cedc62..af74679a 100644
--- a/components/drawer/mdc-permanent-drawer.vue
+++ b/components/drawer/mdc-permanent-drawer.vue
@@ -12,7 +12,7 @@
 export default {
   name: 'mdc-permanent-drawer',
   props: {
-    'toolbar-spacer': Boolean
+    'toolbar-spacer': Boolean,
   }
 }
 </script>
diff --git a/components/drawer/mdc-persistent-drawer.vue b/components/drawer/mdc-persistent-drawer.vue
index 1470a55c..a2b0ca7a 100644
--- a/components/drawer/mdc-persistent-drawer.vue
+++ b/components/drawer/mdc-persistent-drawer.vue
@@ -10,18 +10,21 @@
 
 <script lang="babel">
 import MDCPersistentDrawerFoundation from '@material/drawer/persistent/foundation'
-import * as utils from '@material/drawer/util'
+import * as util from '@material/drawer/util'
 
 export default {
   name: 'mdc-persistent-drawer',
+  model: {
+    prop: 'open',
+    event: 'change'
+  },
   props: {
     'toolbar-spacer': Boolean,
-    'open': Boolean
+    'open':Boolean
   },
   data () {
     return {
       classes: {},
-      changeHandlers: [],
     }
   },
   watch: {
@@ -31,13 +34,11 @@ export default {
   },
   methods: {
     _refresh() {
-      if (this.foundation) {
-        if (this.open) {
-          this.foundation.open()          
-        }
-        else {
-          this.foundation.close()          
-        }
+      if (this.open) {
+        this.foundation && this.foundation.open()          
+      }
+      else {
+        this.foundation && this.foundation.close()          
       }
     }
   },
@@ -55,19 +56,19 @@ export default {
         return this.$el.classList.contains(className)
       },
       hasNecessaryDom: () => {
-        return Boolean(this.$refs.drawer)
+        return !!this.$refs.drawer
       },
       registerInteractionHandler: (evt, handler) => {
-        this.$el.addEventListener(evt, handler)
+        this.$el.addEventListener(util.remapEvent(evt), handler, util.applyPassive())
       },
       deregisterInteractionHandler: (evt, handler) => {
-        this.$el.removeEventListener(evt, handler)
+        this.$el.removeEventListener(util.remapEvent(evt), handler, util.applyPassive())
       },
       registerDrawerInteractionHandler: (evt, handler) => {
-        this.$refs.drawer.addEventListener(evt, handler)
+        this.$refs.drawer.addEventListener(util.remapEvent(evt), handler)
       },
       deregisterDrawerInteractionHandler: (evt, handler) => {
-        this.$refs.drawer.removeEventListener(evt, handler)
+        this.$refs.drawer.removeEventListener(util.remapEvent(evt), handler)
       },
       registerTransitionEndHandler: (handler) => {
         this.$refs.drawer.addEventListener('transitionend', handler)
@@ -82,11 +83,11 @@ export default {
         document.removeEventListener('keydown', handler)
       },
       getDrawerWidth: () => {
-        return this.$refs.drawer.clientWidth
+        return this.$refs.drawer.offsetWidth
       },
       setTranslateX: (value) => {
         this.$refs.drawer.style.setProperty(
-          utils.getTransformPropertyName(),
+          util.getTransformPropertyName(),
           value === null ? null : `translateX(${value}px)`
         )
       },
@@ -94,21 +95,21 @@ export default {
         return this.$refs.drawer.querySelectorAll(FOCUSABLE_ELEMENTS)
       },
       saveElementTabState: (el) => {
-        utils.saveElementTabState(el)
+        util.saveElementTabState(el)
       },
       restoreElementTabState: (el) => {
-        utils.restoreElementTabState(el)
+        util.restoreElementTabState(el)
       },
       makeElementUntabbable: (el) => {
         el.setAttribute('tabindex', -1)
       },
       notifyOpen: () => {
+        this.$emit('change',true)
         this.$emit('open')
-        this.$root.$emit('mdc:layout')
       },
       notifyClose: () => {
+        this.$emit('change',false)
         this.$emit('close')
-        this.$root.$emit('mdc:layout')
       },
       isRtl: () => {
         /* global getComputedStyle */
@@ -118,7 +119,7 @@ export default {
         return el === this.$refs.drawer
       }
     })
-    this.foundation.init()
+    this.foundation && this.foundation.init()  
     this._refresh()
   },
   beforeDestroy () {
diff --git a/components/drawer/mdc-temporary-drawer.vue b/components/drawer/mdc-temporary-drawer.vue
index f78908da..afe3acb7 100644
--- a/components/drawer/mdc-temporary-drawer.vue
+++ b/components/drawer/mdc-temporary-drawer.vue
@@ -1,6 +1,6 @@
 <template>
   <aside class="mdc-temporary-drawer mdc-typography" :class="classes">
-    <div class="mdc-temporary-drawer__toolbar-spacer"v-if="toolbarSpacer" />
+    <div class="mdc-temporary-drawer__toolbar-spacer"v-if="toolbarSpacer"></div>
     <nav ref="drawer" class="mdc-temporary-drawer__drawer">
       <slot />
     </nav>
@@ -9,18 +9,21 @@
 
 <script lang="babel">
 import MDCTemporaryDrawerFoundation from '@material/drawer/temporary/foundation'
-import * as utils from '@material/drawer/util'
+import * as util from '@material/drawer/util'
 
 export default {
   name: 'mdc-temporary-drawer',
+  model: {
+    prop: 'open',
+    event: 'change'
+  },
   props: {
-    'toolbar-spacer': Boolean,
     'open': Boolean,
+    'toolbar-spacer': Boolean,
   },
   data () {
     return {
       classes: {},
-      changeHandlers: [],
     }
   },
   watch: {
@@ -30,19 +33,18 @@ export default {
   },
   methods: {
     _refresh() {
-      if (this.foundation) {
-        if (this.open) {
-          this.foundation.open()
-        }
-        else {
-          this.foundation.close()          
-        }
+      if (this.open) {
+        this.foundation && this.foundation.open()          
+      }
+      else {
+        this.foundation && this.foundation.close()          
       }
     }
   },
   mounted () {
-    const {FOCUSABLE_ELEMENTS, OPACITY_VAR_NAME} = MDCTemporaryDrawerFoundation.strings
-
+    const {FOCUSABLE_ELEMENTS, OPACITY_VAR_NAME} = 
+      MDCTemporaryDrawerFoundation.strings
+    
     this.foundation = new MDCTemporaryDrawerFoundation({
       addClass: (className) => {
         this.$set(this.classes, className, true)
@@ -53,20 +55,22 @@ export default {
       hasClass: (className) => {
         return this.$el.classList.contains(className)
       },
+      addBodyClass: (className) => document.body.classList.add(className),
+      removeBodyClass: (className) => document.body.classList.remove(className),
       hasNecessaryDom: () => {
-        return Boolean(this.$refs.drawer)
+        return !!this.$refs.drawer
       },
       registerInteractionHandler: (evt, handler) => {
-        this.$el.addEventListener(evt, handler)
+        this.$el.addEventListener(util.remapEvent(evt), handler, util.applyPassive())
       },
       deregisterInteractionHandler: (evt, handler) => {
-        this.$el.removeEventListener(evt, handler)
+        this.$el.removeEventListener(util.remapEvent(evt), handler, util.applyPassive())
       },
       registerDrawerInteractionHandler: (evt, handler) => {
-        this.$refs.drawer.addEventListener(evt, handler)
+        this.$refs.drawer.addEventListener(util.remapEvent(evt), handler)
       },
       deregisterDrawerInteractionHandler: (evt, handler) => {
-        this.$refs.drawer.removeEventListener(evt, handler)
+        this.$refs.drawer.removeEventListener(util.remapEvent(evt), handler)
       },
       registerTransitionEndHandler: (handler) => {
         this.$refs.drawer.addEventListener('transitionend', handler)
@@ -81,35 +85,46 @@ export default {
         document.removeEventListener('keydown', handler)
       },
       getDrawerWidth: () => {
-        return this.$refs.drawer.clientWidth
+        return this.$refs.drawer.offsetWidth
       },
       setTranslateX: (value) => {
         this.$refs.drawer.style.setProperty(
-          utils.getTransformPropertyName(),
+          util.getTransformPropertyName(),
           value === null ? null : `translateX(${value}px)`
         )
       },
       updateCssVariable: (value) => {
-        this.$el.style.setProperty(OPACITY_VAR_NAME, value)
+        if (util.supportsCssCustomProperties()) {
+          this.$el.style.setProperty(OPACITY_VAR_NAME, value)
+        }
       },
       getFocusableElements: () => {
         return this.$refs.drawer.querySelectorAll(FOCUSABLE_ELEMENTS)
       },
       saveElementTabState: (el) => {
-        utils.saveElementTabState(el)
+        util.saveElementTabState(el)
       },
       restoreElementTabState: (el) => {
-        utils.restoreElementTabState(el)
+        util.restoreElementTabState(el)
       },
       makeElementUntabbable: (el) => {
         el.setAttribute('tabindex', -1)
       },
+      notifyOpen: () => {
+        this.$emit('change',true)
+        this.$emit('open')
+      },
+      notifyClose: () => {
+        this.$emit('change',false)
+        this.$emit('close')
+      },
       isRtl: () => {
         /* global getComputedStyle */
         return getComputedStyle(this.$el).getPropertyValue('direction') === 'rtl'
-      }
+      },
+      isDrawer: (el) => el === this.$refs.drawer,
     })
-    this.foundation.init()
+    this.foundation && this.foundation.init()  
     this._refresh()
   },
   beforeDestroy () {
diff --git a/demo/drawer.vue b/demo/drawer.vue
index 80fd8f53..830e1216 100644
--- a/demo/drawer.vue
+++ b/demo/drawer.vue
@@ -1,11 +1,10 @@
 <template>
-  <mdc-drawer toggle-on="toggle-drawer">
+  <mdc-drawer ref="drawer" toggle-on="toggle-drawer">
     <mdc-drawer-header temporary></mdc-drawer-header>
     <mdc-drawer-list dense>
-      <router-link tag="div"  v-for="link in links" :key="link.id"
-        :to="link.to" >
-        <mdc-drawer-item>{{link.name}}</mdc-drawer-item>
-      </router-link>
+      <mdc-drawer-item v-for="link in links" :key="link.id"
+        @click="$router.push(link.to)"
+      >{{link.name}}</mdc-drawer-item>
     </mdc-drawer-list>
   </mdc-drawer>
 </template>
@@ -18,6 +17,6 @@ export default {
     return {
       links
     }
-  },
+  }
 }  
 </script>