forked from mastodon/mastodon
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Show media modal on public pages (mastodon#6801)
- Loading branch information
1 parent
1c15329
commit ff7941e
Showing
8 changed files
with
178 additions
and
116 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
|
|
||
| export default class ModalRoot extends React.PureComponent { | ||
|
|
||
| static propTypes = { | ||
| children: PropTypes.node, | ||
| onClose: PropTypes.func.isRequired, | ||
| }; | ||
|
|
||
| state = { | ||
| revealed: !!this.props.children, | ||
| }; | ||
|
|
||
| activeElement = this.state.revealed ? document.activeElement : null; | ||
|
|
||
| handleKeyUp = (e) => { | ||
| if ((e.key === 'Escape' || e.key === 'Esc' || e.keyCode === 27) | ||
| && !!this.props.children) { | ||
| this.props.onClose(); | ||
| } | ||
| } | ||
|
|
||
| componentDidMount () { | ||
| window.addEventListener('keyup', this.handleKeyUp, false); | ||
| } | ||
|
|
||
| componentWillReceiveProps (nextProps) { | ||
| if (!!nextProps.children && !this.props.children) { | ||
| this.activeElement = document.activeElement; | ||
|
|
||
| this.getSiblings().forEach(sibling => sibling.setAttribute('inert', true)); | ||
| } else if (!nextProps.children) { | ||
| this.setState({ revealed: false }); | ||
| } | ||
| } | ||
|
|
||
| componentDidUpdate (prevProps) { | ||
| if (!this.props.children && !!prevProps.children) { | ||
| this.getSiblings().forEach(sibling => sibling.removeAttribute('inert')); | ||
| this.activeElement.focus(); | ||
| this.activeElement = null; | ||
| } | ||
| if (this.props.children) { | ||
| requestAnimationFrame(() => { | ||
| this.setState({ revealed: true }); | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| componentWillUnmount () { | ||
| window.removeEventListener('keyup', this.handleKeyUp); | ||
| } | ||
|
|
||
| getSiblings = () => { | ||
| return Array(...this.node.parentElement.childNodes).filter(node => node !== this.node); | ||
| } | ||
|
|
||
| setRef = ref => { | ||
| this.node = ref; | ||
| } | ||
|
|
||
| render () { | ||
| const { children, onClose } = this.props; | ||
| const { revealed } = this.state; | ||
| const visible = !!children; | ||
|
|
||
| if (!visible) { | ||
| return ( | ||
| <div className='modal-root' ref={this.setRef} style={{ opacity: 0 }} /> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <div className='modal-root' ref={this.setRef} style={{ opacity: revealed ? 1 : 0 }}> | ||
| <div style={{ pointerEvents: visible ? 'auto' : 'none' }}> | ||
| <div role='presentation' className='modal-root__overlay' onClick={onClose} /> | ||
| <div role='dialog' className='modal-root__container'>{children}</div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| } |
68 changes: 68 additions & 0 deletions
68
app/javascript/mastodon/containers/media_galleries_container.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| import React from 'react'; | ||
| import ReactDOM from 'react-dom'; | ||
| import PropTypes from 'prop-types'; | ||
| import { IntlProvider, addLocaleData } from 'react-intl'; | ||
| import { getLocale } from '../locales'; | ||
| import MediaGallery from '../components/media_gallery'; | ||
| import ModalRoot from '../components/modal_root'; | ||
| import MediaModal from '../features/ui/components/media_modal'; | ||
| import { fromJS } from 'immutable'; | ||
|
|
||
| const { localeData, messages } = getLocale(); | ||
| addLocaleData(localeData); | ||
|
|
||
| export default class MediaGalleriesContainer extends React.PureComponent { | ||
|
|
||
| static propTypes = { | ||
| locale: PropTypes.string.isRequired, | ||
| galleries: PropTypes.object.isRequired, | ||
| }; | ||
|
|
||
| state = { | ||
| media: null, | ||
| index: null, | ||
| }; | ||
|
|
||
| handleOpenMedia = (media, index) => { | ||
| document.body.classList.add('media-gallery-standalone__body'); | ||
| this.setState({ media, index }); | ||
| } | ||
|
|
||
| handleCloseMedia = () => { | ||
| document.body.classList.remove('media-gallery-standalone__body'); | ||
| this.setState({ media: null, index: null }); | ||
| } | ||
|
|
||
| render () { | ||
| const { locale, galleries } = this.props; | ||
|
|
||
| return ( | ||
| <IntlProvider locale={locale} messages={messages}> | ||
| <React.Fragment> | ||
| {[].map.call(galleries, gallery => { | ||
| const { media, ...props } = JSON.parse(gallery.getAttribute('data-props')); | ||
|
|
||
| return ReactDOM.createPortal( | ||
| <MediaGallery | ||
| {...props} | ||
| media={fromJS(media)} | ||
| onOpenMedia={this.handleOpenMedia} | ||
| />, | ||
| gallery | ||
| ); | ||
| })} | ||
| <ModalRoot onClose={this.handleCloseMedia}> | ||
| {this.state.media === null || this.state.index === null ? null : ( | ||
| <MediaModal | ||
| media={this.state.media} | ||
| index={this.state.index} | ||
| onClose={this.handleCloseMedia} | ||
| /> | ||
| )} | ||
| </ModalRoot> | ||
| </React.Fragment> | ||
| </IntlProvider> | ||
| ); | ||
| } | ||
|
|
||
| } |
34 changes: 0 additions & 34 deletions
34
app/javascript/mastodon/containers/media_gallery_container.js
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters