[ticket/15769] Improve syntax to use es6 and clean up code issues

PHPBB3-15769
This commit is contained in:
Marc Alexander 2021-03-19 21:54:11 +01:00
parent 542f5c74d8
commit 93695830c7
No known key found for this signature in database
GPG key ID: 50E0D2423696F995

View file

@ -11,11 +11,22 @@ phpbb.avatars = {
cropper: null,
image: null,
buttons: $('#avatar-cropper-buttons'),
box: $('#avatar-box'),
data: $('#avatar-cropper-data'),
input: $('#avatar_upload_file'),
driver: $('#avatar_driver'),
/** @type {jQuery} */
$buttons: $('#avatar-cropper-buttons'),
/** @type {jQuery} */
$box: $('#avatar-box'),
/** @type {jQuery} */
$data: $('#avatar-cropper-data'),
/** @type {jQuery} */
$input: $('#avatar_upload_file'),
/** @type {jQuery} */
$driver: $('#avatar_driver'),
/** @type {string} */
driverUpload: 'avatar_driver_upload',
/**
@ -28,9 +39,9 @@ phpbb.avatars = {
}
// Correctly position the cropper buttons
this.buttons.appendTo(this.box);
this.$buttons.appendTo(this.$box);
this.image = this.box.children('img');
this.image = this.$box.children('img');
this.bindInput();
this.bindSelect();
@ -40,11 +51,11 @@ phpbb.avatars = {
* Destroy (undo) any initialisation.
*/
destroy: function() {
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.data.val('');
this.buttons.hide();
this.$data.val('');
this.$buttons.hide();
if (this.cropper !== null) {
this.cropper.destroy();
@ -58,10 +69,10 @@ phpbb.avatars = {
* Otherwise if the "upload" driver is (re-)selected, and it has a value, initialise it.
*/
bindSelect: function() {
this.driver.on('change', function() {
this.$driver.on('change', function() {
if ($(this).val() === phpbb.avatars.driverUpload) {
if (phpbb.avatars.input.val() !== '') {
phpbb.avatars.input.trigger('change');
if (phpbb.avatars.$input.val() !== '') {
phpbb.avatars.$input.trigger('change');
}
} else {
phpbb.avatars.destroy();
@ -76,8 +87,8 @@ phpbb.avatars = {
* Otherwise the cropper is destroyed.
*/
bindInput: function() {
this.input.on('change', function() {
var fileReader = new FileReader;
this.$input.on('change', function() {
const fileReader = new FileReader();
if (this.files[0].type.match('image.*')) {
fileReader.readAsDataURL(this.files[0]);
@ -86,7 +97,7 @@ phpbb.avatars = {
phpbb.avatars.image.cropper('destroy').attr('src', this.result).addClass('avatar');
phpbb.avatars.initCropper();
phpbb.avatars.initButtons();
}
};
} else {
phpbb.avatars.destroy();
}
@ -102,10 +113,9 @@ phpbb.avatars = {
* For example: data-cropper-action="move,0,10" which results in $().cropper('move', 0, 10)
*/
initButtons: function() {
this.buttons.show().find('[data-cropper-action]').off('click.phpbb.avatars').on('click.phpbb.avatars', function() {
var option = $(this).data('cropper-action').split(',');
var action = option[0];
this.$buttons.show().find('[data-cropper-action]').off('click.phpbb.avatars').on('click.phpbb.avatars', function() {
const option = $(this).data('cropper-action').split(',');
const action = option[0];
if (typeof phpbb.avatars.cropper[action] === 'function') {
// Special case: flip, set it to the opposite value (-1 and 1).
@ -150,9 +160,9 @@ phpbb.avatars = {
* @param {object} event
*/
onCrop: function(event) {
var data = phpbb.avatars.data.data();
var width = event.detail.width;
var height = event.detail.height;
const data = phpbb.avatars.$data.data();
const width = event.detail.width;
const height = event.detail.height;
if (width < data.minWidth || width > data.maxWidth ||
height < data.minHeight || height > data.maxHeight
@ -163,7 +173,7 @@ phpbb.avatars = {
});
}
phpbb.avatars.data.val(JSON.stringify(phpbb.avatars.cropper.getData(true)));
phpbb.avatars.$data.val(JSON.stringify(phpbb.avatars.cropper.getData(true)));
},
};