aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/views
diff options
context:
space:
mode:
Diffstat (limited to 'viewer/src/views')
-rw-r--r--viewer/src/views/GalleryNavigation.vue106
-rw-r--r--viewer/src/views/GallerySearch.vue60
-rw-r--r--viewer/src/views/GalleryTiles.vue70
-rw-r--r--viewer/src/views/ItemThumbnail.vue99
-rw-r--r--viewer/src/views/MainLayout.vue173
-rw-r--r--viewer/src/views/PanelLeft.vue120
-rw-r--r--viewer/src/views/SplashScreen.vue106
-rw-r--r--viewer/src/views/item_handlers/AudioViewer.vue65
-rw-r--r--viewer/src/views/item_handlers/DirectoryViewer.vue42
-rw-r--r--viewer/src/views/item_handlers/DownloadViewer.vue66
-rw-r--r--viewer/src/views/item_handlers/MarkdownViewer.vue50
-rw-r--r--viewer/src/views/item_handlers/PdfViewer.vue48
-rw-r--r--viewer/src/views/item_handlers/PictureViewer.vue129
-rw-r--r--viewer/src/views/item_handlers/PlainTextViewer.vue69
-rw-r--r--viewer/src/views/item_handlers/VideoViewer.vue47
-rw-r--r--viewer/src/views/layout/left/LayoutCommandSearch.vue64
-rw-r--r--viewer/src/views/layout/left/LayoutInformation.vue99
-rw-r--r--viewer/src/views/layout/left/LayoutLeft.vue158
-rw-r--r--viewer/src/views/layout/left/LayoutProposition.vue208
-rw-r--r--viewer/src/views/layout/left/LayoutTagInput.vue164
-rw-r--r--viewer/src/views/layout/left/LayoutTagList.vue74
-rw-r--r--viewer/src/views/layout/top/LayoutBreadcrumb.vue130
-rw-r--r--viewer/src/views/layout/top/LayoutCommand.vue127
-rw-r--r--viewer/src/views/layout/top/LayoutCommandSort.vue117
-rw-r--r--viewer/src/views/layout/top/LayoutTop.vue (renamed from viewer/src/views/PanelTop.vue)20
25 files changed, 2046 insertions, 365 deletions
diff --git a/viewer/src/views/GalleryNavigation.vue b/viewer/src/views/GalleryNavigation.vue
index 200637e..0869aaf 100644
--- a/viewer/src/views/GalleryNavigation.vue
+++ b/viewer/src/views/GalleryNavigation.vue
@@ -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
@@ -19,65 +19,63 @@
19 19
20<template> 20<template>
21 <div> 21 <div>
22 <ld-error v-if="isError" icon="folder-open" :message="$t('gallery.unknown-resource')" /> 22 <LdNotice
23 <gallery-search v-else-if="isSearch" :path="path" /> 23 v-if="isError"
24 <component :is="componentName" v-else :key="componentKey" :item="$galleryStore.currentItem" /> 24 :icon="faFolderOpen"
25 :message="t('gallery.unknown-resource')"
26 />
27 <GallerySearch v-else-if="isSearch" />
28 <component
29 :is="componentName"
30 v-else
31 :key="componentKey"
32 :item="galleryStore.currentItem"
33 />
25 </div> 34 </div>
26</template> 35</template>
27 36
28<script lang="ts"> 37<script setup lang="ts">
29import { ItemType } from "@/@types/ItemType"; 38import { ItemType } from '@/@types/itemType';
30import Navigation from "@/services/navigation"; 39import LdNotice from '@/components/LdNotice.vue';
31import GallerySearch from "@/views/GallerySearch.vue"; 40import { isDirectory } from '@/services/itemGuards';
32import { Component, Prop, Vue, Watch } from "vue-property-decorator"; 41import { useGalleryStore } from '@/store/galleryStore';
42import { faFolderOpen } from '@fortawesome/free-solid-svg-icons';
43import { computedEager } from '@vueuse/shared';
44import { computed, watchEffect } from 'vue';
45import { useI18n } from 'vue-i18n';
46import GallerySearch from './GallerySearch.vue';
47import AudioViewer from './item_handlers/AudioViewer.vue';
48import DirectoryViewer from './item_handlers/DirectoryViewer.vue';
49import DownloadViewer from './item_handlers/DownloadViewer.vue';
50import MarkdownViewer from './item_handlers/MarkdownViewer.vue';
51import PdfViewer from './item_handlers/PdfViewer.vue';
52import PictureViewer from './item_handlers/PictureViewer.vue';
53import PlainTextViewer from './item_handlers/PlainTextViewer.vue';
54import VideoViewer from './item_handlers/VideoViewer.vue';
33 55
34@Component({ 56const props = defineProps({
35 components: { 57 path: { type: String, required: true },
36 GallerySearch, 58 query: { type: Array<string>, required: true },
37 }, 59});
38})
39export default class GalleryNavigation extends Vue {
40 @Prop(String) readonly path!: string;
41 @Prop(Array) readonly query!: string[];
42 60
43 readonly COMPONENT_BY_TYPE: Record<ItemType, string> = { 61const { t } = useI18n();
44 directory: "ld-directory-viewer", 62const galleryStore = useGalleryStore();
45 picture: "ld-picture-viewer",
46 plaintext: "ld-plain-text-viewer",
47 markdown: "ld-markdown-viewer",
48 pdf: "ld-pdf-viewer",
49 video: "ld-video-viewer",
50 audio: "ld-audio-viewer",
51 other: "ld-download-viewer",
52 };
53 63
54 mounted() { 64const COMPONENT_BY_TYPE: Record<ItemType, unknown> = {
55 this.pathChanged(); 65 directory: DirectoryViewer,
56 } 66 picture: PictureViewer,
67 plaintext: PlainTextViewer,
68 markdown: MarkdownViewer,
69 pdf: PdfViewer,
70 video: VideoViewer,
71 audio: AudioViewer,
72 other: DownloadViewer,
73};
57 74
58 get isError() { 75const isError = computedEager(() => !galleryStore.currentItem?.properties.type);
59 return this.checkType(null); 76const isSearch = computedEager(() => isDirectory(galleryStore.currentItem) && props.query.length > 0);
60 } 77const componentName = computed(() => COMPONENT_BY_TYPE[galleryStore.currentItem?.properties.type ?? ItemType.OTHER]);
78const componentKey = computed(() => galleryStore.currentItem?.path ?? '');
61 79
62 get isSearch() { 80watchEffect(() => (galleryStore.currentPath = props.path));
63 return this.checkType(ItemType.DIRECTORY) && this.query.length > 0;
64 }
65
66 get componentName() {
67 return this.COMPONENT_BY_TYPE[this.$galleryStore.currentItem?.properties.type ?? ItemType.OTHER];
68 }
69
70 get componentKey() {
71 return this.$galleryStore.currentItem?.path ?? "";
72 }
73
74 @Watch("path")
75 pathChanged() {
76 this.$galleryStore.setCurrentPath(this.path);
77 }
78
79 checkType(type: ItemType | null): boolean {
80 return Navigation.checkType(this.$galleryStore.currentItem, type);
81 }
82}
83</script> 81</script>
diff --git a/viewer/src/views/GallerySearch.vue b/viewer/src/views/GallerySearch.vue
index 5ab56e0..d148b9c 100644
--- a/viewer/src/views/GallerySearch.vue
+++ b/viewer/src/views/GallerySearch.vue
@@ -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
@@ -18,37 +18,39 @@
18--> 18-->
19 19
20<template> 20<template>
21 <ld-gallery :items="items" :noresult="noResult" /> 21 <GalleryTiles
22 :items="items.filteredByPath"
23 :noresult-message="noResult"
24 />
22</template> 25</template>
23 26
24<script lang="ts"> 27<script setup lang="ts">
25import IndexSearch from "@/services/indexsearch"; 28import { useIndexSearch } from '@/services/indexSearch';
26import { Component, Prop, Vue } from "vue-property-decorator"; 29import { useGalleryStore } from '@/store/galleryStore';
30import { useUiStore } from '@/store/uiStore';
31import { computed, onUnmounted } from 'vue';
32import { useI18n } from 'vue-i18n';
33import GalleryTiles from './GalleryTiles.vue';
27 34
28@Component 35const { t } = useI18n();
29export default class GalleryPicture extends Vue { 36const uiStore = useUiStore();
30 @Prop(String) readonly path!: string; 37const galleryStore = useGalleryStore();
31 otherCount: number = 0; 38const indexSearch = useIndexSearch();
32 39
33 mounted() { 40uiStore.toggleFullscreen(false);
34 this.$uiStore.toggleFullscreen(false); 41uiStore.searchMode = true;
35 this.$uiStore.toggleSearchMode(true); 42onUnmounted(() => {
36 } 43 uiStore.searchMode = false;
44 galleryStore.currentSearch = [];
45});
37 46
38 destroyed() { 47const items = computed(() => {
39 this.$uiStore.toggleSearchMode(false); 48 const { currentPath, currentSearch } = galleryStore;