forked from Public/pics
Refactor crop editor into a proper class.
This commit is contained in:
parent
909d50efa8
commit
fd84e1c9f8
@ -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";
|
||||
};
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user