commit: 170372b2bc4614bd8db97d7d0ab3c745f3087501
parent: 49ea63ddf3b250de83d5daa3594fd5d27bea33c6
Author: Shpuld Shpludson <shp@cock.li>
Date: Wed, 25 Sep 2019 07:16:23 +0000
Merge branch '616' into 'develop'
Lock body scroll when lightbox is open
Closes #616
See merge request pleroma/pleroma-fe!886
Diffstat:
8 files changed, 100 insertions(+), 14 deletions(-)
diff --git a/index.html b/index.html
@@ -9,7 +9,7 @@
<link rel="stylesheet" href="/static/font/css/fontello.css">
<link rel="stylesheet" href="/static/font/css/animation.css">
</head>
- <body>
+ <body class="hidden">
<noscript>To use Pleroma, please enable JavaScript.</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
"@chenfengyuan/vue-qrcode": "^1.0.0",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-lodash": "^3.2.11",
+ "body-scroll-lock": "^2.6.4",
"chromatism": "^3.0.0",
"cropperjs": "^1.4.3",
"diff": "^3.0.1",
diff --git a/src/App.scss b/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;
diff --git a/src/App.vue b/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="inner-nav">
<div
- class="mask"
- :style="logoMaskStyle"
- />
- <img
- :src="logo"
- :style="logoStyle"
+ class="logo"
+ :style="logoBgStyle"
>
- </div>
- <div class="inner-nav">
+ <div
+ class="mask"
+ :style="logoMaskStyle"
+ />
+ <img
+ :src="logo"
+ :style="logoStyle"
+ >
+ </div>
<div class="item">
<router-link
class="site-name"
diff --git a/src/components/media_modal/media_modal.vue b/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;
diff --git a/src/directives/body_scroll_lock.js b/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)
+}
diff --git a/src/main.js b/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({
diff --git a/yarn.lock b/yarn.lock
@@ -1196,6 +1196,11 @@ body-parser@1.18.3, body-parser@^1.16.1:
raw-body "2.3.3"
type-is "~1.6.16"
+body-scroll-lock@^2.6.4:
+ version "2.6.4"
+ resolved "https://registry.yarnpkg.com/body-scroll-lock/-/body-scroll-lock-2.6.4.tgz#567abc60ef4d656a79156781771398ef40462e94"
+ integrity sha512-NP08WsovlmxEoZP9pdlqrE+AhNaivlTrz9a0FF37BQsnOrpN48eNqivKkE7SYpM9N+YIPjsdVzfLAUQDBm6OQw==
+
boolbase@~1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
