From 9165cc1efcf7791f78b61b2c51a9de651b1b09aa Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Fri, 2 Jul 2021 22:53:16 +0200
Subject: viewer: types normalization - gallery.d.ts
GitHub: closes #301
---
viewer/src/store/uiStore.ts | 5 +++--
1 file changed, 3 insertions(+), 2 deletions(-)
(limited to 'viewer/src/store/uiStore.ts')
diff --git a/viewer/src/store/uiStore.ts b/viewer/src/store/uiStore.ts
index f065cdd..f5bb898 100644
--- a/viewer/src/store/uiStore.ts
+++ b/viewer/src/store/uiStore.ts
@@ -17,8 +17,9 @@
-- along with this program. If not, see .
*/
-import { createModule, mutation, action } from "vuex-class-component";
+import { Config } from "@/@types/gallery";
import ItemComparators, { ItemSort } from "@/services/itemComparators";
+import { action, createModule, mutation } from "vuex-class-component";
const VuexModule = createModule({
namespaced: "uiStore",
@@ -49,7 +50,7 @@ export default class UIStore extends VuexModule {
this.sort = sort;
}
- @action async initFromConfig(config: Gallery.Config) {
+ @action async initFromConfig(config: Config) {
if (config.initialItemSort) {
const itemSort = ItemComparators.ITEM_SORTS[config.initialItemSort];
if (itemSort) this.setSort(itemSort);
--
cgit v1.2.3
From 928c501dda0c3580e3cb0389efc16fc1dde16b68 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Sat, 3 Jul 2021 05:06:44 +0200
Subject: viewer: optional user-defined markdown splash screen
GitHub: closes #284
---
viewer/src/store/uiStore.ts | 29 +++++++++++++++++++++++++++++
1 file changed, 29 insertions(+)
(limited to 'viewer/src/store/uiStore.ts')
diff --git a/viewer/src/store/uiStore.ts b/viewer/src/store/uiStore.ts
index f5bb898..2c45136 100644
--- a/viewer/src/store/uiStore.ts
+++ b/viewer/src/store/uiStore.ts
@@ -18,6 +18,7 @@
*/
import { Config } from "@/@types/gallery";
+import { SplashScreenConfig } from "@/@types/splashscreen";
import ItemComparators, { ItemSort } from "@/services/itemComparators";
import { action, createModule, mutation } from "vuex-class-component";
@@ -26,12 +27,17 @@ const VuexModule = createModule({
strict: true,
});
+const STORAGE_SPLASHSCREEN_VALIDATION = "splashScreenValidation";
+
export default class UIStore extends VuexModule {
fullscreen: boolean = false;
fullWidth: boolean = window.innerWidth < Number(process.env.VUE_APP_FULLWIDTH_LIMIT);
searchMode: boolean = false;
sort: ItemSort = ItemComparators.DEFAULT;
+ splashScreenConfig: SplashScreenConfig | null = null;
+ splashScreenEnabled: boolean = false;
+
// ---
@mutation toggleFullscreen(value?: boolean) {
@@ -50,11 +56,34 @@ export default class UIStore extends VuexModule {
this.sort = sort;
}
+ @mutation setSplashScreenConfig(splashScreenConfig: SplashScreenConfig) {
+ this.splashScreenConfig = splashScreenConfig;
+ }
+
+ @mutation setSplashScreenEnabled(enabled: boolean) {
+ this.splashScreenEnabled = enabled;
+ }
+
+ // ---
+
@action async initFromConfig(config: Config) {
if (config.initialItemSort) {
const itemSort = ItemComparators.ITEM_SORTS[config.initialItemSort];
if (itemSort) this.setSort(itemSort);
else throw new Error("Unknown sort type: " + config.initialItemSort);
}
+ if (config.splashScreen) {
+ this.setSplashScreenConfig(config.splashScreen);
+ const uid = config.splashScreen.dontshowagainUID;
+ this.setSplashScreenEnabled(!uid || localStorage.getItem(STORAGE_SPLASHSCREEN_VALIDATION) !== uid);
+ }
+ }
+
+ // ---
+
+ @action async validateSpashScreen() {
+ this.setSplashScreenEnabled(false);
+ const uid = this.splashScreenConfig?.dontshowagainUID;
+ if (uid) localStorage.setItem(STORAGE_SPLASHSCREEN_VALIDATION, String(uid));
}
}
--
cgit v1.2.3
From c83f44cd69a227f873a026c01653ef434b6ae045 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Mon, 5 Jul 2021 19:10:20 +0200
Subject: viewer: viewer: optional user-defined markdown splash screen
Code review changes
---
viewer/src/store/uiStore.ts | 10 +++++-----
1 file changed, 5 insertions(+), 5 deletions(-)
(limited to 'viewer/src/store/uiStore.ts')
diff --git a/viewer/src/store/uiStore.ts b/viewer/src/store/uiStore.ts
index 2c45136..520fcf4 100644
--- a/viewer/src/store/uiStore.ts
+++ b/viewer/src/store/uiStore.ts
@@ -27,7 +27,7 @@ const VuexModule = createModule({
strict: true,
});
-const STORAGE_SPLASHSCREEN_VALIDATION = "splashScreenValidation";
+const STORAGE_SPLASHSCREEN_ACKNOWLEDGMENT = "splashScreenAcknowledgment";
export default class UIStore extends VuexModule {
fullscreen: boolean = false;
@@ -74,8 +74,8 @@ export default class UIStore extends VuexModule {
}
if (config.splashScreen) {
this.setSplashScreenConfig(config.splashScreen);
- const uid = config.splashScreen.dontshowagainUID;
- this.setSplashScreenEnabled(!uid || localStorage.getItem(STORAGE_SPLASHSCREEN_VALIDATION) !== uid);
+ const uid = config.splashScreen.acknowledgmentKey;
+ this.setSplashScreenEnabled(!uid || localStorage.getItem(STORAGE_SPLASHSCREEN_ACKNOWLEDGMENT) !== uid);
}
}
@@ -83,7 +83,7 @@ export default class UIStore extends VuexModule {
@action async validateSpashScreen() {
this.setSplashScreenEnabled(false);
- const uid = this.splashScreenConfig?.dontshowagainUID;
- if (uid) localStorage.setItem(STORAGE_SPLASHSCREEN_VALIDATION, String(uid));
+ const uid = this.splashScreenConfig?.acknowledgmentKey;
+ if (uid) localStorage.setItem(STORAGE_SPLASHSCREEN_ACKNOWLEDGMENT, String(uid));
}
}
--
cgit v1.2.3
From 00510820a2794efcadbc83f7f8b54318fe198ecb Mon Sep 17 00:00:00 2001
From: Zéro~Informatique
Date: Tue, 26 Jul 2022 08:44:34 +0200
Subject: viewer: migrate to vue 3, general refactoring and cleanup
Non-exhaustive list of fixes and improvements done at the same time:
- html default background to grey (avoids white flash during init)
- unified links behavior
- added more theme variables
- removed the flex-expand transition (it wasn't working) and replaced it
with a slide
- fixed LdLoading not centered on the content
- title on removable tags
- fixed an issue with encoded URI from vue-router
- unified Item resource URLs
- removed the iframe for PlainTextViewer (it wasn't working properly)
and replaced it with a pre
- fixed clear and search buttons tabindex
- fixed the information panel bumping up during the fade animation of
tag's dropdown
- fixed some focus outlines not appearing correctly
- moved CSS variables to the :root context
- Code cleaning
GitHub: closes #217
GitHub: closes #300
GitHub: closes #297
GitHub: closes #105
GitHub: closes #267
GitHub: closes #275
GitHub: closes #228
GitHub: closes #215
GitHub: closes #112
---
viewer/src/store/uiStore.ts | 116 ++++++++++++++++++--------------------------
1 file changed, 46 insertions(+), 70 deletions(-)
(limited to 'viewer/src/store/uiStore.ts')
diff --git a/viewer/src/store/uiStore.ts b/viewer/src/store/uiStore.ts
index 520fcf4..df8dacc 100644
--- a/viewer/src/store/uiStore.ts
+++ b/viewer/src/store/uiStore.ts
@@ -1,7 +1,7 @@
/* ldgallery - A static generator which turns a collection of tagged
-- pictures into a searchable web gallery.
--
--- Copyright (C) 2019-2020 Guillaume FOUET
+-- Copyright (C) 2019-2022 Guillaume FOUET
--
-- This program is free software: you can redistribute it and/or modify
-- it under the terms of the GNU Affero General Public License as
@@ -17,73 +17,49 @@
-- along with this program. If not, see .
*/
-import { Config } from "@/@types/gallery";
-import { SplashScreenConfig } from "@/@types/splashscreen";
-import ItemComparators, { ItemSort } from "@/services/itemComparators";
-import { action, createModule, mutation } from "vuex-class-component";
-
-const VuexModule = createModule({
- namespaced: "uiStore",
- strict: true,
+import { Config } from '@/@types/gallery';
+import { SplashScreenConfig } from '@/@types/splashscreen';
+import { ItemSort, useItemComparator } from '@/services/itemComparator';
+import { useLocalStorage } from '@vueuse/core';
+import { defineStore } from 'pinia';
+
+const itemComparator = useItemComparator();
+const splashScreenAcknowledgment = useLocalStorage('splashScreenAcknowledgment', '');
+
+export const useUiStore = defineStore('ui', {
+ state: () => ({
+ fullscreen: false,
+ fullWidth: window.innerWidth < Number(process.env.VUE_APP_FULLWIDTH_LIMIT),
+ searchMode: false,
+ sort: itemComparator.DEFAULT as ItemSort,
+
+ splashScreenConfig: null as SplashScreenConfig | null,
+ splashScreenEnabled: false,
+ }),
+ getters: {
+ },
+ actions: {
+ toggleFullscreen(value?: boolean) {
+ this.fullscreen = value ?? !this.fullscreen;
+ },
+ toggleFullWidth(value?: boolean) {
+ this.fullWidth = value ?? !this.fullWidth;
+ },
+ validateSpashScreen() {
+ this.splashScreenEnabled = false;
+ splashScreenAcknowledgment.value = this.splashScreenConfig?.acknowledgmentKey ?? '';
+ },
+ async initFromConfig(config: Config) {
+ if (config.initialItemSort) {
+ const itemSort = itemComparator.ITEM_SORTS.find(sort => sort.name === config.initialItemSort);
+ if (itemSort) this.sort = itemSort;
+ else throw new Error('Unknown sort type: ' + config.initialItemSort);
+ }
+ if (config.splashScreen) {
+ this.splashScreenConfig = config.splashScreen;
+ const uid = config.splashScreen.acknowledgmentKey;
+ this.splashScreenEnabled = !uid || splashScreenAcknowledgment.value !== uid;
+ }
+ },
+ },
});
-
-const STORAGE_SPLASHSCREEN_ACKNOWLEDGMENT = "splashScreenAcknowledgment";
-
-export default class UIStore extends VuexModule {
- fullscreen: boolean = false;
- fullWidth: boolean = window.innerWidth < Number(process.env.VUE_APP_FULLWIDTH_LIMIT);
- searchMode: boolean = false;
- sort: ItemSort = ItemComparators.DEFAULT;
-
- splashScreenConfig: SplashScreenConfig | null = null;
- splashScreenEnabled: boolean = false;
-
- // ---
-
- @mutation toggleFullscreen(value?: boolean) {
- this.fullscreen = value ?? !this.fullscreen;
- }
-
- @mutation toggleFullWidth(value?: boolean) {
- this.fullWidth = value ?? !this.fullWidth;
- }
-
- @mutation toggleSearchMode(value?: boolean) {
- this.searchMode = value ?? !this.searchMode;
- }
-
- @mutation setSort(sort: ItemSort) {
- this.sort = sort;
- }
-
- @mutation setSplashScreenConfig(splashScreenConfig: SplashScreenConfig) {
- this.splashScreenConfig = splashScreenConfig;
- }
-
- @mutation setSplashScreenEnabled(enabled: boolean) {
- this.splashScreenEnabled = enabled;
- }
-
- // ---
-
- @action async initFromConfig(config: Config) {
- if (config.initialItemSort) {
- const itemSort = ItemComparators.ITEM_SORTS[config.initialItemSort];
- if (itemSort) this.setSort(itemSort);
- else throw new Error("Unknown sort type: " + config.initialItemSort);
- }
- if (config.splashScreen) {
- this.setSplashScreenConfig(config.splashScreen);
- const uid = config.splashScreen.acknowledgmentKey;
- this.setSplashScreenEnabled(!uid || localStorage.getItem(STORAGE_SPLASHSCREEN_ACKNOWLEDGMENT) !== uid);
- }
- }
-
- // ---
-
- @action async validateSpashScreen() {
- this.setSplashScreenEnabled(false);
- const uid = this.splashScreenConfig?.acknowledgmentKey;
- if (uid) localStorage.setItem(STORAGE_SPLASHSCREEN_ACKNOWLEDGMENT, String(uid));
- }
-}
--
cgit v1.2.3