Refactor crop editor into a proper class.

This commit is contained in:
Aaron van Geffen 2020-10-19 19:59:54 +02:00
parent 909d50efa8
commit fd84e1c9f8

View File

@ -1,9 +1,10 @@
function CropEditor(opt) {
class CropEditor {
constructor(opt) {
this.opt = opt;
this.edit_crop_button = document.createElement("span");
this.edit_crop_button.className = "btn";
this.edit_crop_button.innerHTML = "Edit crop";
this.edit_crop_button.textContent = "Edit crop";
this.edit_crop_button.addEventListener('click', this.show.bind(this));
this.thumbnail_select = document.getElementById(opt.thumbnail_select_id);
@ -13,7 +14,7 @@ function CropEditor(opt) {
this.toggleCropButton();
}
CropEditor.prototype.buildContainer = function() {
buildContainer() {
this.container = document.createElement("div");
this.container.id = "crop_editor";
@ -21,28 +22,28 @@ CropEditor.prototype.buildContainer = function() {
this.position.className = "crop_position";
this.container.appendChild(this.position);
var source_x_label = document.createTextNode("Source X:");
let source_x_label = document.createTextNode("Source X:");
this.position.appendChild(source_x_label);
this.source_x = document.createElement("input");
this.source_x.addEventListener("keyup", this.positionBoundary.bind(this));
this.position.appendChild(this.source_x);
var source_y_label = document.createTextNode("Source Y:");
let source_y_label = document.createTextNode("Source Y:");
this.position.appendChild(source_y_label);
this.source_y = document.createElement("input");
this.source_y.addEventListener("keyup", this.positionBoundary.bind(this));
this.position.appendChild(this.source_y);
var crop_width_label = document.createTextNode("Crop width:");
let crop_width_label = document.createTextNode("Crop width:");
this.position.appendChild(crop_width_label);
this.crop_width = document.createElement("input");
this.crop_width.addEventListener("keyup", this.positionBoundary.bind(this));
this.position.appendChild(this.crop_width);
var crop_height_label = document.createTextNode("Crop height:");
let crop_height_label = document.createTextNode("Crop height:");
this.position.appendChild(crop_height_label);
this.crop_height = document.createElement("input");
@ -51,13 +52,13 @@ CropEditor.prototype.buildContainer = function() {
this.save_button = document.createElement("span");
this.save_button.className = "btn";
this.save_button.innerHTML = "Save";
this.save_button.textContent = "Save";
this.save_button.addEventListener('click', this.save.bind(this));
this.position.appendChild(this.save_button);
this.abort_button = document.createElement("span");
this.abort_button.className = "btn btn-red";
this.abort_button.innerHTML = "Abort";
this.abort_button.textContent = "Abort";
this.abort_button.addEventListener('click', this.hide.bind(this));
this.position.appendChild(this.abort_button);
@ -76,13 +77,13 @@ CropEditor.prototype.buildContainer = function() {
this.parent = document.getElementById(this.opt.editor_container_parent_id);
this.parent.appendChild(this.container);
};
}
CropEditor.prototype.setInputValues = function() {
var current = this.thumbnail_select.options[this.thumbnail_select.selectedIndex].dataset;
setInputValues() {
let current = this.thumbnail_select.options[this.thumbnail_select.selectedIndex].dataset;
if (typeof current.crop_region === "undefined") {
var source_ratio = this.original_image.naturalWidth / this.original_image.naturalHeight,
let source_ratio = this.original_image.naturalWidth / this.original_image.naturalHeight,
crop_ratio = current.crop_width / current.crop_height,
min_dim = Math.min(this.original_image.naturalWidth, this.original_image.naturalHeight);
@ -121,23 +122,23 @@ CropEditor.prototype.setInputValues = function() {
}
}
} else {
var region = current.crop_region.split(',');
let region = current.crop_region.split(',');
this.crop_width.value = region[0];
this.crop_height.value = region[1];
this.source_x.value = region[2];
this.source_y.value = region[3];
}
};
}
CropEditor.prototype.showContainer = function() {
showContainer() {
this.container.style.display = "block";
this.setInputValues();
this.positionBoundary();
}
CropEditor.prototype.save = function() {
var current = this.thumbnail_select.options[this.thumbnail_select.selectedIndex].dataset;
var payload = {
save() {
let current = this.thumbnail_select.options[this.thumbnail_select.selectedIndex].dataset;
let payload = {
thumb_width: current.crop_width,
thumb_height: current.crop_height,
crop_method: current.crop_method,
@ -146,14 +147,14 @@ CropEditor.prototype.save = function() {
source_x: this.source_x.value,
source_y: this.source_y.value
};
var req = HttpRequest("post", this.opt.submitUrl + "?id=" + this.opt.asset_id + "&updatethumb",
let req = HttpRequest("post", this.opt.submitUrl + "?id=" + this.opt.asset_id + "&updatethumb",
"data=" + encodeURIComponent(JSON.stringify(payload)), function(response) {
this.opt.after_save(response);
this.hide();
}.bind(this));
};
}
CropEditor.prototype.show = function() {
show() {
if (typeof this.container === "undefined") {
this.buildContainer();
}
@ -167,39 +168,39 @@ CropEditor.prototype.show = function() {
this.showContainer();
}.bind(this));
}
};
}
CropEditor.prototype.hide = function() {
hide() {
this.container.style.display = "none";
};
}
CropEditor.prototype.addEvents = function(event) {
var drag_target = document.getElementById(opt.drag_target);
addEvents(event) {
let drag_target = document.getElementById(opt.drag_target);
drag_target.addEventListener('dragstart', this.dragStart);
drag_target.addEventListener('drag', this.drag);
drag_target.addEventListener('dragend', this.dragEnd);
};
}
CropEditor.prototype.dragStart = function(event) {
dragStart(event) {
console.log(event);
event.preventDefault();
};
}
CropEditor.prototype.dragEnd = function(event) {
dragEnd(event) {
console.log(event);
};
}
CropEditor.prototype.drag = function(event) {
drag(event) {
console.log(event);
};
}
CropEditor.prototype.toggleCropButton = function() {
var current = this.thumbnail_select.options[this.thumbnail_select.selectedIndex].dataset;
toggleCropButton() {
let current = this.thumbnail_select.options[this.thumbnail_select.selectedIndex].dataset;
this.edit_crop_button.style.display = typeof current.crop_method === "undefined" ? "none" : "";
};
}
CropEditor.prototype.positionBoundary = function(event) {
var source_x = parseInt(this.source_x.value),
positionBoundary(event) {
let source_x = parseInt(this.source_x.value),
source_y = parseInt(this.source_y.value),
crop_width = parseInt(this.crop_width.value),
crop_height = parseInt(this.crop_height.value),
@ -208,11 +209,12 @@ CropEditor.prototype.positionBoundary = function(event) {
scaled_width = this.original_image.clientWidth,
scaled_height = this.original_image.clientHeight;
var width_scale = scaled_width / real_width,
let width_scale = scaled_width / real_width,
height_scale = scaled_height / real_height;
crop_boundary.style.left = (this.source_x.value) * width_scale + "px";
crop_boundary.style.top = (this.source_y.value) * height_scale + "px";
crop_boundary.style.width = (this.crop_width.value) * width_scale + "px";
crop_boundary.style.height = (this.crop_height.value) * height_scale + "px";
};
}
}