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