diff --git a/manifest.json b/manifest.json index 259f2f0..77c033a 100644 --- a/manifest.json +++ b/manifest.json @@ -57,6 +57,14 @@ "js": [ "src/content/tags.js" ] + }, + { + "matches": [ + "*://*.furbooru.org/images/*" + ], + "js": [ + "src/content/tags-editor.js" + ] } ], "action": { diff --git a/src/content/tags-editor.js b/src/content/tags-editor.js new file mode 100644 index 0000000..0810d19 --- /dev/null +++ b/src/content/tags-editor.js @@ -0,0 +1,7 @@ +import {initializeTagForm} from "$lib/components/TagsForm.js"; + +const tagsEditorContainer = document.querySelector('#tags-form'); + +if (tagsEditorContainer) { + initializeTagForm(tagsEditorContainer); +} diff --git a/src/lib/components/TagsForm.js b/src/lib/components/TagsForm.js new file mode 100644 index 0000000..435b1de --- /dev/null +++ b/src/lib/components/TagsForm.js @@ -0,0 +1,70 @@ +import {BaseComponent} from "$lib/components/base/BaseComponent.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(); + } + + /** + * Collect all the tag categories available on the page and color the tags in the editor according to them. + */ + #refreshTagColors() { + const tagCategories = this.#gatherTagCategories(); + const editableTags = this.container.querySelectorAll('.tag'); + + for (let tagElement of editableTags) { + // Tag name is stored in the "remove" link and not in the tag itself. + const removeLink = tagElement.querySelector('a'); + + if (!removeLink) { + continue; + } + + const tagName = removeLink.dataset.tagName; + + if (!tagCategories.has(tagName)) { + continue; + } + + const categoryName = tagCategories.get(tagName); + + tagElement.dataset.tagCategory = categoryName; + tagElement.setAttribute('data-tag-category', categoryName); + } + } + + /** + * Collect list of categories from the tags on the page. + * @return {Map} + */ + #gatherTagCategories() { + /** @type {Map} */ + const tagCategories = new Map(); + + for (let tagElement of document.querySelectorAll('.tag[data-tag-name][data-tag-category]')) { + tagCategories.set(tagElement.dataset.tagName, tagElement.dataset.tagCategory); + } + + return tagCategories; + } +} + +export function initializeTagForm(container) { + new TagsForm(container).initialize(); +}