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()); } }