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
+});

media/plg_media-action_rotate/js/rotate.min.js

@@ -0,0 +1 @@
+let activated=!1;const rotate=(t,e)=>{let a=document.createElement("canvas");t>=0&&t<45||t>=135&&t<225||t>=315&&t<=360?(a.width=e.naturalWidth,a.height=e.naturalHeight):(a.width=e.naturalHeight,a.height=e.naturalWidth);const i=a.getContext("2d");i.clearRect(0,0,a.width,a.height),i.translate(a.width/2,a.height/2),i.rotate(t*Math.PI/180),i.drawImage(e,-e.naturalWidth/2,-e.naturalHeight/2);const n="jpg"===Joomla.MediaManager.Edit.original.extension?"jpeg":"jpg",r=document.getElementById("jform_rotate_quality").value;Joomla.MediaManager.Edit.current.contents=a.toDataURL(`image/${n}`,r),e.width=a.width,e.height=a.height,e.src="",requestAnimationFrame((()=>requestAnimationFrame((()=>{e.src=Joomla.MediaManager.Edit.current.contents})))),document.getElementById("jform_rotate_a").value=t,window.dispatchEvent(new Event("mediaManager.history.point")),a=null},initRotate=t=>{activated||(document.getElementById("jform_rotate_a").addEventListener("change",(({target:e})=>{rotate(parseInt(e.value,10),t),e.value=0,[].slice.call(document.querySelectorAll("#jform_rotate_distinct label")).forEach((t=>{t.classList.remove("active"),t.classList.remove("focus")}))})),[].slice.call(document.querySelectorAll("#jform_rotate_distinct [type=radio]")).forEach((e=>{e.addEventListener("click",(({target:e})=>{rotate(parseInt(e.value,10),t),[].slice.call(document.querySelectorAll("#jform_rotate_distinct label")).forEach((t=>{t.classList.remove("active"),t.classList.remove("focus")}))}))})),activated=!0)};window.addEventListener("media-manager-edit-init",(()=>{Joomla.MediaManager.Edit.plugins.rotate={Activate:t=>new Promise((e=>{initRotate(t),e()})),Deactivate:()=>new Promise((t=>{t()}))}}),{once:!0});