aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/services
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
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')
-rw-r--r--viewer/src/services/api/ldFetch.ts35
-rw-r--r--viewer/src/services/fetchWithCheck.ts7
-rw-r--r--viewer/src/services/indexFactory.ts163
-rw-r--r--viewer/src/services/indexSearch.ts74
-rw-r--r--viewer/src/services/indexfactory.ts157
-rw-r--r--viewer/src/services/indexsearch.ts70
-rw-r--r--viewer/src/services/itemComparator.ts93
-rw-r--r--viewer/src/services/itemComparators.ts74
-rw-r--r--viewer/src/services/itemGuards.ts11
-rw-r--r--viewer/src/services/ldzoom.ts135
-rw-r--r--viewer/src/services/navigation.ts90
-rw-r--r--viewer/src/services/ui/ldFullscreen.ts (renamed from viewer/src/services/dragscrollclickfix.ts)42
-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
18 files changed, 711 insertions, 516 deletions
diff --git a/viewer/src/services/api/ldFetch.ts b/viewer/src/services/api/ldFetch.ts
new file mode 100644
index 0000000..4d2f346
--- /dev/null
+++ b/viewer/src/services/api/ldFetch.ts
@@ -0,0 +1,35 @@
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 { MaybeComputedRef, useFetch } from '@vueuse/core';
21import { createToast } from 'mosha-vue-toastify';
22
23export const useLdFetch = (url: MaybeComputedRef<string>) => {
24 const fetchReturn = useFetch(url, { refetch: true });
25 fetchReturn.onFetchError((error) => {
26 createToast(String(error), {
27 type: 'danger',
28 position: 'top-center',
29 timeout: 10000,
30 showIcon: true,
31 onClose: fetchReturn.execute,
32 });
33 });
34 return fetchReturn;
35};
diff --git a/viewer/src/services/fetchWithCheck.ts b/viewer/src/services/fetchWithCheck.ts
deleted file mode 100644
index e84e8b6..0000000
--- a/viewer/src/services/fetchWithCheck.ts
+++ /dev/null
@@ -1,7 +0,0 @@
1export default class FetchWithCheck {
2 static async get(url: RequestInfo): Promise<Response> {
3 const response = await fetch(url);
4 if (!response.ok) throw new Error(`${response.status}: ${response.statusText}`);
5 return response;
6 }
7}
diff --git a/viewer/src/services/indexFactory.ts b/viewer/src/services/indexFactory.ts
new file mode 100644
index 0000000..a414856
--- /dev/null
+++ b/viewer/src/services/indexFactory.ts
@@ -0,0 +1,163 @@
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 { Item, RawTag } from '@/@types/gallery';
21import { Operation } from '@/@types/operation';
22import { TagCategory, TagIndex, TagNode, TagSearch } from '@/@types/tag';
23import { isDirectory } from './itemGuards';
24import { useNavigation } from './navigation';
25
26const navigation = useNavigation();
27
28function _pushPartToIndex(index: TagNode, part: string, item: Item, rootPart: boolean): TagNode {
29 if (!index) {
30 index = {
31 tag: part,
32 tagfiltered: navigation.normalize(part),
33 rootPart,
34 childPart: !rootPart,
35 items: [],
36 children: {},
37 };
38 } else if (rootPart) index.rootPart = true;
39 else index.childPart = true;
40
41 if (!index.items.includes(item)) index.items.push(item);
42 return index;
43}
44
45// Pushes all tags for a root item (and its children) to the index
46function _pushTagsForItem(tagsIndex: TagIndex, item: Item): void {
47 if (isDirectory(item)) {
48 item.properties.items.forEach(item => _pushTagsForItem(tagsIndex, item));
49 return; // Directories are not indexed
50 }
51 for (const tag of item.tags) {
52 const parts = tag.split(':');
53 let lastPart: string | null = null;
54 for (const part of parts) {
55 tagsIndex[part] = _pushPartToIndex(tagsIndex[part], part, item, !lastPart);
56 if (lastPart) {
57 const children = tagsIndex[lastPart].children;
58 children[part] = _pushPartToIndex(children[part], part, item, false);
59 }
60 lastPart = part;
61 }
62 if (lastPart) tagsIndex[lastPart].childPart = true;
63 }
64}
65
66function _extractOperation(filter: string): Operation {
67 const first = filter.slice(0, 1);
68 switch (first) {
69 case Operation.ADDITION:
70 case Operation.SUBSTRACTION:
71 return first;
72 default:
73 return Operation.INTERSECTION;
74 }
75}
76
77function _searchTagsFromFilterWithCategory(
78 tagsIndex: TagIndex,
79 operation: Operation,
80 category: string,
81 disambiguation: string,
82 strict: boolean,
83): TagSearch[] {
84 category = navigation.normalize(category);
85 disambiguation = navigation.normalize(disambiguation);
86 return Object.values(tagsIndex)
87 .filter(node => _matches(node, category, strict))
88 .flatMap(node =>
89 Object.values(node.children)
90 .filter(child => _matches(child, disambiguation, strict))
91 .map(child => ({ ...child, parent: node, operation, display: `${operation}${node.tag}:${child.tag}` })),
92 );
93}
94
95function _searchTagsFromFilter(
96 tagsIndex: TagIndex,
97 operation: Operation,
98 filter: string,
99 strict: boolean,
100): TagSearch[] {
101 filter = navigation.normalize(filter);
102 return Object.values(tagsIndex)
103 .filter(node => _matches(node, filter, strict))
104 .map(node => ({ ...node, operation, display: `${operation}${node.tag}` }));
105}
106
107function _matches(node: TagNode, filter: string, strict: boolean): boolean {
108 if (strict) return node.tagfiltered === filter;
109 return node.tagfiltered.includes(filter);
110}
111
112function _isDiscriminantTagOnly(tags: RawTag[], node: TagNode): boolean {
113 return !tags.includes(node.tag) || !node.childPart;
114}
115
116// ---
117
118export const useIndexFactory = () => {
119 function generateTags(root: Item | null): TagIndex {
120 const tagsIndex: TagIndex = {};
121 if (root) _pushTagsForItem(tagsIndex, root);
122 return tagsIndex;
123 }
124
125 function searchTags(tagsIndex: TagIndex, filter: string, strict: boolean): TagSearch[] {
126 let search: TagSearch[] = [];
127 if (tagsIndex && filter) {
128 const operation = _extractOperation(filter);
129 if (operation !== Operation.INTERSECTION) filter = filter.slice(1);
130 if (filter.includes(':')) {
131 const filterParts = filter.split(':');
132 search = _searchTagsFromFilterWithCategory(tagsIndex, operation, filterParts[0], filterParts[1], strict);
133 } else {
134 search = _searchTagsFromFilter(tagsIndex, operation, filter, strict);
135 }
136 }
137 return search;
138 }
139
140 function generateCategories(tagsIndex: TagIndex, categoryTags?: RawTag[]): TagCategory[] {
141 if (!categoryTags?.length) return [{ tag: '', index: tagsIndex }];
142
143 const tagsCategories: TagCategory[] = [];
144 const tagsRemaining = new Map(Object.entries(tagsIndex));
145 categoryTags
146 .map(tag => ({ tag, index: tagsIndex[tag]?.children }))
147 .filter(category => category.index && Object.keys(category.index).length)