aboutsummaryrefslogtreecommitdiff
path: root/viewer
diff options
context:
space:
mode:
authorZero~Informatique2020-06-20 06:04:39 +0200
committerOzoneGrif2020-06-20 16:41:50 +0200
commit4393f8f25025ea600dae30be2d6ad9067496ba40 (patch)
treed58db0221909088ccb6bd6319a120ba6ab921d78 /viewer
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')
-rw-r--r--viewer/src/components/index.ts2
-rw-r--r--viewer/src/components/item_handlers/LdAudioViewer.vue (renamed from viewer/src/components/LdAudioViewer.vue)8
-rw-r--r--viewer/src/components/item_handlers/LdDirectory.vue (renamed from viewer/src/views/GalleryDirectory.vue)6
-rw-r--r--viewer/src/components/item_handlers/LdDownload.vue (renamed from viewer/src/components/LdDownload.vue)0
-rw-r--r--viewer/src/components/item_handlers/LdPdfViewer.vue (renamed from viewer/src/components/LdPdfViewer.vue)6
-rw-r--r--viewer/src/components/item_handlers/LdPicture.vue (renamed from viewer/src/components/LdPicture.vue)16
-rw-r--r--viewer/src/components/item_handlers/LdPlainTextViewer.vue (renamed from viewer/src/components/LdPlainTextViewer.vue)4
-rw-r--r--viewer/src/components/item_handlers/LdVideoViewer.vue (renamed from viewer/src/components/LdVideoViewer.vue)8
-rw-r--r--viewer/src/views/GalleryNavigation.vue44
9 files changed, 52 insertions, 42 deletions
diff --git a/viewer/src/components/index.ts b/viewer/src/components/index.ts
index 559000e..043087d 100644
--- a/viewer/src/components/index.ts
+++ b/viewer/src/components/index.ts
@@ -21,7 +21,7 @@ import Vue from "vue"
21 21
22const requireComponent = require.context( 22const requireComponent = require.context(
23 "@/components", 23 "@/components",
24 false, // Whether or not to look in subfolders 24 true, // Whether or not to look in subfolders
25 // The regular expression used to match base component filenames 25 // The regular expression used to match base component filenames
26 /Ld[A-Z]\w+\.vue$/ 26 /Ld[A-Z]\w+\.vue$/
27) 27)
diff --git a/viewer/src/components/LdAudioViewer.vue b/viewer/src/components/item_handlers/LdAudioViewer.vue
index 739d36a..8c8ce2b 100644
--- a/viewer/src/components/LdAudioViewer.vue
+++ b/viewer/src/components/item_handlers/LdAudioViewer.vue
@@ -20,7 +20,7 @@
20 20
21<template> 21<template>
22 <div class="flex-column container-vh-centering"> 22 <div class="flex-column container-vh-centering">
23 <ld-thumbnail :item="audioItem" /> 23 <ld-thumbnail :item="item" />
24 <audio :class="$style.player" :src="itemResourceUrl" preload="auto" controls> 24 <audio :class="$style.player" :src="itemResourceUrl" preload="auto" controls>
25 <a 25 <a
26 :download="itemFileName" 26 :download="itemFileName"
@@ -36,14 +36,14 @@ import Navigation from "@/services/navigation";
36 36
37@Component 37@Component
38export default class LdAudioViewer extends Vue { 38export default class LdAudioViewer extends Vue {
39 @Prop({ required: true }) readonly audioItem!: Gallery.Audio; 39 @Prop({ required: true }) readonly item!: Gallery.Audio;
40 40
41 get itemResourceUrl(): string { 41 get itemResourceUrl(): string {
42 return this.$galleryStore.resourceRoot + this.audioItem.properties.resource; 42 return this.$galleryStore.resourceRoot + this.item.properties.resource;
43 } 43 }
44 44
45 get itemFileName(): string { 45 get itemFileName(): string {
46 return Navigation.getFileName(this.audioItem); 46 return Navigation.getFileName(this.item);
47 } 47 }
48} 48}
49</script> 49</script>
diff --git a/viewer/src/views/GalleryDirectory.vue b/viewer/src/components/item_handlers/LdDirectory.vue
index bfe484e..f7fa33f 100644
--- a/viewer/src/views/GalleryDirectory.vue
+++ b/viewer/src/components/item_handlers/LdDirectory.vue
@@ -26,15 +26,15 @@ import { Component, Vue, Prop } from "vue-property-decorator";
26import Navigation from "@/services/navigation"; 26import Navigation from "@/services/navigation";
27 27
28@Component 28@Component
29export default class GalleryDirectory extends Vue { 29export default class LdDirectory extends Vue {
30 @Prop({ required: true }) readonly directory!: Gallery.Directory; 30 @Prop({ required: true }) readonly item!: Gallery.Directory;
31 31
32 mounted() { 32 mounted() {
33 this.$uiStore.toggleFullscreen(false); 33 this.$uiStore.toggleFullscreen(false);
34 } 34 }
35 35
36 get orderedItems() { 36 get orderedItems() {
37 return Navigation.directoriesFirst(this.directory.properties.items); 37 return Navigation.directoriesFirst(this.item.properties.items);
38 } 38 }
39} 39}
40</script> 40</script>
diff --git a/viewer/src/components/LdDownload.vue b/viewer/src/components/item_handlers/LdDownload.vue
index 7b09dab..7b09dab 100644
--- a/viewer/src/components/LdDownload.vue
+++ b/viewer/src/components/item_handlers/LdDownload.vue
diff --git a/viewer/src/components/LdPdfViewer.vue b/viewer/src/components/item_handlers/LdPdfViewer.vue
index b1f6c64..6471aac 100644
--- a/viewer/src/components/LdPdfViewer.vue
+++ b/viewer/src/components/item_handlers/LdPdfViewer.vue
@@ -24,7 +24,7 @@
24 <!-- prefer native browser PDF viewer if available --> 24 <!-- prefer native browser PDF viewer if available -->
25 <object class="fill" :data="itemResourceUrl" type="application/pdf"> 25 <object class="fill" :data="itemResourceUrl" type="application/pdf">
26 <!-- TODO: fallback to PDF.js (https://github.com/pacien/ldgallery/issues/212) --> 26 <!-- TODO: fallback to PDF.js (https://github.com/pacien/ldgallery/issues/212) -->
27 <ld-download :item="pdfItem" /> 27 <ld-download :item="item" />
28 </object> 28 </object>
29 </div> 29 </div>
30</template> 30</template>
@@ -34,10 +34,10 @@ import { Component, Prop, Vue } from "vue-property-decorator";
34 34
35@Component 35@Component
36export default class LdPdfViewer extends Vue { 36export default class LdPdfViewer extends Vue {
37 @Prop({ required: true }) readonly pdfItem!: Gallery.PDF; 37 @Prop({ required: true }) readonly item!: Gallery.PDF;
38 38
39 get itemResourceUrl(): string { 39 get itemResourceUrl(): string {
40 return this.$galleryStore.resourceRoot + this.pdfItem.properties.resource; 40 return this.$galleryStore.resourceRoot + this.item.properties.resource;
41 } 41 }
42} 42}
43</script> 43</script>
diff --git a/viewer/src/components/LdPicture.vue b/viewer/src/components/item_handlers/LdPicture.vue
index 78829ec..3809e4d 100644
--- a/viewer/src/components/LdPicture.vue
+++ b/viewer/src/components/item_handlers/LdPicture.vue
@@ -31,7 +31,7 @@
31 > 31 >
32 <v-lazy-image 32 <v-lazy-image
33 ref="imageElement" 33 ref="imageElement"
34 :src="pictureSrc(picture.properties.resource)" 34 :src="pictureSrc(item.properties.resource)"
35 class="ld-picture-element" 35 class="ld-picture-element"
36 :class="{'slow-loading': Boolean(slowLoadingStyle)}" 36 :class="{'slow-loading': Boolean(slowLoadingStyle)}"
37 :style="slowLoadingStyle" 37 :style="slowLoadingStyle"
@@ -48,7 +48,7 @@ import DragScrollClickFix from "@/services/dragscrollclickfix";
48 48
49@Component 49@Component
50export default class LdPicture extends Vue { 50export default class LdPicture extends Vue {
51 @Prop({ required: true }) readonly picture!: Gallery.Picture; 51 @Prop({ required: true }) readonly item!: Gallery.Picture;
52 @Ref() readonly containerElement!: HTMLDivElement; 52 @Ref() readonly containerElement!: HTMLDivElement;
53 @Ref() readonly imageElement!: Vue; 53 @Ref() readonly imageElement!: Vue;
54 54
@@ -61,7 +61,13 @@ export default class LdPicture extends Vue {
61 61
62 mounted() { 62 mounted() {
63 this.timer = setTimeout(this.generateSlowLoadingStyle, this.SLOW_LOADING_TIMEOUT_MS); 63 this.timer = setTimeout(this.generateSlowLoadingStyle, this.SLOW_LOADING_TIMEOUT_MS);
64 new LdZoom(this.containerElement, this.imageElement.$el as HTMLImageElement, this.picture.properties, 10, 1 / 5).install(); 64 new LdZoom(
65 this.containerElement,
66 this.imageElement.$el as HTMLImageElement,
67 this.item.properties,
68 10,
69 1 / 5
70 ).install();
65 } 71 }
66 72
67 destroyed() { 73 destroyed() {
@@ -82,8 +88,8 @@ export default class LdPicture extends Vue {
82 generateSlowLoadingStyle() { 88 generateSlowLoadingStyle() {
83 this.clearSlowLoading(); 89 this.clearSlowLoading();
84 this.loader = true; 90 this.loader = true;
85 if (this.picture.thumbnail) { 91 if (this.item.thumbnail) {
86 const url = this.pictureSrc(this.picture.thumbnail.resource); 92 const url = this.pictureSrc(this.item.thumbnail.resource);
87 this.slowLoadingStyle = `background-image: url('${url}');`; 93 this.slowLoadingStyle = `background-image: url('${url}');`;
88 } 94 }
89 } 95 }
diff --git a/viewer/src/components/LdPlainTextViewer.vue b/viewer/src/components/item_handlers/LdPlainTextViewer.vue
index 5c32470..cd26d9d 100644
--- a/viewer/src/components/LdPlainTextViewer.vue
+++ b/viewer/src/components/item_handlers/LdPlainTextViewer.vue
@@ -31,10 +31,10 @@ import { Component, Prop, Vue } from "vue-property-decorator";
31 31
32@Component 32@Component
33export default class LdPlainTextViewer extends Vue { 33export default class LdPlainTextViewer extends Vue {
34 @Prop({ required: true }) readonly plainTextItem!: Gallery.PlainText; 34 @Prop({ required: true }) readonly item!: Gallery.PlainText;
35 35
36 get itemResourceUrl(): string { 36 get itemResourceUrl(): string {
37 return this.$galleryStore.resourceRoot + this.plainTextItem.properties.resource; 37 return this.$galleryStore.resourceRoot + this.item.properties.resource;
38 } 38 }
39} 39}
40</script> 40</script>
diff --git a/viewer/src/components/LdVideoViewer.vue b/viewer/src/components/item_handlers/LdVideoViewer.vue
index b7a7c35..67203a5 100644
--- a/viewer/src/components/LdVideoViewer.vue
+++ b/viewer/src/components/item_handlers/LdVideoViewer.vue
@@ -28,7 +28,7 @@
28 preload="auto" 28 preload="auto"
29 controls 29 controls
30 > 30 >
31 <ld-download :item="videoItem" /> 31 <ld-download :item="item" />
32 </video> 32 </video>
33 </div> 33 </div>
34</template> 34</template>
@@ -38,14 +38,14 @@ import { Component, Prop, Vue } from "vue-property-decorator";
38 38
39@Component 39@Component
40export default class LdVideoViewer extends Vue { 40export default class LdVideoViewer extends Vue {
41 @Prop({ required: true }) readonly videoItem!: Gallery.Video; 41 @Prop({ required: true }) readonly item!: Gallery.Video;
42 42
43 get itemResourceUrl(): string { 43 get itemResourceUrl(): string {
44 return this.$galleryStore.resourceRoot + this.videoItem.properties.resource; 44 return this.$galleryStore.resourceRoot + this.item.properties.resource;