Joost/pics
1
0
Fork 0
forked from Public/pics
Code Issues Pull Requests Projects Releases Wiki Activity

CropEditor: refactor numeric control initialisation

Browse Source
This commit is contained in:
Aaron van Geffen 2023-05-18 11:26:17 +02:00
parent 6930c0a06a
commit 8b0459fae4
1 changed files with 15 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
public/js/crop_editor.js
View File

@ -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);