Resize Pressbooks Content when Hypothesis client is expanded

[SteelWagstaff]

Feature Scope

• Accessibility and inclusivity
• User interface (content creation)
• User interface (network home page & catalog)
• User interface (reading)
• Import/export formats
• Authoring tools
• Book themes
• Integration with third-party services

Feature Description

Many users enable the Hypothesis WordPress plugin to enable open web-based annotation to their Pressbooks books. At present, the annotation client expands from the right of the browser and can be resized by the user. The annotation client sits on top of page content by default and does not communicate its width to the page it's being loaded on. In many cases, this is just fine, but on narrow browser widths or on pages with content towards the right margin of the page, the annotation client sometimes sits on top of or obscures relevant content. For example:
. This is a particularly significant issue for anyone who plans to bring Pressbooks content into a Learning Management System via LTI, since many LMSes will insert content inside of an iFrame with a fixed width. We'd like to permit users to instruct Pressbooks to resize the main page content in order to accommodate the expanded annotation client under certain circumstances (provided that there's a minimum width available for PB content, etc.)

Feature Use Case

Anyone developing a book that uses the annotation client as a deliberately designed compliment, particularly if they plan to use it within a Learning Management System.

Other Notes

What I'd like to do is add a setting to the Hypothesis WP plugin which allows the user to 'resize' the content of the page when the hypothesis pane is expanded or changed in size. If selected, the plugin would load javascript which resized the content page so that the annotation client did not overlap page content. I have an admittedly imperfect jQuery approach mocked up here: https://github.com/SteelWagstaff/wp-hypothesis/blob/master/js/resize.js.

Resulting example:

Essentially, I want to browser to behave as if the viewport or document body was the width of the browser minus the width of the expanded Hypothesis client. @judell from Hypothesis shared one possible implementation, noting "the one I'm using in an experimental extension is http://jonudell.net/h/pagefit.js which gives decent results on most sites, and works very reliably for PDFs (since there's only one page layout in that case). That's a highly aggressive intervention, but for a particular site with known elements and layouts [Steel's note -- i.e. Pressbooks or WordPress] you should be able to do a more focused intervention."

In the example I just shared, I have a few problems, chief of them being that I don't know how to handle resizing the Pressbooks navigation menu, which uses position: fixed and width: 100vw. I recognize that this may be more of a Hypothesis plugin issue than a Pressbooks core issue, and have a prior issue filed in that repo: hypothesis/wp-hypothesis#31 (comment).

Finally, I don't know if it'd be relevant, but I came across an interesting Javascript utility for creating adjustable split views or panes that might be of use here?

[SteelWagstaff]

I have a more functional version of a resizing script here: https://github.com/SteelWagstaff/wp-hypothesis/tree/pressbooks-resizing (https://github.com/SteelWagstaff/wp-hypothesis/blob/pressbooks-resizing/js/pagefit.js, more specifically). <1 minute Demo video here: https://mediaspace.wisc.edu/media/Hypothesis+Pressbooks+resize+demo/1_x8d7gk64. @greatislander if and when you have time for this, I'm ready to discuss/demo. I imagine initial conversation would be 5-10 minutes? @judell, you may also be interested in seeing/testing this?

[greatislander]

Resolved in pressbooks/pressbooks-book#292.