aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'viewer/src/components')
-rw-r--r--viewer/src/components/LdAudioViewer.vue16
-rw-r--r--viewer/src/components/LdCommand.vue16
-rw-r--r--viewer/src/components/LdDownload.vue11
-rw-r--r--viewer/src/components/LdGallery.vue4
-rw-r--r--viewer/src/components/LdPdfViewer.vue8
-rw-r--r--viewer/src/components/LdPlainTextViewer.vue9
-rw-r--r--viewer/src/components/LdProposition.vue2
-rw-r--r--viewer/src/components/LdThumbnail.vue8
-rw-r--r--viewer/src/components/LdVideoViewer.vue20
9 files changed, 51 insertions, 43 deletions
diff --git a/viewer/src/components/LdAudioViewer.vue b/viewer/src/components/LdAudioViewer.vue
index d115a34..739d36a 100644
--- a/viewer/src/components/LdAudioViewer.vue
+++ b/viewer/src/components/LdAudioViewer.vue
@@ -21,10 +21,11 @@
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="audioItem" />
24 <audio :class="$style.player" :src="itemResourceUrl()" preload="auto" controls> 24 <audio :class="$style.player" :src="itemResourceUrl" preload="auto" controls>
25 <a :download="itemFileName()" :href="itemResourceUrl()"> 25 <a
26 {{ $t("download.download-file-fmt", [itemFileName()]) }} 26 :download="itemFileName"
27 </a> 27 :href="itemResourceUrl"
28 >{{ $t("download.download-file-fmt", [itemFileName]) }}</a>
28 </audio> 29 </audio>
29 </div> 30 </div>
30</template> 31</template>
@@ -33,14 +34,15 @@
33import { Component, Prop, Vue } from "vue-property-decorator"; 34import { Component, Prop, Vue } from "vue-property-decorator";
34import Navigation from "@/services/navigation"; 35import Navigation from "@/services/navigation";
35 36
36@Component export default class LdAudioViewer extends Vue { 37@Component
38export default class LdAudioViewer extends Vue {
37 @Prop({ required: true }) readonly audioItem!: Gallery.Audio; 39 @Prop({ required: true }) readonly audioItem!: Gallery.Audio;
38 40
39 itemResourceUrl(): string { 41 get itemResourceUrl(): string {
40 return this.$galleryStore.resourceRoot + this.audioItem.properties.resource; 42 return this.$galleryStore.resourceRoot + this.audioItem.properties.resource;
41 } 43 }
42 44
43 itemFileName(): string { 45 get itemFileName(): string {
44 return Navigation.getFileName(this.audioItem); 46 return Navigation.getFileName(this.audioItem);
45 } 47 }
46} 48}
diff --git a/viewer/src/components/LdCommand.vue b/viewer/src/components/LdCommand.vue
index d961519..49d86bb 100644
--- a/viewer/src/components/LdCommand.vue
+++ b/viewer/src/components/LdCommand.vue
@@ -21,17 +21,17 @@
21<template> 21<template>
22 <div class="flex command-btns"> 22 <div class="flex command-btns">
23 <a class="link" :title="$t('command.search')" @click="$uiStore.toggleFullWidth()"> 23 <a class="link" :title="$t('command.search')" @click="$uiStore.toggleFullWidth()">
24 <fa-icon :icon="commandToggleSearchPanelIcon()" size="lg" /> 24 <fa-icon :icon="commandToggleSearchPanelIcon" size="lg" />
25 </a> 25 </a>
26 <a 26 <a
27 :class="{'disabled': isEntryPoint()}" 27 :class="{'disabled': isEntryPoint}"
28 class="link command-secondary" 28 class="link command-secondary"
29 :title="$t('command.back')" 29 :title="$t('command.back')"
30 @click="isEntryPoint() || $router.back()" 30 @click="isEntryPoint || $router.back()"
31 > 31 >
32 <fa-icon icon="arrow-left" size="lg" /> 32 <fa-icon icon="arrow-left" size="lg" />
33 </a> 33 </a>
34 <router-link :class="{'disabled': isRoot()}" :title="$t('command.parent')" :to="parent()"> 34 <router-link :class="{'disabled': isRoot}" :title="$t('command.parent')" :to="parent">
35 <fa-icon icon="folder" size="xs" /> 35 <fa-icon icon="folder" size="xs" />
36 <fa-icon icon="level-up-alt" size="lg" /> 36 <fa-icon icon="level-up-alt" size="lg" />
37 </router-link> 37 </router-link>
@@ -46,19 +46,19 @@ import { RawLocation } from "vue-router";
46export default class LdCommand extends Vue { 46export default class LdCommand extends Vue {
47 @Prop({ type: Array, required: true }) readonly currentItemPath!: Gallery.Item[]; 47 @Prop({ type: Array, required: true }) readonly currentItemPath!: Gallery.Item[];
48 48
49 commandToggleSearchPanelIcon(): string { 49 get commandToggleSearchPanelIcon(): string {
50 return this.$uiStore.fullWidth ? "search" : "angle-double-left"; 50 return this.$uiStore.fullWidth ? "search" : "angle-double-left";
51 } 51 }
52 52
53 isRoot(): boolean { 53 get isRoot(): boolean {
54 return this.currentItemPath.length <= 1 && !this.$uiStore.searchMode; 54 return this.currentItemPath.length <= 1 && !this.$uiStore.searchMode;
55 } 55 }
56 56
57 isEntryPoint(): boolean { 57 get isEntryPoint(): boolean {
58 return history.state?.ldgallery === "ENTRYPOINT"; // Set by MainLayout.vue 58 return history.state?.ldgallery === "ENTRYPOINT"; // Set by MainLayout.vue
59 } 59 }
60 60
61 parent(): RawLocation { 61 get parent(): RawLocation {
62 if (this.$uiStore.searchMode) return this.$route.path; 62 if (this.$uiStore.searchMode) return this.$route.path;
63 if (this.currentItemPath.length > 1) return this.currentItemPath[this.currentItemPath.length - 2]; 63 if (this.currentItemPath.length > 1) return this.currentItemPath[this.currentItemPath.length - 2];
64 return ""; 64 return "";
diff --git a/viewer/src/components/LdDownload.vue b/viewer/src/components/LdDownload.vue
index d7dfb7d..7b09dab 100644
--- a/viewer/src/components/LdDownload.vue
+++ b/viewer/src/components/LdDownload.vue
@@ -20,10 +20,10 @@
20 20
21<template> 21<template>
22 <div class="container-vh-centering"> 22 <div class="container-vh-centering">
23 <a :class="$style.content" :download="itemFileName()" :href="itemDownloadUrl()"> 23 <a :class="$style.content" :download="itemFileName" :href="itemDownloadUrl">
24 <!-- TODO: show thumbnail instead of this generic file download icon? --> 24 <!-- TODO: show thumbnail instead of this generic file download icon? -->
25 <fa-icon :class="$style.icon" icon="file-download" size="6x" /> 25 <fa-icon :class="$style.icon" icon="file-download" size="6x" />
26 <div>{{ $t("download.download-file-fmt", [itemFileName()]) }}</div> 26 <div>{{ $t("download.download-file-fmt", [itemFileName]) }}</div>
27 </a> 27 </a>
28 </div> 28 </div>
29</template> 29</template>
@@ -32,14 +32,15 @@
32import { Component, Prop, Vue } from "vue-property-decorator"; 32import { Component, Prop, Vue } from "vue-property-decorator";
33import Navigation from "@/services/navigation"; 33import Navigation from "@/services/navigation";
34 34
35@Component export default class LdDownload extends Vue { 35@Component
36export default class LdDownload extends Vue {
36 @Prop({ required: true }) readonly item!: Gallery.Other; 37 @Prop({ required: true }) readonly item!: Gallery.Other;
37 38
38 itemFileName(): string { 39 get itemFileName(): string {
39 return Navigation.getFileName(this.item); 40 return Navigation.getFileName(this.item);
40 } 41 }
41 42
42 itemDownloadUrl(): string { 43 get itemDownloadUrl(): string {
43 return this.$galleryStore.resourceRoot + this.item.properties.resource; 44 return this.$galleryStore.resourceRoot + this.item.properties.resource;
44 } 45 }
45} 46}
diff --git a/viewer/src/components/LdGallery.vue b/viewer/src/components/LdGallery.vue
index e512758..5a72d99 100644
--- a/viewer/src/components/LdGallery.vue
+++ b/viewer/src/components/LdGallery.vue
@@ -18,7 +18,7 @@
18--> 18-->
19 19
20<template> 20<template>
21 <ld-error v-if="hasNoResults()" icon="search" :message="noresult" /> 21 <ld-error v-if="hasNoResults" icon="search" :message="noresult" />
22 <div v-else class="thumbnail-tiles"> 22 <div v-else class="thumbnail-tiles">
23 <router-link v-for="item in items" :key="item.path" :to="item.path"> 23 <router-link v-for="item in items" :key="item.path" :to="item.path">
24 <ld-thumbnail :item="item" /> 24 <ld-thumbnail :item="item" />
@@ -35,7 +35,7 @@ export default class LdPicture extends Vue {
35 @Prop({ type: Array, required: true }) readonly items!: Gallery.Item[]; 35 @Prop({ type: Array, required: true }) readonly items!: Gallery.Item[];
36 @Prop(String) readonly noresult?: string; 36 @Prop(String) readonly noresult?: string;
37 37
38 hasNoResults(): boolean { 38 get hasNoResults(): boolean {
39 return Boolean(this.noresult) && this.items.length === 0; 39 return Boolean(this.noresult) && this.items.length === 0;
40 } 40 }
41} 41}
diff --git a/viewer/src/components/LdPdfViewer.vue b/viewer/src/components/LdPdfViewer.vue
index 20055cc..b1f6c64 100644
--- a/viewer/src/components/LdPdfViewer.vue
+++ b/viewer/src/components/LdPdfViewer.vue
@@ -22,7 +22,7 @@
22 <!-- intermediate container necessary to eliminate the double scrollbar --> 22 <!-- intermediate container necessary to eliminate the double scrollbar -->
23 <div class="fill no-scroll"> 23 <div class="fill no-scroll">
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="pdfItem" />
28 </object> 28 </object>
@@ -32,15 +32,15 @@
32<script lang="ts"> 32<script lang="ts">
33import { Component, Prop, Vue } from "vue-property-decorator"; 33import { Component, Prop, Vue } from "vue-property-decorator";
34 34
35@Component export default class LdPdfViewer extends Vue { 35@Component
36export default class LdPdfViewer extends Vue {
36 @Prop({ required: true }) readonly pdfItem!: Gallery.PDF; 37 @Prop({ required: true }) readonly pdfItem!: Gallery.PDF;
37 38
38 itemResourceUrl(): string { 39 get itemResourceUrl(): string {
39 return this.$galleryStore.resourceRoot + this.pdfItem.properties.resource; 40 return this.$galleryStore.resourceRoot + this.pdfItem.properties.resource;
40 } 41 }
41} 42}
42</script> 43</script>
43 44
44<style lang="scss" module> 45<style lang="scss" module>
45
46</style> 46</style>
diff --git a/viewer/src/components/LdPlainTextViewer.vue b/viewer/src/components/LdPlainTextViewer.vue
index 101fd4c..5c32470 100644
--- a/viewer/src/components/LdPlainTextViewer.vue
+++ b/viewer/src/components/LdPlainTextViewer.vue
@@ -22,17 +22,18 @@
22 <!-- Outer div necessary for the resize handle to appear on Firefox. --> 22 <!-- Outer div necessary for the resize handle to appear on Firefox. -->
23 <div :class="$style.content" class="fill"> 23 <div :class="$style.content" class="fill">
24 <!-- Using an iframe here to let the browser deal with content encoding detection. --> 24 <!-- Using an iframe here to let the browser deal with content encoding detection. -->
25 <iframe class="fill" :src="itemResourceUrl()" /> 25 <iframe class="fill" :src