diff --git a/src/components/AnnotationManifestsAccordion.js b/src/components/AnnotationManifestsAccordion.js
index 08f709010dcbfd870042f3314bdb2fbc669a1aa0..1e2a1853cb7d3d05e6b6126e86f9bf0058e5837f 100644
--- a/src/components/AnnotationManifestsAccordion.js
+++ b/src/components/AnnotationManifestsAccordion.js
@@ -4,23 +4,51 @@ import AccordionSummary from '@material-ui/core/AccordionSummary';
import ExpandMoreIcon from '@material-ui/icons/ExpandMoreSharp';
import Typography from '@material-ui/core/Typography';
import AccordionDetails from '@material-ui/core/AccordionDetails';
-import { MiradorMenuButton } from './MiradorMenuButton';
import PlaylistAddIcon from '@material-ui/icons/PlaylistAdd';
+import PropTypes from 'prop-types';
+import { MiradorMenuButton } from './MiradorMenuButton';
-
+/**
+ * AnnotationManifestsAccordion ~
+ */
export class AnnotationManifestsAccordion extends Component {
-
+ /**
+ * constructor -
+ */
constructor(props) {
super(props);
+ this.handleOpenManifestSideToSide = this.handleOpenManifestSideToSide.bind(this);
}
- render() {
+ /** */
+ handleOpenManifestSideToSide(e, manifestId) {
+ const { addResource, addWindow } = this.props;
+ addResource(manifestId);
+ addWindow({ manifestId });
+ }
+
+ /** */
+ render() {
const {
- classes,
- annotation
+ classes, annotation, t
} = this.props;
+ /** */
+ function searchManifest(text) {
+ return text.match(
+ /((http|https)\:\/\/[a-z0-9\/:%_+.,#?!@&=-]+)#manifest/g,
+ );
+ }
+
+ console.log(annotation);
+ annotation.idIsManifest = !!searchManifest(annotation.id);
+ annotation.manifestsInContent = searchManifest(annotation.content);
+
+ if (annotation.manifestsInContent === null) {
+ return null;
+ }
+
return (
(annotation.idIsManifest || annotation.manifestsInContent) && (
<div>
@@ -60,7 +88,7 @@ export class AnnotationManifestsAccordion extends Component {
}}
className={classes.manifestOpeningButton}
>
- <PlaylistAddIcon/>
+ <PlaylistAddIcon />
</MiradorMenuButton>
</div>
))}
@@ -68,9 +96,27 @@ export class AnnotationManifestsAccordion extends Component {
</AccordionDetails>
</Accordion>
</div>
-
)
- )
+ );
}
-
}
+
+AnnotationManifestsAccordion.propsTypes = {
+ addResource: PropTypes.func.isRequired,
+ addWindow: PropTypes.func.isRequired,
+ annotation:
+ PropTypes.shape({
+ id: PropTypes.string.isRequired,
+ idIsManifest: PropTypes.bool,
+ manifestsInContent: PropTypes.arrayOf(PropTypes.string),
+ }),
+ classes: PropTypes.objectOf(PropTypes.string),
+ t: PropTypes.func.isRequired,
+};
+
+AnnotationManifestsAccordion.defaultProps = {
+ annotation: {},
+ classes: {},
+ htmlSanitizationRuleSet: 'iiif',
+ listContainerComponent: 'li',
+};
diff --git a/src/components/CanvasAnnotations.js b/src/components/CanvasAnnotations.js
index 827fe8f4d4a37713aff90697d25f889aa666c5eb..0769f9eadd8880c25340695e2c7179f8e1394cc0 100644
--- a/src/components/CanvasAnnotations.js
+++ b/src/components/CanvasAnnotations.js
@@ -6,15 +6,9 @@ import MenuList from '@material-ui/core/MenuList';
import MenuItem from '@material-ui/core/MenuItem';
import ListItemText from '@material-ui/core/ListItemText';
import Typography from '@material-ui/core/Typography';
-import DashboardIcon from '@material-ui/icons/Dashboard';
-import PlaylistAddIcon from '@material-ui/icons/PlaylistAdd';
-import Accordion from '@material-ui/core/Accordion';
-import AccordionSummary from '@material-ui/core/AccordionSummary';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMoreSharp';
-import AccordionDetails from '@material-ui/core/AccordionDetails';
-import { MiradorMenuButton } from './MiradorMenuButton';
import { ScrollTo } from './ScrollTo';
import SanitizedHtml from '../containers/SanitizedHtml';
+import { AnnotationManifestsAccordion } from './AnnotationManifestsAccordion';
/**
* CanvasAnnotations ~
@@ -29,7 +23,6 @@ export class CanvasAnnotations extends Component {
this.handleClick = this.handleClick.bind(this);
this.handleAnnotationHover = this.handleAnnotationHover.bind(this);
this.handleAnnotationBlur = this.handleAnnotationBlur.bind(this);
- this.handleOpenManifestSideToSide = this.handleOpenManifestSideToSide.bind(this);
}
/**
@@ -60,13 +53,6 @@ export class CanvasAnnotations extends Component {
hoverAnnotation(windowId, []);
}
- /** */
- handleOpenManifestSideToSide(e, manifestId) {
- const { addResource, addWindow } = this.props;
- addResource(manifestId);
- addWindow({ manifestId });
- }
-
/**
* Returns the rendered component
*/
@@ -77,21 +63,6 @@ export class CanvasAnnotations extends Component {
containerRef,
} = this.props;
if (annotations.length === 0) return null;
-
- /** */
- function searchManifest(text) {
- return text.match(
- /((http|https)\:\/\/[a-z0-9\/:%_+.,#?!@&=-]+)#manifest/g,
- );
- }
-
- annotations.forEach((annotation, i) => {
- // eslint-disable-next-line react/prop-types
- annotations[i].idIsManifest = !!searchManifest(annotation.id);
- // eslint-disable-next-line react/prop-types
- annotations[i].manifestsInContent = searchManifest(annotation.content);
- });
-
console.log(annotations);
return (
<>
@@ -139,52 +110,10 @@ export class CanvasAnnotations extends Component {
</div>
</ListItemText>
</MenuItem>
- {
- (annotation.idIsManifest || annotation.manifestsInContent) && (
- <div>
- <Accordion>
- <AccordionSummary
- expandIcon={<ExpandMoreIcon />}
- >
- <Typography className={classes.heading}>Manifests found :</Typography>
- </AccordionSummary>
- <AccordionDetails>
- <Typography>
- {annotation.idIsManifest && (
- <div className={classes.manifestOpeningWrapper}>
- <div>{annotation.id}</div>
- <MiradorMenuButton
- aria-haspopup="true"
- aria-label={t('openManifestInOtherWindow', { manifest: annotation.id })}
- titleAccess={t('openManifestInOtherWindow', { manifest: annotation.id })}
- onClick={(e) => { this.handleOpenManifestSideToSide(e, annotation.id); }}
- className={classes.manifestOpeningButton}
- >
- <PlaylistAddIcon />
- </MiradorMenuButton>
- </div>
- )}
- {annotation.manifestsInContent && annotation.manifestsInContent.map(manifestId => (
- <div className={classes.manifestOpeningWrapper}>
- <div>{manifestId}</div>
- <MiradorMenuButton
- aria-haspopup="true"
- aria-label={t('openManifestInOtherWindow')}
- titleAccess={t('openManifestInOtherWindow')}
- onClick={(e) => { this.handleOpenManifestSideToSide(e, manifestId); }}
- className={classes.manifestOpeningButton}
- >
- <PlaylistAddIcon />
- </MiradorMenuButton>
- </div>
- ))}
- </Typography>
- </AccordionDetails>
- </Accordion>
- </div>
-
- )
- }
+ <AnnotationManifestsAccordion
+ annotation={annotation}
+ t={t}
+ />
</ScrollTo>
))
}
@@ -195,8 +124,6 @@ export class CanvasAnnotations extends Component {
}
CanvasAnnotations.propTypes = {
- addResource: PropTypes.func.isRequired,
- addWindow: PropTypes.func.isRequired,
annotations: PropTypes.arrayOf(
PropTypes.shape({
content: PropTypes.string.isRequired,
diff --git a/src/containers/AnnotationManifestsAccordion.js b/src/containers/AnnotationManifestsAccordion.js
new file mode 100644
index 0000000000000000000000000000000000000000..18aa4ec1b39fe3e2b627bdc00abd1ce8f858473d
--- /dev/null
+++ b/src/containers/AnnotationManifestsAccordion.js
@@ -0,0 +1,43 @@
+import { compose } from 'redux';
+import { connect } from 'react-redux';
+import { withTranslation } from 'react-i18next';
+import { withStyles } from '@material-ui/core/styles';
+import { withPlugins } from '../extend/withPlugins';
+import { AnnotationManifestsAccordion } from '../components/AnnotationManifestsAccordion';
+import * as actions from '../state/actions';
+
+/** For connect */
+const mapStateToProps = (state, { canvasId, windowId }) => ({
+});
+
+/**
+ * mapDispatchToProps - to hook up connect
+ * @memberof WindowSideBarAnnotationsPanel
+ * @private
+ */
+const mapDispatchToProps = {
+ addResource: actions.addResource,
+ addWindow: actions.addWindow,
+};
+
+/** For withStlyes */
+const styles = theme => ({
+ manifestOpeningIcon: {
+ width: '30%',
+ },
+ manifestOpeningLink: {
+ width: '70%',
+ },
+ manifestOpeningWrapper: {
+ display: 'flex',
+ },
+});
+
+const enhance = compose(
+ withTranslation(),
+ withStyles(styles),
+ connect(mapStateToProps, mapDispatchToProps),
+ withPlugins('AnnotationManifestsAccordion'),
+);
+
+export default enhance(AnnotationManifestsAccordion);
diff --git a/src/containers/CanvasAnnotations.js b/src/containers/CanvasAnnotations.js
index e9efca9c544eda1f65312b095ead9a39df3feea6..3470113912f230f0c5839e546f796cccfa8f9703 100644
--- a/src/containers/CanvasAnnotations.js
+++ b/src/containers/CanvasAnnotations.js
@@ -46,8 +46,6 @@ const mapStateToProps = (state, { canvasId, windowId }) => ({
* @private
*/
const mapDispatchToProps = {
- addResource: actions.addResource,
- addWindow: actions.addWindow,
deselectAnnotation: actions.deselectAnnotation,
hoverAnnotation: actions.hoverAnnotation,
selectAnnotation: actions.selectAnnotation,