HomePhabricator

Add JS version of scale input

Description

Add JS version of scale input

When JavaScript is enabled, use a range input without stepping, which
lets the user smoothly resize the image to any factor between 0 and 5.
(The 5 is arbitrary and I’d be open to changing it to something else, I
think.) This seems to work very well in practice, including (mostly) for
sizes between 0 and 1 (scaling the image down).

The only wrinkle with sizes between 0 and 1 is if the image is smaller
than the page width, and you’ve zoomed the page – in this case, the zoom
and scale partially cancel each other out, until the input value goes
low enough that it starts to override the zoom again. I don’t think
there’s an easy fix for this, since in general it seems to me like a
good thing that the image grows with the page zoom (until it hits the
page width, at which point you need to use the scale input instead). It
might be possible to skip the ineffective part of the input (translate
an input value of 0.9 to a CSS --scale of 0.4 or whatever), but that
doesn’t seem worth the effort right now.

Also, disable the range input while any edit mode is active. cropper.js
is great at picking up whatever size the image has when the cropper is
created, but it can’t react to changes while the cropper is active.
However, reenabling the range input afterwards works just fine.

Details

Provenance
LucasWerkmeisterAuthored on May 15 2022, 1:49 PM
Parents
R2422:d6ad9716dbd6: Allow users to scale the image
Branches
Unknown
Tags
Unknown
ChangeId
None