Vanilla JS implementation of next/prev using data-attributes, and expose Provider for React implementations

[mathewjordan]

What does this do?

Vanilla JS

This further refines handling of Next and Previous resources internally and exposes their id values to consuming applications via data-xxx attributes on the [thumbnail-panel] selector and as current, next, and previous properties on a resourceIds object.

React

This refactors where in the app the IIIFContentProvider lives. Previously the Provider was a child of ThumbnailPanel, and config props passed into ThumbnailPanel get passed into the Provider. This PR's suggested implementation would wrap a consumer's app (or whatever part of the app benefits from knowing about ThumbnailPanel info) in IIIFContentProvider, for more flexible implementations (say Nav buttons for an uncontrolled implementation).

Example:

import { IIIFContentProvider, useThumbnailPanelContext } from './context/IIIFResourceContext';

<IIIFContentProvider>
   <ThumbnailPanel iiifContent="..." onResourceChanged={...} />
  <MyCustomComponent />
</IIIFContentProvider>

function MyCustomComponent() {
  const {
    state: { isEnd, isStart, next, prev },
  } = useThumbnailPanelContext();

  return (
    <button onClick={next?.handleNextClick} disabled={isEnd} data-id={next?.resourceId}>
      Next
    </button>
  );
}

[codesandbox[bot]]

  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders | Preview

[netlify[bot]]

✅ Deploy Preview for thumbnail-panel ready!

Name	Link
🔨 Latest commit	308a7c99741a7edbdfff9bb4cada89bdfef1fedf
🔍 Latest deploy log	https://app.netlify.com/sites/thumbnail-panel/deploys/6475ee2bbc480700084fa75d
😎 Deploy Preview	https://deploy-preview-37--thumbnail-panel.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[codesandbox-ci[bot]]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.