Added 'fit width' button to OSD view

[rsimon]

In this PR

This PR addresses issue https://github.com/benwbrum/fromthepage/issues/3351, adding a new icon to the OpenSeadragon toolbar that will fit the image to fill the available width.

• I added a new icon to the symbols SVG. I derived it from the "Home" icon (which makes the image fill the available viewer size).
• I added minimal JS to the OSD view template which should wire up a click of the icon with OpenSeadragon's built-in viewer.viewport.fitHorizontally(); method.

Note that this is untested, since I don't have the full FTP stack set up on my system. It's a small change though, so hopefully this works. Fingers crossed. Let me know if any changes are needed!

[benwbrum]

Hi @rsimon. This works well, but I'd like to be able to add a tool tip over the icon. I see that the view has a new SVG symbol with a listener on it, but is there any way to associate that symbol with a string for e.g. Tooltips.FitWidth?

[rsimon]

I'm sure that's possible. I checked the current toolbar, and it looks like the tooltips are simply supplied via the title attribute of the <a> tag that serves as the icon container. But here's the tricky bit, where I'd need your help:

All your current icons are OpenSeadragon default controls. I saw that you are using OpenSeadragon.setString to localize the tooltip, which then causes OpenSeadragon to set the title attribute accordingly. The new fit-width icon is not an OSD default, so we'd need to find another way for setting the title attribute manually.

I'm not familiar with the template language syntax. (I assume that's Slim?) If you had the localized string defined as fit_width, I wonder if we could just do something like the below? But that's really just me guessing the syntax :-)

 a#osd_fit_width title="#{t('.fit_width)}" =svg_symbol "#icon-fit-width", class: 'icon'

[benwbrum]

Closing in favor of #4043