diff --git a/__tests__/src/components/WindowList.test.js b/__tests__/src/components/WindowList.test.js index 06c65b65db9ecbec83ed1d23d96898131557f914..b96948578556bca0c4881045186424cf8838ec88 100644 --- a/__tests__/src/components/WindowList.test.js +++ b/__tests__/src/components/WindowList.test.js @@ -17,6 +17,7 @@ describe('WindowList', () => { wrapper = shallow( <WindowList + containerId="mirador" anchorEl={{}} manifests={manifests} windows={windows} @@ -36,6 +37,7 @@ describe('WindowList', () => { wrapper = shallow( <WindowList + containerId="mirador" anchorEl={{}} manifests={manifests} windows={windows} @@ -64,6 +66,7 @@ describe('WindowList', () => { wrapper = shallow( <WindowList + containerId="mirador" anchorEl={{}} manifests={manifests} windows={windows} diff --git a/__tests__/src/components/WindowTopMenu.test.js b/__tests__/src/components/WindowTopMenu.test.js index db9671e41d370fde81b7e21d80d25ee62e0b12f5..38d40e4649279367ab026dd9ed24b98821e628be 100644 --- a/__tests__/src/components/WindowTopMenu.test.js +++ b/__tests__/src/components/WindowTopMenu.test.js @@ -11,6 +11,7 @@ import { WindowTopMenu } from '../../../src/components/WindowTopMenu'; function createWrapper(props) { return shallow( <WindowTopMenu + containerId="mirador" windowId="xyz" handleClose={() => {}} anchorEl={null} diff --git a/__tests__/src/components/WorkspaceMenu.test.js b/__tests__/src/components/WorkspaceMenu.test.js index 0dbfcd067d59524533c82a6ff0f9b581815cb858..383c63cc24268cc96638f387f76745a4010fe9bb 100644 --- a/__tests__/src/components/WorkspaceMenu.test.js +++ b/__tests__/src/components/WorkspaceMenu.test.js @@ -14,6 +14,7 @@ describe('WorkspaceMenu', () => { toggleZoomControls = jest.fn(); wrapper = shallow( <WorkspaceMenu + containerId="mirador" handleClose={handleClose} showZoomControls={showZoomControls} toggleZoomControls={toggleZoomControls} diff --git a/src/components/WindowList.js b/src/components/WindowList.js index 921b11c3a3e8412fd0b15413edd10fa8544db36d..b592d66dcda0e6812c5055161b9d345dd014b7c0 100644 --- a/src/components/WindowList.js +++ b/src/components/WindowList.js @@ -4,6 +4,7 @@ import Menu from '@material-ui/core/Menu'; import MenuItem from '@material-ui/core/MenuItem'; import ListSubheader from '@material-ui/core/ListSubheader'; import PropTypes from 'prop-types'; +import ns from '../config/css-ns'; /** */ @@ -29,10 +30,16 @@ export class WindowList extends Component { */ render() { const { - handleClose, anchorEl, windows, focusWindow, t, + containerId, handleClose, anchorEl, windows, focusWindow, t, } = this.props; return ( - <Menu id="window-list-menu" anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}> + <Menu + id="window-list-menu" + container={document.querySelector(`#${containerId} .${ns('viewer')}`)} + anchorEl={anchorEl} + open={Boolean(anchorEl)} + onClose={handleClose} + > <ListSubheader> <Button color="inherit" aria-label={t('closeMenu')} onClick={handleClose} align="right" style={{ float: 'right' }}>×</Button> {t('openWindows')} @@ -55,6 +62,7 @@ export class WindowList extends Component { } WindowList.propTypes = { + containerId: PropTypes.string.isRequired, focusWindow: PropTypes.func.isRequired, handleClose: PropTypes.func.isRequired, anchorEl: PropTypes.object, // eslint-disable-line react/forbid-prop-types diff --git a/src/components/WindowTopMenu.js b/src/components/WindowTopMenu.js index d19e3c14cca253962ec161a7836fccfae8bed008..b0465003ebef517a3adc79853e8eff56540184b1 100644 --- a/src/components/WindowTopMenu.js +++ b/src/components/WindowTopMenu.js @@ -5,6 +5,7 @@ import Divider from '@material-ui/core/Divider'; import PropTypes from 'prop-types'; import WindowThumbnailSettings from '../containers/WindowThumbnailSettings'; import WindowViewSettings from '../containers/WindowViewSettings'; +import ns from '../config/css-ns'; /** */ @@ -14,12 +15,20 @@ export class WindowTopMenu extends Component { * @return */ render() { - const { handleClose, anchorEl, windowId } = this.props; + const { + containerId, handleClose, anchorEl, windowId, + } = this.props; // const {} = this.state; return ( <> - <Menu id={`window-menu_${windowId}`} anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}> + <Menu + id={`window-menu_${windowId}`} + container={document.querySelector(`#${containerId} .${ns('viewer')}`)} + anchorEl={anchorEl} + open={Boolean(anchorEl)} + onClose={handleClose} + > <ListItem> <WindowViewSettings windowId={windowId} /> </ListItem> @@ -35,6 +44,7 @@ export class WindowTopMenu extends Component { } WindowTopMenu.propTypes = { + containerId: PropTypes.string.isRequired, windowId: PropTypes.string.isRequired, handleClose: PropTypes.func.isRequired, anchorEl: PropTypes.object, // eslint-disable-line react/forbid-prop-types diff --git a/src/components/WorkspaceMenu.js b/src/components/WorkspaceMenu.js index 5019f94da0d444a2c6fb873b3f2b78ef4b770b62..0d0a307fc8508dfb183069e7e88dfa54fd2744a6 100644 --- a/src/components/WorkspaceMenu.js +++ b/src/components/WorkspaceMenu.js @@ -15,6 +15,7 @@ import { NestedMenu } from './NestedMenu'; import WindowList from '../containers/WindowList'; import WorkspaceSettings from '../containers/WorkspaceSettings'; import WorkspaceExport from '../containers/WorkspaceExport'; +import ns from '../config/css-ns'; /** */ @@ -72,7 +73,7 @@ export class WorkspaceMenu extends Component { */ render() { const { - handleClose, anchorEl, t, showZoomControls, + containerId, handleClose, anchorEl, t, showZoomControls, } = this.props; const { @@ -84,7 +85,13 @@ export class WorkspaceMenu extends Component { return ( <> - <Menu id="workspace-menu" anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}> + <Menu + id="workspace-menu" + container={document.querySelector(`#${containerId} .${ns('viewer')}`)} + anchorEl={anchorEl} + open={Boolean(anchorEl)} + onClose={handleClose} + > <MenuItem aria-haspopup="true" onClick={(e) => { this.handleMenuItemClick('windowList', e); handleClose(e); }} @@ -158,6 +165,7 @@ export class WorkspaceMenu extends Component { } WorkspaceMenu.propTypes = { + containerId: PropTypes.string.isRequired, handleClose: PropTypes.func.isRequired, toggleZoomControls: PropTypes.func, showZoomControls: PropTypes.bool, diff --git a/src/containers/WindowList.js b/src/containers/WindowList.js index ea83b10cb9c80cf60edfae05e2f9f4e1c39af485..3a77b6f8a7aec49ad58405fb8bee394a8328ab59 100644 --- a/src/containers/WindowList.js +++ b/src/containers/WindowList.js @@ -20,6 +20,7 @@ const mapDispatchToProps = { */ const mapStateToProps = state => ( { + containerId: state.config.id, windows: state.windows, manifests: state.manifests, } diff --git a/src/containers/WindowTopMenu.js b/src/containers/WindowTopMenu.js index 5cfba2887e4ee44f848429260101323e6c4beb60..1dedc34c1026175278689faf8b449f6d4897d5e8 100644 --- a/src/containers/WindowTopMenu.js +++ b/src/containers/WindowTopMenu.js @@ -1,4 +1,20 @@ +import { compose } from 'redux'; +import { connect } from 'react-redux'; import miradorWithPlugins from '../lib/miradorWithPlugins'; import { WindowTopMenu } from '../components/WindowTopMenu'; -export default miradorWithPlugins(WindowTopMenu); +/** + * mapStateToProps - to hook up connect + * @memberof WindowTopMenu + * @private + */ +const mapStateToProps = state => ({ + containerId: state.config.id, +}); + +const enhance = compose( + connect(mapStateToProps, null), + miradorWithPlugins, +); + +export default enhance(WindowTopMenu); diff --git a/src/containers/WorkspaceMenu.js b/src/containers/WorkspaceMenu.js index 79392e276bfcd6c730b2e39f803c7cacbefaea3a..7e4cd8e3f78f42dff68bf051ba18a71f0a7f60a9 100644 --- a/src/containers/WorkspaceMenu.js +++ b/src/containers/WorkspaceMenu.js @@ -17,9 +17,10 @@ const mapDispatchToProps = { toggleZoomControls: actions.toggleZoomControls }; * @memberof WindowViewer * @private */ -const mapStateToProps = state => ( - { showZoomControls: state.workspace.showZoomControls } -); +const mapStateToProps = state => ({ + containerId: state.config.id, + showZoomControls: state.workspace.showZoomControls, +}); const enhance = compose( withTranslation(),