[wp-trac] [WordPress Trac] #21811: Add image editing UI to the media modal

[WordPress Trac]

#21811: Add image editing UI to the media modal
------------------------------------+------------------
 Reporter:  koopersmith             |       Owner:
     Type:  feature request         |      Status:  new
 Priority:  normal                  |   Milestone:  3.9
Component:  Media                   |     Version:  3.5
 Severity:  normal                  |  Resolution:
 Keywords:  has-patch dev-feedback  |     Focuses:
------------------------------------+------------------

Comment (by tomauger):

 Replying to [comment:44 DH-Shredder]:
 > If you try to crop an image by dragging on the image:
 > * The styles for the selection box don't show

 I haven't noticed this, using your latest patch. Perhaps I'm missing
 something - but I'm seeing the "marching ants", the selection handles and
 the semi-opaque overlay. Was there something else?

 > * The selection box is created with the wrong left/top coordinates,
 which, with the styles enqueued, makes it
 [http://screen.objects.dreamhost.com/02-19-2014-10-42-46.png show in the
 upper left] rather than over the image.

 So, I've tracked this down to imgareaselect.js, but I'm not sure what to
 do about it. At 1097/98 it traverses up the DOM from the crop wrapper
 element, and if it finds ANY ancestor element with position:fixed, then it
 sets position:fixed on all the visual elements it creates (the selection
 box and the opaque mask boxes). If we override this and set
 position:absolute on these elements, then everything works as it should.

 The Media Modal itself is position:fixed, which is what's triggering the
 position:fixed on the other elements. I'm sure there's a good reason to
 set the modal to position:fixed, but I found that if I set it to
 position:absolute, everything still rendered as I expected. But then
 again, maybe it won't on another screen.

 So, possible solutions:
 * set `.media-modal` to position:absolute instead of fixed
 * ? hack `imgareaselect.js` and remove the part that sets position:fixed.
 * ?! modify `image-edit.js` `initCrop` to look for the imgareaselect UI
 elements and force them to position:absolute (`onInit` is a closure and
 doesn't have access to the imgareaselect scope, sadly)
 * modify the way offsets are calculated to allow position:fixed to work.

 I'd prefer the first option, if it IS an option, because it seems cleaner,
 but there's probably a good reason why the modal is position:fixed. The
 last option, calculating the way the image and container offsets are
 calculated seems interesting, but possibly, um, impossible without surgery
 on imgareaselect.js.

 So, I'm uploading a patch that taps into initCrop and forces
 position:absolute on the crop UI elements. It appears to work everywhere
 I've tested the editor, but not sure this is the preferred approach.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/21811#comment:46>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform