forked from joomla/joomla-cms
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request joomla#49 from astridx/astrid-plg_media-action_cro…
…p/crop.js Transform plg_media-action-crop/crop.js to ES6
- Loading branch information
Showing
2 changed files
with
158 additions
and
62 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| /** | ||
| * @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 || {}; | ||
|
|
||
| (() => { | ||
| 'use strict'; | ||
|
|
||
| const initCrop = () => { | ||
| const 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(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); | ||
|
|
||
| const format = Joomla.MediaManager.Edit.original.extension === 'jpg' ? 'jpeg' : Joomla.MediaManager.Edit.original.extension; | ||
|
|
||
| const quality = document.getElementById('jform_crop_quality').value; | ||
|
|
||
| // Update the store | ||
| Joomla.MediaManager.Edit.current.contents = this.cropper.getCroppedCanvas().toDataURL(`image/${format}`, quality); | ||
|
|
||
| // Notify the app that a change has been made | ||
| window.dispatchEvent(new Event('mediaManager.history.point')); | ||
| }, | ||
| }); | ||
|
|
||
| document.getElementById('jform_crop_x').addEventListener('change', (event) => { | ||
| Joomla.MediaManager.Edit.crop.cropper.setData({ x: parseInt(event.target.value, 10) }); | ||
| }); | ||
| document.getElementById('jform_crop_y').addEventListener('change', (event) => { | ||
| Joomla.MediaManager.Edit.crop.cropper.setData({ y: parseInt(event.target.value, 10) }); | ||
| }); | ||
| document.getElementById('jform_crop_width').addEventListener('change', (event) => { | ||
| Joomla.MediaManager.Edit.crop.cropper.setData({ width: parseInt(event.target.value, 10) }); | ||
| }); | ||
| document.getElementById('jform_crop_height').addEventListener('change', (event) => { | ||
| Joomla.MediaManager.Edit.crop.cropper.setData({ height: parseInt(event.target.value, 10) }); | ||
| }); | ||
|
|
||
| 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); | ||
| } | ||
| }; | ||
|
|
||
| // Register the Events | ||
| Joomla.MediaManager.Edit.crop = { | ||
| Activate(mediaData) { | ||
| // Initialize | ||
| initCrop(mediaData); | ||
| }, | ||
| Deactivate() { | ||
| if (!Joomla.MediaManager.Edit.crop.cropper) { | ||
| return; | ||
| } | ||
| // Destroy the instance | ||
| Joomla.MediaManager.Edit.crop.cropper.destroy(); | ||
| }, | ||
| }; | ||
| })(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,82 +1,92 @@ | ||
| /** | ||
| * PLEASE DO NOT MODIFY THIS FILE. WORK ON THE ES6 VERSION. | ||
| * OTHERWISE YOUR CHANGES WILL BE REPLACED ON THE NEXT BUILD. | ||
| **/ | ||
| var _this = this; | ||
|
|
||
| /** | ||
| * @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"; | ||
| 'use strict'; | ||
|
|
||
| var initCrop = function (mediaData) { | ||
| var image = document.getElementById('image-preview'); | ||
| var initCrop = function initCrop() { | ||
| 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); | ||
| // 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); | ||
|
|
||
| var format = Joomla.MediaManager.Edit.original.extension === 'jpg' ? 'jpeg' : Joomla.MediaManager.Edit.original.extension; | ||
| var format = Joomla.MediaManager.Edit.original.extension === 'jpg' ? 'jpeg' : Joomla.MediaManager.Edit.original.extension; | ||
|
|
||
| var quality = document.getElementById('jform_crop_quality').value; | ||
| var quality = document.getElementById('jform_crop_quality').value; | ||
|
|
||
| // Update the store | ||
| Joomla.MediaManager.Edit.current.contents = this.cropper.getCroppedCanvas().toDataURL("image/" + format, quality); | ||
| // Update the store | ||
| Joomla.MediaManager.Edit.current.contents = this.cropper.getCroppedCanvas().toDataURL('image/' + format, quality); | ||
|
|
||
| // Notify the app that a change has been made | ||
| window.dispatchEvent(new Event('mediaManager.history.point')); | ||
| } | ||
| }); | ||
| // Notify the app that a change has been made | ||
| window.dispatchEvent(new Event('mediaManager.history.point')); | ||
| } | ||
| }); | ||
|
|
||
| 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_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) }); | ||
| }); | ||
|
|
||
| var elements = document.querySelectorAll("#jform_aspectRatio input"); | ||
| for (var i = 0; i < elements.length; i++) { | ||
| elements[i].addEventListener('click', function (e) { | ||
| Joomla.MediaManager.Edit.crop.cropper.setAspectRatio(this.value); | ||
| }); | ||
| } | ||
| }; | ||
| var elements = document.querySelectorAll('#jform_aspectRatio input'); | ||
| var clickFunc = function clickFunc() { | ||
| Joomla.MediaManager.Edit.crop.cropper.setAspectRatio(_this.value); | ||
| }; | ||
| for (var i = 0; i < elements.length; i += 1) { | ||
| elements[i].addEventListener('click', clickFunc); | ||
| } | ||
| }; | ||
|
|
||
| // 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(); | ||
| } | ||
| }; | ||
| })(); |