aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/views/GalleryNavigation.vue
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/GalleryNavigation.vue
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/GalleryNavigation.vue')
-rw-r--r--viewer/src/views/GalleryNavigation.vue44
1 files changed, 24 insertions, 20 deletions
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);