From c392105814e9f0b9e1b5a54be0eaaf3e44597b5b Mon Sep 17 00:00:00 2001
From: Aaron van Geffen <aaron@aaronweb.net>
Date: Mon, 23 Nov 2020 12:42:02 +0100
Subject: [PATCH] Refactor crop editor DOM functions.

---
 public/js/crop_editor.js | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/public/js/crop_editor.js b/public/js/crop_editor.js
index f272e9d..043d064 100644
--- a/public/js/crop_editor.js
+++ b/public/js/crop_editor.js
@@ -14,10 +14,18 @@ class CropEditor {
 		this.toggleCropButton();
 	}
 
-	buildContainer() {
+	initDOM() {
 		this.container = document.createElement("div");
 		this.container.id = "crop_editor";
 
+		this.initPositionForm();
+		this.initImageContainer();
+
+		this.parent = document.getElementById(this.opt.editor_container_parent_id);
+		this.parent.appendChild(this.container);
+	}
+
+	initPositionForm() {
 		this.position = document.createElement("fieldset");
 		this.position.className = "crop_position";
 		this.container.appendChild(this.position);
@@ -61,7 +69,9 @@ class CropEditor {
 		this.abort_button.textContent = "Abort";
 		this.abort_button.addEventListener('click', this.hide.bind(this));
 		this.position.appendChild(this.abort_button);
+	}
 
+	initImageContainer() {
 		this.image_container = document.createElement("div");
 		this.image_container.className = "crop_image_container";
 		this.container.appendChild(this.image_container);
@@ -75,9 +85,6 @@ class CropEditor {
 		this.original_image.id = "original_image";
 		this.original_image.src = this.opt.original_image_src;
 		this.image_container.appendChild(this.original_image);
-
-		this.parent = document.getElementById(this.opt.editor_container_parent_id);
-		this.parent.appendChild(this.container);
 	}
 
 	setInputValues() {
@@ -158,7 +165,7 @@ class CropEditor {
 
 	show() {
 		if (typeof this.container === "undefined") {
-			this.buildContainer();
+			this.initDOM();
 		}
 
 		// Defer showing and positioning until image is loaded.
@@ -166,9 +173,7 @@ class CropEditor {
 		if (this.original_image.naturalWidth > 0) {
 			this.showContainer();
 		} else {
-			this.original_image.addEventListener("load", function() {
-				this.showContainer();
-			}.bind(this));
+			this.original_image.addEventListener("load", event => this.showContainer());
 		}
 	}