Skip to content
This repository has been archived by the owner on May 26, 2020. It is now read-only.

Commit

Permalink
Merge pull request #47 from astridx/astridx-plg_media-action_rotate/r…
Browse files Browse the repository at this point in the history 
…otate.js

Transform plg_media-action-rotate/rotate.js to ES6
  • Loading branch information
@dneukirchen
dneukirchen committed Feb 24, 2018
2 parents ea53e98 + 4f40d8a commit 03147bd
Show file tree
Hide file tree
Showing 2 changed files with 160 additions and 71 deletions.
84 changes: 84 additions & 0 deletions media/plg_media-action_rotate/js/rotate.es6.js
View file
Original file line number Diff line number Diff line change
@@ -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() {
},
};
})();
147 changes: 76 additions & 71 deletions media/plg_media-action_rotate/js/rotate.js
View file
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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() {}
};
})();

0 comments on commit 03147bd

Please sign in to comment.