Manifest side to side

This reverts commit afa0281b.

Use this manifest for testing : https://anthony.pages.tetras-libre.fr/demo-content/manifests/test5.json

Closes #17 (closed)

src/components/CanvasAnnotations.js

@@ -6,7+6,7 @@
 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';
@@ -30,7+30,7 @@
     this.handleAnnotationHover = this.handleAnnotationHover.bind(this);
     this.handleAnnotationBlur = this.handleAnnotationBlur.bind(this);
     this.handleOpenManifestSideToSide = this.handleOpenManifestSideToSide.bind(this);
-    this.handleAccordion = this.handleAccordion.bind(this);
   }
 
   /**
@@ -58,7+57,7 @@
   /** */
   handleAnnotationBlur() {
     const { hoverAnnotation, windowId } = this.props;
     hoverAnnotation(windowId, []);
   }
 
   /** */
@@ -68,7+67,7 @@
     addWindow({ manifestId });
   }
 
-  handleAccordion() {
-    console.log("openAccordion");
-  }
-
   /**
    * Returns the rendered component
   */
@@ -142,11 +137,54 @@ 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>
 
+                  )
+                }
               </ScrollTo>
             ))
           }