Skip to content

Commit

Permalink
Merge pull request joomla#48 from astridx/astrid-plg_media-action_res…
Browse files Browse the repository at this point in the history 
…ize/resize.js

Transform plg_media-action-resize/resize.js to ES6
  • Loading branch information
@dneukirchen
dneukirchen authored Feb 24, 2018
2 parents 7be1ec8 + 478259b commit fd2c459
Show file tree
Hide file tree
Showing 2 changed files with 206 additions and 89 deletions.
112 changes: 112 additions & 0 deletions media/plg_media-action_resize/js/resize.es6.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
/**
* @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 resize = (width, height) => {
// The image element
const image = document.getElementById('image-source');

// The canvas where we will resize the image
const 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' : 'jpg';

// The quality
const quality = document.getElementById('jform_resize_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 = width;
preview.height = height;
preview.src = Joomla.MediaManager.Edit.current.contents;

// Update the width input box
document.getElementById('jform_resize_width').value = parseInt(width, 10);

// Update the height input box
document.getElementById('jform_resize_height').value = parseInt(height, 10);

// Notify the app that a change has been made
window.dispatchEvent(new Event('mediaManager.history.point'));
};

const initResize = () => {
const funct = () => {
const image = document.getElementById('image-source');

const resizeWidthInputBox = document.getElementById('jform_resize_width');
const resizeHeightInputBox = document.getElementById('jform_resize_height');

// Update the input boxes
resizeWidthInputBox.value = image.width;
resizeHeightInputBox.value = image.height;

// The listeners
resizeWidthInputBox.addEventListener('change', (event) => {
resize(
parseInt(event.target.value, 10),
parseInt(event.target.value, 10) / (image.width / image.height),
);
});
resizeHeightInputBox.addEventListener('change', (event) => {
resize(
parseInt(event.target.value, 10) * (image.width / image.height),
parseInt(event.target.value, 10),
);
});

// Set the values for the range fields
const resizeWidth = document.getElementById('jform_resize_w');
const resizeHeight = document.getElementById('jform_resize_h');

resizeWidth.min = 0;
resizeWidth.max = image.width;
resizeWidth.value = image.width;

resizeHeight.min = 0;
resizeHeight.max = image.height;
resizeHeight.value = image.height;

// The listeners
resizeWidth.addEventListener('input', (event) => {
resize(
parseInt(event.target.value, 10),
parseInt(event.target.value, 10) / (image.width / image.height),
);
});
resizeHeight.addEventListener('input', (event) => {
resize(
parseInt(event.target.value, 10) * (image.width / image.height),
parseInt(event.target.value, 10),
);
});
};
setTimeout(funct, 1000);
};

// Register the Events
Joomla.MediaManager.Edit.resize = {
Activate(mediaData) {
// Initialize
initResize(mediaData);
},
Deactivate() {
},
};
})();
183 changes: 94 additions & 89 deletions media/plg_media-action_resize/js/resize.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,93 +13,93 @@ Joomla.MediaManager = Joomla.MediaManager || {};
Joomla.MediaManager.Edit = Joomla.MediaManager.Edit || {};

(function () {
"use strict";

// Update image
var resize = function (width, height) {
// The image element
var image = document.getElementById('image-source');

// The canvas where we will resize the image
var canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
canvas.getContext("2d").drawImage(image, 0, 0, width, height);

// The format
var format = Joomla.MediaManager.Edit.original.extension === 'jpg' ? 'jpeg' : 'jpg';

// The quality
var quality = document.getElementById('jform_resize_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 = width;
image.height = height;
image.src = Joomla.MediaManager.Edit.current.contents;

// Update the width input box
document.getElementById('jform_resize_width').value = parseInt(width);

// Update the height input box
document.getElementById('jform_resize_height').value = parseInt(height);

// Notify the app that a change has been made
window.dispatchEvent(new Event('mediaManager.history.point'));
};

var initResize = function (mediaData) {
var funct = function () {
var image = document.getElementById('image-source');

var resizeWidth = document.getElementById('jform_resize_width'),
resizeHeight = document.getElementById('jform_resize_height');

// Update the input boxes
resizeWidth.value = image.width;
resizeHeight.value = image.height;

// The listeners
resizeWidth.addEventListener('change', function () {
resize(parseInt(this.value), parseInt(this.value) / (image.width / image.height));
});
resizeHeight.addEventListener('change', function () {
resize(parseInt(this.value) * (image.width / image.height), parseInt(this.value));
});

// Set the values for the range fields
var resizeWidth = document.getElementById('jform_resize_w'),
resizeHeight = document.getElementById('jform_resize_h');

resizeWidth.min = 0;
resizeWidth.max = image.width;
resizeWidth.value = image.width;

resizeHeight.min = 0;
resizeHeight.max = image.height;
resizeHeight.value = image.height;

// The listeners
resizeWidth.addEventListener('input', function () {
resize(parseInt(this.value), parseInt(this.value) / (image.width / image.height));
});
resizeHeight.addEventListener('input', function () {
resize(parseInt(this.value) * (image.width / image.height), parseInt(this.value));
});
}
setTimeout(funct, 1000);
};

// Register the Events
Joomla.MediaManager.Edit.resize = {
Activate: function (mediaData) {
// Initialize
initResize(mediaData);
},
Deactivate: function () {
}
};
'use strict';

// Update image

var resize = function resize(width, height) {
// The image element
var image = document.getElementById('image-source');

// The canvas where we will resize the image
var canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
canvas.getContext('2d').drawImage(image, 0, 0, width, height);

// The format
var format = Joomla.MediaManager.Edit.original.extension === 'jpg' ? 'jpeg' : 'jpg';

// The quality
var quality = document.getElementById('jform_resize_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 = width;
preview.height = height;
preview.src = Joomla.MediaManager.Edit.current.contents;

// Update the width input box
document.getElementById('jform_resize_width').value = parseInt(width, 10);

// Update the height input box
document.getElementById('jform_resize_height').value = parseInt(height, 10);

// Notify the app that a change has been made
window.dispatchEvent(new Event('mediaManager.history.point'));
};

var initResize = function initResize() {
var funct = function funct() {
var image = document.getElementById('image-source');

var resizeWidthInputBox = document.getElementById('jform_resize_width');
var resizeHeightInputBox = document.getElementById('jform_resize_height');

// Update the input boxes
resizeWidthInputBox.value = image.width;
resizeHeightInputBox.value = image.height;

// The listeners
resizeWidthInputBox.addEventListener('change', function (event) {
resize(parseInt(event.target.value, 10), parseInt(event.target.value, 10) / (image.width / image.height));
});
resizeHeightInputBox.addEventListener('change', function (event) {
resize(parseInt(event.target.value, 10) * (image.width / image.height), parseInt(event.target.value, 10));
});

// Set the values for the range fields
var resizeWidth = document.getElementById('jform_resize_w');
var resizeHeight = document.getElementById('jform_resize_h');

resizeWidth.min = 0;
resizeWidth.max = image.width;
resizeWidth.value = image.width;

resizeHeight.min = 0;
resizeHeight.max = image.height;
resizeHeight.value = image.height;

// The listeners
resizeWidth.addEventListener('input', function (event) {
resize(parseInt(event.target.value, 10), parseInt(event.target.value, 10) / (image.width / image.height));
});
resizeHeight.addEventListener('input', function (event) {
resize(parseInt(event.target.value, 10) * (image.width / image.height), parseInt(event.target.value, 10));
});
};
setTimeout(funct, 1000);
};

// Register the Events
Joomla.MediaManager.Edit.resize = {
Activate: function Activate(mediaData) {
// Initialize
initResize(mediaData);
},
Deactivate: function Deactivate() {}
};
})();

0 comments on commit fd2c459

Please sign in to comment.