diff --git a/app/javascript/flavours/glitch/components/modal_root.js b/app/javascript/flavours/glitch/components/modal_root.js index 89f81f58e..cc26f6a11 100644 --- a/app/javascript/flavours/glitch/components/modal_root.js +++ b/app/javascript/flavours/glitch/components/modal_root.js @@ -1,7 +1,11 @@ import React from 'react'; import PropTypes from 'prop-types'; +import createHistory from 'history/createBrowserHistory'; export default class ModalRoot extends React.PureComponent { + static contextTypes = { + router: PropTypes.object, + }; static propTypes = { children: PropTypes.node, @@ -24,6 +28,7 @@ export default class ModalRoot extends React.PureComponent { componentDidMount () { window.addEventListener('keyup', this.handleKeyUp, false); + this.history = this.context.router ? this.context.router.history : createHistory(); } componentWillReceiveProps (nextProps) { @@ -41,11 +46,13 @@ export default class ModalRoot extends React.PureComponent { this.getSiblings().forEach(sibling => sibling.removeAttribute('inert')); this.activeElement.focus(); this.activeElement = null; + this.handleModalClose(); } if (this.props.children) { requestAnimationFrame(() => { this.setState({ revealed: true }); }); + if (!prevProps.children) this.handleModalOpen(); } } @@ -53,6 +60,24 @@ export default class ModalRoot extends React.PureComponent { window.removeEventListener('keyup', this.handleKeyUp); } + handleModalClose () { + this.unlistenHistory(); + + const state = this.history.location.state; + if (state && state.mastodonModalOpen) { + this.history.goBack(); + } + } + + handleModalOpen () { + const history = this.history; + const state = {...history.location.state, mastodonModalOpen: true}; + history.push(history.location.pathname, state); + this.unlistenHistory = history.listen(() => { + this.props.onClose(); + }); + } + getSiblings = () => { return Array(...this.node.parentElement.childNodes).filter(node => node !== this.node); }