aboutsummaryrefslogtreecommitdiff
path: root/viewer
diff options
context:
space:
mode:
authorZero~Informatique2020-06-19 22:12:03 +0200
committerZero~Informatique2020-06-19 22:12:03 +0200
commit69dc0d20706ed41e5ecdbb77515066d8a7d7703b (patch)
tree8b69fcb1d4a96290134980e75281563f8b4c271e /viewer
parenta053076d692be5e3698fe1a2c071d077cb4b6b73 (diff)
downloadldgallery-69dc0d20706ed41e5ecdbb77515066d8a7d7703b.tar.gz
viewer: code update (no functional change)
Types { [x: T]: R } updated to Record<T, R> Methods in template updated to getters (computed in VueJS), which are reactive and cached Code formatting
Diffstat (limited to 'viewer')
-rw-r--r--viewer/src/@types/scrollposition.d.ts2
-rw-r--r--viewer/src/@types/tag.d.ts4
-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
-rw-r--r--viewer/src/views/GalleryDirectory.vue4
-rw-r--r--viewer/src/views/GallerySearch.vue6
-rw-r--r--viewer/src/views/PanelLeft.vue4
14 files changed, 61 insertions, 53 deletions
diff --git a/viewer/src/@types/scrollposition.d.ts b/viewer/src/@types/scrollposition.d.ts
index b2147fa..cd393b3 100644
--- a/viewer/src/@types/scrollposition.d.ts
+++ b/viewer/src/@types/scrollposition.d.ts
@@ -17,4 +17,4 @@
17-- along with this program. If not, see <https://www.gnu.org/licenses/>. 17-- along with this program. If not, see <https://www.gnu.org/licenses/>.
18*/ 18*/
19 19
20type ScrollPosition = { [index: string]: number } 20type ScrollPosition = Record<string, number>
diff --git a/viewer/src/@types/tag.d.ts b/viewer/src/@types/tag.d.ts
index 76f1207..59ae779 100644
--- a/viewer/src/@types/tag.d.ts
+++ b/viewer/src/@types/tag.d.ts
@@ -31,8 +31,8 @@ declare namespace Tag {
31 operation: string; // Enum Operation 31 operation: string; // Enum Operation
32 display: string; 32 display: string;
33 } 33 }
34 type SearchByOperation = { [index: string]: Tag.Search[] }; 34 type SearchByOperation = Record<string, Tag.Search[]>;
35 type Index = { [index: string]: Node }; 35 type Index = Record<string, Node>;
36 36
37 interface Category { 37 interface Category {
38 tag: string; 38 tag: string;
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) -->