From e2eb8a0ca7581583e57430aa098d3f7a997d7390 Mon Sep 17 00:00:00 2001 From: KoloMl Date: Wed, 26 Mar 2025 20:03:04 +0400 Subject: [PATCH 1/4] Fixed last media box on the page not being marked as the last in a row --- src/lib/components/MediaBoxWrapper.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/lib/components/MediaBoxWrapper.ts b/src/lib/components/MediaBoxWrapper.ts index 9e75ed3..3e0a087 100644 --- a/src/lib/components/MediaBoxWrapper.ts +++ b/src/lib/components/MediaBoxWrapper.ts @@ -3,6 +3,7 @@ import { getComponent } from "$lib/components/base/component-utils"; import { buildTagsAndAliasesMap } from "$lib/booru/tag-utils"; import { on } from "$lib/components/events/comms"; import { eventTagsUpdated } from "$lib/components/events/maintenance-popup-events"; +import onMessageExternal = chrome.runtime.onMessageExternal; export class MediaBoxWrapper extends BaseComponent { #thumbnailContainer: HTMLElement | null = null; @@ -90,5 +91,10 @@ export function calculateMediaBoxesPositions(mediaBoxesList: NodeListOf Date: Wed, 26 Mar 2025 20:39:30 +0400 Subject: [PATCH 2/4] Added button to the tags list to toggle separation of groups --- src/lib/components/TagsListBlock.ts | 35 +++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/src/lib/components/TagsListBlock.ts b/src/lib/components/TagsListBlock.ts index 3603fcf..873321c 100644 --- a/src/lib/components/TagsListBlock.ts +++ b/src/lib/components/TagsListBlock.ts @@ -8,7 +8,12 @@ import { eventTagCustomGroupResolved } from "$lib/components/events/tag-dropdown import TagSettings from "$lib/extension/settings/TagSettings"; export class TagsListBlock extends BaseComponent { + #tagsListButtonsContainer: HTMLElement | null = null; #tagsListContainer: HTMLElement | null = null; + + #toggleGroupingButton = document.createElement('a'); + #toggleGroupingButtonIcon = document.createElement('i'); + #tagSettings = new TagSettings(); #shouldDisplaySeparation = false; @@ -21,7 +26,21 @@ export class TagsListBlock extends BaseComponent { #isReorderingPlanned = false; protected build() { + this.#tagsListButtonsContainer = this.container.querySelector('.block.tagsauce .block__header__buttons'); this.#tagsListContainer = this.container.querySelector('.tag-list'); + + this.#toggleGroupingButton.innerText = ' Grouping'; + this.#toggleGroupingButton.href = 'javascript:void(0)'; + this.#toggleGroupingButton.classList.add('button', 'button--link', 'button--inline'); + this.#toggleGroupingButton.title = 'Toggle the global groups separation option. This will only toggle global ' + + 'setting without changing the separation of specific groups.'; + + this.#toggleGroupingButtonIcon.classList.add('fas', TagsListBlock.#iconGroupingDisabled); + this.#toggleGroupingButton.prepend(this.#toggleGroupingButtonIcon); + + if (this.#tagsListButtonsContainer) { + this.#tagsListButtonsContainer.append(this.#toggleGroupingButton); + } } init() { @@ -35,6 +54,8 @@ export class TagsListBlock extends BaseComponent { eventTagCustomGroupResolved, this.#onTagDropdownCustomGroupResolved.bind(this) ); + + this.#toggleGroupingButton.addEventListener('click', this.#onToggleGroupingClicked.bind(this)); } #onTagSeparationChange(isSeparationEnabled: boolean) { @@ -44,6 +65,12 @@ export class TagsListBlock extends BaseComponent { this.#shouldDisplaySeparation = isSeparationEnabled; this.#reorderSeparatedGroups(); + this.#updateToggleSeparationButton(); + } + + #updateToggleSeparationButton() { + this.#toggleGroupingButtonIcon.classList.toggle(TagsListBlock.#iconGroupingEnabled, this.#shouldDisplaySeparation); + this.#toggleGroupingButtonIcon.classList.toggle(TagsListBlock.#iconGroupingDisabled, !this.#shouldDisplaySeparation); } #onTagDropdownCustomGroupResolved(resolvedCustomGroupEvent: CustomEvent) { @@ -74,6 +101,11 @@ export class TagsListBlock extends BaseComponent { } } + #onToggleGroupingClicked(event: Event) { + event.preventDefault(); + void this.#tagSettings.setGroupSeparation(!this.#shouldDisplaySeparation); + } + #handleTagGroupChanges(tagGroup: TagGroup) { const groupId = tagGroup.id; const processedGroup = this.#separatedGroups.get(groupId); @@ -181,6 +213,9 @@ export class TagsListBlock extends BaseComponent { static #orderCssVariableForGroup(groupId: string): string { return `--ta-order-${groupId}`; } + + static #iconGroupingDisabled = 'fa-folder'; + static #iconGroupingEnabled = 'fa-folder-tree'; } export function initializeAllTagsLists() { From 6586141134e76c3dcd4d0d538154daeaf40f78dd Mon Sep 17 00:00:00 2001 From: KoloMl Date: Wed, 26 Mar 2025 20:43:19 +0400 Subject: [PATCH 3/4] Fixed missed re-initialization of tags list after tag form was submitted --- src/lib/components/TagsListBlock.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/lib/components/TagsListBlock.ts b/src/lib/components/TagsListBlock.ts index 3603fcf..bb5f507 100644 --- a/src/lib/components/TagsListBlock.ts +++ b/src/lib/components/TagsListBlock.ts @@ -196,6 +196,13 @@ export function initializeAllTagsLists() { export function watchForUpdatedTagLists() { on(document, eventFormEditorUpdated, event => { - event.detail.closest('#image_tags_and_source') + const tagsListElement = event.detail.closest('#image_tags_and_source'); + + if (!tagsListElement || getComponent(tagsListElement)) { + return; + } + + new TagsListBlock(tagsListElement) + .initialize(); }); } From 928fe5ddb0258dafbb2eefc21f81ce1e70660b3f Mon Sep 17 00:00:00 2001 From: KoloMl Date: Wed, 26 Mar 2025 20:46:51 +0400 Subject: [PATCH 4/4] Removed unnecessary import --- src/lib/components/MediaBoxWrapper.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/lib/components/MediaBoxWrapper.ts b/src/lib/components/MediaBoxWrapper.ts index 3e0a087..8207a9b 100644 --- a/src/lib/components/MediaBoxWrapper.ts +++ b/src/lib/components/MediaBoxWrapper.ts @@ -3,7 +3,6 @@ import { getComponent } from "$lib/components/base/component-utils"; import { buildTagsAndAliasesMap } from "$lib/booru/tag-utils"; import { on } from "$lib/components/events/comms"; import { eventTagsUpdated } from "$lib/components/events/maintenance-popup-events"; -import onMessageExternal = chrome.runtime.onMessageExternal; export class MediaBoxWrapper extends BaseComponent { #thumbnailContainer: HTMLElement | null = null;