first commit

media/plg_media-action_rotate/js/rotate.js

@@ -0,0 +1,102 @@
+/**
+ * @copyright  (C) 2018 Open Source Matters, Inc. <https://www.joomla.org>
+ * @license    GNU General Public License version 2 or later; see LICENSE.txt
+ */
+let activated = false;
+
+// Update image
+const rotate = (angle, image) => {
+  // The canvas where we will rotate the image
+  let canvas = document.createElement('canvas');
+
+  // Pseudo rectangle calculation
+  if (angle >= 0 && angle < 45 || angle >= 135 && angle < 225 || angle >= 315 && angle <= 360) {
+    canvas.width = image.naturalWidth;
+    canvas.height = image.naturalHeight;
+  } else {
+    // swap
+    canvas.width = image.naturalHeight;
+    canvas.height = image.naturalWidth;
+  }
+  const ctx = canvas.getContext('2d');
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  ctx.translate(canvas.width / 2, canvas.height / 2);
+  ctx.rotate(angle * Math.PI / 180);
+  ctx.drawImage(image, -image.naturalWidth / 2, -image.naturalHeight / 2);
+
+  // The format
+  const format = Joomla.MediaManager.Edit.original.extension === 'jpg' ? 'jpeg' : 'jpg';
+
+  // The quality
+  const quality = document.getElementById('jform_rotate_quality').value;
+
+  // Creating the data from the canvas
+  Joomla.MediaManager.Edit.current.contents = canvas.toDataURL(`image/${format}`, quality);
+
+  // Updating the preview element
+  image.width = canvas.width;
+  image.height = canvas.height;
+  image.src = '';
+  requestAnimationFrame(() => requestAnimationFrame(() => {
+    image.src = Joomla.MediaManager.Edit.current.contents;
+  }));
+
+  // Update the angle input box
+  document.getElementById('jform_rotate_a').value = angle;
+
+  // Notify the app that a change has been made
+  window.dispatchEvent(new Event('mediaManager.history.point'));
+  canvas = null;
+};
+const initRotate = image => {
+  if (!activated) {
+    // The number input listener
+    document.getElementById('jform_rotate_a').addEventListener('change', ({
+      target
+    }) => {
+      rotate(parseInt(target.value, 10), image);
+      target.value = 0;
+      // Deselect all buttons
+      [].slice.call(document.querySelectorAll('#jform_rotate_distinct label')).forEach(element => {
+        element.classList.remove('active');
+        element.classList.remove('focus');
+      });
+    });
+
+    // The 90 degree rotate buttons listeners
+    [].slice.call(document.querySelectorAll('#jform_rotate_distinct [type=radio]')).forEach(element => {
+      element.addEventListener('click', ({
+        target
+      }) => {
+        rotate(parseInt(target.value, 10), image);
+
+        // Deselect all buttons
+        [].slice.call(document.querySelectorAll('#jform_rotate_distinct label')).forEach(el => {
+          el.classList.remove('active');
+          el.classList.remove('focus');
+        });
+      });
+    });
+    activated = true;
+  }
+};
+window.addEventListener('media-manager-edit-init', () => {
+  // Register the Events
+  Joomla.MediaManager.Edit.plugins.rotate = {
+    Activate(image) {
+      return new Promise(resolve => {
+        // Initialize
+        initRotate(image);
+        resolve();
+      });
+    },
+    Deactivate( /* image */
+    ) {
+      return new Promise(resolve => {
+        resolve();
+      });
+    }
+  };
+}, {
+  once: true
+});