From 03512a6539bf65da082fdd74b6f57c900dfc8cdd Mon Sep 17 00:00:00 2001 From: KoloMl Date: Sat, 12 Oct 2024 19:15:04 +0400 Subject: [PATCH 1/2] Copying tag colors into the tag editor using other tags on the page --- manifest.json | 8 ++++ src/content/tags-editor.js | 7 ++++ src/lib/components/TagsForm.js | 70 ++++++++++++++++++++++++++++++++++ 3 files changed, 85 insertions(+) create mode 100644 src/content/tags-editor.js create mode 100644 src/lib/components/TagsForm.js 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(); +} From 57c505bee96a478ffc3b1f824173468c37748c27 Mon Sep 17 00:00:00 2001 From: KoloMl Date: Sat, 12 Oct 2024 20:15:59 +0400 Subject: [PATCH 2/2] Dynamically catch and refresh colors in tag editor --- src/content/tags-editor.js | 8 ++--- src/lib/components/TagsForm.js | 61 ++++++++++++++++++++-------------- 2 files changed, 38 insertions(+), 31 deletions(-) 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(); + }); + } }