diff options
Diffstat (limited to 'viewer/src/store/uiStore.ts')
-rw-r--r-- | viewer/src/store/uiStore.ts | 69 |
1 files changed, 44 insertions, 25 deletions
diff --git a/viewer/src/store/uiStore.ts b/viewer/src/store/uiStore.ts index 892d35e..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,30 +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 | ||
20 | import { createModule, mutation, action } from "vuex-class-component"; | 20 | import { Config } from '@/@types/gallery'; |
21 | import { SplashScreenConfig } from '@/@types/splashscreen'; | ||
22 | import { ItemSort, useItemComparator } from '@/services/itemComparator'; | ||
23 | import { useLocalStorage } from '@vueuse/core'; | ||
24 | import { defineStore } from 'pinia'; | ||
21 | 25 | ||
22 | const VuexModule = createModule({ | 26 | const itemComparator = useItemComparator(); |
23 | namespaced: "uiStore", | 27 | const splashScreenAcknowledgment = useLocalStorage('splashScreenAcknowledgment', ''); |
24 | strict: true | ||
25 | }) | ||
26 | 28 | ||
27 | export default class UIStore extends VuexModule { | 29 | export 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, | ||
28 | 35 | ||
29 | fullscreen: boolean = false; | 36 | splashScreenConfig: null as SplashScreenConfig | null, |
30 | fullWidth: boolean = window.innerWidth < Number(process.env.VUE_APP_FULLWIDTH_LIMIT); | 37 | splashScreenEnabled: false, |
31 | searchMode: boolean = false; | 38 | }), |
32 | 39 | getters: { | |
33 | // --- | 40 | }, |
34 | 41 | actions: { | |
35 | @mutation toggleFullscreen(value?: boolean) { | 42 | toggleFullscreen(value?: boolean) { |
36 | this.fullscreen = value ?? !this.fullscreen; | 43 | this.fullscreen = value ?? !this.fullscreen; |
37 | } | 44 | }, |
38 | 45 | toggleFullWidth(value?: boolean) { | |
39 | @mutation toggleFullWidth(value?: boolean) { | 46 | this.fullWidth = value ?? !this.fullWidth; |
40 | this.fullWidth = value ?? !this.fullWidth; | 47 | }, |
41 | } | 48 | validateSpashScreen() { |
42 | 49 | this.splashScreenEnabled = false; | |
43 | @mutation toggleSearchMode(value?: boolean) { | 50 | splashScreenAcknowledgment.value = this.splashScreenConfig?.acknowledgmentKey ?? ''; |
44 | this.searchMode = value ?? !this.searchMode; | 51 | }, |
45 | } | 52 | async initFromConfig(config: Config) { |
46 | } | 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 | }, | ||
65 | }); | ||