Merge pull request joomla#47 from astridx/astridx-plg_media-action_ro…

…tate/rotate.js Transform plg_media-action-rotate/rotate.js to ES6
Digital-Peak · Feb 24, 2018 · 03147bd · 03147bd
2 parents ea53e98 + 4f40d8a
commit 03147bd
Show file tree

Hide file tree

Showing 2 changed files with 160 additions and 71 deletions.
diff --git a/media/plg_media-action_rotate/js/rotate.es6.js b/media/plg_media-action_rotate/js/rotate.es6.js
@@ -0,0 +1,84 @@
+/**
+ * @copyright  Copyright (C) 2005 - 2017 Open Source Matters, Inc. All rights reserved.
+ * @license    GNU General Public License version 2 or later; see LICENSE.txt
+ */
+Joomla = window.Joomla || {};
+
+Joomla.MediaManager = Joomla.MediaManager || {};
+Joomla.MediaManager.Edit = Joomla.MediaManager.Edit || {};
+
+(() => {
+  'use strict';
+
+  // Update image
+  const rotate = (angle) => {
+    // The image element
+    const image = document.getElementById('image-source');
+
+    // The canvas where we will resize the image
+    const canvas = document.createElement('canvas');
+
+    // Pseudo rectangle calculation
+    if ((angle >= 0 && angle < 45)
+      || (angle >= 135 && angle < 225)
+      || (angle >= 315 && angle <= 360)) {
+      canvas.width = image.width;
+      canvas.height = image.height;
+    } else {
+      // swap
+      canvas.width = image.height;
+      canvas.height = image.width;
+    }
+    const ctx = canvas.getContext('2d');
+    ctx.translate(canvas.width / 2, canvas.height / 2);
+    ctx.rotate((angle * Math.PI) / 180);
+    ctx.drawImage(image, -image.width / 2, -image.height / 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
+    const preview = document.getElementById('image-preview');
+    preview.width = canvas.width;
+    preview.height = canvas.height;
+    preview.src = Joomla.MediaManager.Edit.current.contents;
+
+    // Update the width input box
+    document.getElementById('jform_rotate_angle').value = angle;
+
+    // Update the height 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'));
+  };
+
+  const initRotate = () => {
+    const funct = () => {
+      // The listeners
+      document.getElementById('jform_rotate_angle').addEventListener('change', (event) => {
+        rotate(parseInt(event.target.value, 10));
+      });
+      document.getElementById('jform_rotate_a').addEventListener('input', (event) => {
+        rotate(parseInt(event.target.value, 10));
+      });
+    };
+    setTimeout(funct, 1000);
+  };
+
+  // Register the Events
+  Joomla.MediaManager.Edit.rotate = {
+    Activate(mediaData) {
+      // Initialize
+      initRotate(mediaData);
+    },
+    Deactivate() {
+    },
+  };
+})();
diff --git a/media/plg_media-action_rotate/js/rotate.js b/media/plg_media-action_rotate/js/rotate.js
@@ -1,3 +1,8 @@
+/**
+* PLEASE DO NOT MODIFY THIS FILE. WORK ON THE ES6 VERSION.
+* OTHERWISE YOUR CHANGES WILL BE REPLACED ON THE NEXT BUILD.
+**/
+
 /**
  * @copyright  Copyright (C) 2005 - 2017 Open Source Matters, Inc. All rights reserved.
  * @license    GNU General Public License version 2 or later; see LICENSE.txt
@@ -8,75 +13,75 @@ Joomla.MediaManager = Joomla.MediaManager || {};
 Joomla.MediaManager.Edit = Joomla.MediaManager.Edit || {};
 
 (function () {
-	"use strict";
-
-	// Update image
-	var rotate = function (angle) {
-		// The image element
-		var image = document.getElementById('image-source');
-
-		// The canvas where we will resize the image
-		var canvas = document.createElement("canvas");
-
-		// Pseudo rectangle calculation
-		if ((angle >= 0 && angle < 45) || (angle >= 135 && angle < 225) || (angle >= 315 && angle <= 360)) {
-			canvas.width = image.width;
-			canvas.height = image.height;
-		} else {
-			// swap
-			canvas.width = image.height;
-			canvas.height = image.width;
-		}
-		var ctx = canvas.getContext("2d");
-		ctx.translate(canvas.width / 2, canvas.height / 2);
-		ctx.rotate(angle * Math.PI / 180);
-		ctx.drawImage(image, -image.width / 2, -image.height / 2);
-
-		// The format
-		var format = Joomla.MediaManager.Edit.original.extension === 'jpg' ? 'jpeg' : 'jpg';
-
-		// The quality
-		var 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 image element
-		var image = document.getElementById('image-preview');
-		image.width = canvas.width;
-		image.height = canvas.height;
-		image.src = Joomla.MediaManager.Edit.current.contents;
-
-		// Update the width input box
-		document.getElementById('jform_rotate_angle').value = angle;
-
-		// Update the height 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'));
-	};
-
-	var initRotate = function (mediaData) {
-		var funct = function () {
-			// The listeners
-			document.getElementById('jform_rotate_angle').addEventListener('change', function () {
-				rotate(parseInt(this.value));
-			});
-			document.getElementById('jform_rotate_a').addEventListener('input', function () {
-				rotate(parseInt(this.value));
-			});
-		}
-		setTimeout(funct, 1000);
-	};
-
-	// Register the Events
-	Joomla.MediaManager.Edit.rotate = {
-		Activate: function (mediaData) {
-			// Initialize
-			initRotate(mediaData);
-		},
-		Deactivate: function () {
-		}
-	};
+  'use strict';
+
+  // Update image
+
+  var rotate = function rotate(angle) {
+    // The image element
+    var image = document.getElementById('image-source');
+
+    // The canvas where we will resize the image
+    var canvas = document.createElement('canvas');
+
+    // Pseudo rectangle calculation
+    if (angle >= 0 && angle < 45 || angle >= 135 && angle < 225 || angle >= 315 && angle <= 360) {
+      canvas.width = image.width;
+      canvas.height = image.height;
+    } else {
+      // swap
+      canvas.width = image.height;
+      canvas.height = image.width;
+    }
+    var ctx = canvas.getContext('2d');
+    ctx.translate(canvas.width / 2, canvas.height / 2);
+    ctx.rotate(angle * Math.PI / 180);
+    ctx.drawImage(image, -image.width / 2, -image.height / 2);
+
+    // The format
+    var format = Joomla.MediaManager.Edit.original.extension === 'jpg' ? 'jpeg' : 'jpg';
+
+    // The quality
+    var 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
+    var preview = document.getElementById('image-preview');
+    preview.width = canvas.width;
+    preview.height = canvas.height;
+    preview.src = Joomla.MediaManager.Edit.current.contents;
+
+    // Update the width input box
+    document.getElementById('jform_rotate_angle').value = angle;
+
+    // Update the height 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'));
+  };
+
+  var initRotate = function initRotate() {
+    var funct = function funct() {
+      // The listeners
+      document.getElementById('jform_rotate_angle').addEventListener('change', function (event) {
+        rotate(parseInt(event.target.value, 10));
+      });
+      document.getElementById('jform_rotate_a').addEventListener('input', function (event) {
+        rotate(parseInt(event.target.value, 10));
+      });
+    };
+    setTimeout(funct, 1000);
+  };
+
+  // Register the Events
+  Joomla.MediaManager.Edit.rotate = {
+    Activate: function Activate(mediaData) {
+      // Initialize
+      initRotate(mediaData);
+    },
+    Deactivate: function Deactivate() {}
+  };
 })();