diff --git a/src/components/features/PresetView.svelte b/src/components/features/PresetView.svelte index 4dcc1b4..bdd1a32 100644 --- a/src/components/features/PresetView.svelte +++ b/src/components/features/PresetView.svelte @@ -10,6 +10,7 @@ let { preset }: PresetViewProps = $props(); const sortedTagsList = $derived(preset.settings.tags.toSorted((a, b) => a.localeCompare(b))); + const requiredTagsList = $derived(preset.settings.requiredTags.toSorted((a, b) => a.localeCompare(b))); @@ -24,3 +25,11 @@ be automatically removed from the editor. {/if} +{#if preset.settings.conditional} + + This preset will only appear when one of the tags below are present on image. + + + + +{/if} diff --git a/src/content/components/extension/presets/PresetTableRow.ts b/src/content/components/extension/presets/PresetTableRow.ts index 025e3da..a38fa9e 100644 --- a/src/content/components/extension/presets/PresetTableRow.ts +++ b/src/content/components/extension/presets/PresetTableRow.ts @@ -5,11 +5,13 @@ import { EVENT_PRESET_TAG_CHANGE_APPLIED } from "$content/components/events/pres import { createFontAwesomeIcon } from "$lib/dom-utils"; export default class PresetTableRow extends BaseComponent { - #preset: TagEditorPreset; + readonly #preset: TagEditorPreset; + readonly #applyAllButton = document.createElement('button'); + readonly #removeAllButton = document.createElement('button'); + readonly #exclusiveWarning = document.createElement('div'); + readonly #alternateColorDummy = document.createElement('span'); + #tagsList: HTMLElement[] = []; - #applyAllButton = document.createElement('button'); - #removeAllButton = document.createElement('button'); - #exclusiveWarning = document.createElement('div'); constructor(container: HTMLElement, preset: TagEditorPreset) { super(container); @@ -78,6 +80,8 @@ export default class PresetTableRow extends BaseComponent { tagsCell, actionsCell, ); + + this.#alternateColorDummy.style.display = 'none'; } protected init() { @@ -146,6 +150,26 @@ export default class PresetTableRow extends BaseComponent { }); } + #maybeRefreshVisibilityFromTags(sourceTags: Set) { + if (!this.#preset.settings.conditional || this.#isMatchesConditional(sourceTags)) { + this.container.style.display = ''; + this.#alternateColorDummy.remove(); + return; + } + + this.container.style.display = 'none'; + this.container.after(this.#alternateColorDummy); + } + + #isMatchesConditional(sourceTags: Set): boolean { + const listOfRequiredTags = this.#preset.settings.requiredTags; + + return Boolean( + listOfRequiredTags.length + && listOfRequiredTags.some(tagName => sourceTags.has(tagName)) + ); + } + updateTags(tags: Set) { let presentTagsAmount = 0; @@ -171,6 +195,8 @@ export default class PresetTableRow extends BaseComponent { this.#exclusiveWarning.style.display = 'none'; } } + + this.#maybeRefreshVisibilityFromTags(tags); } remove() { diff --git a/src/lib/extension/entities/TagEditorPreset.ts b/src/lib/extension/entities/TagEditorPreset.ts index 3932862..ba708a6 100644 --- a/src/lib/extension/entities/TagEditorPreset.ts +++ b/src/lib/extension/entities/TagEditorPreset.ts @@ -4,6 +4,8 @@ interface TagEditorPresetSettings { name: string; tags: string[]; exclusive: boolean; + conditional: boolean; + requiredTags: string[]; } export default class TagEditorPreset extends StorageEntity { @@ -11,7 +13,9 @@ export default class TagEditorPreset extends StorageEntity([]); let isExclusive = $state(false); + let isConditional = $state(false); + let requiredTags = $state([]); $effect(() => { if (presetId === 'new') { @@ -42,6 +44,8 @@ presetName = targetPreset.settings.name; tagsList = [...targetPreset.settings.tags].sort((a, b) => a.localeCompare(b)); isExclusive = targetPreset.settings.exclusive; + isConditional = targetPreset.settings.conditional; + requiredTags = [...targetPreset.settings.requiredTags].sort((a, b) => a.localeCompare(b)); }); async function savePreset() { @@ -53,6 +57,8 @@ targetPreset.settings.name = presetName; targetPreset.settings.tags = [...tagsList]; targetPreset.settings.exclusive = isExclusive; + targetPreset.settings.conditional = isConditional; + targetPreset.settings.requiredTags = [...requiredTags]; await targetPreset.save(); await goto(`/features/presets/${targetPreset.id}`); @@ -76,6 +82,16 @@ Keep only one tag from this preset active at a time. + + + Show this preset only when any of specified tags are provided. + + + {#if isConditional} + + + + {/if}
diff --git a/src/styles/content/tag-presets.scss b/src/styles/content/tag-presets.scss index 30450c3..db66a8e 100644 --- a/src/styles/content/tag-presets.scss +++ b/src/styles/content/tag-presets.scss @@ -3,6 +3,7 @@ .block.tag-presets { .tag { cursor: pointer; + user-select: none; &.is-missing { opacity: 0.5;