Merge branch 'feature/dynamic-modal' into feature/zh-Hant

Author: hunterliu1003

dist/VueFinalModal.esm.js

@@ -11,7 +11,7 @@
   "dependencies": {
     "@nuxt/content-theme-docs": "^0.8.2",
     "nuxt": "^2.14.12",
-    "vue-final-modal": "^0.21.3"
+    "vue-final-modal": "^0.21.5"
   },
   "devDependencies": {
     "@nuxtjs/google-analytics": "^2.4.0",

dist/VueFinalModal.esm.js.map

@@ -10619,10 +10619,10 @@ vue-client-only@^2.0.0:
   resolved "https://registry.yarnpkg.com/vue-client-only/-/vue-client-only-2.0.0.tgz#ddad8d675ee02c761a14229f0e440e219de1da1c"
   integrity sha512-arhk1wtWAfLsJyxGMoEYhoBowM87/i6HLSG2LH/03Yog6i2d9JEN1peMP0Ceis+/n9DxdenGYZZTxbPPJyHciA==
 
-vue-final-modal@^0.21.3:
-  version "0.21.3"
-  resolved "https://registry.yarnpkg.com/vue-final-modal/-/vue-final-modal-0.21.3.tgz#74a2ae88d6d0c7afc9f822c3bfbe7a99c4c8014d"
-  integrity sha512-8l1uMi+k8TSFtIJobtl1J3pYabD4AjgtavTxflDHckVI+XI7nwvMWotMbWCAs+rHQ83Hnz4QGq/Z1JefA/ZsqA==
+vue-final-modal@^0.21.5:
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/vue-final-modal/-/vue-final-modal-0.21.5.tgz#e992a7f82a511d0c852fa84d83d9b6ca8578e41b"
+  integrity sha512-2Yby+hhy6qer0Yfk1QVT1p6XqaeoxqMJBuvcMHE8pHAIbVo9pfjJu1cehb5SVBH0QJzTeVPdhcKOBVXOjLl67A==
 
 vue-hot-reload-api@^2.3.0:
   version "2.3.4"

dist/VueFinalModal.umd.js

@@ -40,12 +40,7 @@
         tabindex="-1"
         @click.self="onClickContainer"
       >
-        <div
-          ref="vfmContent"
-          class="vfm__content"
-          :class="[contentClass, { 'vfm--prevent-auto': preventClick }]"
-          :style="contentStyle"
-        >
+        <div class="vfm__content" :class="[contentClass, { 'vfm--prevent-auto': preventClick }]" :style="contentStyle">
           <slot v-bind:params="params" />
         </div>
       </div>
@@ -177,7 +172,7 @@ export default {
   },
   beforeDestroy() {
     this.close()
-    this.lockScroll && enableBodyScroll(this.$refs.vfmContent)
+    this.lockScroll && enableBodyScroll(this.$refs.vfmContainer)
     this?.$el?.remove()
 
     let index = this.api.modals.findIndex(vm => vm === this)
@@ -249,11 +244,11 @@ export default {
     handleLockScroll() {
       if (this.value) {
         if (this.lockScroll) {
-          disableBodyScroll(this.$refs.vfmContent, {
+          disableBodyScroll(this.$refs.vfmContainer, {
             reserveScrollBarGap: true
           })
         } else {
-          enableBodyScroll(this.$refs.vfmContent)
+          enableBodyScroll(this.$refs.vfmContainer)
         }
       }
     },
@@ -309,7 +304,7 @@ export default {
     afterModalLeave() {
       this.modalTransitionState = TransitionState.Leave
       this.modalStackIndex = null
-      this.lockScroll && enableBodyScroll(this.$refs.vfmContent)
+      this.lockScroll && enableBodyScroll(this.$refs.vfmContainer)
 
       let stopEvent = false
       const event = this.createModalEvent({

dist/VueFinalModal.umd.js.map

@@ -22,19 +22,47 @@ const isIosDevice =
 
 let locks = []
 let documentListenerAdded = false
+let clientY = 0
 let initialClientY = -1
 let previousBodyOverflowSetting
 let previousBodyPaddingRight
 
-// returns true if `el` should be allowed to receive touchmove events.
-const allowTouchMove = el =>
-  locks.some(lock => {
-    if (lock.options.allowTouchMove && lock.options.allowTouchMove(el)) {
-      return true
-    }
+const hasScrollbar = el => {
+  if (!el || el.nodeType !== Node.ELEMENT_NODE) return false
 
-    return false
+  const style = window.getComputedStyle(el)
+  return ['auto', 'scroll'].includes(style.overflowY) && el.scrollHeight > el.clientHeight
+}
+
+const shouldScroll = (el, delta) => {
+  if (el.scrollTop === 0 && delta < 0) return false
+  if (el.scrollTop + el.clientHeight + delta >= el.scrollHeight && delta > 0) return false
+  return true
+}
+
+const composedPath = el => {
+  const path = []
+  while (el) {
+    path.push(el)
+    if (el.classList.contains('vfm')) return path
+    el = el.parentElement
+  }
+  return path
+}
+
+const hasAnyScrollableEl = (el, delta) => {
+  let hasAnyScrollableEl = false
+  const path = composedPath(el)
+  path.forEach(el => {
+    if (hasScrollbar(el) && shouldScroll(el, delta)) {
+      hasAnyScrollableEl = true
+    }
   })
+  return hasAnyScrollableEl
+}
+
+// returns true if `el` should be allowed to receive touchmove events.
+const allowTouchMove = el => locks.some(() => hasAnyScrollableEl(el, -clientY))
 
 const preventDefault = rawEvent => {
   const e = rawEvent || window.event
@@ -95,7 +123,7 @@ const isTargetElementTotallyScrolled = targetElement =>
   targetElement ? targetElement.scrollHeight - targetElement.scrollTop <= targetElement.clientHeight : false
 
 const handleScroll = (event, targetElement) => {
-  const clientY = event.targetTouches[0].clientY - initialClientY
+  clientY = event.targetTouches[0].clientY - initialClientY
 
   if (allowTouchMove(event.target)) {
     return false
@@ -160,27 +188,6 @@ export const disableBodyScroll = (targetElement, options) => {
   }
 }
 
-export const clearAllBodyScrollLocks = () => {
-  if (isIosDevice) {
-    // Clear all locks ontouchstart/ontouchmove handlers, and the references.
-    locks.forEach(lock => {
-      lock.targetElement.ontouchstart = null
-      lock.targetElement.ontouchmove = null
-    })
-
-    if (documentListenerAdded) {
-      document.removeEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined)
-      documentListenerAdded = false
-    }
-    // Reset initial clientY.
-    initialClientY = -1
-  } else {
-    restoreOverflowSetting()
-  }
-
-  locks = []
-}
-
 export const enableBodyScroll = targetElement => {
   if (!targetElement) {
     // eslint-disable-next-line no-console

docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-final-modal",
-  "version": "0.21.3",
+  "version": "0.21.5",
   "description": "Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.",
   "private": false,
   "main": "dist/VueFinalModal.umd.js",

docs/yarn.lock

@@ -4,7 +4,6 @@ import './lib'
 export class VueFinalModalComponant extends Vue {
   $refs: {
     vfmContainer: HTMLDivElement,
-    vfmContent: HTMLDivElement
   }
 }