From 9c66f62408cf17e3a812e0cc56e719443f463df4 Mon Sep 17 00:00:00 2001 From: KoloMl Date: Sat, 10 Aug 2024 13:53:19 +0400 Subject: [PATCH 1/7] Wait for initial loading before subscribing to changes --- src/stores/maintenance-profiles-store.js | 53 +++++++++++++----------- 1 file changed, 28 insertions(+), 25 deletions(-) diff --git a/src/stores/maintenance-profiles-store.js b/src/stores/maintenance-profiles-store.js index ffc0db1..792d212 100644 --- a/src/stores/maintenance-profiles-store.js +++ b/src/stores/maintenance-profiles-store.js @@ -9,14 +9,6 @@ import MaintenanceSettings from "$lib/extension/settings/MaintenanceSettings.js" */ export const maintenanceProfilesStore = writable([]); -MaintenanceProfile.readAll().then(profiles => { - maintenanceProfilesStore.set(profiles); -}); - -MaintenanceProfile.subscribe(profiles => { - maintenanceProfilesStore.set(profiles); -}); - /** * Store for the active maintenance profile ID. * @@ -26,29 +18,40 @@ export const activeProfileStore = writable(null); const maintenanceSettings = new MaintenanceSettings(); -maintenanceSettings.resolveActiveProfileId().then(activeProfileId => { - activeProfileStore.set(activeProfileId); -}); - -maintenanceSettings.subscribe(settings => { - activeProfileStore.set(settings.activeProfile || null); -}); - /** * Active profile ID stored locally. Used to reset active profile once the existing profile was removed. * @type {string|null} */ let lastActiveProfileId = null; -activeProfileStore.subscribe(profileId => { - lastActiveProfileId = profileId; +Promise.allSettled([ + // Read the initial values from the storages first + MaintenanceProfile.readAll().then(profiles => { + maintenanceProfilesStore.set(profiles); + }), + maintenanceSettings.resolveActiveProfileId().then(activeProfileId => { + activeProfileStore.set(activeProfileId); + }) +]).then(() => { + // And only after initial values are loaded, start watching for changes from storage and from user's interaction + MaintenanceProfile.subscribe(profiles => { + maintenanceProfilesStore.set(profiles); + }); - void maintenanceSettings.setActiveProfileId(profileId); -}); + maintenanceSettings.subscribe(settings => { + activeProfileStore.set(settings.activeProfile || null); + }); -// Watch the existence of the active profile on every change. -MaintenanceProfile.subscribe(profiles => { - if (!profiles.find(profile => profile.id === lastActiveProfileId)) { - activeProfileStore.set(null); - } + activeProfileStore.subscribe(profileId => { + lastActiveProfileId = profileId; + + void maintenanceSettings.setActiveProfileId(profileId); + }); + + // Watch the existence of the active profile on every change. + MaintenanceProfile.subscribe(profiles => { + if (!profiles.find(profile => profile.id === lastActiveProfileId)) { + activeProfileStore.set(null); + } + }); }); From 920804467e8405f43415dfa2a874d2415d0671f5 Mon Sep 17 00:00:00 2001 From: KoloMl Date: Sat, 10 Aug 2024 14:32:21 +0400 Subject: [PATCH 2/7] Invert sorting of tagging profiles list --- src/routes/settings/maintenance/+page.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/settings/maintenance/+page.svelte b/src/routes/settings/maintenance/+page.svelte index 838ef86..c6d599e 100644 --- a/src/routes/settings/maintenance/+page.svelte +++ b/src/routes/settings/maintenance/+page.svelte @@ -7,7 +7,7 @@ /** @type {import('$lib/extension/entities/MaintenanceProfile.js').default[]} */ let profiles = []; - $: profiles = $maintenanceProfilesStore.sort((a, b) => b.settings.name.localeCompare(a.settings.name)); + $: profiles = $maintenanceProfilesStore.sort((a, b) => a.settings.name.localeCompare(b.settings.name)); function resetActiveProfile() { $activeProfileStore = null; From 323fa4e2b730711b7434374bc4a9556ce5bd5026 Mon Sep 17 00:00:00 2001 From: KoloMl Date: Sat, 10 Aug 2024 14:37:02 +0400 Subject: [PATCH 3/7] Sort tags alphabetically --- src/components/maintenance/ProfileView.svelte | 4 +++- src/routes/settings/maintenance/[id]/edit/+page.svelte | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/maintenance/ProfileView.svelte b/src/components/maintenance/ProfileView.svelte index 4016620..7a01c62 100644 --- a/src/components/maintenance/ProfileView.svelte +++ b/src/components/maintenance/ProfileView.svelte @@ -1,6 +1,8 @@
@@ -10,7 +12,7 @@
Tags:
- {#each profile.settings.tags as tagName} + {#each sortedTagsList as tagName} {tagName} {/each}
diff --git a/src/routes/settings/maintenance/[id]/edit/+page.svelte b/src/routes/settings/maintenance/[id]/edit/+page.svelte index 2214cb3..296f4ce 100644 --- a/src/routes/settings/maintenance/[id]/edit/+page.svelte +++ b/src/routes/settings/maintenance/[id]/edit/+page.svelte @@ -28,7 +28,7 @@ if (maybeExistingProfile) { targetProfile = maybeExistingProfile; profileName = targetProfile.settings.name; - tagsList = [...targetProfile.settings.tags]; + tagsList = [...targetProfile.settings.tags].sort((a, b) => a.localeCompare(b)); } else { goto('/settings/maintenance'); } From e0820c50ec02c7a80c5b560a310890c2610e1e18 Mon Sep 17 00:00:00 2001 From: KoloMl Date: Sat, 10 Aug 2024 15:03:39 +0400 Subject: [PATCH 4/7] Added settings for misc. & tools preferences with fullscreen option --- src/lib/extension/settings/MiscSettings.js | 32 ++++++++++++++++++++++ src/routes/preferences/+page.svelte | 1 + src/routes/preferences/misc/+page.svelte | 20 ++++++++++++++ src/stores/misc-preferences.js | 14 ++++++++++ 4 files changed, 67 insertions(+) create mode 100644 src/lib/extension/settings/MiscSettings.js create mode 100644 src/routes/preferences/misc/+page.svelte create mode 100644 src/stores/misc-preferences.js diff --git a/src/lib/extension/settings/MiscSettings.js b/src/lib/extension/settings/MiscSettings.js new file mode 100644 index 0000000..19b02cc --- /dev/null +++ b/src/lib/extension/settings/MiscSettings.js @@ -0,0 +1,32 @@ +import CacheableSettings from "$lib/extension/base/CacheableSettings.js"; + +export default class MiscSettings extends CacheableSettings { + constructor() { + super("misc"); + } + + async resolveFullscreenViewerEnabled() { + return this._resolveSetting("fullscreenViewer", false); + } + + async setFullscreenViewerEnabled(isEnabled) { + return this._writeSetting("fullscreenViewer", isEnabled); + } + + /** + * @param {function(MiscSettingsObject): void} callback + * @return {function(): void} + */ + subscribe(callback) { + return super.subscribe(settings => { + callback({ + fullscreenViewer: settings.fullscreenViewer ?? false, + }) + }); + } +} + +/** + * @typedef {Object} MiscSettingsObject + * @property {boolean} fullscreenViewer + */ diff --git a/src/routes/preferences/+page.svelte b/src/routes/preferences/+page.svelte index a50e255..c9f37fe 100644 --- a/src/routes/preferences/+page.svelte +++ b/src/routes/preferences/+page.svelte @@ -7,4 +7,5 @@ Back
Search + Misc & Tools diff --git a/src/routes/preferences/misc/+page.svelte b/src/routes/preferences/misc/+page.svelte new file mode 100644 index 0000000..d02981f --- /dev/null +++ b/src/routes/preferences/misc/+page.svelte @@ -0,0 +1,20 @@ + + + + Back +
+ + + + + Enable fullscreen viewer button + + + diff --git a/src/stores/misc-preferences.js b/src/stores/misc-preferences.js new file mode 100644 index 0000000..e16402c --- /dev/null +++ b/src/stores/misc-preferences.js @@ -0,0 +1,14 @@ +import {writable} from "svelte/store"; +import MiscSettings from "$lib/extension/settings/MiscSettings.js"; + +export const fullScreenViewerEnabled = writable(false); + +const miscSettings = new MiscSettings(); + +Promise.allSettled([ + miscSettings.resolveFullscreenViewerEnabled().then(v => fullScreenViewerEnabled.set(v)) +]).then(() => { + fullScreenViewerEnabled.subscribe(value => { + void miscSettings.setFullscreenViewerEnabled(value); + }) +}); From e9b68137ded45924ad63df6bfd0ffa6000266915 Mon Sep 17 00:00:00 2001 From: KoloMl Date: Sat, 10 Aug 2024 15:04:00 +0400 Subject: [PATCH 5/7] Apply the preference --- .../components/ImageShowFullscreenButton.js | 27 +++++++++++++++++++ src/styles/content/listing.scss | 2 +- 2 files changed, 28 insertions(+), 1 deletion(-) diff --git a/src/lib/components/ImageShowFullscreenButton.js b/src/lib/components/ImageShowFullscreenButton.js index ebf0df0..dd50015 100644 --- a/src/lib/components/ImageShowFullscreenButton.js +++ b/src/lib/components/ImageShowFullscreenButton.js @@ -1,15 +1,19 @@ import {BaseComponent} from "$lib/components/base/BaseComponent.js"; import {getComponent} from "$lib/components/base/ComponentUtils.js"; +import MiscSettings from "$lib/extension/settings/MiscSettings.js"; export class ImageShowFullscreenButton extends BaseComponent { /** * @type {MediaBoxTools} */ #mediaBoxTools; + #isFullscreenButtonEnabled = false; build() { this.container.innerText = '🔍'; ImageShowFullscreenButton.#resolveFullscreenViewer(); + + ImageShowFullscreenButton.#miscSettings ??= new MiscSettings(); } init() { @@ -20,6 +24,24 @@ export class ImageShowFullscreenButton extends BaseComponent { } this.on('click', this.#onButtonClicked.bind(this)); + + if (ImageShowFullscreenButton.#miscSettings) { + ImageShowFullscreenButton.#miscSettings.resolveFullscreenViewerEnabled() + .then(isEnabled => { + this.#isFullscreenButtonEnabled = isEnabled; + this.#updateFullscreenButtonVisibility(); + }) + .then(() => { + ImageShowFullscreenButton.#miscSettings.subscribe(settings => { + this.#isFullscreenButtonEnabled = settings.fullscreenViewer; + this.#updateFullscreenButtonVisibility(); + }) + }) + } + } + + #updateFullscreenButtonVisibility() { + this.container.classList.toggle('is-visible', this.#isFullscreenButtonEnabled); } #onButtonClicked() { @@ -113,6 +135,11 @@ export class ImageShowFullscreenButton extends BaseComponent { videoElement.remove(); }) } + + /** + * @type {MiscSettings|null} + */ + static #miscSettings = null; } export function createImageShowFullscreenButton() { diff --git a/src/styles/content/listing.scss b/src/styles/content/listing.scss index b9dce96..24e1b65 100644 --- a/src/styles/content/listing.scss +++ b/src/styles/content/listing.scss @@ -151,7 +151,7 @@ display: block; } - .media-box-show-fullscreen { + .media-box-show-fullscreen.is-visible { display: block; } } From c9d20be33df22b7b35cb9d6816351882016cc061 Mon Sep 17 00:00:00 2001 From: KoloMl Date: Sat, 10 Aug 2024 15:05:09 +0400 Subject: [PATCH 6/7] Turn on the fullscreen viewer button by default --- src/lib/extension/settings/MiscSettings.js | 4 ++-- src/stores/misc-preferences.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/lib/extension/settings/MiscSettings.js b/src/lib/extension/settings/MiscSettings.js index 19b02cc..707ff5a 100644 --- a/src/lib/extension/settings/MiscSettings.js +++ b/src/lib/extension/settings/MiscSettings.js @@ -6,7 +6,7 @@ export default class MiscSettings extends CacheableSettings { } async resolveFullscreenViewerEnabled() { - return this._resolveSetting("fullscreenViewer", false); + return this._resolveSetting("fullscreenViewer", true); } async setFullscreenViewerEnabled(isEnabled) { @@ -20,7 +20,7 @@ export default class MiscSettings extends CacheableSettings { subscribe(callback) { return super.subscribe(settings => { callback({ - fullscreenViewer: settings.fullscreenViewer ?? false, + fullscreenViewer: settings.fullscreenViewer ?? true, }) }); } diff --git a/src/stores/misc-preferences.js b/src/stores/misc-preferences.js index e16402c..c2dcb04 100644 --- a/src/stores/misc-preferences.js +++ b/src/stores/misc-preferences.js @@ -1,7 +1,7 @@ import {writable} from "svelte/store"; import MiscSettings from "$lib/extension/settings/MiscSettings.js"; -export const fullScreenViewerEnabled = writable(false); +export const fullScreenViewerEnabled = writable(true); const miscSettings = new MiscSettings(); From 4ca84b0c14160035543b82b5d7781ee642657115 Mon Sep 17 00:00:00 2001 From: KoloMl Date: Sat, 10 Aug 2024 15:09:51 +0400 Subject: [PATCH 7/7] Bump version to 0.2.1 --- manifest.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/manifest.json b/manifest.json index 0c93ab8..0da50e3 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "name": "Furbooru Tagging Assistant", "description": "Experimental extension with a set of tools to make the tagging faster and easier. Made specifically for Furbooru.", - "version": "0.2.0.1", + "version": "0.2.1", "browser_specific_settings": { "gecko": { "id": "furbooru-tagging-assistant@thecore.city" diff --git a/package.json b/package.json index 80072b5..7043b9a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "furbooru-tagging-assistant", - "version": "0.2.0.1", + "version": "0.2.1", "private": true, "scripts": { "build": "npm run build:popup && npm run build:extension",