Skip to content
Snippets Groups Projects
Commit 53f57cd3 authored by Chris Beer's avatar Chris Beer
Browse files

Hide the canvas navigation controls unless the window is focused; fixes #2160

parent 6bb6f30f
No related branches found
No related tags found
No related merge requests found
import React from 'react';
import { shallow } from 'enzyme';
import Typography from '@material-ui/core/Typography';
import { WindowCanvasNavigationControls } from '../../../src/components/WindowCanvasNavigationControls';
import ViewerNavigation from '../../../src/containers/ViewerNavigation';
import ZoomControls from '../../../src/containers/ZoomControls';
/** create wrapper */
function createWrapper(props) {
return shallow(
<WindowCanvasNavigationControls
canvases={[]}
canvasLabel="label"
window={{}}
{...props}
/>,
);
}
describe('WindowCanvasNavigationControls', () => {
let wrapper;
it('renders properly', () => {
wrapper = createWrapper();
expect(wrapper.matchesElement(
<div>
<ZoomControls />
<ViewerNavigation />
<Typography>label</Typography>
</div>,
)).toBe(true);
});
it('renders nothing when visible=false', () => {
wrapper = createWrapper({ visible: false });
expect(wrapper.matchesElement(<></>)).toBe(true);
});
});
import React from 'react'; import React from 'react';
import { shallow } from 'enzyme'; import { shallow } from 'enzyme';
import manifesto from 'manifesto.js'; import manifesto from 'manifesto.js';
import Typography from '@material-ui/core/Typography';
import { WindowViewer } from '../../../src/components/WindowViewer'; import { WindowViewer } from '../../../src/components/WindowViewer';
import OSDViewer from '../../../src/containers/OpenSeadragonViewer'; import OSDViewer from '../../../src/containers/OpenSeadragonViewer';
import ViewerNavigation from '../../../src/containers/ViewerNavigation'; import WindowCanvasNavigationControls from '../../../src/containers/WindowCanvasNavigationControls';
import ZoomControls from '../../../src/containers/ZoomControls';
import fixture from '../../fixtures/version-2/019.json'; import fixture from '../../fixtures/version-2/019.json';
import emptyCanvasFixture from '../../fixtures/version-2/emptyCanvas.json'; import emptyCanvasFixture from '../../fixtures/version-2/emptyCanvas.json';
import otherContentFixture from '../../fixtures/version-2/299843.json'; import otherContentFixture from '../../fixtures/version-2/299843.json';
...@@ -44,11 +42,7 @@ describe('WindowViewer', () => { ...@@ -44,11 +42,7 @@ describe('WindowViewer', () => {
expect(wrapper.matchesElement( expect(wrapper.matchesElement(
<> <>
<OSDViewer> <OSDViewer>
<div> <WindowCanvasNavigationControls />
<ZoomControls />
<ViewerNavigation />
<Typography>label</Typography>
</div>
</OSDViewer> </OSDViewer>
</>, </>,
)).toBe(true); )).toBe(true);
......
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Typography from '@material-ui/core/Typography';
import ZoomControls from '../containers/ZoomControls';
import ViewerNavigation from '../containers/ViewerNavigation';
import ns from '../config/css-ns';
/**
* Represents the viewer controls in the mirador workspace.
*/
export class WindowCanvasNavigationControls extends Component {
/** */
render() {
const {
canvases, canvasLabel, visible, window,
} = this.props;
if (!visible) return (<></>);
return (
<div className={ns('canvas-nav')}>
<ZoomControls windowId={window.id} />
<ViewerNavigation window={window} canvases={canvases} />
{
canvasLabel && (
<Typography variant="caption" className={ns('canvas-label')}>{canvasLabel}</Typography>
)
}
</div>
);
}
}
WindowCanvasNavigationControls.propTypes = {
canvases: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
window: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
canvasLabel: PropTypes.string,
visible: PropTypes.bool,
};
WindowCanvasNavigationControls.defaultProps = {
canvasLabel: undefined,
visible: true,
};
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Typography from '@material-ui/core/Typography';
import OSDViewer from '../containers/OpenSeadragonViewer'; import OSDViewer from '../containers/OpenSeadragonViewer';
import ZoomControls from '../containers/ZoomControls'; import WindowCanvasNavigationControls from '../containers/WindowCanvasNavigationControls';
import ViewerNavigation from '../containers/ViewerNavigation';
import ManifestoCanvas from '../lib/ManifestoCanvas'; import ManifestoCanvas from '../lib/ManifestoCanvas';
import CanvasGroupings from '../lib/CanvasGroupings'; import CanvasGroupings from '../lib/CanvasGroupings';
import ns from '../config/css-ns';
/** /**
* Represents a WindowViewer in the mirador workspace. Responsible for mounting * Represents a WindowViewer in the mirador workspace. Responsible for mounting
...@@ -124,7 +121,7 @@ export class WindowViewer extends Component { ...@@ -124,7 +121,7 @@ export class WindowViewer extends Component {
* Renders things * Renders things
*/ */
render() { render() {
const { canvasLabel, window } = this.props; const { window } = this.props;
return ( return (
<> <>
<OSDViewer <OSDViewer
...@@ -132,15 +129,7 @@ export class WindowViewer extends Component { ...@@ -132,15 +129,7 @@ export class WindowViewer extends Component {
currentCanvases={this.currentCanvases()} currentCanvases={this.currentCanvases()}
windowId={window.id} windowId={window.id}
> >
<div className={ns('canvas-nav')}> <WindowCanvasNavigationControls windowId={window.id} canvases={this.canvases} />
<ZoomControls windowId={window.id} />
<ViewerNavigation window={window} canvases={this.canvases} />
{
canvasLabel && (
<Typography variant="caption" className={ns('canvas-label')}>{canvasLabel}</Typography>
)
}
</div>
</OSDViewer> </OSDViewer>
</> </>
); );
...@@ -153,9 +142,4 @@ WindowViewer.propTypes = { ...@@ -153,9 +142,4 @@ WindowViewer.propTypes = {
fetchInfoResponse: PropTypes.func.isRequired, fetchInfoResponse: PropTypes.func.isRequired,
manifest: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types manifest: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
window: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types window: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
canvasLabel: PropTypes.string,
};
WindowViewer.defaultProps = {
canvasLabel: undefined,
}; };
import { connect } from 'react-redux';
import { compose } from 'redux';
import {
getCanvasLabel,
getSelectedCanvas,
} from '../state/selectors';
import { WindowCanvasNavigationControls } from '../components/WindowCanvasNavigationControls';
/** */
const mapStateToProps = (state, { windowId }) => ({
window: state.windows[windowId],
canvasLabel: getCanvasLabel(
getSelectedCanvas(state, windowId),
state.windows[windowId].canvasIndex,
),
visible: state.workspace.focusedWindowId === windowId,
});
const enhance = compose(
connect(mapStateToProps),
);
export default enhance(WindowCanvasNavigationControls);
import { compose } from 'redux'; import { compose } from 'redux';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import * as actions from '../state/actions'; import * as actions from '../state/actions';
import {
getCanvasLabel,
getSelectedCanvas,
} from '../state/selectors';
import { WindowViewer } from '../components/WindowViewer'; import { WindowViewer } from '../components/WindowViewer';
/** /**
...@@ -14,10 +10,6 @@ import { WindowViewer } from '../components/WindowViewer'; ...@@ -14,10 +10,6 @@ import { WindowViewer } from '../components/WindowViewer';
*/ */
const mapStateToProps = (state, { window }) => ( const mapStateToProps = (state, { window }) => (
{ {
canvasLabel: getCanvasLabel(
getSelectedCanvas(state, window.id),
state.windows[window.id].canvasIndex,
),
infoResponses: state.infoResponses, infoResponses: state.infoResponses,
} }
); );
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment