diff --git a/__tests__/src/components/WindowList.test.js b/__tests__/src/components/WindowList.test.js
index 896dd2aa64e23c0f18d7ff4f1c5169536dff97af..0bc7a7e143d131c70a935633b51c503bba976f89 100644
--- a/__tests__/src/components/WindowList.test.js
+++ b/__tests__/src/components/WindowList.test.js
@@ -49,7 +49,7 @@ describe('WindowList', () => {
expect(wrapper.find('WithStyles(MenuItem)').length).toBe(1);
expect(wrapper.find('WithStyles(MenuItem)').key()).toBe('xyz');
expect(
- wrapper.find('WithStyles(MenuItem)').matchesElement(<MenuItem>[Untitled]</MenuItem>),
+ wrapper.find('WithStyles(MenuItem)').matchesElement(<MenuItem>untitled</MenuItem>),
).toBe(true);
wrapper.find('WithStyles(MenuItem)').simulate('click', {});
expect(handleClose).toBeCalled();
diff --git a/__tests__/src/components/WindowSideBarButtons.test.js b/__tests__/src/components/WindowSideBarButtons.test.js
index 0ffde2da597f94e00f98d9e6751c72681307bb5f..b57978af86b66edb99bb61010868908957f6e9ad 100644
--- a/__tests__/src/components/WindowSideBarButtons.test.js
+++ b/__tests__/src/components/WindowSideBarButtons.test.js
@@ -18,7 +18,7 @@ describe('WindowSideBarButtons', () => {
<WindowSideBarButtons toggleWindowSideBarPanel={toggleWindowSideBarPanel} />,
);
- const iconButton = wrapper.find('WithStyles(IconButton)[aria-label="Open information companion window"]');
+ const iconButton = wrapper.find('WithStyles(IconButton)[aria-label="openInfoCompanionWindow"]');
expect(iconButton.simulate('click'));
expect(toggleWindowSideBarPanel).toHaveBeenCalledTimes(1);
expect(toggleWindowSideBarPanel).toHaveBeenCalledWith('info');
diff --git a/__tests__/src/components/WindowSideBarInfoPanel.test.js b/__tests__/src/components/WindowSideBarInfoPanel.test.js
index 5180d0f50e7a093662b926bc19df3be2e2428b7d..21c6fabc32f12d3076bea7c6d4862de33376c7fa 100644
--- a/__tests__/src/components/WindowSideBarInfoPanel.test.js
+++ b/__tests__/src/components/WindowSideBarInfoPanel.test.js
@@ -22,7 +22,7 @@ describe('WindowSideBarInfoPanel', () => {
it('renders without an error', () => {
expect(
wrapper.find('WithStyles(Typography)[variant="h2"]').first().matchesElement(
- <Typography>About this item</Typography>,
+ <Typography>aboutThisItem</Typography>,
),
).toBe(true);
diff --git a/__tests__/src/components/WindowSideBarPanel.test.js b/__tests__/src/components/WindowSideBarPanel.test.js
index d262ecd0f59dd1a06423b1579079321302905bd9..f31c05019910c90a36cb66ede06d229e6d24a5f7 100644
--- a/__tests__/src/components/WindowSideBarPanel.test.js
+++ b/__tests__/src/components/WindowSideBarPanel.test.js
@@ -3,6 +3,7 @@ import { shallow } from 'enzyme';
import createStore from '../../../src/state/createStore';
import * as actions from '../../../src/state/actions';
import WindowSideBarPanel from '../../../src/components/WindowSideBarPanel';
+import WindowSideBarInfoPanel from '../../../src/containers/WindowSideBarInfoPanel';
import fixture from '../../fixtures/version-2/001.json';
describe('WindowSideBarPanel', () => {
@@ -21,7 +22,7 @@ describe('WindowSideBarPanel', () => {
});
it('renders the WindowSideBarInfoPanel', () => {
- expect(wrapper.find('WithStyles(WindowSideBarInfoPanel)').length).toBe(1);
+ expect(wrapper.find(WindowSideBarInfoPanel).length).toBe(1);
});
});
@@ -31,7 +32,7 @@ describe('WindowSideBarPanel', () => {
});
it('does not render any panel component', () => {
- expect(wrapper.find('WithStyes(WindowSideBarInfoPanel)').length).toBe(0);
+ expect(wrapper.find(WindowSideBarInfoPanel).length).toBe(0);
});
});
});
diff --git a/__tests__/src/components/WindowTopBar.test.js b/__tests__/src/components/WindowTopBar.test.js
index e3002a0ce8fc6306eb71d3195d05ebf9402acf20..86cc567291eeb31e5d1136fd1663c6109df3e5d8 100644
--- a/__tests__/src/components/WindowTopBar.test.js
+++ b/__tests__/src/components/WindowTopBar.test.js
@@ -24,6 +24,7 @@ describe('WindowTopBar', () => {
removeWindow={mockRemoveWindow}
toggleWindowSideBar={mockToggleWindowSideBar}
classes={{}}
+ t={key => key}
/>,
).dive();
});
diff --git a/__tests__/src/components/WorkspaceControlPanelButtons.test.js b/__tests__/src/components/WorkspaceControlPanelButtons.test.js
index c4c28fbf164d354c9fcbbbab76c607a446f1b66e..a66c8dcb5c7b0d7b37fdc4d746d0421d700435d0 100644
--- a/__tests__/src/components/WorkspaceControlPanelButtons.test.js
+++ b/__tests__/src/components/WorkspaceControlPanelButtons.test.js
@@ -1,5 +1,6 @@
import React from 'react';
import { shallow } from 'enzyme';
+import WorkspaceFullScreenButton from '../../../src/containers/WorkspaceFullScreenButton';
import WorkspaceControlPanelButtons
from '../../../src/components/WorkspaceControlPanelButtons';
@@ -11,6 +12,6 @@ describe('WorkspaceControlPanelButtons', () => {
it('renders without an error', () => {
expect(wrapper.find('WithStyles(List)').length).toBe(1);
- expect(wrapper.find('Connect(WithStyles(WorkspaceFullScreenButton))').length).toBe(1);
+ expect(wrapper.find(WorkspaceFullScreenButton).length).toBe(1);
});
});
diff --git a/__tests__/src/components/WorkspaceFullScreenButton.test.js b/__tests__/src/components/WorkspaceFullScreenButton.test.js
index 97e1612c65a8109334c5b49bee49b3ae71f58dc8..4fcb48a6bf5d0ecf5ecf3a4b68b2f836ba067fe0 100644
--- a/__tests__/src/components/WorkspaceFullScreenButton.test.js
+++ b/__tests__/src/components/WorkspaceFullScreenButton.test.js
@@ -8,7 +8,10 @@ describe('WorkspaceFullScreenButton', () => {
beforeEach(() => {
setWorkspaceFullscreen = jest.fn();
wrapper = shallow(
- <WorkspaceFullScreenButton classes={{}} setWorkspaceFullscreen={setWorkspaceFullscreen} />,
+ <WorkspaceFullScreenButton
+ classes={{}}
+ setWorkspaceFullscreen={setWorkspaceFullscreen}
+ />,
).dive();
});
diff --git a/__tests__/src/components/WorkspaceMenu.test.js b/__tests__/src/components/WorkspaceMenu.test.js
index bc9117a59a87c798963677c9225ec31d8c9574fc..27c11729c9568368cfb7881ae3c51cbfebe2745c 100644
--- a/__tests__/src/components/WorkspaceMenu.test.js
+++ b/__tests__/src/components/WorkspaceMenu.test.js
@@ -1,6 +1,7 @@
import React from 'react';
import { shallow } from 'enzyme';
import WorkspaceMenu from '../../../src/components/WorkspaceMenu';
+import WindowList from '../../../src/containers/WindowList';
describe('WorkspaceMenu', () => {
let wrapper;
@@ -23,15 +24,14 @@ describe('WorkspaceMenu', () => {
it('sets the anchor state', () => {
wrapper.instance().handleMenuItemClick('windowList', { currentTarget: true });
- expect(wrapper.find('Connect(WindowList)').props().open).toBe(true);
+ expect(wrapper.find(WindowList).props().open).toBe(true);
});
});
describe('handleMenuItemClose', () => {
it('resets the anchor state', () => {
wrapper.instance().handleMenuItemClose('windowList')();
-
- expect(wrapper.find('Connect(WindowList)').props().open).toBe(false);
+ expect(wrapper.find(WindowList).props().open).toBe(false);
});
});
});
diff --git a/locales/en/translation.json b/locales/en/translation.json
new file mode 100644
index 0000000000000000000000000000000000000000..3ca92e21328345b5afbeff4ef4d8c37ddc80a007
--- /dev/null
+++ b/locales/en/translation.json
@@ -0,0 +1,28 @@
+{
+ "translation": {
+ "aboutThisItem": "About this item",
+ "add": "Add",
+ "bottom": "Bottom",
+ "closeInfoCompanionWindow": "Close information companion window",
+ "closeMenu": "Close Menu",
+ "closeWindow": "Close window",
+ "dark": "Dark",
+ "downloadExport": "Download/Export",
+ "downloadExportWorkspace": "Download/export workspace",
+ "fetchManifest": "Fetch Manifest",
+ "fullScreen": "Full Screen",
+ "light": "Light",
+ "listAllOpenWindows": "List all open windows",
+ "menu": "Menu",
+ "off": "Off",
+ "openInfoCompanionWindow": "Open information companion window",
+ "openWindows": "Open windows",
+ "position": "Position",
+ "right": "Right",
+ "settings": "Settings",
+ "theme": "Theme",
+ "thumbnails": "Thumbnails",
+ "toggleWindowSideBar": "Toggle window sidebar",
+ "untitled": "[Untitled]"
+ }
+}
diff --git a/package.json b/package.json
index d147f892767a6bc609542207aa5e4a093cc8f04b..5e0c9cbdd54832473e5e6c0110ba08746cecc621 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
"classnames": "^2.2.6",
"css-ns": "^1.2.2",
"deepmerge": "^3.1.0",
+ "i18next": "^14.0.1",
"intersection-observer": "^0.5.1",
"manifesto.js": "^3.0.9",
"node-fetch": "^2.3.0",
@@ -43,6 +44,7 @@
"react": "^16.7.0",
"react-dom": "^16.4.0",
"react-fullscreen-crossbrowser": "^1.0.9",
+ "react-i18next": "^9.0.10",
"react-mosaic-component": "^2.0.2",
"react-redux": "^6.0.0",
"react-virtualized": "^9.21.0",
diff --git a/src/components/ManifestForm.js b/src/components/ManifestForm.js
index 4ea3eeee329f7ab307ba8da95b67e31c56547f5c..bc9e3251389cd5a71680fceedfbe1822ad0141e9 100644
--- a/src/components/ManifestForm.js
+++ b/src/components/ManifestForm.js
@@ -52,6 +52,7 @@ class ManifestForm extends Component {
*/
render() {
const { formValue } = this.state;
+ const { t } = this.props;
return (
<form onSubmit={this.formSubmit}>
<input
@@ -60,7 +61,7 @@ class ManifestForm extends Component {
type="text"
onChange={this.handleInputChange}
/>
- <button id="fetchBtn" type="submit">FetchManifest</button>
+ <button id="fetchBtn" type="submit">{t('fetchManifest')}</button>
</form>
);
}
@@ -69,6 +70,11 @@ class ManifestForm extends Component {
ManifestForm.propTypes = {
fetchManifest: PropTypes.func.isRequired,
setLastRequested: PropTypes.func.isRequired,
+ t: PropTypes.func,
+};
+
+ManifestForm.defaultProps = {
+ t: key => key,
};
export default ManifestForm;
diff --git a/src/components/WindowList.js b/src/components/WindowList.js
index df0ffdf703b9fbfac363afa2957818d4b583ba80..99d5c8fc7421105972a2b5b49f8ae36c897503b1 100644
--- a/src/components/WindowList.js
+++ b/src/components/WindowList.js
@@ -13,14 +13,14 @@ class WindowList extends Component {
* @private
*/
titleContent(window) {
- const { manifests } = this.props;
+ const { manifests, t } = this.props;
if (window.manifestId
&& manifests[window.manifestId]
&& manifests[window.manifestId].manifestation) {
return manifests[window.manifestId].manifestation.getLabel().map(label => label.value)[0];
}
- return '[Untitled]';
+ return t('untitled');
}
/**
@@ -29,13 +29,13 @@ class WindowList extends Component {
*/
render() {
const {
- handleClose, anchorEl, windows, focusWindow,
+ handleClose, anchorEl, windows, focusWindow, t,
} = this.props;
return (
<Menu id="window-list-menu" anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
<ListSubheader>
- <Button color="inherit" aria-label="Close Menu" onClick={handleClose} align="right" style={{ float: 'right' }}>×</Button>
- Open windows
+ <Button color="inherit" aria-label={t('closeMenu')} onClick={handleClose} align="right" style={{ float: 'right' }}>×</Button>
+ {t('openWindows')}
</ListSubheader>
{
Object.values(windows).map(window => (
@@ -60,10 +60,12 @@ WindowList.propTypes = {
anchorEl: PropTypes.object, // eslint-disable-line react/forbid-prop-types
windows: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
manifests: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+ t: PropTypes.func,
};
WindowList.defaultProps = {
anchorEl: null,
+ t: key => key,
};
export default WindowList;
diff --git a/src/components/WindowSideBarButtons.js b/src/components/WindowSideBarButtons.js
index bcc05b6cf47ded930cf3d901b1bb7c3f0d576f78..122c22dc61a6ea6bb57f13a3e63c1b05e915d1d2 100644
--- a/src/components/WindowSideBarButtons.js
+++ b/src/components/WindowSideBarButtons.js
@@ -23,11 +23,15 @@ class WindowSideBarButtons extends Component {
* @return {type} description
*/
render() {
- const { toggleWindowSideBarPanel } = this.props;
+ const { toggleWindowSideBarPanel, t } = this.props;
return (
<>
<IconButton
- aria-label="Open information companion window"
+ aria-label={
+ this.sideBarPanelCurrentlySelected('info')
+ ? t('closeInfoCompanionWindow')
+ : t('openInfoCompanionWindow')
+ }
onClick={() => (toggleWindowSideBarPanel('info'))}
>
<InfoIcon
@@ -42,11 +46,13 @@ class WindowSideBarButtons extends Component {
WindowSideBarButtons.propTypes = {
toggleWindowSideBarPanel: PropTypes.func,
sideBarPanel: PropTypes.string,
+ t: PropTypes.func,
};
WindowSideBarButtons.defaultProps = {
toggleWindowSideBarPanel: () => {},
sideBarPanel: 'closed',
+ t: key => key,
};
export default WindowSideBarButtons;
diff --git a/src/components/WindowSideBarInfoPanel.js b/src/components/WindowSideBarInfoPanel.js
index 80904da9938cb336834d86f414c47199cb990c18..aa646786848c2b78dd24c9efa59b7790c86a93d9 100644
--- a/src/components/WindowSideBarInfoPanel.js
+++ b/src/components/WindowSideBarInfoPanel.js
@@ -39,10 +39,10 @@ class WindowSideBarInfoPanel extends Component {
* @return
*/
render() {
- const { classes } = this.props;
+ const { classes, t } = this.props;
return (
<div className={ns('window-sidebar-info-panel')}>
- <Typography variant="h2" className={classes.windowSideBarH2}>About this item</Typography>
+ <Typography variant="h2" className={classes.windowSideBarH2}>{t('aboutThisItem')}</Typography>
<Typography variant="h3" className={classes.windowSideBarH3}>{this.manifestLabel()}</Typography>
<Typography variant="body2">{this.manifestDescription()}</Typography>
</div>
@@ -53,12 +53,14 @@ class WindowSideBarInfoPanel extends Component {
WindowSideBarInfoPanel.propTypes = {
classes: PropTypes.object, // eslint-disable-line react/forbid-prop-types
manifest: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+ t: PropTypes.func,
};
WindowSideBarInfoPanel.defaultProps = {
classes: {},
manifest: {},
+ t: key => key,
};
/**
diff --git a/src/components/WindowSideBarPanel.js b/src/components/WindowSideBarPanel.js
index a34d1622aaf65cd00ec322c677caeb5e1e2f67e5..2d647b70178e3c29f8e028f6d16f5f0dd77c1f2f 100644
--- a/src/components/WindowSideBarPanel.js
+++ b/src/components/WindowSideBarPanel.js
@@ -1,6 +1,6 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
-import WindowSideBarInfoPanel from './WindowSideBarInfoPanel';
+import WindowSideBarInfoPanel from '../containers/WindowSideBarInfoPanel';
/**
* WindowSideBarPanel - the panel that pops out from the sidebar
diff --git a/src/components/WindowThumbnailSettings.js b/src/components/WindowThumbnailSettings.js
index e30663e4fa610c502d7b04f903e7aa69aefda347..518a74cd2884f1a5ac42dab26ae0ec4ddcaff2fc 100644
--- a/src/components/WindowThumbnailSettings.js
+++ b/src/components/WindowThumbnailSettings.js
@@ -34,28 +34,28 @@ export default class WindowThumbnailSettings extends Component {
* @return {type} description
*/
render() {
- const { thumbnailNavigationPosition } = this.props;
+ const { thumbnailNavigationPosition, t } = this.props;
return (
<>
- <Typography>Thumbnails</Typography>
- <RadioGroup aria-label="position" name="position" value={thumbnailNavigationPosition} onChange={this.handleChange} row>
+ <Typography>{t('thumbnails')}</Typography>
+ <RadioGroup aria-label={t('position')} name="position" value={thumbnailNavigationPosition} onChange={this.handleChange} row>
<FormControlLabel
value="off"
control={<Radio color="primary" icon={<CancelPresentationIcon />} checkedIcon={<CancelPresentationIcon />} />}
- label="Off"
+ label={t('off')}
labelPlacement="bottom"
/>
<FormControlLabel
value="bottom"
control={<Radio color="primary" icon={<ThumbnailNavigationBottomIcon />} checkedIcon={<ThumbnailNavigationBottomIcon />} />}
- label="Bottom"
+ label={t('bottom')}
labelPlacement="bottom"
/>
<FormControlLabel
value="right"
control={<Radio color="primary" icon={<ThumbnailNavigationRightIcon />} checkedIcon={<ThumbnailNavigationRightIcon />} />}
- label="Right"
+ label={t('right')}
labelPlacement="bottom"
/>
</RadioGroup>
@@ -86,4 +86,8 @@ WindowThumbnailSettings.propTypes = {
windowId: PropTypes.string.isRequired,
setWindowThumbnailPosition: PropTypes.func.isRequired,
thumbnailNavigationPosition: PropTypes.string.isRequired,
+ t: PropTypes.func,
+};
+WindowThumbnailSettings.defaultProps = {
+ t: key => key,
};
diff --git a/src/components/WindowTopBar.js b/src/components/WindowTopBar.js
index 1f300358d07f00613edfbe2c84c2d5f38f329746..46a52d0aab63a07c41a398ef4b49c0a895eb2600 100644
--- a/src/components/WindowTopBar.js
+++ b/src/components/WindowTopBar.js
@@ -8,10 +8,11 @@ import MenuIcon from '@material-ui/icons/Menu';
import Toolbar from '@material-ui/core/Toolbar';
import classNames from 'classnames';
import WindowIcon from '../containers/WindowIcon';
-import WindowTopMenuButton from './WindowTopMenuButton';
+import WindowTopMenuButton from '../containers/WindowTopMenuButton';
import WindowTopBarButtons from '../containers/WindowTopBarButtons';
import ns from '../config/css-ns';
+
/**
* WindowTopBar
*/
@@ -35,12 +36,12 @@ class WindowTopBar extends Component {
*/
render() {
const {
- removeWindow, windowId, classes, toggleWindowSideBar,
+ removeWindow, windowId, classes, toggleWindowSideBar, t,
} = this.props;
return (
<Toolbar disableGutters className={classNames(classes.reallyDense, ns('window-top-bar'))} variant="dense">
<IconButton
- aria-label="Open window side bar"
+ aria-label={t('toggleWindowSideBar')}
color="inherit"
onClick={() => toggleWindowSideBar(windowId)}
>
@@ -52,7 +53,7 @@ class WindowTopBar extends Component {
</Typography>
<WindowTopBarButtons windowId={windowId} />
<WindowTopMenuButton className={ns('window-menu-btn')} windowId={windowId} />
- <Button color="inherit" className={ns('window-close')} aria-label="Close Window" onClick={removeWindow}>×</Button>
+ <Button color="inherit" className={ns('window-close')} aria-label={t('closeWindow')} onClick={removeWindow}>×</Button>
</Toolbar>
);
}
@@ -64,11 +65,13 @@ WindowTopBar.propTypes = {
windowId: PropTypes.string.isRequired,
classes: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
toggleWindowSideBar: PropTypes.func,
+ t: PropTypes.func,
};
WindowTopBar.defaultProps = {
manifest: null,
toggleWindowSideBar: () => {},
+ t: key => key,
};
const styles = {
diff --git a/src/components/WindowTopMenuButton.js b/src/components/WindowTopMenuButton.js
index 3af41ad4d9bee2920e3cb08a650ab28f568000ae..a70bbb66850040fab080ded3669b0a650381b521 100644
--- a/src/components/WindowTopMenuButton.js
+++ b/src/components/WindowTopMenuButton.js
@@ -1,5 +1,4 @@
import React, { Component } from 'react';
-import { compose } from 'redux';
import IconButton from '@material-ui/core/IconButton';
import MoreVertIcon from '@material-ui/icons/MoreVert';
import { withStyles } from '@material-ui/core/styles';
@@ -44,14 +43,14 @@ class WindowTopMenuButton extends Component {
* @return
*/
render() {
- const { classes, windowId } = this.props;
+ const { classes, t, windowId } = this.props;
const { anchorEl } = this.state;
return (
<>
<IconButton
color="inherit"
- aria-label="Menu"
+ aria-label={t('menu')}
className={classes.ctrlBtn}
aria-haspopup="true"
onClick={this.handleMenuClick}
@@ -72,6 +71,11 @@ class WindowTopMenuButton extends Component {
WindowTopMenuButton.propTypes = {
windowId: PropTypes.string.isRequired,
classes: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+ t: PropTypes.func,
+};
+
+WindowTopMenuButton.defaultProps = {
+ t: key => key,
};
/**
@@ -83,10 +87,4 @@ const styles = theme => ({
},
});
-
-const enhance = compose(
- withStyles(styles),
- // further HOC go here
-);
-
-export default enhance(WindowTopMenuButton);
+export default withStyles(styles)(WindowTopMenuButton);
diff --git a/src/components/WorkspaceAddButton.js b/src/components/WorkspaceAddButton.js
index 83936f5c003266e3995e8a0331ad51bf5ff0f5b8..7e37ef16667e28f073280ebb0268d473cff181c7 100644
--- a/src/components/WorkspaceAddButton.js
+++ b/src/components/WorkspaceAddButton.js
@@ -60,7 +60,7 @@ class WorkspaceAddButton extends Component {
* @return
*/
render() {
- const { classes, manifests } = this.props;
+ const { classes, t, manifests } = this.props;
const { lastRequested, anchorEl } = this.state;
const manifestList = Object.keys(manifests).map(manifest => (
@@ -76,7 +76,7 @@ class WorkspaceAddButton extends Component {
<Fab
color="primary"
id="addBtn"
- aria-label="Add"
+ aria-label={t('add')}
className={classes.fab}
aria-owns={anchorEl ? 'add-form' : undefined}
aria-haspopup="true"
@@ -105,6 +105,11 @@ class WorkspaceAddButton extends Component {
WorkspaceAddButton.propTypes = {
manifests: PropTypes.instanceOf(Object).isRequired,
classes: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+ t: PropTypes.func,
+};
+
+WorkspaceAddButton.defaultProps = {
+ t: key => key,
};
/**
diff --git a/src/components/WorkspaceControlPanelButtons.js b/src/components/WorkspaceControlPanelButtons.js
index 0122894c567d9845be21f27a7d944c8ff1a2c34d..a9f75a68f0864bab7aa1df954c3483037010a902 100644
--- a/src/components/WorkspaceControlPanelButtons.js
+++ b/src/components/WorkspaceControlPanelButtons.js
@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
import List from '@material-ui/core/List';
import WorkspaceFullScreenButton from '../containers/WorkspaceFullScreenButton';
import WorkspaceAddButton from '../containers/WorkspaceAddButton';
-import WorkspaceMenuButton from './WorkspaceMenuButton';
+import WorkspaceMenuButton from '../containers/WorkspaceMenuButton';
+
/**
*
*/
diff --git a/src/components/WorkspaceExport.js b/src/components/WorkspaceExport.js
index 8bbbb6e50d81673d155a65185b5f002609ae9221..9407576c5ca1259923c6089c231f28251a8345be 100644
--- a/src/components/WorkspaceExport.js
+++ b/src/components/WorkspaceExport.js
@@ -26,11 +26,11 @@ class WorkspaceExport extends Component {
*/
render() {
const {
- handleClose, open, children,
+ handleClose, open, children, t,
} = this.props;
return (
<Dialog id="workspace-settings" open={open} onClose={handleClose}>
- <DialogTitle id="form-dialog-title">Download/Export</DialogTitle>
+ <DialogTitle id="form-dialog-title">{t('downloadExport')}</DialogTitle>
<DialogContent>
{children}
<pre>
@@ -47,11 +47,13 @@ WorkspaceExport.propTypes = {
open: PropTypes.bool, // eslint-disable-line react/forbid-prop-types
children: PropTypes.node,
state: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+ t: PropTypes.func,
};
WorkspaceExport.defaultProps = {
open: false,
children: null,
+ t: key => key,
};
export default WorkspaceExport;
diff --git a/src/components/WorkspaceFullScreenButton.js b/src/components/WorkspaceFullScreenButton.js
index 2c6a3685bb5a3aafb442a1699877736a250b0e17..96bac8ab1b0f6ea5fbd744b51227a213939677b6 100644
--- a/src/components/WorkspaceFullScreenButton.js
+++ b/src/components/WorkspaceFullScreenButton.js
@@ -13,10 +13,10 @@ class WorkspaceFullScreenButton extends Component {
* @return
*/
render() {
- const { classes, setWorkspaceFullscreen } = this.props;
+ const { classes, setWorkspaceFullscreen, t } = this.props;
return (
<ListItem>
- <IconButton className={classes.ctrlBtn} aria-label="Full Screen" onClick={() => setWorkspaceFullscreen(true)}>
+ <IconButton className={classes.ctrlBtn} aria-label={t('fullScreen')} onClick={() => setWorkspaceFullscreen(true)}>
<FullscreenIcon />
</IconButton>
</ListItem>
@@ -27,6 +27,11 @@ class WorkspaceFullScreenButton extends Component {
WorkspaceFullScreenButton.propTypes = {
setWorkspaceFullscreen: PropTypes.func.isRequired,
classes: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+ t: PropTypes.func,
+};
+
+WorkspaceFullScreenButton.defaultProps = {
+ t: key => key,
};
/**
diff --git a/src/components/WorkspaceMenu.js b/src/components/WorkspaceMenu.js
index bcb016dab8b2d5372b2d0925a270edb1daf4dd57..9f37eff027313e9c5279c2fa5ea040a1cf5fc2d9 100644
--- a/src/components/WorkspaceMenu.js
+++ b/src/components/WorkspaceMenu.js
@@ -58,7 +58,7 @@ class WorkspaceMenu extends Component {
* @return
*/
render() {
- const { handleClose, anchorEl } = this.props;
+ const { handleClose, anchorEl, t } = this.props;
const { windowList, settings, exportWorkspace } = this.state;
return (
@@ -72,7 +72,7 @@ class WorkspaceMenu extends Component {
<ListItemIcon>
<ViewHeadlineIcon />
</ListItemIcon>
- <Typography varient="inherit">List all open windows</Typography>
+ <Typography varient="inherit">{t('listAllOpenWindows')}</Typography>
</MenuItem>
<Divider />
<MenuItem
@@ -83,7 +83,7 @@ class WorkspaceMenu extends Component {
<ListItemIcon>
<SettingsIcon />
</ListItemIcon>
- <Typography varient="inherit">Settings</Typography>
+ <Typography varient="inherit">{t('settings')}</Typography>
</MenuItem>
<MenuItem
aria-haspopup="true"
@@ -93,7 +93,7 @@ class WorkspaceMenu extends Component {
<ListItemIcon>
<SaveAltIcon />
</ListItemIcon>
- <Typography varient="inherit">Download/export workspace</Typography>
+ <Typography varient="inherit">{t('downloadExportWorkspace')}</Typography>
</MenuItem>
</Menu>
<WindowList
@@ -117,10 +117,12 @@ class WorkspaceMenu extends Component {
WorkspaceMenu.propTypes = {
handleClose: PropTypes.func.isRequired,
anchorEl: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+ t: PropTypes.func,
};
WorkspaceMenu.defaultProps = {
anchorEl: null,
+ t: key => key,
};
export default WorkspaceMenu;
diff --git a/src/components/WorkspaceMenuButton.js b/src/components/WorkspaceMenuButton.js
index 60631b8159451859560a5a2704d5811be963d54c..913acac4a1efd36c79a16501db09bd744021be54 100644
--- a/src/components/WorkspaceMenuButton.js
+++ b/src/components/WorkspaceMenuButton.js
@@ -4,7 +4,7 @@ import MenuIcon from '@material-ui/icons/Menu';
import ListItem from '@material-ui/core/ListItem';
import { withStyles } from '@material-ui/core/styles';
import PropTypes from 'prop-types';
-import WorkspaceMenu from './WorkspaceMenu';
+import WorkspaceMenu from '../containers/WorkspaceMenu';
/**
*/
@@ -44,7 +44,7 @@ class WorkspaceMenuButton extends Component {
* @return
*/
render() {
- const { classes } = this.props;
+ const { classes, t } = this.props;
const { anchorEl } = this.state;
return (
@@ -53,7 +53,7 @@ class WorkspaceMenuButton extends Component {
<IconButton
color="default"
id="menuBtn"
- aria-label="Menu"
+ aria-label={t('menu')}
className={classes.ctrlBtn}
aria-haspopup="true"
onClick={this.handleMenuClick}
@@ -73,6 +73,11 @@ class WorkspaceMenuButton extends Component {
WorkspaceMenuButton.propTypes = {
classes: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+ t: PropTypes.func,
+};
+
+WorkspaceMenuButton.defaultProps = {
+ t: key => key,
};
/**
diff --git a/src/components/WorkspaceSettings.js b/src/components/WorkspaceSettings.js
index fbd7c3f2c8f3c35a2c3f2eac1451571b84ca31a2..bf84a8f552ac544d1242850b977792a410f41323 100644
--- a/src/components/WorkspaceSettings.js
+++ b/src/components/WorkspaceSettings.js
@@ -34,15 +34,15 @@ class WorkspaceSettings extends Component {
*/
render() {
const {
- handleClose, open, children, theme,
+ handleClose, open, children, theme, t,
} = this.props;
return (
<Dialog id="workspace-settings" open={open} onClose={handleClose}>
- <DialogTitle id="form-dialog-title">Settings</DialogTitle>
+ <DialogTitle id="form-dialog-title">{t('settings')}</DialogTitle>
<DialogContent>
{children}
<FormControl>
- <InputLabel htmlFor="theme-simple">Theme</InputLabel>
+ <InputLabel htmlFor="theme-simple">{t('theme')}</InputLabel>
<Select
value={theme}
onChange={this.handleThemeChange}
@@ -51,8 +51,8 @@ class WorkspaceSettings extends Component {
id: 'theme-simple',
}}
>
- <MenuItem value="light">Light</MenuItem>
- <MenuItem value="dark">Dark</MenuItem>
+ <MenuItem value="light">{t('light')}</MenuItem>
+ <MenuItem value="dark">{t('dark')}</MenuItem>
</Select>
</FormControl>
</DialogContent>
@@ -67,11 +67,13 @@ WorkspaceSettings.propTypes = {
children: PropTypes.node,
updateConfig: PropTypes.func.isRequired,
theme: PropTypes.string.isRequired,
+ t: PropTypes.func,
};
WorkspaceSettings.defaultProps = {
open: false,
children: null,
+ t: key => key,
};
export default WorkspaceSettings;
diff --git a/src/containers/ManifestForm.js b/src/containers/ManifestForm.js
index 2f47b8cba5d401741246c860b44be0f6aa782750..baae7e3c29edc9fc0d9d1967acbee96c0d274228 100644
--- a/src/containers/ManifestForm.js
+++ b/src/containers/ManifestForm.js
@@ -1,4 +1,6 @@
import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { withNamespaces } from 'react-i18next';
import * as actions from '../state/actions';
import ManifestForm from '../components/ManifestForm';
@@ -9,5 +11,10 @@ import ManifestForm from '../components/ManifestForm';
*/
const mapDispatchToProps = { fetchManifest: actions.fetchManifest };
+const enhance = compose(
+ connect(null, mapDispatchToProps),
+ withNamespaces(),
+ // further HOC go here
+);
-export default connect(null, mapDispatchToProps)(ManifestForm);
+export default enhance(ManifestForm);
diff --git a/src/containers/WindowList.js b/src/containers/WindowList.js
index 2350e6831221fc8fda24aae91e3e7cd0b9a66669..86814d210609682ed68a4259d967afa028d1f23c 100644
--- a/src/containers/WindowList.js
+++ b/src/containers/WindowList.js
@@ -1,4 +1,6 @@
import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { withNamespaces } from 'react-i18next';
import * as actions from '../state/actions';
import WindowList from '../components/WindowList';
@@ -23,4 +25,10 @@ const mapStateToProps = state => (
}
);
-export default connect(mapStateToProps, mapDispatchToProps)(WindowList);
+const enhance = compose(
+ connect(mapStateToProps, mapDispatchToProps),
+ withNamespaces(),
+ // further HOC
+);
+
+export default enhance(WindowList);
diff --git a/src/containers/WindowSideBarButtons.js b/src/containers/WindowSideBarButtons.js
index 93a58e23f8b1ab6288bda18cc31f7b730e02c641..e4a652b3483c0e250c4d81a0f7fb49d13bf650aa 100644
--- a/src/containers/WindowSideBarButtons.js
+++ b/src/containers/WindowSideBarButtons.js
@@ -1,5 +1,6 @@
import { compose } from 'redux';
import { connect } from 'react-redux';
+import { withNamespaces } from 'react-i18next';
import * as actions from '../state/actions';
import miradorWithPlugins from '../lib/miradorWithPlugins';
import WindowSideBarButtons from '../components/WindowSideBarButtons';
@@ -19,6 +20,7 @@ const mapDispatchToProps = (dispatch, props) => ({
const enhance = compose(
connect(null, mapDispatchToProps),
miradorWithPlugins,
+ withNamespaces(),
// further HOC go here
);
diff --git a/src/containers/WindowSideBarInfoPanel.js b/src/containers/WindowSideBarInfoPanel.js
new file mode 100644
index 0000000000000000000000000000000000000000..0e2434944b72965b9656fc6a828a77b7ab0f2b43
--- /dev/null
+++ b/src/containers/WindowSideBarInfoPanel.js
@@ -0,0 +1,12 @@
+import { compose } from 'redux';
+import { withNamespaces } from 'react-i18next';
+import miradorWithPlugins from '../lib/miradorWithPlugins';
+import WindowSideBarInfoPanel from '../components/WindowSideBarInfoPanel';
+
+const enhance = compose(
+ withNamespaces(),
+ miradorWithPlugins,
+ // further HOC
+);
+
+export default enhance(WindowSideBarInfoPanel);
diff --git a/src/containers/WindowThumbnailSettings.js b/src/containers/WindowThumbnailSettings.js
index c50b4501624191175e169bdf3f53bf877e169dad..a0463090f5707e1289ab7e8a47e208fc505e19b3 100644
--- a/src/containers/WindowThumbnailSettings.js
+++ b/src/containers/WindowThumbnailSettings.js
@@ -1,5 +1,7 @@
import { compose } from 'redux';
import { connect } from 'react-redux';
+import { withNamespaces } from 'react-i18next';
+import miradorWithPlugins from '../lib/miradorWithPlugins';
import * as actions from '../state/actions';
import { getThumbnailNavigationPosition } from '../state/selectors';
import WindowThumbnailSettings from '../components/WindowThumbnailSettings';
@@ -24,6 +26,8 @@ const mapStateToProps = (state, props) => (
const enhance = compose(
connect(mapStateToProps, mapDispatchToProps),
+ withNamespaces(),
+ miradorWithPlugins,
// further HOC go here
);
diff --git a/src/containers/WindowTopBar.js b/src/containers/WindowTopBar.js
index 2f1a0bbdabafd958df5ab85f0cbbbff151c85054..0bc54458ae7b4ef4712ece6e2f422459c746b68e 100644
--- a/src/containers/WindowTopBar.js
+++ b/src/containers/WindowTopBar.js
@@ -1,5 +1,6 @@
import { compose } from 'redux';
import { connect } from 'react-redux';
+import { withNamespaces } from 'react-i18next';
import * as actions from '../state/actions';
import miradorWithPlugins from '../lib/miradorWithPlugins';
import WindowTopBar from '../components/WindowTopBar';
@@ -17,6 +18,7 @@ const mapDispatchToProps = (dispatch, props) => ({
const enhance = compose(
connect(null, mapDispatchToProps),
miradorWithPlugins,
+ withNamespaces(),
// further HOC go here
);
diff --git a/src/containers/WindowTopMenuButton.js b/src/containers/WindowTopMenuButton.js
new file mode 100644
index 0000000000000000000000000000000000000000..ebfedfeb3d1d114cd7eabc4ea478137e681fe8fc
--- /dev/null
+++ b/src/containers/WindowTopMenuButton.js
@@ -0,0 +1,12 @@
+import { compose } from 'redux';
+import { withNamespaces } from 'react-i18next';
+import miradorWithPlugins from '../lib/miradorWithPlugins';
+import WindowTopMenuButton from '../components/WindowTopMenuButton';
+
+const enhance = compose(
+ withNamespaces(),
+ miradorWithPlugins,
+ // further HOC
+);
+
+export default enhance(WindowTopMenuButton);
diff --git a/src/containers/WorkspaceAddButton.js b/src/containers/WorkspaceAddButton.js
index b9ed10040df56b50b030ec03866cc9427fd24ce7..d7faf821822af61679adf76eeedd1a521624ef93 100644
--- a/src/containers/WorkspaceAddButton.js
+++ b/src/containers/WorkspaceAddButton.js
@@ -1,4 +1,7 @@
import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { withNamespaces } from 'react-i18next';
+import miradorWithPlugins from '../lib/miradorWithPlugins';
import WorkspaceAddButton from '../components/WorkspaceAddButton';
/**
@@ -12,4 +15,10 @@ const mapStateToProps = state => (
}
);
-export default connect(mapStateToProps)(WorkspaceAddButton);
+const enhance = compose(
+ connect(mapStateToProps),
+ withNamespaces(),
+ miradorWithPlugins,
+);
+
+export default enhance(WorkspaceAddButton);
diff --git a/src/containers/WorkspaceExport.js b/src/containers/WorkspaceExport.js
index a90a4670fb89a2dc0a37338be8349c198726f9ae..82dded070825354cb5fffba8ae5d5d3513218597 100644
--- a/src/containers/WorkspaceExport.js
+++ b/src/containers/WorkspaceExport.js
@@ -1,5 +1,7 @@
import { compose } from 'redux';
import { connect } from 'react-redux';
+import { withNamespaces } from 'react-i18next';
+import miradorWithPlugins from '../lib/miradorWithPlugins';
import WorkspaceExport from '../components/WorkspaceExport';
/**
@@ -11,6 +13,8 @@ const mapStateToProps = state => ({ state });
const enhance = compose(
connect(mapStateToProps, {}),
+ miradorWithPlugins,
+ withNamespaces(),
// further HOC go here
);
diff --git a/src/containers/WorkspaceFullScreenButton.js b/src/containers/WorkspaceFullScreenButton.js
index 60ccaa92c4331f6129ffd9b50595c01f656255dd..64f9bd73242ac485818d9b53a94ec1ea9196a16e 100644
--- a/src/containers/WorkspaceFullScreenButton.js
+++ b/src/containers/WorkspaceFullScreenButton.js
@@ -1,4 +1,7 @@
import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { withNamespaces } from 'react-i18next';
+import miradorWithPlugins from '../lib/miradorWithPlugins';
import * as actions from '../state/actions';
import WorkspaceFullScreenButton
from '../components/WorkspaceFullScreenButton';
@@ -10,4 +13,11 @@ import WorkspaceFullScreenButton
*/
const mapDispatchToProps = { setWorkspaceFullscreen: actions.setWorkspaceFullscreen };
-export default connect(null, mapDispatchToProps)(WorkspaceFullScreenButton);
+const enhance = compose(
+ connect(null, mapDispatchToProps),
+ withNamespaces(),
+ miradorWithPlugins,
+ // further HOC
+);
+
+export default enhance(WorkspaceFullScreenButton);
diff --git a/src/containers/WorkspaceMenu.js b/src/containers/WorkspaceMenu.js
new file mode 100644
index 0000000000000000000000000000000000000000..866358d4fede4ed20468237fbf47e8cb0288c2b6
--- /dev/null
+++ b/src/containers/WorkspaceMenu.js
@@ -0,0 +1,12 @@
+import { compose } from 'redux';
+import { withNamespaces } from 'react-i18next';
+import miradorWithPlugins from '../lib/miradorWithPlugins';
+import WorkspaceMenu from '../components/WorkspaceMenu';
+
+const enhance = compose(
+ withNamespaces(),
+ miradorWithPlugins,
+ // further HOC
+);
+
+export default enhance(WorkspaceMenu);
diff --git a/src/containers/WorkspaceMenuButton.js b/src/containers/WorkspaceMenuButton.js
new file mode 100644
index 0000000000000000000000000000000000000000..0ccd4218f13526ebaac8a74b08b4b81abe17eb1a
--- /dev/null
+++ b/src/containers/WorkspaceMenuButton.js
@@ -0,0 +1,12 @@
+import { compose } from 'redux';
+import { withNamespaces } from 'react-i18next';
+import miradorWithPlugins from '../lib/miradorWithPlugins';
+import WorkspaceMenuButton from '../components/WorkspaceMenuButton';
+
+const enhance = compose(
+ withNamespaces(),
+ miradorWithPlugins,
+ // further HOC
+);
+
+export default enhance(WorkspaceMenuButton);
diff --git a/src/containers/WorkspaceSettings.js b/src/containers/WorkspaceSettings.js
index a52b463006165a812e01d231e9144683fc600838..50b6971352e0d0d3ec10e975d20410732cc7fc47 100644
--- a/src/containers/WorkspaceSettings.js
+++ b/src/containers/WorkspaceSettings.js
@@ -1,5 +1,6 @@
import { compose } from 'redux';
import { connect } from 'react-redux';
+import { withNamespaces } from 'react-i18next';
import WorkspaceSettings from '../components/WorkspaceSettings';
import * as actions from '../state/actions';
@@ -25,6 +26,7 @@ const mapStateToProps = state => (
const enhance = compose(
connect(mapStateToProps, mapDispatchToProps),
+ withNamespaces(),
// further HOC go here
);
diff --git a/src/i18n.js b/src/i18n.js
new file mode 100644
index 0000000000000000000000000000000000000000..dac6958f05709d746f951f1f33fb68cbc2f62a6f
--- /dev/null
+++ b/src/i18n.js
@@ -0,0 +1,22 @@
+import i18n from 'i18next';
+import { reactI18nextModule } from 'react-i18next';
+import en from '../locales/en/translation.json';
+
+// Load translations for each language
+const resources = {
+ en,
+};
+
+i18n
+ .use(reactI18nextModule)
+ .init({
+ resources,
+ lng: 'en',
+ fallbackLng: 'en',
+
+ interpolation: {
+ escapeValue: false, // react is already safe from xss
+ },
+ });
+
+export default i18n;
diff --git a/src/lib/MiradorViewer.js b/src/lib/MiradorViewer.js
index b68f8b64e1cef928229b3f261a0aea504f7d77bd..55d1635909ef2dca5450fc0ddb2b33e0dd71759b 100644
--- a/src/lib/MiradorViewer.js
+++ b/src/lib/MiradorViewer.js
@@ -1,12 +1,14 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
+import { I18nextProvider } from 'react-i18next';
import deepmerge from 'deepmerge';
import App from '../containers/App';
import createRootReducer from '../state/reducers/index';
import createStore from '../state/createStore';
import * as actions from '../state/actions';
import settings from '../config/settings';
+import i18n from '../i18n';
const store = createStore();
/**
@@ -26,7 +28,9 @@ class MiradorViewer {
ReactDOM.render(
<Provider store={store}>
- <App config={config} />
+ <I18nextProvider i18n={i18n}>
+ <App config={config} />
+ </I18nextProvider>
</Provider>,
document.getElementById(config.id),
);