Skip to content
Snippets Groups Projects
Unverified Commit 453f1a34 authored by Michael J. Giarlo's avatar Michael J. Giarlo Committed by GitHub
Browse files

Merge pull request #3450 from ProjectMirador/anno-scrollto

parents a01b939d 59217951
No related branches found
No related tags found
No related merge requests found
...@@ -5,6 +5,7 @@ import Chip from '@material-ui/core/Chip'; ...@@ -5,6 +5,7 @@ import Chip from '@material-ui/core/Chip';
import MenuList from '@material-ui/core/MenuList'; import MenuList from '@material-ui/core/MenuList';
import MenuItem from '@material-ui/core/MenuItem'; import MenuItem from '@material-ui/core/MenuItem';
import { CanvasAnnotations } from '../../../src/components/CanvasAnnotations'; import { CanvasAnnotations } from '../../../src/components/CanvasAnnotations';
import { ScrollTo } from '../../../src/components/ScrollTo';
/** Utility function to wrap CanvasAnnotations */ /** Utility function to wrap CanvasAnnotations */
function createWrapper(props) { function createWrapper(props) {
...@@ -62,6 +63,14 @@ describe('CanvasAnnotations', () => { ...@@ -62,6 +63,14 @@ describe('CanvasAnnotations', () => {
expect(wrapper.find(MenuItem).length).toEqual(2); expect(wrapper.find(MenuItem).length).toEqual(2);
}); });
it('scrolls to the selected annotation', () => {
wrapper = createWrapper({ annotations, selectedAnnotationId: 'abc123' });
expect(wrapper.find(ScrollTo).length).toEqual(2);
expect(wrapper.find(ScrollTo).first().prop('scrollTo')).toEqual(true);
expect(wrapper.find(ScrollTo).last().prop('scrollTo')).toEqual(false);
});
it('renders a Chip for every tag', () => { it('renders a Chip for every tag', () => {
wrapper = createWrapper({ annotations }); wrapper = createWrapper({ annotations });
......
...@@ -7,6 +7,7 @@ import MenuItem from '@material-ui/core/MenuItem'; ...@@ -7,6 +7,7 @@ import MenuItem from '@material-ui/core/MenuItem';
import ListItemText from '@material-ui/core/ListItemText'; import ListItemText from '@material-ui/core/ListItemText';
import Typography from '@material-ui/core/Typography'; import Typography from '@material-ui/core/Typography';
import SanitizedHtml from '../containers/SanitizedHtml'; import SanitizedHtml from '../containers/SanitizedHtml';
import { ScrollTo } from './ScrollTo';
/** /**
* CanvasAnnotations ~ * CanvasAnnotations ~
...@@ -59,6 +60,7 @@ export class CanvasAnnotations extends Component { ...@@ -59,6 +60,7 @@ export class CanvasAnnotations extends Component {
const { const {
annotations, classes, index, label, selectedAnnotationId, t, totalSize, annotations, classes, index, label, selectedAnnotationId, t, totalSize,
listContainerComponent, htmlSanitizationRuleSet, hoveredAnnotationIds, listContainerComponent, htmlSanitizationRuleSet, hoveredAnnotationIds,
containerRef,
} = this.props; } = this.props;
if (annotations.length === 0) return <></>; if (annotations.length === 0) return <></>;
...@@ -70,6 +72,12 @@ export class CanvasAnnotations extends Component { ...@@ -70,6 +72,12 @@ export class CanvasAnnotations extends Component {
<MenuList autoFocusItem variant="selectedMenu"> <MenuList autoFocusItem variant="selectedMenu">
{ {
annotations.map(annotation => ( annotations.map(annotation => (
<ScrollTo
containerRef={containerRef}
key={`${annotation.id}-scroll`}
offsetTop={96} // offset for the height of the form above
scrollTo={selectedAnnotationId === annotation.id}
>
<MenuItem <MenuItem
button button
component={listContainerComponent} component={listContainerComponent}
...@@ -102,6 +110,7 @@ export class CanvasAnnotations extends Component { ...@@ -102,6 +110,7 @@ export class CanvasAnnotations extends Component {
</div> </div>
</ListItemText> </ListItemText>
</MenuItem> </MenuItem>
</ScrollTo>
)) ))
} }
</MenuList> </MenuList>
...@@ -118,6 +127,10 @@ CanvasAnnotations.propTypes = { ...@@ -118,6 +127,10 @@ CanvasAnnotations.propTypes = {
}), }),
), ),
classes: PropTypes.objectOf(PropTypes.string), classes: PropTypes.objectOf(PropTypes.string),
containerRef: PropTypes.oneOfType([
PropTypes.func,
PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
]),
deselectAnnotation: PropTypes.func.isRequired, deselectAnnotation: PropTypes.func.isRequired,
hoverAnnotation: PropTypes.func.isRequired, hoverAnnotation: PropTypes.func.isRequired,
hoveredAnnotationIds: PropTypes.arrayOf(PropTypes.string), hoveredAnnotationIds: PropTypes.arrayOf(PropTypes.string),
...@@ -134,6 +147,7 @@ CanvasAnnotations.propTypes = { ...@@ -134,6 +147,7 @@ CanvasAnnotations.propTypes = {
CanvasAnnotations.defaultProps = { CanvasAnnotations.defaultProps = {
annotations: [], annotations: [],
classes: {}, classes: {},
containerRef: undefined,
hoveredAnnotationIds: [], hoveredAnnotationIds: [],
htmlSanitizationRuleSet: 'iiif', htmlSanitizationRuleSet: 'iiif',
listContainerComponent: 'li', listContainerComponent: 'li',
......
...@@ -10,6 +10,13 @@ import ns from '../config/css-ns'; ...@@ -10,6 +10,13 @@ import ns from '../config/css-ns';
* WindowSideBarAnnotationsPanel ~ * WindowSideBarAnnotationsPanel ~
*/ */
export class WindowSideBarAnnotationsPanel extends Component { export class WindowSideBarAnnotationsPanel extends Component {
/** */
constructor(props) {
super(props);
this.containerRef = React.createRef();
}
/** /**
* Returns the rendered component * Returns the rendered component
*/ */
...@@ -23,6 +30,8 @@ export class WindowSideBarAnnotationsPanel extends Component { ...@@ -23,6 +30,8 @@ export class WindowSideBarAnnotationsPanel extends Component {
paperClassName={ns('window-sidebar-annotation-panel')} paperClassName={ns('window-sidebar-annotation-panel')}
windowId={windowId} windowId={windowId}
id={id} id={id}
ref={this.containerRef}
otherRef={this.containerRef}
titleControls={<AnnotationSettings windowId={windowId} />} titleControls={<AnnotationSettings windowId={windowId} />}
> >
<div className={classes.section}> <div className={classes.section}>
...@@ -32,6 +41,7 @@ export class WindowSideBarAnnotationsPanel extends Component { ...@@ -32,6 +41,7 @@ export class WindowSideBarAnnotationsPanel extends Component {
{canvasIds.map((canvasId, index) => ( {canvasIds.map((canvasId, index) => (
<CanvasAnnotations <CanvasAnnotations
canvasId={canvasId} canvasId={canvasId}
containerRef={this.containerRef}
key={canvasId} key={canvasId}
index={index} index={index}
totalSize={canvasIds.length} totalSize={canvasIds.length}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment