fix: [cordova] Drawer closes when keyboard appears due to resize event …

…#344
quasarframework · Jan 24, 2017 · 3ff74c6 · 3ff74c6
1 parent 3e65b61
commit 3ff74c6
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 126 deletions.
diff --git a/dev/components/test-layout/layout.vue b/dev/components/test-layout/layout.vue
@@ -23,14 +23,14 @@
       <q-tab icon="input" route="/test-layout/drawer" replace>Drawer</q-tab>
     </q-tabs>
 
-    <q-drawer ref="leftDrawer" :backdrop-opacity="1">
+    <q-drawer ref="leftDrawer">
       <div class="toolbar light">
         <q-toolbar-title :padding="1">
           Drawer
         </q-toolbar-title>
       </div>
 
-      <div class="list no-border platform-delimiter">
+      <div class="list no-border platform-delimiter" v-for="n in 10">
         <q-drawer-link icon="view_quilt" :to="{path: '/test-layout', exact: true}">
           About Layout
         </q-drawer-link>

diff --git a/src/vue-components/drawer/Drawer.vue b/src/vue-components/drawer/Drawer.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="drawer" :class="{'left-side': !rightSide, 'right-side': rightSide}">
+  <div class="drawer" :class="{'left-side': !rightSide, 'right-side': rightSide, active: active, 'swipe-only': swipeOnly}">
     <div
       class="drawer-opener touch-only mobile-only"
       v-touch-pan.horizontal="__openByTouch"
@@ -42,6 +42,7 @@ export default {
   },
   data () {
     return {
+      active: false,
       opened: false,
       nodePosition: 0,
       backPosition: 0,
@@ -64,38 +65,32 @@ export default {
       return {background: `rgba(0,0,0,${this.backPosition})`}
     }
   },
+  watch: {
+    active (val) {
+      document.body.classList[val ? 'add' : 'remove']('with-drawer-opened')
+    }
+  },
   methods: {
     __animate (done) {
       let finalPos
-      const
-        backdrop = this.$refs.backdrop,
-        complete = () => {
-          if (!this.opened) {
-            backdrop.classList.remove('active')
-            if (this.$quasar.theme === 'ios') {
-              document.body.classList.remove('with-drawer-opened')
-            }
-          }
-          else {
-            window.addEventListener('resize', this.close)
-          }
-          if (typeof done === 'function') {
-            done()
-          }
+      const complete = () => {
+        if (!this.opened) {
+          this.active = false
         }
+        if (typeof done === 'function') {
+          done()
+        }
+      }
 
       if (this.$quasar.theme === 'ios') {
         finalPos = this.opened ? (this.rightSide ? -1 : 1) * this.width : 0
-        if (this.opened) {
-          document.body.classList.add('with-drawer-opened')
-        }
       }
       else {
         finalPos = this.opened ? 0 : (this.rightSide ? 1 : -1) * this.width
       }
 
       if (this.opened) {
-        backdrop.classList.add('active')
+        this.active = true
         if (this.$quasar.platform.has.popstate) {
           if (!window.history.state) {
             window.history.replaceState({__quasar_drawer: true}, '')
@@ -111,7 +106,6 @@ export default {
         }
       }
       else {
-        window.removeEventListener('resize', this.close)
         if (this.$quasar.platform.has.popstate) {
           window.removeEventListener('popstate', this.__popState)
           if (window.history.state && !window.history.state.__quasar_drawer) {
@@ -139,25 +133,19 @@ export default {
         done: complete
       })
     },
-    __openByTouch (event) {
-      // interferes with browser's back/forward swipe feature
-      if (this.$quasar.platform.is.ios) {
-        return
-      }
-
-      const
-        content = this.$refs.content,
-        backdrop = this.$refs.backdrop
+    __openByTouch (evt) {
+      const content = this.$refs.content
 
-      if (Utils.dom.style(content, 'position') !== 'fixed') {
+      // on iOS platform it interferes with browser's back/forward swipe feature
+      if (this.$quasar.platform.is.ios || Utils.dom.style(content, 'position') !== 'fixed') {
         return
       }
 
       let
-        position = event.distance.x,
+        position = evt.distance.x,
         percentage
 
-      if (event.isFinal) {
+      if (evt.isFinal) {
         this.opened = position > 75
       }
 
@@ -171,17 +159,17 @@ export default {
         percentage = (this.width - Math.abs(position)) / this.width
       }
 
-      if (event.isFirst) {
-        backdrop.classList.add('active')
+      if (evt.isFirst) {
+        this.active = true
       }
       this.nodePosition = position
       this.backPosition = percentage * this.backdropOpacity
 
-      if (event.isFinal) {
+      if (evt.isFinal) {
         this.__animate()
       }
     },
-    __closeByTouch (event) {
+    __closeByTouch (evt) {
       const content = this.$refs.content
       let percentage, position, initialPosition
 
@@ -191,10 +179,10 @@ export default {
 
       initialPosition = (this.rightSide ? -1 : 1) * this.width
       position = this.rightSide
-        ? Utils.format.between((event.direction === 'left' ? -1 : 1) * event.distance.x, 0, this.width)
-        : Utils.format.between((event.direction === 'left' ? -1 : 1) * event.distance.x, -this.width, 0)
+        ? Utils.format.between((evt.direction === 'left' ? -1 : 1) * evt.distance.x, 0, this.width)
+        : Utils.format.between((evt.direction === 'left' ? -1 : 1) * evt.distance.x, -this.width, 0)
 
-      if (event.isFinal) {
+      if (evt.isFinal) {
         this.opened = Math.abs(position) <= 75
       }
 
@@ -209,23 +197,17 @@ export default {
       this.nodePosition = position
       this.backPosition = percentage * this.backdropOpacity
 
-      if (event.isFinal) {
+      if (evt.isFinal) {
         this.__animate()
       }
     },
     setState (state, done) {
-      if (
-        (!this.swipeOnly && Utils.dom.viewport().width > 920) ||
-        (typeof state === 'boolean' && this.opened === state) ||
-        (done && done.type === 'resize')
-      ) {
-        if (typeof done === 'function') {
-          done()
-        }
+      if (this.active === state || this.active !== this.opened) {
         return
       }
 
       this.opened = !this.opened
+      this.active = true
       this.__animate(done)
     },
     __popState () {
@@ -261,20 +243,9 @@ export default {
           this.setState(false)
         })
       })
-
-      if (this.swipeOnly) {
-        this.$el.classList.add('swipe-only')
-      }
-
-      this.__eventHandler = handler => {
-        this.close(handler)
-      }
     })
   },
   beforeDestroy () {
-    if (this.opened && this.$quasar.theme === 'ios') {
-      document.body.classList.remove('with-drawer-opened')
-    }
     this.setState(false)
   }
 }

diff --git a/src/vue-components/drawer/drawer.ios.styl b/src/vue-components/drawer/drawer.ios.styl
@@ -4,27 +4,18 @@ $drawer-icon-font-size   ?= 1.8rem
 $drawer-background       ?= white
 $drawer-header-font-size ?= .9rem
 
-body.drawer-opened
-  overflow-x hidden !important
-
-.drawer
-  position relative
-  .list
-    margin 0
-
 .drawer-backdrop
   display none
-  height 100vh
   z-index $z-drawer
-  &.active
-    display block
 
 .drawer-opener
   z-index ($z-marginals + 1)
   height 100vh
   width 15px
 
 .drawer-content
+  z-index $z-drawer
+  position fixed
   background $drawer-background
   top 0
   bottom 0
@@ -36,8 +27,10 @@ body.drawer-opened
 
   &.left-side
     left 0
+    transform translateX(- $drawer-width)
   &.right-side
     right 0
+    transform translateX($drawer-width)
 
 body
   &.cordova.platform-ios, &.demo-site.within-iframe
@@ -51,7 +44,6 @@ body
   position relative
   margin-bottom 8px
   padding 16px
-  background-size 100% 100%, cover
   font-size $drawer-header-font-size
 
   > img
@@ -73,29 +65,24 @@ body
     margin-bottom 25px
     border-radius 50%
 
-swipe-behavior()
-  .drawer-content
-    z-index $z-drawer
-    position fixed
-    &.left-side
-      transform translateX(- $drawer-width)
-    &.right-side
-      transform translateX($drawer-width)
-
-@media screen and (max-width: $layout-medium-max)
-  swipe-behavior()
+.drawer
+  position relative
+  .list
+    margin 0
+  &.active
+    .drawer-backdrop
+      display block
+    .drawer-opener
+      display none
 
 @media screen and (min-width: $layout-big-min)
   .hide-on-drawer-visible
     display none !important
-  .drawer
-    &.swipe-only
-      swipe-behavior()
-    &:not(.swipe-only)
-      flex 0 0 $drawer-width
-
-      .drawer-content
-        left 0
-        right 0
-        position absolute !important
-        transform translateX(0) !important
+  .drawer:not(.active):not(.swipe-only)
+    flex 0 0 $drawer-width
+    .drawer-content
+      z-index inherit
+      left 0
+      right 0
+      position absolute !important
+      transform translateX(0) !important
diff --git a/src/vue-components/drawer/drawer.mat.styl b/src/vue-components/drawer/drawer.mat.styl
@@ -4,23 +4,18 @@ $drawer-icon-font-size   ?= 1.8rem
 $drawer-background       ?= white
 $drawer-header-font-size ?= .9rem
 
-.drawer
-  position relative
-  .list
-    margin 0
-
 .drawer-backdrop
   display none
   z-index $z-drawer
-  &.active
-    display block
 
 .drawer-opener
   z-index ($z-marginals + 1)
   height 100vh
   width 15px
 
 .drawer-content
+  z-index $z-drawer
+  position fixed
   background $drawer-background
   top 0
   bottom 0
@@ -32,8 +27,10 @@ $drawer-header-font-size ?= .9rem
 
   &.left-side
     left 0
+    transform translateX(- $drawer-width)
   &.right-side
     right 0
+    transform translateX($drawer-width)
 
 body.cordova.platform-ios .drawer-content
   padding-top $ios-statusbar-height
@@ -64,29 +61,24 @@ body.cordova.platform-ios .drawer-content
     margin-bottom 25px
     border-radius 50%
 
-swipe-behavior()
-  .drawer-content
-    z-index $z-drawer
-    position fixed
-    &.left-side
-      transform translateX(- $drawer-width)
-    &.right-side
-      transform translateX($drawer-width)
-
-@media screen and (max-width: $layout-medium-max)
-  swipe-behavior()
+.drawer
+  position relative
+  .list
+    margin 0
+  &.active
+    .drawer-backdrop
+      display block
+    .drawer-opener
+      display none
 
 @media screen and (min-width: $layout-big-min)
   .hide-on-drawer-visible
     display none !important
-  .drawer
-    &.swipe-only
-      swipe-behavior()
-    &:not(.swipe-only)
-      flex 0 0 $drawer-width
-
-      .drawer-content
-        left 0
-        right 0
-        position absolute !important
-        transform translateX(0) !important
+  .drawer:not(.active):not(.swipe-only)
+    flex 0 0 $drawer-width
+    .drawer-content
+      z-index inherit
+      left 0
+      right 0
+      position absolute !important
+      transform translateX(0) !important
diff --git a/src/vue-components/layout/layout.ios.styl b/src/vue-components/layout/layout.ios.styl
@@ -1,5 +1,5 @@
 $layout-border             ?= 1px solid $toolbar-faded-color
-$layout-toolbar-min-height ?= 40px
+$layout-toolbar-min-height ?= 45px
 $toolbar-title-font-size   ?= .95rem
 $toolbar-padding           ?= 4px 10px