diff options
3 files changed, 43 insertions, 28 deletions
diff --git a/app/javascript/flavours/glitch/containers/media_container.js b/app/javascript/flavours/glitch/containers/media_container.js index 0afe50740..a483510b0 100644 --- a/app/javascript/flavours/glitch/containers/media_container.js +++ b/app/javascript/flavours/glitch/containers/media_container.js @@ -2,17 +2,17 @@ import React, { PureComponent, Fragment } from 'react'; import ReactDOM from 'react-dom'; import PropTypes from 'prop-types'; import { IntlProvider, addLocaleData } from 'react-intl'; +import { List as ImmutableList, fromJS } from 'immutable'; import { getLocale } from 'mastodon/locales'; +import { getScrollbarWidth } from 'flavours/glitch/util/scrollbar'; import MediaGallery from 'flavours/glitch/components/media_gallery'; -import Video from 'flavours/glitch/features/video'; -import Card from 'flavours/glitch/features/status/components/card'; import Poll from 'flavours/glitch/components/poll'; import Hashtag from 'flavours/glitch/components/hashtag'; -import Audio from 'flavours/glitch/features/audio'; import ModalRoot from 'flavours/glitch/components/modal_root'; -import { getScrollbarWidth } from 'flavours/glitch/features/ui/components/modal_root'; import MediaModal from 'flavours/glitch/features/ui/components/media_modal'; -import { List as ImmutableList, fromJS } from 'immutable'; +import Video from 'flavours/glitch/features/video'; +import Card from 'flavours/glitch/features/status/components/card'; +import Audio from 'flavours/glitch/features/audio'; const { localeData, messages } = getLocale(); addLocaleData(localeData); diff --git a/app/javascript/flavours/glitch/features/ui/components/modal_root.js b/app/javascript/flavours/glitch/features/ui/components/modal_root.js index 53334835d..488daf0cc 100644 --- a/app/javascript/flavours/glitch/features/ui/components/modal_root.js +++ b/app/javascript/flavours/glitch/features/ui/components/modal_root.js @@ -1,6 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import Base from '../../../components/modal_root'; +import { getScrollbarWidth } from 'flavours/glitch/util/scrollbar'; +import Base from 'flavours/glitch/components/modal_root'; import BundleContainer from '../containers/bundle_container'; import BundleModalError from './bundle_modal_error'; import ModalLoading from './modal_loading'; @@ -46,28 +47,6 @@ const MODAL_COMPONENTS = { 'PINNED_ACCOUNTS_EDITOR': PinnedAccountsEditor, }; -let cachedScrollbarWidth = null; - -export const getScrollbarWidth = () => { - if (cachedScrollbarWidth !== null) { - return cachedScrollbarWidth; - } - - const outer = document.createElement('div'); - outer.style.visibility = 'hidden'; - outer.style.overflow = 'scroll'; - document.body.appendChild(outer); - - const inner = document.createElement('div'); - outer.appendChild(inner); - - const scrollbarWidth = outer.offsetWidth - inner.offsetWidth; - cachedScrollbarWidth = scrollbarWidth; - outer.parentNode.removeChild(outer); - - return scrollbarWidth; -}; - export default class ModalRoot extends React.PureComponent { static propTypes = { diff --git a/app/javascript/flavours/glitch/util/scrollbar.js b/app/javascript/flavours/glitch/util/scrollbar.js new file mode 100644 index 000000000..6529b7906 --- /dev/null +++ b/app/javascript/flavours/glitch/util/scrollbar.js @@ -0,0 +1,36 @@ +import { isMobile } from 'flavours/glitch/util/is_mobile'; + +/** @type {number | null} */ +let cachedScrollbarWidth = null; + +/** + * @return {number} + */ +const getActualScrollbarWidth = () => { + const outer = document.createElement('div'); + outer.style.visibility = 'hidden'; + outer.style.overflow = 'scroll'; + document.body.appendChild(outer); + + const inner = document.createElement('div'); + outer.appendChild(inner); + + const scrollbarWidth = outer.offsetWidth - inner.offsetWidth; + outer.parentNode.removeChild(outer); + + return scrollbarWidth; +}; + +/** + * @return {number} + */ +export const getScrollbarWidth = () => { + if (cachedScrollbarWidth !== null) { + return cachedScrollbarWidth; + } + + const scrollbarWidth = isMobile(window.innerWidth) ? 0 : getActualScrollbarWidth(); + cachedScrollbarWidth = scrollbarWidth; + + return scrollbarWidth; +}; |