diff --git a/src/content/tags-editor.js b/src/content/tags-editor.js index 0810d19..91207dd 100644 --- a/src/content/tags-editor.js +++ b/src/content/tags-editor.js @@ -1,7 +1,3 @@ -import {initializeTagForm} from "$lib/components/TagsForm.js"; +import {TagsForm} from "$lib/components/TagsForm.js"; -const tagsEditorContainer = document.querySelector('#tags-form'); - -if (tagsEditorContainer) { - initializeTagForm(tagsEditorContainer); -} +TagsForm.watchForEditors(); diff --git a/src/lib/components/TagsForm.js b/src/lib/components/TagsForm.js index 435b1de..f6abf84 100644 --- a/src/lib/components/TagsForm.js +++ b/src/lib/components/TagsForm.js @@ -1,30 +1,11 @@ import {BaseComponent} from "$lib/components/base/BaseComponent.js"; +import {getComponent} from "$lib/components/base/ComponentUtils.js"; -class TagsForm extends BaseComponent { - /** - * Button to edit tags for the image. - * @type {HTMLElement|null} - */ - #editTagButton; - - build() { - this.#editTagButton = document.querySelector('#edit-tags'); - } - - init() { - if (this.#editTagButton) { - this.#editTagButton.addEventListener('click', this.#onEditClicked.bind(this)); - } - } - - #onEditClicked() { - this.#refreshTagColors(); - } - +export class TagsForm extends BaseComponent { /** * Collect all the tag categories available on the page and color the tags in the editor according to them. */ - #refreshTagColors() { + refreshTagColors() { const tagCategories = this.#gatherTagCategories(); const editableTags = this.container.querySelectorAll('.tag'); @@ -63,8 +44,38 @@ class TagsForm extends BaseComponent { return tagCategories; } -} -export function initializeTagForm(container) { - new TagsForm(container).initialize(); + static watchForEditors() { + document.body.addEventListener('click', event => { + const targetElement = event.target; + + if (!(targetElement instanceof HTMLElement)) { + return; + } + + const tagEditorWrapper = targetElement.closest('#image_tags_and_source'); + + if (!tagEditorWrapper) { + return; + } + + const refreshTrigger = targetElement.closest('.js-taginput-show, #edit-tags') + + if (!refreshTrigger) { + return; + } + + const tagFormElement = tagEditorWrapper.querySelector('#tags-form'); + + /** @type {TagsForm|null} */ + let tagEditor = getComponent(tagFormElement); + + if (!tagEditor || (!tagEditor instanceof TagsForm)) { + tagEditor = new TagsForm(tagFormElement); + tagEditor.initialize(); + } + + tagEditor.refreshTagColors(); + }); + } }