makary/phpbb
1
0
Fork 0
mirror of https://github.com/phpbb/phpbb.git synced 2025-06-08 04:18:52 +00:00
Code Issues Projects Releases Packages Wiki Activity

[ticket/15769] Make xo happy and try to use cropped image canvas

Browse source 
PHPBB3-15769
This commit is contained in:
Marc Alexander 2021-04-20 20:32:17 +02:00
parent 87c726e377
commit 310b451cd3
No known key found for this signature in database
GPG key ID: 50E0D2423696F995
1 changed files with 172 additions and 167 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
phpBB/assets/javascript/phpbb-avatars.js
View file

@ -1,5 +1,5 @@
/* global phpbb */
(function($) { // Avoid conflicts with other libraries (function($) { // Avoid conflicts with other libraries
'use strict'; 'use strict';
/** /**
@ -32,7 +32,7 @@ phpbb.avatars = {
/** /**
* Initialise avatar cropping. * Initialise avatar cropping.
*/ */
init: function() { init() {
// If the cropper library is not available // If the cropper library is not available
if (!$.isFunction($.fn.cropper)) { if (!$.isFunction($.fn.cropper)) {
return; return;
@ -50,7 +50,7 @@ phpbb.avatars = {
/** /**
* Destroy (undo) any initialisation. * Destroy (undo) any initialisation.
*/ */
destroy: function() { destroy() {
this.$buttons.find('[data-cropper-action]').off('click.phpbb.avatars'); this.$buttons.find('[data-cropper-action]').off('click.phpbb.avatars');
this.image.off('crop.phpbb.avatars'); this.image.off('crop.phpbb.avatars');
@ -68,7 +68,7 @@ phpbb.avatars = {
* If a different driver than the "upload" driver is selected, the cropper is destroyed. * If a different driver than the "upload" driver is selected, the cropper is destroyed.
* Otherwise if the "upload" driver is (re-)selected, and it has a value, initialise it. * Otherwise if the "upload" driver is (re-)selected, and it has a value, initialise it.
*/ */
bindSelect: function() { bindSelect() {
this.$driver.on('change', function() { this.$driver.on('change', function() {
if ($(this).val() === phpbb.avatars.driverUpload) { if ($(this).val() === phpbb.avatars.driverUpload) {
if (phpbb.avatars.$input.val() !== '') { if (phpbb.avatars.$input.val() !== '') {
@ -86,18 +86,18 @@ phpbb.avatars = {
* If a file was chosen and it is a valid image file, the cropper is initialised. * If a file was chosen and it is a valid image file, the cropper is initialised.
* Otherwise the cropper is destroyed. * Otherwise the cropper is destroyed.
*/ */
bindInput: function() { bindInput() {
this.$input.on('change', function() { this.$input.on('change', function() {
const fileReader = new FileReader(); const fileReader = new FileReader();
if (this.files[0].type.match('image.*')) { if (this.files[0].type.match('image.*')) {
fileReader.readAsDataURL(this.files[0]); fileReader.readAsDataURL(this.files[0]);
fileReader.onload = function() { fileReader.addEventListener('load', function() {
phpbb.avatars.image.cropper('destroy').attr('src', this.result).addClass('avatar'); phpbb.avatars.image.cropper('destroy').attr('src', this.result).addClass('avatar');
phpbb.avatars.initCropper(); phpbb.avatars.initCropper();
phpbb.avatars.initButtons(); phpbb.avatars.initButtons();
}; });
} else { } else {
phpbb.avatars.destroy(); phpbb.avatars.destroy();
} }
@ -112,7 +112,7 @@ phpbb.avatars = {
* It also takes two optional parameters, imploded by a comma. * It also takes two optional parameters, imploded by a comma.
* For example: data-cropper-action="move,0,10" which results in $().cropper('move', 0, 10) * For example: data-cropper-action="move,0,10" which results in $().cropper('move', 0, 10)
*/ */
initButtons: function() { initButtons() {
this.$buttons.show().find('[data-cropper-action]').off('click.phpbb.avatars').on('click.phpbb.avatars', function() { this.$buttons.show().find('[data-cropper-action]').off('click.phpbb.avatars').on('click.phpbb.avatars', function() {
const option = $(this).data('cropper-action').split(','); const option = $(this).data('cropper-action').split(',');
const action = option[0]; const action = option[0];
@ -137,10 +137,10 @@ phpbb.avatars = {
* automatically creates the maximum available and allowed cropping area, * automatically creates the maximum available and allowed cropping area,
* and registers a callback function for the 'crop' event. * and registers a callback function for the 'crop' event.
*/ */
initCropper: function() { initCropper() {
this.cropper = this.image.cropper({ this.cropper = this.image.cropper({
aspectRatio: 1, aspectRatio: 1,
autoCropArea: 1 autoCropArea: 1,
}).data('cropper'); }).data('cropper');
this.image.off('crop.phpbb.avatars').on('crop.phpbb.avatars', phpbb.avatars.onCrop); this.image.off('crop.phpbb.avatars').on('crop.phpbb.avatars', phpbb.avatars.onCrop);
@ -159,26 +159,31 @@ phpbb.avatars = {
* *
* @param {object} event * @param {object} event
*/ */
onCrop: function(event) { onCrop(event) {
const data = phpbb.avatars.$data.data(); const data = phpbb.avatars.$data.data();
const width = event.detail.width; let width = event.detail.width;
const height = event.detail.height; let height = event.detail.height;
if (width < data.minWidth || width > data.maxWidth || if (width < data.minWidth || height < data.minHeight) {
height < data.minHeight || height > data.maxHeight width = Math.max(data.minWidth, Math.min(data.maxWidth, width));
) { height = Math.max(data.minHeight, Math.min(data.maxHeight, height));
phpbb.avatars.cropper.setData({ phpbb.avatars.cropper.setData({
width: Math.max(data.minWidth, Math.min(data.maxWidth, width)), width,
height: Math.max(data.minHeight, Math.min(data.maxHeight, height)), height,
}); });
} }
phpbb.avatars.$data.val(JSON.stringify(phpbb.avatars.cropper.getData(true))); phpbb.avatars.$data.val(JSON.stringify(phpbb.avatars.cropper.getCroppedCanvas({
minWidth: data.minWidth,
minHeight: data.minHeight,
maxWidth: data.maxWidth,
maxHeight: data.maxHeight,
imageSmoothingEnabled: false, // smoothing will just look blurry
})));
}, },
}; };
$(function() { $(() => {
phpbb.avatars.init(); phpbb.avatars.init();
}); });
})(jQuery); // Avoid conflicts with other libraries })(jQuery); // Avoid conflicts with other libraries