first commit

media/plg_media-action_resize/js/resize.js

@@ -0,0 +1,88 @@
+/**
+ * @copyright  (C) 2018 Open Source Matters, Inc. <https://www.joomla.org>
+ * @license    GNU General Public License version 2 or later; see LICENSE.txt
+ */
+let formElements;
+let activated = false;
+
+// Update image
+const resize = (width, height, image) => {
+  // The canvas where we will resize the image
+  let canvas = document.createElement('canvas');
+  canvas.width = width;
+  canvas.height = height;
+  canvas.getContext('2d').drawImage(image, 0, 0, width, height);
+
+  // The format
+  const format = Joomla.MediaManager.Edit.original.extension === 'jpg' ? 'jpeg' : Joomla.MediaManager.Edit.original.extension;
+
+  // The quality
+  const quality = formElements.resizeQuality.value;
+
+  // Creating the data from the canvas
+  Joomla.MediaManager.Edit.current.contents = canvas.toDataURL(`image/${format}`, quality);
+
+  // Updating the preview element
+  image.width = width;
+  image.height = height;
+  image.src = Joomla.MediaManager.Edit.current.contents;
+
+  // Update the width input box
+  formElements.resizeWidth.value = parseInt(width, 10);
+
+  // Update the height input box
+  formElements.resizeHeight.value = parseInt(height, 10);
+
+  // Notify the app that a change has been made
+  window.dispatchEvent(new Event('mediaManager.history.point'));
+  canvas = null;
+};
+const addListeners = image => {
+  // The listeners
+  formElements.resizeWidth.addEventListener('change', ({
+    target
+  }) => {
+    resize(parseInt(target.value, 10), parseInt(target.value, 10) / (image.width / image.height), image);
+  });
+  formElements.resizeHeight.addEventListener('change', ({
+    target
+  }) => {
+    resize(parseInt(target.value, 10) * (image.width / image.height), parseInt(target.value, 10), image);
+  });
+};
+const initResize = image => {
+  // Update the input boxes
+  formElements.resizeWidth.value = image.naturalWidth;
+  formElements.resizeHeight.value = image.naturalHeight;
+  if (!activated) {
+    activated = true;
+    addListeners(image);
+  }
+};
+window.addEventListener('media-manager-edit-init', () => {
+  // Get the form elements
+  formElements = {
+    resizeWidth: document.getElementById('jform_resize_width'),
+    resizeHeight: document.getElementById('jform_resize_height'),
+    resizeQuality: document.getElementById('jform_resize_quality')
+  };
+
+  // Register the Events
+  Joomla.MediaManager.Edit.plugins.resize = {
+    Activate(image) {
+      return new Promise((resolve /* , reject */) => {
+        // Initialize
+        initResize(image);
+        resolve();
+      });
+    },
+    Deactivate( /* image */
+    ) {
+      return new Promise((resolve /* , reject */) => {
+        resolve();
+      });
+    }
+  };
+}, {
+  once: true
+});

media/plg_media-action_resize/js/resize.min.js

@@ -0,0 +1 @@
+let formElements,activated=!1;const resize=(e,t,i)=>{let a=document.createElement("canvas");a.width=e,a.height=t,a.getContext("2d").drawImage(i,0,0,e,t);const n="jpg"===Joomla.MediaManager.Edit.original.extension?"jpeg":Joomla.MediaManager.Edit.original.extension,r=formElements.resizeQuality.value;Joomla.MediaManager.Edit.current.contents=a.toDataURL(`image/${n}`,r),i.width=e,i.height=t,i.src=Joomla.MediaManager.Edit.current.contents,formElements.resizeWidth.value=parseInt(e,10),formElements.resizeHeight.value=parseInt(t,10),window.dispatchEvent(new Event("mediaManager.history.point")),a=null},addListeners=e=>{formElements.resizeWidth.addEventListener("change",(({target:t})=>{resize(parseInt(t.value,10),parseInt(t.value,10)/(e.width/e.height),e)})),formElements.resizeHeight.addEventListener("change",(({target:t})=>{resize(parseInt(t.value,10)*(e.width/e.height),parseInt(t.value,10),e)}))},initResize=e=>{formElements.resizeWidth.value=e.naturalWidth,formElements.resizeHeight.value=e.naturalHeight,activated||(activated=!0,addListeners(e))};window.addEventListener("media-manager-edit-init",(()=>{formElements={resizeWidth:document.getElementById("jform_resize_width"),resizeHeight:document.getElementById("jform_resize_height"),resizeQuality:document.getElementById("jform_resize_quality")},Joomla.MediaManager.Edit.plugins.resize={Activate:e=>new Promise((t=>{initResize(e),t()})),Deactivate:()=>new Promise((e=>{e()}))}}),{once:!0});