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

Pull the thumbnail click handlers up to a containing element

parent e025df7f
Branches
Tags
No related merge requests found
...@@ -52,7 +52,7 @@ describe('ThumbnailNavigation', () => { ...@@ -52,7 +52,7 @@ describe('ThumbnailNavigation', () => {
expect(wrapper.find('.mirador-thumbnail-nav-canvas-1.mirador-current-canvas')); expect(wrapper.find('.mirador-thumbnail-nav-canvas-1.mirador-current-canvas'));
}); });
it('when clicked, updates the current canvas', () => { it('when clicked, updates the current canvas', () => {
renderedGrid.find('.mirador-thumbnail-nav-canvas-0 CanvasThumbnail').simulate('click'); renderedGrid.find('.mirador-thumbnail-nav-canvas-0 WithStyles(GridListTile)').simulate('click');
expect(setCanvas).toHaveBeenCalledWith('foobar', 0); expect(setCanvas).toHaveBeenCalledWith('foobar', 0);
}); });
it('sets up calculated width based off of height of area and dimensions of canvas', () => { it('sets up calculated width based off of height of area and dimensions of canvas', () => {
......
...@@ -4,7 +4,6 @@ import List from '@material-ui/core/List'; ...@@ -4,7 +4,6 @@ import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem'; import ListItem from '@material-ui/core/ListItem';
import Typography from '@material-ui/core/Typography'; import Typography from '@material-ui/core/Typography';
import manifesto from 'manifesto.js'; import manifesto from 'manifesto.js';
import { CanvasThumbnail } from '../../../src/components/CanvasThumbnail';
import { WindowSideBarCanvasPanel } from '../../../src/components/WindowSideBarCanvasPanel'; import { WindowSideBarCanvasPanel } from '../../../src/components/WindowSideBarCanvasPanel';
import manifestJson from '../../fixtures/version-2/019.json'; import manifestJson from '../../fixtures/version-2/019.json';
import { getIdAndLabelOfCanvases } from '../../../src/state/selectors'; import { getIdAndLabelOfCanvases } from '../../../src/state/selectors';
...@@ -54,13 +53,8 @@ describe('WindowSideBarCanvasPanel', () => { ...@@ -54,13 +53,8 @@ describe('WindowSideBarCanvasPanel', () => {
.text()).toBe(idsAndLabels[1].label); .text()).toBe(idsAndLabels[1].label);
}); });
it('should call the onClick handler of a navigation item\'s label', () => { it('should call the onClick handler of a list item', () => {
wrapper.find(Typography).at(1).simulate('click'); wrapper.find(ListItem).at(1).simulate('click');
expect(setCanvas).toHaveBeenCalledTimes(1);
});
it('should call the onClick handler of a navigation item\'s thumbnail', () => {
wrapper.find(CanvasThumbnail).at(0).simulate('click');
expect(setCanvas).toHaveBeenCalledTimes(1); expect(setCanvas).toHaveBeenCalledTimes(1);
}); });
}); });
...@@ -91,14 +91,11 @@ export class CanvasThumbnail extends Component { ...@@ -91,14 +91,11 @@ export class CanvasThumbnail extends Component {
/** /**
*/ */
render() { render() {
const { onClick } = this.props;
return ( return (
<> <>
<IntersectionObserver onChange={this.handleIntersection}> <IntersectionObserver onChange={this.handleIntersection}>
<img <img
alt="" alt=""
onClick={onClick}
onKeyPress={onClick}
role="presentation" role="presentation"
src={this.imageSrc()} src={this.imageSrc()}
style={this.imageStyles()} style={this.imageStyles()}
...@@ -115,7 +112,6 @@ CanvasThumbnail.defaultImgPlaceholder = 'data:image/png;base64,iVBORw0KGgoAAAANS ...@@ -115,7 +112,6 @@ CanvasThumbnail.defaultImgPlaceholder = 'data:image/png;base64,iVBORw0KGgoAAAANS
CanvasThumbnail.propTypes = { CanvasThumbnail.propTypes = {
imageUrl: PropTypes.string, imageUrl: PropTypes.string,
isValid: PropTypes.bool, isValid: PropTypes.bool,
onClick: PropTypes.func.isRequired,
maxHeight: PropTypes.number, maxHeight: PropTypes.number,
maxWidth: PropTypes.number, maxWidth: PropTypes.number,
aspectRatio: PropTypes.number, aspectRatio: PropTypes.number,
......
...@@ -2,6 +2,7 @@ import React, { Component } from 'react'; ...@@ -2,6 +2,7 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer'; import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
import Grid from 'react-virtualized/dist/commonjs/Grid'; import Grid from 'react-virtualized/dist/commonjs/Grid';
import GridListTile from '@material-ui/core/GridListTile';
import { CanvasThumbnail } from './CanvasThumbnail'; import { CanvasThumbnail } from './CanvasThumbnail';
import ManifestoCanvas from '../lib/ManifestoCanvas'; import ManifestoCanvas from '../lib/ManifestoCanvas';
import ns from '../config/css-ns'; import ns from '../config/css-ns';
...@@ -66,18 +67,28 @@ export class ThumbnailNavigation extends Component { ...@@ -66,18 +67,28 @@ export class ThumbnailNavigation extends Component {
}} }}
className={ns(['thumbnail-nav-canvas', `thumbnail-nav-canvas-${columnIndex}`, this.currentCanvasClass(currentGroupings.map(canvas => canvas.index))])} className={ns(['thumbnail-nav-canvas', `thumbnail-nav-canvas-${columnIndex}`, this.currentCanvasClass(currentGroupings.map(canvas => canvas.index))])}
> >
{currentGroupings.map((canvas, i) => ( {currentGroupings.map((canvas, i) => {
<div const { height } = config.thumbnailNavigation;
const manifestoCanvas = new ManifestoCanvas(canvas);
return (
<GridListTile
component="div"
key={canvas.index} key={canvas.index}
style={{ position: 'absolute', left: (style.width - 8) * i / 2, top: 2 }} onClick={() => setCanvas(window.id, currentGroupings[0].index)}
style={{
position: 'absolute', left: (style.width - 8) * i / 2, top: 2,
}}
> >
<CanvasThumbnail <CanvasThumbnail
onClick={() => setCanvas(window.id, currentGroupings[0].index)} imageUrl={manifestoCanvas.thumbnail(null, height)}
imageUrl={new ManifestoCanvas(canvas).thumbnail(null, config.thumbnailNavigation.height)}
maxHeight={config.thumbnailNavigation.height} maxHeight={config.thumbnailNavigation.height}
maxWidth={style.width}
aspectRatio={manifestoCanvas.aspectRatio}
/> />
</div> </GridListTile>
))} );
})}
</div> </div>
</div> </div>
); );
......
...@@ -36,6 +36,8 @@ export class WindowSideBarCanvasPanel extends Component { ...@@ -36,6 +36,8 @@ export class WindowSideBarCanvasPanel extends Component {
return ( return (
<ListItem <ListItem
key={canvas.id} key={canvas.id}
onClick={onClick}
button
> >
<div> <div>
<CanvasThumbnail <CanvasThumbnail
...@@ -45,7 +47,6 @@ export class WindowSideBarCanvasPanel extends Component { ...@@ -45,7 +47,6 @@ export class WindowSideBarCanvasPanel extends Component {
maxHeight={config.canvasNavigation.height} maxHeight={config.canvasNavigation.height}
maxWidth={config.canvasNavigation.width} maxWidth={config.canvasNavigation.width}
aspectRatio={manifestoCanvas.aspectRatio} aspectRatio={manifestoCanvas.aspectRatio}
onClick={onClick}
style={{ style={{
cursor: 'pointer', cursor: 'pointer',
height: config.canvasNavigation.height, height: config.canvasNavigation.height,
...@@ -54,8 +55,7 @@ export class WindowSideBarCanvasPanel extends Component { ...@@ -54,8 +55,7 @@ export class WindowSideBarCanvasPanel extends Component {
/> />
</div> </div>
<Typography <Typography
className={classNames(classes.clickable, classes.label)} className={classNames(classes.label)}
onClick={onClick}
variant="body2" variant="body2"
color="secondary" color="secondary"
> >
......
...@@ -27,14 +27,10 @@ const mapDispatchToProps = { setCanvas: actions.setCanvas }; ...@@ -27,14 +27,10 @@ const mapDispatchToProps = { setCanvas: actions.setCanvas };
/** /**
* *
* @param theme * @param theme
* @returns {{clickable: {cursor: string}, * @returns {label: {fontSize: string, paddingLeft: number}, windowSideBarH2: *}}
* label: {fontSize: string, paddingLeft: number}, windowSideBarH2: *}}
*/ */
const styles = theme => ({ const styles = theme => ({
windowSideBarH2: theme.typography.h5, windowSideBarH2: theme.typography.h5,
clickable: {
cursor: 'pointer',
},
label: { label: {
fontSize: '8pt', fontSize: '8pt',
paddingLeft: 8, paddingLeft: 8,
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment