Reintroducing handlePageChange() method to handle the page input separately from the scroll function. It tests the regex pattern on the string, parses to integer, and sets pageNum state.
scrollToPage also now sets the pageNum state after performing the scroll so the input box matches the new current page.
This was previously in the .pageInfo widget, probably not for any good reason, but I'm moving it to the popups div for probably not a good reason.
It's used to get the parent .pane div, and pull its `height` value which is then passed to the `.brewRenderer` div to set the height.
I tried alternate methods that would make this obsolete (CSS methods mostly), but due to some complexity am just ditching those alternatives and popping this sucker into `.popups` for now.
stylelint has a problem with the `:horizontal` pseudo selector in brewRenderer.jsx, which is being used to apply some styling to the custom scrollbars. As far as i can tell, the selector is not standards-track, so that is probably why. Not sure if we want to adjsut our stylelint config to allow it?
Moved the single-line handler to operate directly in the onChange handler of the input that is calling it.
Considered doing the same with handleZoomChange, but that handler is used by two buttons rather than just one.
handleScroll is replaced by getCurrentPage(), which effectively does the same thing. The math is slightly different, though very similar, and result seems to be the same.
utilize useEffect hook to trigger render when the mode state is changed.
Move modes array to top level array, and change 'book-mode' to 'facing', and add 'flow' mode.
toggle modes as class names in .pages div, which are each styled as required.
Adds `setBookMode()` which toggles a className on `.pages`. The `.book-mode` class sets display to grid, and the first child/page to start at the second slot of the book arrangement.
New icons for Zoom to Fit, and Fit Width buttons. Used SVGR online tool to create react components and then combined them.
If doing in future, be sure to set currentColor on `fill` property in the SVG itself. Make the SVGs as closed curves only (don't rely on stroke). set only a width property, not height.
Reduce overlap of the two functions and just require a 'mode' parameter. Could like roll a 'manual' mode into this for the zoom slider, as well, but skipping for now.
Adds a toFit() method to determine the delta/change needed to the current zoomLevel to fit the page to the pane, so that the widest page fits just inside the pane.
G.Ambatte