poke sequences through the ui

__tests__/integration/mirador/sequences.html

@@ -14,8 +14,7 @@
      var miradorInstance = Mirador.viewer({
        id: 'mirador',
        windows: [{
-         manifestId: 'https://www.e-codices.unifr.ch/metadata/iiif/gau-Fragment/manifest.json',
-         sequenceId: 'https://www.e-codices.unifr.ch/metadata/iiif/gau-Fragment/sequence/Sequence-1741.json',
+         manifestId: 'https://www.e-codices.unifr.ch/metadata/iiif/gau-Fragment/manifest.json'
        }],
      });
     </script>

src/components/WindowSideBarCanvasPanel.js

@@ -13,23 +13,44 @@ import SidebarIndexTableOfContents from '../containers/SidebarIndexTableOfConten
  * a panel showing the canvases for a given manifest
  */
 export class WindowSideBarCanvasPanel extends Component {
+  /** */
+  static getUseableLabel(resource, index) {
+    return (resource
+      && resource.getLabel
+      && resource.getLabel().length > 0)
+      ? resource.getLabel().map(label => label.value)[0]
+      : String(index + 1);
+  }
+
   /** */
   constructor(props) {
     super(props);
+    this.handleSequenceChange = this.handleSequenceChange.bind(this);
     this.handleVariantChange = this.handleVariantChange.bind(this);
 
     this.state = {
+      sequenceSelectionOpened: false,
       variantSelectionOpened: false,
     };
 
     this.containerRef = React.createRef();
   }
 
+  /** @private */
+  handleSequenceChange(event) {
+    const { updateSequence } = this.props;
+
+    updateSequence(event.target.value);
+
+    this.setState({ sequenceSelectionOpened: false });
+  }
+
   /** @private */
   handleVariantChange(event) {
     const { updateVariant } = this.props;
 
     updateVariant(event.target.value);
+
     this.setState({ variantSelectionOpened: false });
   }
 
@@ -40,13 +61,15 @@ export class WindowSideBarCanvasPanel extends Component {
     const {
       classes,
       id,
+      sequenceId,
+      sequences,
       t,
       toggleDraggingEnabled,
       variant,
       windowId,
     } = this.props;
 
-    const { variantSelectionOpened } = this.state;
+    const { sequenceSelectionOpened, variantSelectionOpened } = this.state;
     let listComponent;
     if (variant === 'tableOfContents') {
       listComponent = (
@@ -72,6 +95,39 @@ export class WindowSideBarCanvasPanel extends Component {
           id={id}
           windowId={windowId}
           titleControls={(
+            <>
+              {
+                sequences && sequences.length > 1 && (
+                  <FormControl>
+                    <Select
+                      MenuProps={{
+                        anchorOrigin: {
+                          horizontal: 'left',
+                          vertical: 'bottom',
+                        },
+                        getContentAnchorEl: null,
+                      }}
+                      displayEmpty
+                      value={sequenceId}
+                      onChange={this.handleSequenceChange}
+                      name="sequenceId"
+                      open={sequenceSelectionOpened}
+                      onOpen={(e) => {
+                        toggleDraggingEnabled();
+                        this.setState({ sequenceSelectionOpened: true });
+                      }}
+                      onClose={(e) => {
+                        toggleDraggingEnabled();
+                        this.setState({ sequenceSelectionOpened: false });
+                      }}
+                      classes={{ select: classes.select }}
+                      className={classes.selectEmpty}
+                    >
+                      { sequences.map((s, i) => <MenuItem value={s.id} key={s.id}><Typography variant="body2">{ WindowSideBarCanvasPanel.getUseableLabel(s, i) }</Typography></MenuItem>) }
+                    </Select>
+                  </FormControl>
+                )}
+              <div className={classes.break} />
               <FormControl>
                 <Select
                   MenuProps={{
@@ -102,6 +158,7 @@ export class WindowSideBarCanvasPanel extends Component {
                   <MenuItem value="thumbnail"><Typography variant="body2">{ t('thumbnailList') }</Typography></MenuItem>
                 </Select>
               </FormControl>
+            </>
           )}
         >
           {listComponent}
@@ -114,9 +171,17 @@ export class WindowSideBarCanvasPanel extends Component {
 WindowSideBarCanvasPanel.propTypes = {
   classes: PropTypes.objectOf(PropTypes.string).isRequired,
   id: PropTypes.string.isRequired,
+  sequenceId: PropTypes.string,
+  sequences: PropTypes.arrayOf(PropTypes.object),
   t: PropTypes.func.isRequired,
   toggleDraggingEnabled: PropTypes.func.isRequired,
+  updateSequence: PropTypes.func.isRequired,
   updateVariant: PropTypes.func.isRequired,
   variant: PropTypes.oneOf(['item', 'thumbnail', 'tableOfContents']).isRequired,
   windowId: PropTypes.string.isRequired,
 };
+
+WindowSideBarCanvasPanel.defaultProps = {
+  sequenceId: null,
+  sequences: [],
+};

src/containers/WindowSideBarCanvasPanel.js

@@ -9,6 +9,8 @@ import {
   getCompanionWindow,
   getDefaultSidebarVariant,
   getManifestCanvases,
+  getSequence,
+  getSequences,
   getVisibleCanvases,
 } from '../state/selectors';
 
@@ -22,6 +24,8 @@ const mapStateToProps = (state, { id, windowId }) => {
     canvases,
     config,
     selectedCanvases: getVisibleCanvases(state, { windowId }),
+    sequenceId: getSequence(state, { windowId }).id,
+    sequences: getSequences(state, { windowId }),
     variant: getCompanionWindow(state, { companionWindowId: id, windowId }).variant
       || getDefaultSidebarVariant(state, { windowId }),
   };
@@ -35,6 +39,9 @@ const mapStateToProps = (state, { id, windowId }) => {
 const mapDispatchToProps = (dispatch, { id, windowId }) => ({
   setCanvas: (...args) => dispatch(actions.setCanvas(...args)),
   toggleDraggingEnabled: () => dispatch(actions.toggleDraggingEnabled()),
+  updateSequence: sequenceId => dispatch(
+    actions.updateWindow(windowId, { sequenceId }),
+  ),
   updateVariant: variant => dispatch(
     actions.updateCompanionWindow(windowId, id, { variant }),
   ),
@@ -45,6 +52,10 @@ const mapDispatchToProps = (dispatch, { id, windowId }) => ({
  * @param theme
  */
 const styles = theme => ({
+  break: {
+    flexBasis: '100%',
+    height: 0,
+  },
   label: {
     paddingLeft: theme.spacing(1),
   },