diff --git a/public/js/crop_editor.js b/public/js/crop_editor.js index 286f1da..e1e3329 100644 --- a/public/js/crop_editor.js +++ b/public/js/crop_editor.js @@ -30,45 +30,23 @@ class CropEditor { this.position.className = "crop_position"; this.container.appendChild(this.position); - let source_x_label = document.createTextNode("Source X:"); - this.position.appendChild(source_x_label); + const addNumericControl = (label, changeEvent) => { + const labelEl = document.createTextNode("div"); + this.position.appendChild(labelEl); - this.source_x = document.createElement("input"); - this.source_x.className = 'form-control d-inline'; - this.source_x.type = 'number'; - this.source_x.addEventListener("change", this.positionBoundary.bind(this)); - this.source_x.addEventListener("keyup", this.positionBoundary.bind(this)); - this.position.appendChild(this.source_x); + const control = document.createElement("input"); + control.className = 'form-control d-inline'; + control.type = 'number'; + control.addEventListener("change", changeEvent); + control.addEventListener("keyup", changeEvent); + this.position.appendChild(control); + return control; + }; - let source_y_label = document.createTextNode("Source Y:"); - this.position.appendChild(source_y_label); - - this.source_y = document.createElement("input"); - this.source_y.className = 'form-control d-inline'; - this.source_y.type = 'number'; - this.source_y.addEventListener("change", this.positionBoundary.bind(this)); - this.source_y.addEventListener("keyup", this.positionBoundary.bind(this)); - this.position.appendChild(this.source_y); - - let crop_width_label = document.createTextNode("Crop width:"); - this.position.appendChild(crop_width_label); - - this.crop_width = document.createElement("input"); - this.crop_width.className = 'form-control d-inline'; - this.crop_width.type = 'number'; - this.crop_width.addEventListener("change", this.positionBoundary.bind(this)); - this.crop_width.addEventListener("keyup", this.positionBoundary.bind(this)); - this.position.appendChild(this.crop_width); - - let crop_height_label = document.createTextNode("Crop height:"); - this.position.appendChild(crop_height_label); - - this.crop_height = document.createElement("input"); - this.crop_height.className = 'form-control d-inline'; - this.crop_height.type = 'number'; - this.crop_height.addEventListener("change", this.positionBoundary.bind(this)); - this.crop_height.addEventListener("keyup", this.positionBoundary.bind(this)); - this.position.appendChild(this.crop_height); + this.source_x = addNumericControl("Source X:", this.positionBoundary); + this.source_y = addNumericControl("Source Y:", this.positionBoundary); + this.crop_width = addNumericControl("Crop width:", this.positionBoundary); + this.crop_height = addNumericControl("Crop height:", this.positionBoundary); this.crop_constrain_label = document.createElement("label"); this.position.appendChild(this.crop_constrain_label);