Merge branch '616' into 'develop'

Lock body scroll when lightbox is open

Closes #616

See merge request pleroma/pleroma-fe!886

src/App.scss

@@ -10,7 +10,8 @@
   position: fixed;
   z-index: -1;
   height: 100%;
-  width: 100%;
+  left: 0;
+  right: -20px;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: 0 50%;
@@ -347,6 +348,7 @@ i[class*=icon-] {
   align-items: center;
   position: fixed;
   height: 50px;
+  box-sizing: border-box;
 
   .logo {
     display: flex;
@@ -386,6 +388,7 @@ i[class*=icon-] {
   }
 
   .inner-nav {
+    position: relative;
     margin: auto;
     box-sizing: border-box;
     padding-left: 10px;

src/App.vue

@@ -4,6 +4,7 @@
     :style="bgAppStyle"
   >
     <div
+      id="app_bg_wrapper"
       class="app-bg-wrapper"
       :style="bgStyle"
     />
@@ -14,20 +15,20 @@
       class="nav-bar container"
       @click="scrollToTop()"
     >
-      <div
-        class="logo"
-        :style="logoBgStyle"
-      >
-        <div
-          class="mask"
-          :style="logoMaskStyle"
-        />
-        <img
-          :src="logo"
-          :style="logoStyle"
-        >
-      </div>
       <div class="inner-nav">
+        <div
+          class="logo"
+          :style="logoBgStyle"
+        >
+          <div
+            class="mask"
+            :style="logoMaskStyle"
+          />
+          <img
+            :src="logo"
+            :style="logoStyle"
+          >
+        </div>
         <div class="item">
           <router-link
             class="site-name"

src/components/media_modal/media_modal.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     v-if="showing"
+    v-body-scroll-lock="showing"
     class="modal-view media-modal-view"
     @click.prevent="hide"
   >
@@ -43,6 +44,10 @@
 .media-modal-view {
   z-index: 1001;
 
+  body:not(.scroll-locked) & {
+    display: none;
+  }
+
   &:hover {
     .modal-view-button-arrow {
       opacity: 0.75;

src/directives/body_scroll_lock.js

@@ -0,0 +1,69 @@
+import * as bodyScrollLock from 'body-scroll-lock'
+
+let previousNavPaddingRight
+let previousAppBgWrapperRight
+
+const disableBodyScroll = (el) => {
+  const scrollBarGap = window.innerWidth - document.documentElement.clientWidth
+  bodyScrollLock.disableBodyScroll(el, {
+    reserveScrollBarGap: true
+  })
+  setTimeout(() => {
+    // If previousNavPaddingRight is already set, don't set it again.
+    if (previousNavPaddingRight === undefined) {
+      const navEl = document.getElementById('nav')
+      previousNavPaddingRight = window.getComputedStyle(navEl).getPropertyValue('padding-right')
+      navEl.style.paddingRight = previousNavPaddingRight ? `calc(${previousNavPaddingRight} + ${scrollBarGap}px)` : `${scrollBarGap}px`
+    }
+    // If previousAppBgWrapeprRight is already set, don't set it again.
+    if (previousAppBgWrapperRight === undefined) {
+      const appBgWrapperEl = document.getElementById('app_bg_wrapper')
+      previousAppBgWrapperRight = window.getComputedStyle(appBgWrapperEl).getPropertyValue('right')
+      appBgWrapperEl.style.right = previousAppBgWrapperRight ? `calc(${previousAppBgWrapperRight} + ${scrollBarGap}px)` : `${scrollBarGap}px`
+    }
+    document.body.classList.add('scroll-locked')
+  })
+}
+
+const enableBodyScroll = (el) => {
+  setTimeout(() => {
+    if (previousNavPaddingRight !== undefined) {
+      document.getElementById('nav').style.paddingRight = previousNavPaddingRight
+      // Restore previousNavPaddingRight to undefined so disableBodyScroll knows it can be set again.
+      previousNavPaddingRight = undefined
+    }
+    if (previousAppBgWrapperRight !== undefined) {
+      document.getElementById('app_bg_wrapper').style.right = previousAppBgWrapperRight
+      // Restore previousAppBgWrapperRight to undefined so disableBodyScroll knows it can be set again.
+      previousAppBgWrapperRight = undefined
+    }
+    document.body.classList.remove('scroll-locked')
+  })
+  bodyScrollLock.enableBodyScroll(el)
+}
+
+const directive = {
+  inserted: (el, binding) => {
+    if (binding.value) {
+      disableBodyScroll(el)
+    }
+  },
+  componentUpdated: (el, binding) => {
+    if (binding.oldValue === binding.value) {
+      return
+    }
+
+    if (binding.value) {
+      disableBodyScroll(el)
+    } else {
+      enableBodyScroll(el)
+    }
+  },
+  unbind: (el) => {
+    enableBodyScroll(el)
+  }
+}
+
+export default (Vue) => {
+  Vue.directive('body-scroll-lock', directive)
+}

src/main.js

@@ -27,6 +27,7 @@ import messages from './i18n/messages.js'
 import VueChatScroll from 'vue-chat-scroll'
 import VueClickOutside from 'v-click-outside'
 import PortalVue from 'portal-vue'
+import VBodyScrollLock from './directives/body_scroll_lock'
 import VTooltip from 'v-tooltip'
 
 import afterStoreSetup from './boot/after_store.js'
@@ -39,6 +40,7 @@ Vue.use(VueI18n)
 Vue.use(VueChatScroll)
 Vue.use(VueClickOutside)
 Vue.use(PortalVue)
+Vue.use(VBodyScrollLock)
 Vue.use(VTooltip)
 
 const i18n = new VueI18n({