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 #73 from joomla-projects/upstream-sync-media
Browse files Browse the repository at this point in the history 
Upstream sync media
  • Loading branch information
Dimitri Grammatikogianni committed Feb 28, 2018
2 parents 9eb0472 + b639872 commit 00ae73b
Show file tree
Hide file tree
Showing 6 changed files with 276 additions and 251 deletions.
24 changes: 16 additions & 8 deletions media/plg_media-action_crop/js/crop.es6.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ Joomla.MediaManager.Edit = Joomla.MediaManager.Edit || {};

// Initiate the cropper
Joomla.MediaManager.Edit.crop.cropper = new Cropper(image, {
// viewMode: 1,
viewMode: 1,
responsive: true,
restore: true,
autoCrop: true,
Expand Down Expand Up @@ -59,14 +59,22 @@ Joomla.MediaManager.Edit = Joomla.MediaManager.Edit || {};
document.getElementById('jform_crop_height').addEventListener('change', (event) => {
Joomla.MediaManager.Edit.crop.cropper.setData({ height: parseInt(event.target.value, 10) });
});
document.getElementById('jform_aspectRatio').addEventListener('change', (event) => {
Joomla.MediaManager.Edit.crop.cropper.setAspectRatio(event.target.value);
});

// Wait for the image to load its data
image.addEventListener('load', () => {
// Get all option elements if future need
const elements = [].slice.call(document.querySelectorAll('.crop-aspect-ratio-option'));

const elements = document.querySelectorAll('#jform_aspectRatio input');
const clickFunc = () => {
Joomla.MediaManager.Edit.crop.cropper.setAspectRatio(this.value);
};
for (let i = 0; i < elements.length; i += 1) {
elements[i].addEventListener('click', clickFunc);
}
// Set default aspect ratio after numeric check, option has a dummy value
const defaultCropFactor = image.naturalWidth / image.naturalHeight;
if (!Number.isNaN(defaultCropFactor) && Number.isFinite(defaultCropFactor)) {
elements[0].value = defaultCropFactor;
}
Joomla.MediaManager.Edit.crop.cropper.setAspectRatio(elements[0].value);
});
};

// Register the Events
Expand Down
150 changes: 78 additions & 72 deletions media/plg_media-action_crop/js/crop.js
View file
Original file line number Diff line number Diff line change
@@ -1,93 +1,99 @@
/**
* 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
*/

/* global Cropper */

Joomla = window.Joomla || {};

Joomla.MediaManager = Joomla.MediaManager || {};
Joomla.MediaManager.Edit = Joomla.MediaManager.Edit || {};

(function () {
"use strict";

var initCrop = function (mediaData) {
var image = document.getElementById('image-preview');

// Initiate the cropper
Joomla.MediaManager.Edit.crop.cropper = new Cropper(image, {
viewMode: 1,
responsive: true,
restore: true,
autoCrop: true,
movable: false,
zoomable: false,
rotatable: false,
autoCropArea: 1,
// scalable: false,
minContainerWidth: image.offsetWidth,
minContainerHeight: image.offsetHeight,
crop: function (e) {
document.getElementById('jform_crop_x').value = Math.round(e.detail.x);
document.getElementById('jform_crop_y').value = Math.round(e.detail.y);
document.getElementById('jform_crop_width').value = Math.round(e.detail.width);
document.getElementById('jform_crop_height').value = Math.round(e.detail.height);
'use strict';

var format = Joomla.MediaManager.Edit.original.extension === 'jpg' ? 'jpeg' : Joomla.MediaManager.Edit.original.extension;
var initCrop = function initCrop() {
var image = document.getElementById('image-preview');

var quality = document.getElementById('jform_crop_quality').value;
// Initiate the cropper
Joomla.MediaManager.Edit.crop.cropper = new Cropper(image, {
viewMode: 1,
responsive: true,
restore: true,
autoCrop: true,
movable: false,
zoomable: false,
rotatable: false,
autoCropArea: 1,
// scalable: false,
minContainerWidth: image.offsetWidth,
minContainerHeight: image.offsetHeight,
crop: function crop(e) {
document.getElementById('jform_crop_x').value = Math.round(e.detail.x);
document.getElementById('jform_crop_y').value = Math.round(e.detail.y);
document.getElementById('jform_crop_width').value = Math.round(e.detail.width);
document.getElementById('jform_crop_height').value = Math.round(e.detail.height);

// Update the store
Joomla.MediaManager.Edit.current.contents = this.cropper.getCroppedCanvas().toDataURL("image/" + format, quality);
var format = Joomla.MediaManager.Edit.original.extension === 'jpg' ? 'jpeg' : Joomla.MediaManager.Edit.original.extension;

// Notify the app that a change has been made
window.dispatchEvent(new Event('mediaManager.history.point'));
}
});
var quality = document.getElementById('jform_crop_quality').value;

document.getElementById('jform_crop_x').addEventListener('change', function (e) {
Joomla.MediaManager.Edit.crop.cropper.setData({x: parseInt(this.value)});
});
document.getElementById('jform_crop_y').addEventListener('change', function (e) {
Joomla.MediaManager.Edit.crop.cropper.setData({y: parseInt(this.value)});
});
document.getElementById('jform_crop_width').addEventListener('change', function (e) {
Joomla.MediaManager.Edit.crop.cropper.setData({width: parseInt(this.value)});
});
document.getElementById('jform_crop_height').addEventListener('change', function (e) {
Joomla.MediaManager.Edit.crop.cropper.setData({height: parseInt(this.value)});
});
document.getElementById('jform_aspectRatio').addEventListener("change", function (e) {
Joomla.MediaManager.Edit.crop.cropper.setAspectRatio(this.value);
});
// Update the store
Joomla.MediaManager.Edit.current.contents = this.cropper.getCroppedCanvas().toDataURL('image/' + format, quality);

// Wait for the image to load its data
image.addEventListener('load', function() {
// Notify the app that a change has been made
window.dispatchEvent(new Event('mediaManager.history.point'));
}
});

// Get all option elements if future need
var elements = [].slice.call(document.querySelectorAll(".crop-aspect-ratio-option"));
document.getElementById('jform_crop_x').addEventListener('change', function (event) {
Joomla.MediaManager.Edit.crop.cropper.setData({ x: parseInt(event.target.value, 10) });
});
document.getElementById('jform_crop_y').addEventListener('change', function (event) {
Joomla.MediaManager.Edit.crop.cropper.setData({ y: parseInt(event.target.value, 10) });
});
document.getElementById('jform_crop_width').addEventListener('change', function (event) {
Joomla.MediaManager.Edit.crop.cropper.setData({ width: parseInt(event.target.value, 10) });
});
document.getElementById('jform_crop_height').addEventListener('change', function (event) {
Joomla.MediaManager.Edit.crop.cropper.setData({ height: parseInt(event.target.value, 10) });
});
document.getElementById('jform_aspectRatio').addEventListener('change', function (event) {
Joomla.MediaManager.Edit.crop.cropper.setAspectRatio(event.target.value);
});

// Set default aspect ratio after numeric check, option has a dummy value
var defaultCropFactor = image.naturalWidth / image.naturalHeight;
if (!isNaN(+defaultCropFactor) && isFinite(defaultCropFactor)){
elements[0].value = defaultCropFactor;
}
Joomla.MediaManager.Edit.crop.cropper.setAspectRatio(elements[0].value);
// Wait for the image to load its data
image.addEventListener('load', function () {
// Get all option elements if future need
var elements = [].slice.call(document.querySelectorAll('.crop-aspect-ratio-option'));

});
};
// Set default aspect ratio after numeric check, option has a dummy value
var defaultCropFactor = image.naturalWidth / image.naturalHeight;
if (!Number.isNaN(defaultCropFactor) && Number.isFinite(defaultCropFactor)) {
elements[0].value = defaultCropFactor;
}
Joomla.MediaManager.Edit.crop.cropper.setAspectRatio(elements[0].value);
});
};

// Register the Events
Joomla.MediaManager.Edit.crop = {
Activate: function (mediaData) {
// Initialize
initCrop(mediaData);
},
Deactivate: function () {
if (!Joomla.MediaManager.Edit.crop.cropper) {
return;
}
// Destroy the instance
Joomla.MediaManager.Edit.crop.cropper.destroy();
}
};
// Register the Events
Joomla.MediaManager.Edit.crop = {
Activate: function Activate(mediaData) {
// Initialize
initCrop(mediaData);
},
Deactivate: function Deactivate() {
if (!Joomla.MediaManager.Edit.crop.cropper) {
return;
}
// Destroy the instance
Joomla.MediaManager.Edit.crop.cropper.destroy();
}
};
})();
2 changes: 1 addition & 1 deletion media/plg_media-action_resize/js/resize.es6.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ Joomla.MediaManager.Edit = Joomla.MediaManager.Edit || {};
canvas.getContext('2d').drawImage(image, 0, 0, width, height);

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

// The quality
const quality = document.getElementById('jform_resize_quality').value;
Expand Down
Loading

0 comments on commit 00ae73b

Please sign in to comment.