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
stasson · Oct 27, 2017 · f446a11 · f446a11
1 parent 4a05fd8
commit f446a11
Show file tree

Hide file tree

Showing 7 changed files with 90 additions and 84 deletions.
diff --git 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
@@ -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
@@ -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,23 +77,25 @@ 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
       this.xlarge = media.xlarge.matches
       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
@@ -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
@@ -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,33 +83,33 @@ 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)`
         )
       },
       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')
-        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
@@ -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 () {