refactor: lock-scroll prop

Author: hunterliu1003

dist/VueFinalModal.esm.js

@@ -3,11 +3,11 @@
     <v-modal
       v-model="showModal"
       :ssr="ssr"
-      :lockScroll="lockScroll"
-      :hideOverlay="hideOverlay"
-      :clickToClose="clickToClose"
-      :escToClose="escToClose"
-      :preventClick="preventClick"
+      :lock-scroll="lockScroll"
+      :hide-overlay="hideOverlay"
+      :click-to-close="clickToClose"
+      :esc-to-close="escToClose"
+      :prevent-click="preventClick"
       :transition="transition ? 'vfm' : ''"
       :overlay-transition="overlayTransition ? 'vfm' : ''"
       :z-index-auto="zIndexAuto"

dist/VueFinalModal.esm.js.map

@@ -1,11 +1,9 @@
 import { bindPrototype, registComponent } from './PluginCore'
 import { DUPLICATE_PLUGIN_COMPONENT, DUPLICATE_COMPONENT } from './utils/errors'
-import mobile from 'is-mobile'
 
 const defaultOptions = {
   componentName: 'VueFinalModal',
-  key: '$vfm',
-  isMobile: mobile()
+  key: '$vfm'
 }
 
 const Plugin = () => ({

dist/VueFinalModal.umd.js

@@ -1,7 +1,6 @@
 import VueFinalModal from './VueFinalModal.vue'
-import { setStyle, removeStyle } from './utils/dom.js'
 
-function createVfm(options) {
+function createVfm() {
   let vfm
 
   return function() {
@@ -23,27 +22,6 @@ function createVfm(options) {
           modal.toggle(...args)
         }
       },
-      isScrollLocked: false,
-      lockScroll() {
-        if (this.isScrollLocked) return
-        if (options.isMobile) {
-          setStyle(document.body, 'overflow', 'hidden')
-        } else {
-          window.addEventListener('wheel', this.lockScrollListener, { passive: false })
-        }
-        this.isScrollLocked = true
-      },
-      unlockScroll() {
-        if (options.isMobile) {
-          removeStyle(document.body, 'overflow')
-        } else {
-          window.removeEventListener('wheel', this.lockScrollListener)
-        }
-        this.isScrollLocked = false
-      },
-      lockScrollListener(e) {
-        e.preventDefault()
-      },
       get(name) {
         return this.modals.find(modal => modal.name === name)
       },
@@ -57,7 +35,7 @@ function createVfm(options) {
 }
 
 export function bindPrototype(Vue, options) {
-  const vfm = createVfm(options)()
+  const vfm = createVfm()()
   Object.defineProperty(Vue.prototype, options.key, {
     get() {
       return vfm

dist/VueFinalModal.umd.js.map

@@ -55,6 +55,7 @@
 
 <script>
 import FocusTrap from './utils/focusTrap.js'
+import { disableBodyScroll, enableBodyScroll } from './utils/bodyScrollLock'
 
 const TransitionState = {
   Enter: 'enter',
@@ -236,7 +237,13 @@ export default {
     },
     handleLockScroll() {
       if (this.value) {
-        this.lockScroll ? this.api.lockScroll() : this.api.unlockScroll()
+        if (this.lockScroll) {
+          disableBodyScroll(this.$refs.vfmContent, {
+            reserveScrollBarGap: true
+          })
+        } else {
+          enableBodyScroll(this.$refs.vfmContent)
+        }
       }
     },
     getAttachElement() {
@@ -293,7 +300,7 @@ export default {
       this.modalStackIndex = null
 
       if (this.api.openedModals.length === 0) {
-        this.lockScroll && this.api.unlockScroll()
+        this.lockScroll && enableBodyScroll(this.$refs.vfmContent)
       }
 
       let stopEvent = false

example/src/components/basic/BasicOptions.vue

@@ -0,0 +1,83 @@
+// stolen from body-scroll-lock and removed ios part
+
+let locks = []
+let previousBodyOverflowSetting
+let previousBodyPaddingRight
+
+const setOverflowHidden = options => {
+  // If previousBodyPaddingRight is already set, don't set it again.
+  if (previousBodyPaddingRight === undefined) {
+    const reserveScrollBarGap = !!options && options.reserveScrollBarGap === true
+    const scrollBarGap = window.innerWidth - document.documentElement.clientWidth
+
+    if (reserveScrollBarGap && scrollBarGap > 0) {
+      const computedBodyPaddingRight = parseInt(getComputedStyle(document.body).getPropertyValue('padding-right'), 10)
+      previousBodyPaddingRight = document.body.style.paddingRight
+      document.body.style.paddingRight = `${computedBodyPaddingRight + scrollBarGap}px`
+    }
+  }
+  // If previousBodyOverflowSetting is already set, don't set it again.
+  if (previousBodyOverflowSetting === undefined) {
+    previousBodyOverflowSetting = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
+  }
+}
+
+const restoreOverflowSetting = () => {
+  if (previousBodyPaddingRight !== undefined) {
+    document.body.style.paddingRight = previousBodyPaddingRight
+
+    // Restore previousBodyPaddingRight to undefined so setOverflowHidden knows it
+    // can be set again.
+    previousBodyPaddingRight = undefined
+  }
+
+  if (previousBodyOverflowSetting !== undefined) {
+    document.body.style.overflow = previousBodyOverflowSetting
+
+    // Restore previousBodyOverflowSetting to undefined
+    // so setOverflowHidden knows it can be set again.
+    previousBodyOverflowSetting = undefined
+  }
+}
+
+export const disableBodyScroll = (targetElement, options) => {
+  // targetElement must be provided
+  if (!targetElement) {
+    // eslint-disable-next-line no-console
+    console.error(
+      'disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.'
+    )
+    return
+  }
+
+  // disableBodyScroll must not have been called on this targetElement before
+  if (locks.some(lock => lock.targetElement === targetElement)) {
+    return
+  }
+
+  const lock = {
+    targetElement,
+    options: options || {}
+  }
+
+  locks = [...locks, lock]
+
+  setOverflowHidden(options)
+}
+
+export const enableBodyScroll = targetElement => {
+  if (!targetElement) {
+    // eslint-disable-next-line no-console
+    console.error(
+      'enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.'
+    )
+    return
+  }
+
+  locks = locks.filter(lock => lock.targetElement !== targetElement)
+
+  if (!locks.length) {
+    restoreOverflowSetting()
+  }
+}