🚧 Drawer: use foundation

posva · May 9, 2017 · a2610aa · a2610aa
1 parent 39a0a5e
commit a2610aa
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 19 deletions.
diff --git a/src/Drawer/Drawer.vue b/src/Drawer/Drawer.vue
@@ -2,7 +2,7 @@
   <aside v-if="mode === 'temporary'"
          :class="baseClass"
   >
-    <nav class="mdc-temporary-drawer__drawer">
+    <nav ref="drawer" class="mdc-temporary-drawer__drawer">
       <slot name="header"></slot>
       <div class="mdc-list-group mdc-temporary-drawer__content">
         <slot></slot>
@@ -17,7 +17,13 @@
 </template>
 
 <script>
-import { MDCTemporaryDrawer } from '@material/drawer'
+import MDCTemporaryDrawerFoundation from '@material/drawer/temporary/foundation'
+import * as util from '@material/drawer/util'
+const scrollBlock = 'mdc-dialog-scroll-lock'
+const {
+  FOCUSABLE_ELEMENTS,
+  OPACITY_VAR_NAME,
+} = MDCTemporaryDrawerFoundation.strings
 
 export default {
   props: {
@@ -41,23 +47,62 @@ export default {
 
   mounted () {
     if (this.mode === 'temporary') {
-      this.drawer = new MDCTemporaryDrawer(this.$el)
+      console.log(this.$refs.drawer)
+      this.mdcDrawer = new MDCTemporaryDrawerFoundation({
+        addClass: (className) => this.$el.classList.add(className),
+        removeClass: (className) => this.$el.classList.remove(className),
+        hasClass: (className) => this.$el.classList.contains(className),
+        hasNecessaryDom: () => Boolean(this.$refs.drawer),
+        registerInteractionHandler: (evt, handler) =>
+          this.$el.addEventListener(util.remapEvent(evt), handler, util.applyPassive()),
+        deregisterInteractionHandler: (evt, handler) =>
+          this.$el.removeEventListener(util.remapEvent(evt), handler, util.applyPassive()),
+        registerDrawerInteractionHandler: (evt, handler) =>
+          this.$refs.drawer.addEventListener(util.remapEvent(evt), handler),
+        deregisterDrawerInteractionHandler: (evt, handler) =>
+          this.$refs.drawer.removeEventListener(util.remapEvent(evt), handler),
+        registerTransitionEndHandler: (handler) => this.$refs.drawer.addEventListener('transitionend', handler),
+        deregisterTransitionEndHandler: (handler) => this.$refs.drawer.removeEventListener('transitionend', handler),
+        registerDocumentKeydownHandler: (handler) => document.addEventListener('keydown', handler),
+        deregisterDocumentKeydownHandler: (handler) => document.removeEventListener('keydown', handler),
+        getDrawerWidth: () => this.$refs.drawer.offsetWidth,
+        setTranslateX: (value) => this.$refs.drawer.style.setProperty(
+          util.getTransformPropertyName(), value === null ? null : `translateX(${value}px)`),
+        updateCssVariable: (value) => {
+          if (util.supportsCssCustomProperties()) {
+            this.$el.style.setProperty(OPACITY_VAR_NAME, value)
+          }
+        },
+        getFocusableElements: () => this.$refs.drawer.querySelectorAll(FOCUSABLE_ELEMENTS),
+        saveElementTabState: (el) => util.saveElementTabState(el),
+        restoreElementTabState: (el) => util.restoreElementTabState(el),
+        makeElementUntabbable: (el) => el.setAttribute('tabindex', -1),
+        notifyOpen: () => this.$emit('opened'),
+        notifyClose: () => this.$emit('closed'),
+        isRtl: () => window.getComputedStyle(this.$el).getPropertyValue('direction') === 'rtl',
+        isDrawer: (el) => el === this.$refs.drawer,
+      })
     }
   },
 
   methods: {
     open () {
-      this.drawer.open = true
+      this.mdcDrawer.open()
+      /* window.document.body.classList.add(scrollBlock)*/
     },
     close () {
-      this.drawer.open = false
-    },
-    toggle () {
-      this.drawer.open = !this.drawer.open
+      this.mdcDrawer.close()
+      /* window.document.body.classList.remove(scrollBlock)*/
     },
   },
 }
 </script>
 
 <style lang="scss" src="@material/drawer/mdc-drawer.scss">
 </style>
+
+<style>
+body.u-no-scroll {
+  overflow: hidden;
+}
+</style>
diff --git a/test/specs/Drawer.spec.js b/test/specs/Drawer.spec.js
@@ -28,21 +28,23 @@ describe('Drawer', function () {
             <div>
               <Drawer ref='drawer'>
               </Drawer>
-              <button onClick={() => this.$refs.drawer.toggle()}>Toggle</button>
+              <button onClick={() => this.$refs.drawer.open()}>Open</button>
             </div>
           )
         })
       })
 
-      it('can be toggled', function (done) {
-        this.vm.$refs.drawer.$el.should.not.have.class('mdc-temporary-drawer--open')
-        this.vm.$refs.drawer.toggle()
-        nextTick().then(() => {
-          this.vm.$refs.drawer.$el.should.have.class('mdc-temporary-drawer--open')
-          this.vm.$refs.drawer.toggle()
-        }).then(() => {
-          this.vm.$refs.drawer.$el.should.not.have.class('mdc-temporary-drawer--open')
-        }).then(done)
+      afterEach(function () {
+        this.vm.$refs.drawer.close()
+      })
+
+      it('makes the body unscrollable while open', function () {
+        const scrollBlock = 'mdc-dialog-scroll-lock'
+        document.body.should.not.have.class(scrollBlock)
+        this.vm.$refs.drawer.open()
+        document.body.should.have.class(scrollBlock)
+        this.vm.$refs.drawer.close()
+        document.body.should.not.have.class(scrollBlock)
       })
 
       it('can be closed', function (done) {
@@ -121,7 +123,7 @@ describe('Drawer', function () {
                    ))}
                 </DrawerNav>
               </Drawer>
-              <button onClick={() => this.$refs.drawer.toggle()}>Toggle</button>
+              <button onClick={() => this.$refs.drawer.open()}>Open</button>
             </div>
           )
         }, {