aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/views
diff options
context:
space:
mode:
authorZero~Informatique2020-06-20 06:04:39 +0200
committerOzoneGrif2020-06-20 16:41:50 +0200
commit4393f8f25025ea600dae30be2d6ad9067496ba40 (patch)
treed58db0221909088ccb6bd6319a120ba6ab921d78 /viewer/src/views
parent69dc0d20706ed41e5ecdbb77515066d8a7d7703b (diff)
downloadldgallery-4393f8f25025ea600dae30be2d6ad9067496ba40.tar.gz
viewer: component dispatch (no functional change)
a cleaner way to add new components to LdGallery
Diffstat (limited to 'viewer/src/views')
-rw-r--r--viewer/src/views/GalleryDirectory.vue43
-rw-r--r--viewer/src/views/GalleryNavigation.vue44
2 files changed, 24 insertions, 63 deletions
diff --git a/viewer/src/views/GalleryDirectory.vue b/viewer/src/views/GalleryDirectory.vue
deleted file mode 100644
index bfe484e..0000000
--- a/viewer/src/views/GalleryDirectory.vue
+++ /dev/null
@@ -1,43 +0,0 @@
1<!-- ldgallery - A static generator which turns a collection of tagged
2-- pictures into a searchable web gallery.
3--
4-- Copyright (C) 2019-2020 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
20<template>
21 <ld-gallery :items="orderedItems" :noresult="$t('directory.no-results')" />
22</template>
23
24<script lang="ts">
25import { Component, Vue, Prop } from "vue-property-decorator";
26import Navigation from "@/services/navigation";
27
28@Component
29export default class GalleryDirectory extends Vue {
30 @Prop({ required: true }) readonly directory!: Gallery.Directory;
31
32 mounted() {
33 this.$uiStore.toggleFullscreen(false);
34 }
35
36 get orderedItems() {
37 return Navigation.directoriesFirst(this.directory.properties.items);
38 }
39}
40</script>
41
42<style lang="scss">
43</style>
diff --git a/viewer/src/views/GalleryNavigation.vue b/viewer/src/views/GalleryNavigation.vue
index b141d44..843550f 100644
--- a/viewer/src/views/GalleryNavigation.vue
+++ b/viewer/src/views/GalleryNavigation.vue
@@ -18,23 +18,10 @@
18--> 18-->
19 19
20<template> 20<template>
21 <!-- TODO: eliminate intermediate div -->
22 <div> 21 <div>
23 <ld-error v-if="checkType(null)" icon="folder-open" :message="$t('gallery.unknown-resource')" /> 22 <ld-error v-if="isError" icon="folder-open" :message="$t('gallery.unknown-resource')" />
24 <gallery-search v-else-if="checkType(ItemType.DIRECTORY) && query.length > 0" :path="path" /> 23 <gallery-search v-else-if="isSearch" :path="path" />
25 <gallery-directory 24 <component :is="componentName" v-else :item="$galleryStore.currentItem" />
26 v-else-if="checkType(ItemType.DIRECTORY)"
27 :directory="$galleryStore.currentItem"
28 />
29 <ld-picture v-else-if="checkType(ItemType.PICTURE)" :picture="$galleryStore.currentItem" />
30 <ld-plain-text-viewer
31 v-else-if="checkType(ItemType.PLAINTEXT)"
32 :plain-text-item="$galleryStore.currentItem"
33 />
34 <ld-pdf-viewer v-else-if="checkType(ItemType.PDF)" :pdf-item="$galleryStore.currentItem" />
35 <ld-video-viewer v-else-if="checkType(ItemType.VIDEO)" :video-item="$galleryStore.currentItem" />
36 <ld-audio-viewer v-else-if="checkType(ItemType.AUDIO)" :audio-item="$galleryStore.currentItem" />
37 <ld-download v-else :item="$galleryStore.currentItem" />
38 </div> 25 </div>
39</template> 26</template>
40 27
@@ -42,12 +29,10 @@
42import { Component, Vue, Prop, Watch } from "vue-property-decorator"; 29import { Component, Vue, Prop, Watch } from "vue-property-decorator";
43import { ItemType } from "@/@types/ItemType"; 30import { ItemType } from "@/@types/ItemType";
44import Navigation from "@/services/navigation"; 31import Navigation from "@/services/navigation";
45import GalleryDirectory from "./GalleryDirectory.vue";
46import GallerySearch from "@/views/GallerySearch.vue"; 32import GallerySearch from "@/views/GallerySearch.vue";
47 33
48@Component({ 34@Component({
49 components: { 35 components: {
50 GalleryDirectory,
51 GallerySearch, 36 GallerySearch,
52 }, 37 },
53}) 38})
@@ -55,13 +40,32 @@ export default class GalleryNavigation extends Vue {
55 @Prop(String) readonly path!: string; 40 @Prop(String) readonly path!: string;
56 @Prop(Array) readonly query!: string[]; 41 @Prop(Array) readonly query!: string[];
57 42
58 // For the template 43 readonly COMPONENT_BY_TYPE: Record<ItemType, string> = {
59 readonly ItemType = Object.freeze(ItemType); 44 directory: "ld-directory",
45 picture: "ld-picture",
46 plaintext: "ld-plain-text-viewer",
47 pdf: "ld-pdf-viewer",
48 video: "ld-video-viewer",
49 audio: "ld-audio-viewer",
50 other: "ld-download",
51 };
60 52
61 mounted() { 53 mounted() {
62 this.pathChanged(); 54 this.pathChanged();
63 } 55 }
64 56
57 get isError() {
58 return this.checkType(null);
59 }
60
61 get isSearch() {
62 return this.checkType(ItemType.DIRECTORY) && this.query.length > 0;
63 }
64
65 get componentName() {
66 return this.COMPONENT_BY_TYPE[this.$galleryStore.currentItem?.properties.type ?? ItemType.OTHER];
67 }
68
65 @Watch("path") 69 @Watch("path")
66 pathChanged() { 70 pathChanged() {
67 this.$galleryStore.setCurrentPath(this.path); 71 this.$galleryStore.setCurrentPath(this.path);