diff --git a/src/content/tags.js b/src/content/tags.js index 232bb7c..d5c3edc 100644 --- a/src/content/tags.js +++ b/src/content/tags.js @@ -1,5 +1,7 @@ -import {wrapTagDropdown} from "$lib/components/TagDropdownWrapper.js"; +import {watchTagDropdownsInTagsEditor, wrapTagDropdown} from "$lib/components/TagDropdownWrapper.js"; for (let tagDropdownElement of document.querySelectorAll('.tag.dropdown')) { wrapTagDropdown(tagDropdownElement); } + +watchTagDropdownsInTagsEditor(); diff --git a/src/lib/components/TagDropdownWrapper.js b/src/lib/components/TagDropdownWrapper.js index 728e9b2..34dea84 100644 --- a/src/lib/components/TagDropdownWrapper.js +++ b/src/lib/components/TagDropdownWrapper.js @@ -1,6 +1,9 @@ import {BaseComponent} from "$lib/components/base/BaseComponent.js"; import MaintenanceProfile from "$entities/MaintenanceProfile.js"; import MaintenanceSettings from "$lib/extension/settings/MaintenanceSettings.js"; +import {getComponent} from "$lib/components/base/ComponentUtils.js"; + +const isTagEditorProcessedKey = Symbol(); class TagDropdownWrapper extends BaseComponent { /** @@ -187,5 +190,36 @@ class TagDropdownWrapper extends BaseComponent { } export function wrapTagDropdown(element) { + // Skip initialization when tag component is already wrapped + if (getComponent(element)) { + return; + } + new TagDropdownWrapper(element).initialize(); } + +export function watchTagDropdownsInTagsEditor() { + document.body.addEventListener('mouseover', event => { + /** @type {HTMLElement} */ + const targetElement = event.target; + + if (targetElement[isTagEditorProcessedKey]) { + return; + } + + /** @type {HTMLElement|null} */ + const closestTagEditor = targetElement.closest('#image_tags_and_source'); + + if (!closestTagEditor || closestTagEditor[isTagEditorProcessedKey]) { + targetElement[isTagEditorProcessedKey] = true; + return; + } + + targetElement[isTagEditorProcessedKey] = true; + closestTagEditor[isTagEditorProcessedKey] = true; + + for (const tagDropdownElement of closestTagEditor.querySelectorAll('.tag.dropdown')) { + wrapTagDropdown(tagDropdownElement); + } + }) +}