Sequence web component

[stephenwf]

Using the work from:
IIIF-Commons/iiif-helpers#6

This component would act similarly to <canvas-panel /> but instead of working with individual canvases, it would work with a sequence.

<canvas-sequence id="seq" manifest="https://.." sequence-index="0" />

<script>
  const $seq = document.getElementById('seq');

  const availableSequences = await $seq.getFullSequence();
  // [ 
  //    [ { id: 'https://.../canvas-0' } ], 
  //    [  id: 'https://.../canvas-1' },  id: 'https://.../canvas-2' } ], 
  //    [  id: 'https://.../canvas-3' },  id: 'https://.../canvas-4' } ], 
  //    ....
  // ]
  
  const currentSeq = await $seq.getCurrentSequence();
  const canvases = $seq.vault.get(currentSeq); // resolves full canvases to grab labels/metadata for visible canvases

  $seq.setAttribute('sequence-index', "1"); // Manually change sequence index (so show canvas-1 and canvas-2)
  $seq.setSequenceIndex(1); // Alternative API
  $seq.setCanvasId('https://../canvas-3'); // Finds the correct in sequence, switches to that
  $seq.nextInSequence(); // Go to next "page"
  $seq.previousInSequence(); // Go to previous "page"
</script>

This would enable canvas panel to support the following:

• Scroll-like manifests (with continuous in the manifest)
• Book reading (with paged in manifest)

Things to consider:

• Layout options
• Additional events?
• Existing APIs that are geared towards single canvases