Troplo/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Merge branch '616' into 'develop'

Browse source 
Lock body scroll when lightbox is open

Closes #616

See merge request pleroma/pleroma-fe!886
This commit is contained in:
Shpuld Shpludson 2019-09-25 07:16:23 +00:00
commit 170372b2bc
8 changed files with 101 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -9,7 +9,7 @@
<link rel="stylesheet" href="/static/font/css/fontello.css"> <link rel="stylesheet" href="/static/font/css/fontello.css">
<link rel="stylesheet" href="/static/font/css/animation.css"> <link rel="stylesheet" href="/static/font/css/animation.css">
</head> </head>
<body> <body class="hidden">
<noscript>To use Pleroma, please enable JavaScript.</noscript> <noscript>To use Pleroma, please enable JavaScript.</noscript>
<div id="app"></div> <div id="app"></div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->

1
package.json
View file

@ -18,6 +18,7 @@
"@chenfengyuan/vue-qrcode": "^1.0.0", "@chenfengyuan/vue-qrcode": "^1.0.0",
"babel-plugin-add-module-exports": "^0.2.1", "babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-lodash": "^3.2.11", "babel-plugin-lodash": "^3.2.11",
"body-scroll-lock": "^2.6.4",
"chromatism": "^3.0.0", "chromatism": "^3.0.0",
"cropperjs": "^1.4.3", "cropperjs": "^1.4.3",
"diff": "^3.0.1", "diff": "^3.0.1",

5
src/App.scss
View file

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

3
src/App.vue
View file

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

5
src/components/media_modal/media_modal.vue
View file

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

69
src/directives/body_scroll_lock.js Normal file
View file

@ -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)
}

2
src/main.js
View file

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

5
yarn.lock
View file

@ -1196,6 +1196,11 @@ body-parser@1.18.3, body-parser@^1.16.1:
raw-body "2.3.3" raw-body "2.3.3"
type-is "~1.6.16" 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: boolbase@~1.0.0:
version "1.0.0" version "1.0.0"
resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e" resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"