defaultValue matches the normal styled values of the gap property on the .pages element.
removed the "tooltip" that showed the current value from the range sliders inside the anchoredbox (the gap sliders).
Adds a new AnchoredBox component that is functionally a clone of the "saving error" notifications, but drops a lot of the JS in favor of the new (chrome-only!) CSS Anchor Positioning API. In subsequent commits, either alternate styling or a polyfill will be added non-supported browsers.
The box contains a few inputs that modify the CSS applied to `.pages`, most critically a "start on right" toggle for the Facing Pages mode.
The range slider should only display a tooltip for the value if the value attribute exists. For example, the difference between controlled and uncontrolled inputs.
Update toolBar.less
Adding class name so that it can be toggled between 'recto' and 'verso'. Verso being the normal left/right configuration, no styling is needed. With recto, the first page is shifted to the second slot, or right side.
Adding the margin resets back in because otherwise each .page margin is set to "auto" on the sides, and that makes them zoom awkwardly when in facing and flow modes.
Simplified and unified some font-size declarations, adjusted the "descriptions" for various inputs to be similar structure and appearance, change the components h1 label from "Brew" to "Properties Editor", updated the comment about Publishing.
Toggles a state variable to either visible or hidden which is used to set a related class on the toolbar. The hiding is done with CSS, just reducing the width of the toolbar and the opacity of the tools.
All zoom buttons run through same handler now.
They no longer take only the delta of the current zoom and desired zoom-- they take the actual desired zoom.
calculateZoom is now calculateChange, to help get the desired delta.
Removes icons as components, uses mask-image instead.
Sets a size on the .fac icons to 1em so by default they are 1em and retain their aspect ratio.
rename the icon files for consistency.
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.
Treat each input and button as a direct child of the `.group` class, removing the intermediate div and reassign the `tool` classname to those inputs and buttons. One item, the current / total page "set", is wrapped in a .tool div because they should be considered one item (even within the .group container).
And then a bunch of CSS adjustments to match the new structure.
Make it so that if a user enters a page number higher than the total page count, it jumps them to last page. if lower than 1, it jumps them to first page.
Displaying the total page count near the current page number means we can lose the bottom right toolbar entirely (the renderer could be added to top toolbar, or just left for the metadata info in title bar).
putting the `pageInput - 1` modifier in the `scrollToPage` method allows for more understandable button function ('back button' is `- 1` and 'forward button' is `+ 1`).
Changing input type to text removes the "spinner" controls from within the text box. The spinner buttons are an accessibility issue (the tiny buttons are tiny), and we already have better buttons for incrementing/decrementing page number.
Text box only accepts numbers.
Moved onChange handler function to a component method and simplified it a smidge.
Must use parseInt now because the input type will change to 'text' rather than 'number'
totalPages shouldn't need to be in state, since this component won't be changing it.
renamed pageNumberInput to just pageInput. Was just something that happened in the course of working on it.
currentPage doesn't need to have it's own state separate from pageInput, they should always be the same *value*.
Set as relative position, the toolbar (and mysteriously, the pageInfo box) would jump up 29px (toolbar height) when the "next page" button was clicked. absolute pos fixes this.
The website UI should stay out of the iframe if possible. Otherwise, users can style the UI on their brew which may or may not be a pain, and it's simple enough to avoid it.
Moved the zoomLevel state assignment to a newer useState hook function, making it easier (and shorter) to update that state within event handlers.
The slider onChange is a single easy line, and the buttons handlers are two lines for clarity.
Remove the 'in'/'out' parameter of the function and just have the buttons send postive or negative integers equal to the desired change in the zoom. No need for if/else statements using strings.
The makeZoom function is redundant if we just insert the style a little further down when the `.pages` div is initialized, as a `style` attribute on the tag.
Mostly change some properties from things like "transparent" to "unset". A lot of things that are just overriding the default Naturalcrit "colored button". Moved some properties to the top level `.toolbar` class and let it cascade down.
more closely match the properties editor behavior. removed some unnecessary (unused) properties. Outline only appears when element is focused (rather than on hover as well).
replace column-/row-gap with a single gap at 5px. Padding on each child element will provide the space. Set a height on toolbar, so child elements can be set to 100% height to improve bg color change on hover.
Gazook89