Provide a method for an object link to display a particular page within Mirador

[patdunlavey]

Use case: a professor wants to discuss a particular item within a creative work series, and shares a link to students that brings up the object display in Mirador that has the canvas corresponding to that item displayed.

For example, perhaps the professor wants students to discuss the signature on this letter, without expecting them to find and click on the thumbnail for the third page:

Anticipated solution is to use a url fragment (the value to the right of the #) to identify which page to set Mirador to show when the object page loads. E.g. https://acdc.amherst.edu/view/EdwardOrraWhiteHitchcock/ma00027-02-06-00031#p3

Slack conversation

[patdunlavey]

Initial stub of an issue branch based on comments by @DiegoPino on slack: https://github.com/esmero/format_strawberryfield/compare/1.5.0...Born-Digital-US:format_strawberryfield:ISSUE-471?expand=1.

I'm really at sea on this and could use some more hints when you have a chance @DiegoPino !

[DiegoPino]

@patdunlavey so here is an idea (some code I tried tonight).

Mirador has a store. The store is used to keep loaded info, initial Configs etc.
Inside that Store, I can keep a local variable (setup before all the crazy saga starts) inside the .state object

Once I have that value (means I parsed from the URL the page)
I can read back that value inside the Root Saga code I wrote.
There... if the value is present, I can ask Mirador for a list of all Sequences for the Current active Window (we won't be able to link to other windows that the main one, I think that is a good compromise).
Then I can find the "stored index" inside that temp state variable. Remove the value from the state so we don't keep doing this for ever and ever.
And request Mirador to load a different Canvas (the one matching the index). If someone's passes an index out of bounds I console.log it but don't act.
On Canvas changes I update (push the url state) the Fragment so people can bookmark

How does that sound?

[patdunlavey]

Good morning @DiegoPino, thanks for putting eyes and brain on this! Though I fear that your analysis and suggestions for how to do this are mostly over my pointy head!

Logging an out-of-bounds index makes sense. Pushing the url state on canvas change sounds great, if not strictly necessary.

I really wish I could dive into this and help you by contributing some useful javascript, but I don't see myself being capable of making a dent on this without many, many hours of head-banging. I am willing to put more time into it if you're willing to tutor me on the how's a bit more. But I suspect it would take less of your time to just do it yourself! Let me know if/how you want to proceed on this.

[patdunlavey]

I'm afraid I haven't gotten very far with this. Well, by restoring and then extending slightly that little block of code that you removed from 1.4.0, I got something working for updating the url to add a hash for the current page (#page/N) when the user switches to a different page:

          // Build page parameter
          const canvasIndices = visibleCanvases.map(c => canvasIds.indexOf(c) + 1)
          if (view === 'single' || canvasIndices.length == 1) {
            newParams.page = canvasIndices[0]
          } else if (view === 'book') {
            newParams.page = canvasIndices.find(e => !!e).join(',')
          }
          if(newParams.page !== undefined) {
            let $fragment = 'page/' + newParams.page;
            history.replaceState(
              { searchParams: newParams },
              '',
              `${window.location.pathname}#${$fragment}`
            );
          }

I'm not sure if that's what you had in mind for that!

I have not figured out how to read that hash as Mirador loads and set it to display the corresponding page, however. Just below the part where you add the search query, I tried adding this:

          const readPageHash = function() {
            const urlArray = window.location.hash.replace('#','').split('/');
            const urlHash = {};
            for (let i = 0; i < urlArray.length; i += 2) {
              urlHash[urlArray[i]] = urlArray[i + 1];
            }
            if (urlHash['page'] != undefined) {
              return decodeURIComponent(urlHash['page'].replace(/\+/g, " "));
            }
            else {
              return '';
            }
          }

          const page_string = readPageHash();
          if (page_string.length > 0 ) {
            console.log('Setting page to ' + page_string);
            // Set up the canvas id.
            // This doesn't seem to do anything...
            $options.windows[0].canvas = page_string;
          }

Having gotten the current page parameter, I haven't figured out how to use it to tell Mirador to display that page.

[DiegoPino]

@patdunlavey give me until Friday. I have a working prototype I can share with you for you to explore/improve and make a proper pull out of it

[patdunlavey]

That would be awesome! I'll plan to ever-so-gently give you a poke then!

[DiegoPino]

Yeah, please poke me, bc I have like 4 open pulls I am working at the same time and might forget. Thanks!

[DiegoPino]

@patdunlavey ping. Did you managed to test the code I shared a few weeks ago? Would love to mark this as solved when you have some time. Thanks

[patdunlavey]

@DiegoPino I don't think I did! Can you share a link to the branch/PR?