aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/services/ui
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/services/ui
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/services/ui')
-rw-r--r--viewer/src/services/ui/ldFullscreen.ts41
-rw-r--r--viewer/src/services/ui/ldItemResourceUrl.ts15
-rw-r--r--viewer/src/services/ui/ldKeepFocus.ts34
-rw-r--r--viewer/src/services/ui/ldKeyboard.ts28
-rw-r--r--viewer/src/services/ui/ldSaveScroll.ts37
-rw-r--r--viewer/src/services/ui/ldTitle.ts34
-rw-r--r--viewer/src/services/ui/ldZoom.ts128
7 files changed, 317 insertions, 0 deletions
diff --git a/viewer/src/services/ui/ldFullscreen.ts b/viewer/src/services/ui/ldFullscreen.ts
new file mode 100644
index 0000000..80e755d
--- /dev/null
+++ b/viewer/src/services/ui/ldFullscreen.ts
@@ -0,0 +1,41 @@
1/* ldgallery - A static generator which turns a collection of tagged
2-- pictures into a searchable web gallery.
3--
4-- Copyright (C) 2019-2022 Guillaume FOUET
5--
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
8-- published by the Free Software Foundation, either version 3 of the
9-- License, or (at your option) any later version.
10--
11-- This program is distributed in the hope that it will be useful,
12-- but WITHOUT ANY WARRANTY; without even the implied warranty of
13-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
14-- GNU Affero General Public License for more details.
15--
16-- You should have received a copy of the GNU Affero General Public License
17-- along with this program. If not, see <https://www.gnu.org/licenses/>.
18*/
19
20import { useUiStore } from '@/store/uiStore';
21import { useEventListener } from '@vueuse/core';
22import { watch } from 'vue';
23
24export const useLdFullscreen = () => {
25 const uiStore = useUiStore();
26
27 useEventListener(document, 'fullscreenchange', onFullscreenChange);
28
29 function onFullscreenChange() {
30 uiStore.toggleFullscreen(isFullscreenActive());
31 }
32
33 function isFullscreenActive(): boolean {
34 return Boolean(document.fullscreenElement);
35 }
36
37 watch(() => uiStore.fullscreen, (fullscreen) => {
38 if (fullscreen && !isFullscreenActive()) document.body.requestFullscreen();
39 else if (isFullscreenActive()) document.exitFullscreen();
40 });
41};
diff --git a/viewer/src/services/ui/ldItemResourceUrl.ts b/viewer/src/services/ui/ldItemResourceUrl.ts
new file mode 100644
index 0000000..7db7ab9
--- /dev/null
+++ b/viewer/src/services/ui/ldItemResourceUrl.ts
@@ -0,0 +1,15 @@
1import { Item } from '@/@types/gallery';
2import { useGalleryStore } from '@/store/galleryStore';
3import { computed } from 'vue';
4import { isDownloadableItem } from '../itemGuards';
5
6export const useItemResource = (item: Item) => {
7 const galleryStore = useGalleryStore();
8 const itemResourceUrl = computed(() => isDownloadableItem(item) ? galleryStore.resourceRoot + item.properties.resource : '');
9 const thumbnailResourceUrl = computed(() => item.thumbnail ? galleryStore.resourceRoot + item.thumbnail.resource : '');
10
11 return {
12 itemResourceUrl,
13 thumbnailResourceUrl,
14 };
15};
diff --git a/viewer/src/services/ui/ldKeepFocus.ts b/viewer/src/services/ui/ldKeepFocus.ts
new file mode 100644
index 0000000..ce9cbc8
--- /dev/null
+++ b/viewer/src/services/ui/ldKeepFocus.ts
@@ -0,0 +1,34 @@
1/* ldgallery - A static generator which turns a collection of tagged
2-- pictures into a searchable web gallery.
3--
4-- Copyright (C) 2019-2022 Guillaume FOUET
5--
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
8-- published by the Free Software Foundation, either version 3 of the
9-- License, or (at your option) any later version.
10--
11-- This program is distributed in the hope that it will be useful,
12-- but WITHOUT ANY WARRANTY; without even the implied warranty of
13-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
14-- GNU Affero General Public License for more details.
15--
16-- You should have received a copy of the GNU Affero General Public License
17-- along with this program. If not, see <https://www.gnu.org/licenses/>.
18*/
19
20import { MaybeElementRef, useFocus } from '@vueuse/core';
21import { watch } from 'vue';
22import { useRoute } from 'vue-router';
23
24export const useLdKeepFocus = (element: MaybeElementRef) => {
25 const contentFocus = useFocus(element);
26 const route = useRoute();
27
28 watch(() => route.path, moveFocus);
29
30 function moveFocus() {
31 contentFocus.focused.value = true;
32 }
33 return { moveFocus };
34};
diff --git a/viewer/src/services/ui/ldKeyboard.ts b/viewer/src/services/ui/ldKeyboard.ts
new file mode 100644
index 0000000..8576435
--- /dev/null
+++ b/viewer/src/services/ui/ldKeyboard.ts
@@ -0,0 +1,28 @@
1/* ldgallery - A static generator which turns a collection of tagged
2-- pictures into a searchable web gallery.
3--
4-- Copyright (C) 2019-2022 Guillaume FOUET
5--
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
8-- published by the Free Software Foundation, either version 3 of the
9-- License, or (at your option) any later version.
10--
11-- This program is distributed in the hope that it will be useful,
12-- but WITHOUT ANY WARRANTY; without even the implied warranty of
13-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
14-- GNU Affero General Public License for more details.
15--
16-- You should have received a copy of the GNU Affero General Public License
17-- along with this program. If not, see <https://www.gnu.org/licenses/>.
18*/
19
20import { useUiStore } from '@/store/uiStore';
21import { onKeyStroke } from '@vueuse/core';
22
23export const useLdKeyboard = () => {
24 const uiStore = useUiStore();
25
26 // https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values
27 onKeyStroke('Escape', () => uiStore.toggleFullscreen(false));
28};
diff --git a/viewer/src/services/ui/ldSaveScroll.ts b/viewer/src/services/ui/ldSaveScroll.ts
new file mode 100644
index 0000000..34e277b
--- /dev/null
+++ b/viewer/src/services/ui/ldSaveScroll.ts
@@ -0,0 +1,37 @@
1/* ldgallery - A static generator which turns a collection of tagged
2-- pictures into a searchable web gallery.
3--
4-- Copyright (C) 2019-2022 Guillaume FOUET
5--
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
8-- published by the Free Software Foundation, either version 3 of the
9-- License, or (at your option) any later version.
10--
11-- This program is distributed in the hope that it will be useful,
12-- but WITHOUT ANY WARRANTY; without even the implied warranty of
13-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
14-- GNU Affero General Public License for more details.
15--
16-- You should have received a copy of the GNU Affero General Public License
17-- along with this program. If not, see <https://www.gnu.org/licenses/>.
18*/
19
20import { MaybeElementRef, unrefElement } from '@vueuse/core';
21import { nextTick, watch } from 'vue';
22import { useRoute } from 'vue-router';
23
24type ScrollPosition = Record<string, number>;
25
26export const useLdSaveScroll = (element: MaybeElementRef) => {
27 const scrollPositions: ScrollPosition = {};
28 const route = useRoute();
29
30 watch(() => decodeURIComponent(route.path), (newRoute, oldRoute) => {
31 const el = unrefElement(element);
32 if (!el) return;
33
34 scrollPositions[oldRoute] = el.scrollTop / el.scrollHeight;
35 nextTick(() => (el.scrollTop = scrollPositions[newRoute] * el.scrollHeight));
36 });
37};
diff --git a/viewer/src/services/ui/ldTitle.ts b/viewer/src/services/ui/ldTitle.ts
new file mode 100644
index 0000000..df80140
--- /dev/null
+++ b/viewer/src/services/ui/ldTitle.ts
@@ -0,0 +1,34 @@
1/* ldgallery - A static generator which turns a collection of tagged
2-- pictures into a searchable web gallery.
3--
4-- Copyright (C) 2019-2022 Guillaume FOUET
5--
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
8-- published by the Free Software Foundation, either version 3 of the
9-- License, or (at your option) any later version.
10--
11-- This program is distributed in the hope that it will be useful,
12-- but WITHOUT ANY WARRANTY; without even the implied warranty of
13-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
14-- GNU Affero General Public License for more details.
15--
16-- You should have received a copy of the GNU Affero General Public License
17-- along with this program. If not, see <https://www.gnu.org/licenses/>.
18*/
19
20import { useGalleryStore } from '@/store/galleryStore';
21import { useTitle } from '@vueuse/core';
22import { computed } from 'vue';
23
24export const useLdTitle = () => {
25 const galleryStore = useGalleryStore();
26
27 const title = computed(() => {
28 const { currentItem, galleryTitle } = galleryStore;
29 return currentItem?.title
30 ? `${currentItem.title} • ${galleryTitle}`
31 : galleryTitle;
32 });
33 useTitle(title);
34};
diff --git a/viewer/src/services/ui/ldZoom.ts b/viewer/src/services/ui/ldZoom.ts
new file mode 100644
index 0000000..9f77dea
--- /dev/null
+++ b/viewer/src/services/ui/ldZoom.ts
@@ -0,0 +1,128 @@
1/* ldgallery - A static generator which turns a collection of tagged
2-- pictures into a searchable web gallery.
3--
4-- Copyright (C) 2020 Pacien TRAN-GIRARD
5--
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