aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/store/uiStore.ts
diff options
context:
space:
mode:
authorZéro~Informatique2022-07-26 08:44:34 +0200
committerpacien2022-09-03 01:30:42 +0200
commit00510820a2794efcadbc83f7f8b54318fe198ecb (patch)
treea894d99c22a601197869c7a6928d40bb4ae2c392 /viewer/src/store/uiStore.ts
parent88aa098c07e067f9f737fbeba1f52a9bd5042e53 (diff)
downloadldgallery-00510820a2794efcadbc83f7f8b54318fe198ecb.tar.gz
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
Diffstat (limited to 'viewer/src/store/uiStore.ts')
-rw-r--r--viewer/src/store/uiStore.ts116
1 files changed, 46 insertions, 70 deletions
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 @@
1/* ldgallery - A static generator which turns a collection of tagged 1/* ldgallery - A static generator which turns a collection of tagged
2-- pictures into a searchable web gallery. 2-- pictures into a searchable web gallery.
3-- 3--
4-- Copyright (C) 2019-2020 Guillaume FOUET 4-- Copyright (C) 2019-2022 Guillaume FOUET
5-- 5--
6-- This program is free software: you can redistribute it and/or modify 6-- This program is free software: you can redistribute it and/or modify
7-- it under the terms of the GNU Affero General Public License as 7-- it under the terms of the GNU Affero General Public License as
@@ -17,73 +17,49 @@
17-- along with this program. If not, see <https://www.gnu.org/licenses/>. 17-- along with this program. If not, see <https://www.gnu.org/licenses/>.
18*/ 18*/
19 19
20import { Config } from "@/@types/gallery"; 20import { Config } from '@/@types/gallery';
21import { SplashScreenConfig } from "@/@types/splashscreen"; 21import { SplashScreenConfig } from '@/@types/splashscreen';
22import ItemComparators, { ItemSort } from "@/services/itemComparators"; 22import { ItemSort, useItemComparator } from '@/services/itemComparator';
23import { action, createModule, mutation } from "vuex-class-component"; 23import { useLocalStorage } from '@vueuse/core';
24 24import { defineStore } from 'pinia';
25const VuexModule = createModule({ 25
26 namespaced: "uiStore", 26const itemComparator = useItemComparator();
27 strict: true, 27const splashScreenAcknowledgment = useLocalStorage('splashScreenAcknowledgment', '');
28
29export const useUiStore = defineStore('ui', {
30 state: () => ({
31 fullscreen: false,
32 fullWidth: window.innerWidth < Number(process.env.VUE_APP_FULLWIDTH_LIMIT),
33 searchMode: false,
34 sort: itemComparator.DEFAULT as ItemSort,
35
36 splashScreenConfig: null as SplashScreenConfig | null,
37 splashScreenEnabled: false,
38 }),
39 getters: {
40 },
41 actions: {
42 toggleFullscreen(value?: boolean) {
43 this.fullscreen = value ?? !this.fullscreen;
44 },
45 toggleFullWidth(value?: boolean) {
46 this.fullWidth = value ?? !this.fullWidth;
47 },
48 validateSpashScreen() {
49 this.splashScreenEnabled = false;
50 splashScreenAcknowledgment.value = this.splashScreenConfig?.acknowledgmentKey ?? '';
51 },
52 async initFromConfig(config: Config) {
53 if (config.initialItemSort) {
54 const itemSort = itemComparator.ITEM_SORTS.find(sort => sort.name === config.initialItemSort);
55 if (itemSort) this.sort = itemSort;
56 else throw new Error('Unknown sort type: ' + config.initialItemSort);
57 }
58 if (config.splashScreen) {
59 this.splashScreenConfig = config.splashScreen;
60 const uid = config.splashScreen.acknowledgmentKey;
61 this.splashScreenEnabled = !uid || splashScreenAcknowledgment.value !== uid;
62 }
63 },
64 },
28}); 65});
29
30const STORAGE_SPLASHSCREEN_ACKNOWLEDGMENT = "splashScreenAcknowledgment";
31
32export default class UIStore extends VuexModule {
33 fullscreen: boolean = false;
34 fullWidth: boolean = window.innerWidth < Number(process.env.VUE_APP_FULLWIDTH_LIMIT);
35 searchMode: boolean = false;
36 sort: ItemSort = ItemComparators.DEFAULT;
37
38 splashScreenConfig: SplashScreenConfig | null = null;
39 splashScreenEnabled: boolean = false;
40
41 // ---
42
43 @mutation toggleFullscreen(value?: boolean) {
44 this.fullscreen = value ?? !this.fullscreen;
45 }
46
47 @mutation toggleFullWidth(value?: boolean) {
48 this.fullWidth = value ?? !this.fullWidth;
49 }
50
51 @mutation toggleSearchMode(value?: boolean) {
52 this.searchMode = value ?? !this.searchMode;
53 }
54
55 @mutation setSort(sort: ItemSort) {
56 this.sort = sort;
57 }
58
59 @mutation setSplashScreenConfig(splashScreenConfig: SplashScreenConfig) {
60 this.splashScreenConfig = splashScreenConfig;
61 }
62
63 @mutation setSplashScreenEnabled(enabled: boolean) {
64 this.splashScreenEnabled = enabled;
65 }
66
67 // ---
68
69 @action async initFromConfig(config: Config) {
70 if (config.initialItemSort) {
71 const itemSort = ItemComparators.ITEM_SORTS[config.initialItemSort];
72 if (itemSort) this.setSort(itemSort);
73 else throw new Error("Unknown sort type: " + config.initialItemSort);
74 }
75 if (config.splashScreen) {
76 this.setSplashScreenConfig(config.splashScreen);
77 const uid = config.splashScreen.acknowledgmentKey;
78 this.setSplashScreenEnabled(!uid || localStorage.getItem(STORAGE_SPLASHSCREEN_ACKNOWLEDGMENT) !== uid);
79 }
80 }
81
82 // ---
83
84 @action async validateSpashScreen() {
85 this.setSplashScreenEnabled(false);
86 const uid = this.splashScreenConfig?.acknowledgmentKey;
87 if (uid) localStorage.setItem(STORAGE_SPLASHSCREEN_ACKNOWLEDGMENT, String(uid));
88 }
89}