diff options
Diffstat (limited to 'viewer/src/components')
-rw-r--r-- | viewer/src/components/index.ts | 2 | ||||
-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 | 43 | ||||
-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 |
8 files changed, 68 insertions, 19 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 | ||
22 | const requireComponent = require.context( | 22 | const 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 |
38 | export default class LdAudioViewer extends Vue { | 38 | export 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/components/item_handlers/LdDirectory.vue b/viewer/src/components/item_handlers/LdDirectory.vue new file mode 100644 index 0000000..f7fa33f --- /dev/null +++ b/viewer/src/components/item_handlers/LdDirectory.vue | |||
@@ -0,0 +1,43 @@ | |||
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"> | ||
25 | import { Component, Vue, Prop } from "vue-property-decorator"; | ||
26 | import Navigation from "@/services/navigation"; | ||
27 | |||
28 | @Component | ||
29 | export default class LdDirectory extends Vue { | ||
30 | @Prop({ required: true }) readonly item!: Gallery.Directory; | ||
31 | |||
32 | mounted() { | ||
33 | this.$uiStore.toggleFullscreen(false); | ||
34 | } | ||
35 | |||
36 | get orderedItems() { | ||
37 | return Navigation.directoriesFirst(this.item.properties.items); | ||
38 | } | ||
39 | } | ||
40 | </script> | ||
41 | |||
42 | <style lang="scss"> | ||
43 | </style> | ||
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 |
36 | export default class LdPdfViewer extends Vue { | 36 | export 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 |
50 | export default class LdPicture extends Vue { | 50 | export 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 |
33 | export default class LdPlainTextViewer extends Vue { | 33 | export 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> |