Skip to content
Snippets Groups Projects
Commit f655e84c authored by Jack Reed's avatar Jack Reed
Browse files

Add support for ViewerNavigation buttons to correctly display right-to-left

parent 11f1a126
No related branches found
No related tags found
No related merge requests found
...@@ -125,6 +125,7 @@ ...@@ -125,6 +125,7 @@
} }
}, },
"viewingHint": "individuals", "viewingHint": "individuals",
"viewingDirection": "left-to-right",
"sequences": [ "sequences": [
{ {
"@id": "https://iiif.bodleian.ox.ac.uk/iiif/sequence/9cca8fdd-4a61-4429-8ac1-f648764b4d6d_default.json", "@id": "https://iiif.bodleian.ox.ac.uk/iiif/sequence/9cca8fdd-4a61-4429-8ac1-f648764b4d6d_default.json",
......
...@@ -5,11 +5,13 @@ ...@@ -5,11 +5,13 @@
"label": "Test 15 Manifest: ViewingHint: paged (Modified to be on sequence also)", "label": "Test 15 Manifest: ViewingHint: paged (Modified to be on sequence also)",
"within": "http://iiif.io/api/presentation/2.0/example/fixtures/collection.json", "within": "http://iiif.io/api/presentation/2.0/example/fixtures/collection.json",
"viewingHint": "individuals", "viewingHint": "individuals",
"viewingDirection": "right-to-left",
"sequences": [ "sequences": [
{ {
"@type": "sc:Sequence", "@type": "sc:Sequence",
"label": "Test 15 Sequence 1", "label": "Test 15 Sequence 1",
"viewingHint": "paged", "viewingHint": "paged",
"viewingDirection": "left-to-right",
"canvases": [ "canvases": [
{ {
"@id": "http://iiif.io/api/presentation/2.0/example/fixtures/canvas/15/c1.json", "@id": "http://iiif.io/api/presentation/2.0/example/fixtures/canvas/15/c1.json",
......
...@@ -21,6 +21,11 @@ ...@@ -21,6 +21,11 @@
height: 600px; height: 600px;
position: relative; position: relative;
} }
#instanceThree {
width: 100%;
height: 50%;
position: relative;
}
</style> </style>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
</head> </head>
...@@ -29,6 +34,8 @@ ...@@ -29,6 +34,8 @@
<div id="instanceOne" dir="rtl"></div> <div id="instanceOne" dir="rtl"></div>
<h1>This is the second instance dir="ltr", viewingDirection="rtl"</h1> <h1>This is the second instance dir="ltr", viewingDirection="rtl"</h1>
<div id="instanceTwo" dir="ltr"></div> <div id="instanceTwo" dir="ltr"></div>
<h1>This is the third instance dir="rtl"</h1>
<div id="instanceThree" dir="rtl"></div>
<script>document.write("<script type='text/javascript' src='../../../dist/mirador.min.js?v=" + Date.now() + "'><\/script>");</script> <script>document.write("<script type='text/javascript' src='../../../dist/mirador.min.js?v=" + Date.now() + "'><\/script>");</script>
<script type="text/javascript"> <script type="text/javascript">
var miradorInstance = Mirador.viewer({ var miradorInstance = Mirador.viewer({
...@@ -46,6 +53,12 @@ ...@@ -46,6 +53,12 @@
manifestId: 'https://candra.dhii.jp/iiif/blackjacky/b001/manifest.json', manifestId: 'https://candra.dhii.jp/iiif/blackjacky/b001/manifest.json',
}] }]
}); });
var miradorInstance = Mirador.viewer({
id: 'instanceThree',
windows: [{
manifestId: 'https://iiif.harvardartmuseums.org/manifests/object/299843',
}]
});
</script> </script>
</body> </body>
</html> </html>
import React from 'react'; import React from 'react';
import { shallow } from 'enzyme'; import { shallow } from 'enzyme';
import NavigationIcon from '@material-ui/icons/PlayCircleOutlineSharp';
import MiradorMenuButton from '../../../src/containers/MiradorMenuButton';
import { ViewerNavigation } from '../../../src/components/ViewerNavigation'; import { ViewerNavigation } from '../../../src/components/ViewerNavigation';
/** create wrapper */ /** create wrapper */
...@@ -76,4 +78,26 @@ describe('ViewerNavigation', () => { ...@@ -76,4 +78,26 @@ describe('ViewerNavigation', () => {
expect(setPreviousCanvas).not.toHaveBeenCalled(); expect(setPreviousCanvas).not.toHaveBeenCalled();
}); });
}); });
describe('when viewingDirection is right-to-left', () => {
beforeEach(() => {
wrapper = createWrapper({
hasNextCanvas: true,
hasPreviousCanvas: true,
setNextCanvas,
setPreviousCanvas,
viewingDirection: 'right-to-left',
});
});
it('changes the arrow styles', () => {
const previous = wrapper.find(MiradorMenuButton).first().children('PlayCircleOutlineSharpIcon').props();
const next = wrapper.find(MiradorMenuButton).last().children('PlayCircleOutlineSharpIcon').props();
expect(previous.style).toEqual({});
expect(next.style).toEqual({ transform: 'rotate(180deg)' });
});
it('sets the dir="rtl"', () => {
expect(wrapper.find('div').props().dir).toBe('rtl');
});
});
}); });
...@@ -24,6 +24,7 @@ import { ...@@ -24,6 +24,7 @@ import {
getManifestRelatedContent, getManifestRelatedContent,
getManifestRenderings, getManifestRenderings,
getManifestUrl, getManifestUrl,
getManifestViewingDirection,
getManifestViewingHint, getManifestViewingHint,
getMetadataLocales, getMetadataLocales,
getRequiredStatement, getRequiredStatement,
...@@ -491,6 +492,23 @@ describe('getManifestViewingHint', () => { ...@@ -491,6 +492,23 @@ describe('getManifestViewingHint', () => {
}); });
}); });
describe('getManifestViewingDirection', () => {
it('gets from the manifest', () => {
const state = { manifests: { x: { json: manifestFixture001 } } };
expect(getManifestViewingDirection(state, { manifestId: 'x' })).toEqual('left-to-right');
});
it('gets from the sequence', () => {
const state = { manifests: { x: { json: manifestFixture015 } } };
expect(getManifestViewingDirection(state, { manifestId: 'x' })).toEqual('left-to-right');
});
it('is null if no viewingDirection is specified', () => {
const state = { manifests: { x: { json: manifestFixture019 } } };
expect(getManifestViewingDirection(state, { manifestId: 'x' })).toBeNull();
});
});
describe('getManifestSearchService', () => { describe('getManifestSearchService', () => {
it('gets from the manifest', () => { it('gets from the manifest', () => {
const state = { manifests: { x: { json: manifestFixtureFg165hz3589 } } }; const state = { manifests: { x: { json: manifestFixtureFg165hz3589 } } };
......
...@@ -13,18 +13,31 @@ export class ViewerNavigation extends Component { ...@@ -13,18 +13,31 @@ export class ViewerNavigation extends Component {
*/ */
render() { render() {
const { const {
hasNextCanvas, hasPreviousCanvas, setNextCanvas, setPreviousCanvas, t, classes, hasNextCanvas, hasPreviousCanvas, setNextCanvas, setPreviousCanvas, t,
classes, viewingDirection,
} = this.props; } = this.props;
let htmlDir = 'ltr';
let nextIconStyle = { transform: 'rotate(180deg)' };
let previousIconStyle = {};
if (viewingDirection === 'right-to-left') {
htmlDir = 'rtl';
nextIconStyle = {};
previousIconStyle = { transform: 'rotate(180deg)' };
}
return ( return (
<div className={classNames(ns('osd-navigation'), classes.osdNavigation)}> <div
className={classNames(ns('osd-navigation'), classes.osdNavigation)}
dir={htmlDir}
>
<MiradorMenuButton <MiradorMenuButton
aria-label={t('previousCanvas')} aria-label={t('previousCanvas')}
className={ns('previous-canvas-button')} className={ns('previous-canvas-button')}
disabled={!hasPreviousCanvas} disabled={!hasPreviousCanvas}
onClick={() => { hasPreviousCanvas && setPreviousCanvas(); }} onClick={() => { hasPreviousCanvas && setPreviousCanvas(); }}
> >
<NavigationIcon style={{ transform: 'rotate(180deg)' }} /> <NavigationIcon style={nextIconStyle} />
</MiradorMenuButton> </MiradorMenuButton>
<MiradorMenuButton <MiradorMenuButton
aria-label={t('nextCanvas')} aria-label={t('nextCanvas')}
...@@ -32,7 +45,7 @@ export class ViewerNavigation extends Component { ...@@ -32,7 +45,7 @@ export class ViewerNavigation extends Component {
disabled={!hasNextCanvas} disabled={!hasNextCanvas}
onClick={() => { hasNextCanvas && setNextCanvas(); }} onClick={() => { hasNextCanvas && setNextCanvas(); }}
> >
<NavigationIcon /> <NavigationIcon style={previousIconStyle} />
</MiradorMenuButton> </MiradorMenuButton>
</div> </div>
); );
...@@ -46,6 +59,7 @@ ViewerNavigation.propTypes = { ...@@ -46,6 +59,7 @@ ViewerNavigation.propTypes = {
setNextCanvas: PropTypes.func, setNextCanvas: PropTypes.func,
setPreviousCanvas: PropTypes.func, setPreviousCanvas: PropTypes.func,
t: PropTypes.func.isRequired, t: PropTypes.func.isRequired,
viewingDirection: PropTypes.string,
}; };
ViewerNavigation.defaultProps = { ViewerNavigation.defaultProps = {
...@@ -53,4 +67,5 @@ ViewerNavigation.defaultProps = { ...@@ -53,4 +67,5 @@ ViewerNavigation.defaultProps = {
hasPreviousCanvas: false, hasPreviousCanvas: false,
setNextCanvas: () => {}, setNextCanvas: () => {},
setPreviousCanvas: () => {}, setPreviousCanvas: () => {},
viewingDirection: '',
}; };
...@@ -4,13 +4,18 @@ import { withTranslation } from 'react-i18next'; ...@@ -4,13 +4,18 @@ import { withTranslation } from 'react-i18next';
import { withStyles } from '@material-ui/core/styles'; import { withStyles } from '@material-ui/core/styles';
import { withPlugins } from '../extend/withPlugins'; import { withPlugins } from '../extend/withPlugins';
import * as actions from '../state/actions'; import * as actions from '../state/actions';
import { getNextCanvasGrouping, getPreviousCanvasGrouping } from '../state/selectors'; import {
getManifestViewingDirection,
getNextCanvasGrouping,
getPreviousCanvasGrouping,
} from '../state/selectors';
import { ViewerNavigation } from '../components/ViewerNavigation'; import { ViewerNavigation } from '../components/ViewerNavigation';
/** */ /** */
const mapStateToProps = (state, { windowId }) => ({ const mapStateToProps = (state, { windowId }) => ({
hasNextCanvas: !!getNextCanvasGrouping(state, { windowId }), hasNextCanvas: !!getNextCanvasGrouping(state, { windowId }),
hasPreviousCanvas: !!getPreviousCanvasGrouping(state, { windowId }), hasPreviousCanvas: !!getPreviousCanvasGrouping(state, { windowId }),
viewingDirection: getManifestViewingDirection(state, { windowId }),
}); });
/** /**
......
...@@ -408,6 +408,17 @@ export const getManifestViewingHint = createSelector( ...@@ -408,6 +408,17 @@ export const getManifestViewingHint = createSelector(
}, },
); );
export const getManifestViewingDirection = createSelector(
[getManifestoInstance],
(manifest) => {
if (!manifest) return null;
const viewingDirection = manifest.getSequences()[0].getViewingDirection()
|| manifest.getViewingDirection();
if (viewingDirection) return viewingDirection.value;
return null;
},
);
/** */ /** */
export const getManifestSearchService = createSelector( export const getManifestSearchService = createSelector(
[getManifestoInstance], [getManifestoInstance],
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment