Skip to content
Snippets Groups Projects
Unverified Commit 98e15cd7 authored by Jack Reed's avatar Jack Reed Committed by GitHub
Browse files

Merge pull request #2179 from ProjectMirador/2160-hide-canvas-nav

Hide the canvas navigation controls unless the window is focused
parents 846d99b9 53f57cd3
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 { shallow } from 'enzyme';
import manifesto from 'manifesto.js';
import Typography from '@material-ui/core/Typography';
import { WindowViewer } from '../../../src/components/WindowViewer';
import OSDViewer from '../../../src/containers/OpenSeadragonViewer';
import ViewerNavigation from '../../../src/containers/ViewerNavigation';
import ZoomControls from '../../../src/containers/ZoomControls';
import WindowCanvasNavigationControls from '../../../src/containers/WindowCanvasNavigationControls';
import fixture from '../../fixtures/version-2/019.json';
import emptyCanvasFixture from '../../fixtures/version-2/emptyCanvas.json';
import otherContentFixture from '../../fixtures/version-2/299843.json';
......@@ -44,11 +42,7 @@ describe('WindowViewer', () => {
expect(wrapper.matchesElement(
<>
<OSDViewer>
<div>
<ZoomControls />
<ViewerNavigation />
<Typography>label</Typography>
</div>
<WindowCanvasNavigationControls />
</OSDViewer>
</>,
)).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 PropTypes from 'prop-types';
import Typography from '@material-ui/core/Typography';
import OSDViewer from '../containers/OpenSeadragonViewer';
import ZoomControls from '../containers/ZoomControls';
import ViewerNavigation from '../containers/ViewerNavigation';
import WindowCanvasNavigationControls from '../containers/WindowCanvasNavigationControls';
import ManifestoCanvas from '../lib/ManifestoCanvas';
import CanvasGroupings from '../lib/CanvasGroupings';
import ns from '../config/css-ns';
/**
* Represents a WindowViewer in the mirador workspace. Responsible for mounting
......@@ -124,7 +121,7 @@ export class WindowViewer extends Component {
* Renders things
*/
render() {
const { canvasLabel, window } = this.props;
const { window } = this.props;
return (
<>
<OSDViewer
......@@ -132,15 +129,7 @@ export class WindowViewer extends Component {
currentCanvases={this.currentCanvases()}
windowId={window.id}
>
<div className={ns('canvas-nav')}>
<ZoomControls windowId={window.id} />
<ViewerNavigation window={window} canvases={this.canvases} />
{
canvasLabel && (
<Typography variant="caption" className={ns('canvas-label')}>{canvasLabel}</Typography>
)
}
</div>
<WindowCanvasNavigationControls windowId={window.id} canvases={this.canvases} />
</OSDViewer>
</>
);
......@@ -153,9 +142,4 @@ WindowViewer.propTypes = {
fetchInfoResponse: PropTypes.func.isRequired,
manifest: 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 { connect } from 'react-redux';
import * as actions from '../state/actions';
import {
getCanvasLabel,
getSelectedCanvas,
} from '../state/selectors';
import { WindowViewer } from '../components/WindowViewer';
/**
......@@ -14,10 +10,6 @@ import { WindowViewer } from '../components/WindowViewer';
*/
const mapStateToProps = (state, { window }) => (
{
canvasLabel: getCanvasLabel(
getSelectedCanvas(state, window.id),
state.windows[window.id].canvasIndex,
),
infoResponses: state.infoResponses,
}
);
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment