Public/pics
2
2
Fork 2
Code Issues 6 Pull Requests 2 Releases Wiki Activity

Make crop editor usable #22

Merged
Aaron merged 27 commits from crop-editor into master 2020-12-30 20:06:17 +01:00
Conversation 0 Commits 27 Files Changed 7 +13 -8
1 changed files with 13 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit c392105814 - Show all commits

21
public/js/crop_editor.js
View File

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