Add additional options for resizing and CSS changes

[SteelWagstaff]

Hi plugin owners--
I've been working with some local users who are very excited about adding Hypothesis to their WordPress sites (and to their Pressbooks books) and have activated the plugin and begun using it. There are, however, a few commonly requested features for the plugin, and I was wondering if you'd be open to a pull request incorporating them into the existing core plugin. I've started making a very experimental "Hypothesis Modifications" plugin to do two of them here: https://github.com/SteelWagstaff/hypo-mods.

1. Many users would like to make it so that whenever possible, the annotation pane does not lay on top of (obscure) page content when it expands. In my plugin, I add an option called 'adjust page width' that uses javascript to adjust the width of the page body when the annotation pane expands. See https://github.com/SteelWagstaff/hypo-mods/blob/66024097d266d6cea2dcc736d63c186429a9e0c4/hypo-mods.php#L187-L191 and https://github.com/SteelWagstaff/hypo-mods/blob/66024097d266d6cea2dcc736d63c186429a9e0c4/js/resize.js for a very rough implementation.
2. Several of our users have suggested that the color of the highlights appear too faint on their screen, and that it's difficult to visually distinguish text that has been highlighted/annotated multiple times from text that has been highlighted just once. Essentially, they want to darken the yellow color used to depict annotations. See https://github.com/SteelWagstaff/hypo-mods/blob/66024097d266d6cea2dcc736d63c186429a9e0c4/hypo-mods.php#L204-L209 and https://github.com/SteelWagstaff/hypo-mods/blob/66024097d266d6cea2dcc736d63c186429a9e0c4/css/darken.css to see one example implementation.
   Would you consider adding either of these 'functionalities' to the core plugin, and if so, would someone be willing to work with me on preparing a pull request to add them to the plugin?

[SteelWagstaff]

Untested initial commits live in this fork: https://github.com/SteelWagstaff/wp-hypothesis/tree/pressbooks-resizing

[SteelWagstaff]

@judell shared an 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 you should be able to do a more focused intervention."

[SteelWagstaff]

@greatislander -- I know you're busy on more important projects, but I've got a couple of questions for you about possible implementations for a resizing option for Hypothesis/Pressbooks (or WordPress more generically). Currently, when the hypothesis client is opened, the annotation layer sits on top of page content. Example:

What I'd like to do is add a setting to the Hypothesis WP plugin which allows the user to 'resize' the page content when the hypothesis pane is expanded or changed in size. 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. I have an admittedly imperfect jQuery approach mocked up here: https://github.com/SteelWagstaff/wp-hypothesis/blob/master/js/resize.js but I don't know how to handle resizing of the Pressbooks navigation menu, particularly because the width of the .nav-reading element is set to 100vw. Do you have any ideas/suggestions on how to proceed? Could we possibly implement something like this: https://nathancahill.github.io/Split.js/ (https://github.com/nathancahill/Split.js)?