[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, cropper: null,
image: null, image: null,
buttons: $('#avatar-cropper-buttons'), /** @type {jQuery} */
box: $('#avatar-box'), $buttons: $('#avatar-cropper-buttons'),
data: $('#avatar-cropper-data'),
input: $('#avatar_upload_file'), /** @type {jQuery} */
driver: $('#avatar_driver'), $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', driverUpload: 'avatar_driver_upload',
/** /**
@ -28,9 +39,9 @@ phpbb.avatars = {
} }
// Correctly position the cropper buttons // 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.bindInput();
this.bindSelect(); this.bindSelect();
@ -40,11 +51,11 @@ phpbb.avatars = {
* Destroy (undo) any initialisation. * Destroy (undo) any initialisation.
*/ */
destroy: function() { 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.image.off('crop.phpbb.avatars');
this.data.val(''); this.$data.val('');
this.buttons.hide(); this.$buttons.hide();
if (this.cropper !== null) { if (this.cropper !== null) {
this.cropper.destroy(); this.cropper.destroy();
@ -58,10 +69,10 @@ phpbb.avatars = {
* 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: function() {
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() !== '') {
phpbb.avatars.input.trigger('change'); phpbb.avatars.$input.trigger('change');
} }
} else { } else {
phpbb.avatars.destroy(); phpbb.avatars.destroy();
@ -76,8 +87,8 @@ phpbb.avatars = {
* Otherwise the cropper is destroyed. * Otherwise the cropper is destroyed.
*/ */
bindInput: function() { bindInput: function() {
this.input.on('change', function() { this.$input.on('change', function() {
var 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]);
@ -86,7 +97,7 @@ phpbb.avatars = {
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();
} }
@ -102,10 +113,9 @@ phpbb.avatars = {
* 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: function() {
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(',');
var option = $(this).data('cropper-action').split(','); const action = option[0];
var action = option[0];
if (typeof phpbb.avatars.cropper[action] === 'function') { if (typeof phpbb.avatars.cropper[action] === 'function') {
// Special case: flip, set it to the opposite value (-1 and 1). // Special case: flip, set it to the opposite value (-1 and 1).
@ -150,9 +160,9 @@ phpbb.avatars = {
* @param {object} event * @param {object} event
*/ */
onCrop: function(event) { onCrop: function(event) {
var data = phpbb.avatars.data.data(); const data = phpbb.avatars.$data.data();
var width = event.detail.width; const width = event.detail.width;
var height = event.detail.height; const height = event.detail.height;
if (width < data.minWidth || width > data.maxWidth || if (width < data.minWidth || width > data.maxWidth ||
height < data.minHeight || height > data.maxHeight 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)));
}, },
}; };