Fixes #924 Add four drag handles for image resizing

[diana-lin]

Prelude

Currently, IE11 only has one resize handle when resizing an image within AlloyEditor while other browsers (Chrome, Firefox) have four. The task at hand is to implement resizing for IE11 such that it has a total of four drag handles and behaves in the same way as other browsers.

Issue

#924

Solution

• Add styling for the four drag handles on the image resizer (one drag handle on each corner).
• Add four drag handles as child elements of the image resizer, each with its proper CSS style
  • factorX and factorY can be either +1 or -1, and they take into account which drag handle is being used.
  • Height and width adjustment with adjustToX() and adjustToY() methods use factorX and factorY to determine whether to enlarge or shrink an image.
• No longer need to consider left, center, or right alignment since resizing behaves the same way

Test

This fix has been tested on Internet Explorer 11, the main environment where we use dragresize_ie11.js.

Notes

• Re-sending this as a fixed PR from Fixes #924 Add four drag handles for image resizing #925
• With this change, the drag handles for images on IE11 are off-set in Liferay portal. Refinements to their positioning will be made separately in the Liferay repositories since this behaviour is specific to the Liferay portal

[julien]

Just started reviewing :)

Sent from GH.

[julien]

@diana-lin thanks!

[diana-lin]

Hi @julien,

Could you provide me with a rough estimate of when the next release containing this fix will be? It's relevant to a client's ticket (https://issues.liferay.com/browse/LPP-32171) and I'd like to give them an update.

[julien]

Hi @diana-lin,

Yes sure we're still working on fixing a few issues, but we're planning to release a new version with this fix by the end of this week (12/07/2018) and we'll also update alloy-editor in liferay-portal.

[diana-lin]

Hi @julien,

Great, thank you for the update. I will watch for the release.

[duracell80]

This was in Fixpack 70 for DXP 7.0 which just came out this week. There seems to be a number of issues with this inside the portal. I'll do my best to explain what is being seen but one of the issues involves anti-sammy stripping out the inline style upon re-editing content and only in IE11.

On existing content that did have html attributes and this is relating to the new resize (4 drag handles) the html attribute setting width is causing the image to distort when resizing "diagonally" in any of the 4 directions.

Chrome will actually set the height to auto, whereas IE11 will set the height to a pixel unit.

[diana-lin]

Hi @duracell80,

From my understanding, the issue that is being described is analogous to #925 (comment). I have created a ticket for this which can be tracked here: https://issues.liferay.com/browse/LPS-90100.