Ji 5682 align cropper popup (#201)

* JI-5684 fix cropper rotation

* JI-5684 update crop limit logic

* JI-5684 fix scroll into view

* JI-5684 remove scroll into view

* JI-5682 align cropper popup

* JI-5682 update cropper align to work in cors iframe

* JI-5682 revert align cropper popup

* JI-5682 add new alignPopup function for crop tool

* JI-5682 update function description  with new param

---------

Co-authored-by: makmentins <maris.akmentins@h5p.group>

Author: devland

libs/cropper.css

@@ -57,6 +57,7 @@
 }
 .cropper-canvas-container {
   position: relative;
+  border: 1px solid #9e9e9e;
 }
 .cropper-canvas-container canvas {
   display: block;

libs/cropper.js

@@ -294,14 +294,19 @@ function Cropper(options) {
    *
    * @param {Blob} blob Raw image data.
    */
-  const handleBlob = (blob) => {
-    const url = URL.createObjectURL(blob);
-    this.image = new Image();
-    this.image.onload = () => {
-      URL.revokeObjectURL(url);
-      this.loadImage();
+  const handleBlob = (callback) => {
+    return (blob) => {
+      const url = URL.createObjectURL(blob);
+      this.image = new Image();
+      this.image.onload = () => {
+        URL.revokeObjectURL(url);
+        this.loadImage();
+        if (callback) {
+          callback();
+        }
+      }
+      this.image.src = url;
     }
-    this.image.src = url;
   }
 
   /**
@@ -332,7 +337,7 @@ function Cropper(options) {
    * Crops image based on selector size & position relative to image location within canvas.
    * The output is generated from the mirror canvas based on scaled selector dimensions.
    */
-  this.crop = () => {
+  this.crop = (callback) => {
     let painted = this.fit(this.image);
     let selectedX = this.selector.offsetLeft - this.margins.left;
     let selectedY = this.selector.offsetTop - this.margins.top;
@@ -361,15 +366,15 @@ function Cropper(options) {
     this.mirror.width = width;
     this.mirror.height = height;
     this.mirrorContext.drawImage(this.image, selectedX, selectedY, selectedWidth, selectedHeight, 0, 0, width, height);
-    this.mirror.toBlob(handleBlob, 'image/png', 1);
+    this.mirror.toBlob(handleBlob(callback), 'image/png', 1);
   }
 
   /**
    * Rotates image in increments of 90 degrees.
    *
    * @param {integer} rotation Clockwise rotation for positive numbers. Counterclockwise for negative numbers.
    */
-  this.rotate = (rotation) => {
+  this.rotate = (rotation, callback) => {
     rotation %= 4;
     if (rotation % 2) {
       this.mirror.width = this.image.height;
@@ -383,7 +388,7 @@ function Cropper(options) {
     this.mirrorContext.rotate(90 * rotation * Math.PI / 180);
     this.mirrorContext.translate(-this.image.width / 2, -this.image.height / 2);
     this.mirrorContext.drawImage(this.image, 0, 0);
-    this.mirror.toBlob(handleBlob, 'image/png', 1);
+    this.mirror.toBlob(handleBlob(callback), 'image/png', 1);
   }
 
   /**

scripts/h5peditor-image-popup.js

@@ -218,7 +218,7 @@ H5PEditor.ImageEditingPopup = (function ($, EventDispatcher) {
      */
     this.resizeCropper = () => {
       setCropperDimensions();
-      this.cropper.canvas.width = maxWidth;
+      this.cropper.canvas.width = maxWidth - 2; // leave out 2px for container css border
       this.cropper.canvas.height = maxHeight;
       this.cropper.loadImage();
       this.cropper.loadMirror();
@@ -290,20 +290,31 @@ H5PEditor.ImageEditingPopup = (function ($, EventDispatcher) {
      *
      * @param {Object} [offset] Offset that popup should center on.
      * @param {string} [imageSrc] Source of image that will be edited
+     * @param {Event} [event] Event object (button) for positioning the popup
      */
-    this.show = function (offset, imageSrc) {
+    this.show = function (offset, imageSrc, event) {
       const openImageEditor = () => {
         H5P.$body.get(0).classList.add('h5p-editor-image-popup');
         background.classList.remove('hidden');
         self.trigger('initialized');
       }
+      const alignPopup = () => {
+        if (event) {
+          let top = event.target.getBoundingClientRect().top + window.scrollY;
+          if (window.innerHeight - top < popup.offsetHeight) {
+            top = window.innerHeight - popup.offsetHeight - 58; // 48px background padding + 10px so that the popup does not touch the bottom
+          }
+          popup.style.top = top + 'px';
+        }
+      }
       const imageLoaded = () => {
         if (offset) {
           self.adjustPopupOffset(offset);
           openImageEditor();
           self.resizeCropper();
           window.addEventListener('resize', this.resizeCropper);
         }
+        alignPopup();
       }
       H5P.$body.get(0).appendChild(background);
       background.classList.remove('hidden');
@@ -320,6 +331,7 @@ H5PEditor.ImageEditingPopup = (function ($, EventDispatcher) {
       }
       else {
         openImageEditor();
+        alignPopup();
       }
       isShowing = true;
     };
@@ -358,9 +370,17 @@ H5PEditor.ImageEditingPopup = (function ($, EventDispatcher) {
       self.cropper.toggleSelector(false);
     });
     createButton('saveLabel', 'h5p-editing-image-save-button h5p-done', function () {
-      saveImage();
-      self.hide();
-      self.cropper.toggleSelector(false);
+      if (self.cropper.selector.style.display !== 'none') {
+        self.cropper.crop(() => {
+          self.cropper.toggleSelector(false);
+          saveImage();
+          self.hide();
+        });
+      }
+      else {
+        saveImage();
+        self.hide();
+      }
     });
   }
 

scripts/h5peditor-image.js

@@ -150,7 +150,7 @@ ns.widgets.image.prototype.appendTo = function ($wrapper) {
     self.$editImage.removeClass('loading');
   });
 
-  $container.find('.h5p-editing-image-button').click(function () {
+  $container.find('.h5p-editing-image-button').click(function (event) {
     if (self.params && self.params.path) {
       var imageSrc;
       if (!self.isEditing) {
@@ -160,7 +160,7 @@ ns.widgets.image.prototype.appendTo = function ($wrapper) {
       self.$editImage.toggleClass('loading');
 
       // Add throbber to image
-      editImagePopup.show(ns.$(this).offset(), imageSrc);
+      editImagePopup.show(ns.$(this).offset(), imageSrc, event);
     }
   });