From 60c3501d35817f591775a0309f3f7070a14bfd4a Mon Sep 17 00:00:00 2001 From: taehoon Date: Fri, 19 Jul 2019 12:24:23 -0400 Subject: [PATCH 1/7] install body-scroll-lock --- package.json | 1 + yarn.lock | 5 +++++ 2 files changed, 6 insertions(+) diff --git a/package.json b/package.json index 0f6ae9c8..f039d412 100644 --- 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/yarn.lock b/yarn.lock index d6c8b4a6..4e0d9a22 100644 --- 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" From 8b321f6f1fd8b906cd9e224bbfc2356c8e4e4235 Mon Sep 17 00:00:00 2001 From: taehoon Date: Fri, 19 Jul 2019 12:27:03 -0400 Subject: [PATCH 2/7] add body-scroll-lock directive --- src/directives/body_scroll_lock.js | 69 ++++++++++++++++++++++++++++++ src/main.js | 2 + 2 files changed, 71 insertions(+) create mode 100644 src/directives/body_scroll_lock.js diff --git a/src/directives/body_scroll_lock.js b/src/directives/body_scroll_lock.js new file mode 100644 index 00000000..6ab20c3f --- /dev/null +++ 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 index b3256e8e..ffaf0ad5 100644 --- a/src/main.js +++ b/src/main.js @@ -26,6 +26,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' @@ -38,6 +39,7 @@ Vue.use(VueI18n) Vue.use(VueChatScroll) Vue.use(VueClickOutside) Vue.use(PortalVue) +Vue.use(VBodyScrollLock) Vue.use(VTooltip) const i18n = new VueI18n({ From ad504768feacecdbd9f41f4bca470a58fdf0d059 Mon Sep 17 00:00:00 2001 From: taehoon Date: Fri, 19 Jul 2019 12:36:07 -0400 Subject: [PATCH 3/7] lock body scroll --- src/App.vue | 1 + src/components/media_modal/media_modal.vue | 5 +++++ 2 files changed, 6 insertions(+) diff --git a/src/App.vue b/src/App.vue index 719e00a4..d7453549 100644 --- a/src/App.vue +++ b/src/App.vue @@ -4,6 +4,7 @@ :style="bgAppStyle" >
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue index ab5a36a5..06ced5a1 100644 --- a/src/components/media_modal/media_modal.vue +++ b/src/components/media_modal/media_modal.vue @@ -1,6 +1,7 @@