From 8b0459fae40e0b5ec88854be2791dc2af20ed615 Mon Sep 17 00:00:00 2001
From: Aaron van Geffen <aaron@aaronweb.net>
Date: Thu, 18 May 2023 11:26:17 +0200
Subject: [PATCH] CropEditor: refactor numeric control initialisation

---
 public/js/crop_editor.js | 52 ++++++++++++----------------------------
 1 file changed, 15 insertions(+), 37 deletions(-)

diff --git a/public/js/crop_editor.js b/public/js/crop_editor.js
index 286f1da5..e1e33297 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);