aboutsummaryrefslogtreecommitdiff
path: root/viewer
diff options
context:
space:
mode:
authorpacien2022-11-06 20:23:11 +0100
committerGitHub2022-11-06 20:23:11 +0100
commitbb3b0eae37a7214a3a4a6a1e4354e6f082adf15e (patch)
tree2e5436e819f8e93a1115a8142594ca80fd507bc1 /viewer
parentf864eeca506331c1dee2cd3f5f0df4fe806f303a (diff)
parentcfbff75f78963e3d24326f731590e78a4d719e9e (diff)
downloadldgallery-bb3b0eae37a7214a3a4a6a1e4354e6f082adf15e.tar.gz
Merge pull request #347 from ldgallery/p_viewer_download_button
viewer/command: add item download button
Diffstat (limited to 'viewer')
-rw-r--r--viewer/ldgallery-viewer.7.md1
-rw-r--r--viewer/src/locales/en.yml1
-rw-r--r--viewer/src/services/ui/ldItemResourceUrl.ts8
-rw-r--r--viewer/src/views/ItemThumbnail.vue4
-rw-r--r--viewer/src/views/item_handlers/AudioViewer.vue4
-rw-r--r--viewer/src/views/item_handlers/DownloadViewer.vue4
-rw-r--r--viewer/src/views/item_handlers/MarkdownViewer.vue4
-rw-r--r--viewer/src/views/item_handlers/PdfViewer.vue4
-rw-r--r--viewer/src/views/item_handlers/PictureViewer.vue4
-rw-r--r--viewer/src/views/item_handlers/PlainTextViewer.vue4
-rw-r--r--viewer/src/views/item_handlers/VideoViewer.vue4
-rw-r--r--viewer/src/views/layout/top/LayoutCommand.vue37
-rw-r--r--viewer/src/views/layout/top/LayoutTop.vue10
13 files changed, 63 insertions, 26 deletions
diff --git a/viewer/ldgallery-viewer.7.md b/viewer/ldgallery-viewer.7.md
index 736f61f..46509fb 100644
--- a/viewer/ldgallery-viewer.7.md
+++ b/viewer/ldgallery-viewer.7.md
@@ -41,6 +41,7 @@ Items of the following formats can be opened and visualised within the web appli
41* PDFs 41* PDFs
42 42
43Formats which are not listed above or which are not supported by the user's web browser are offered for download instead of being directly displayed in the same window. 43Formats which are not listed above or which are not supported by the user's web browser are offered for download instead of being directly displayed in the same window.
44The item being visualised can be downloaded using the download button at the top-left corner.
44 45
45 46
46# KEYBOARD SHORTCUTS 47# KEYBOARD SHORTCUTS
diff --git a/viewer/src/locales/en.yml b/viewer/src/locales/en.yml
index acbe24b..86ecd49 100644
--- a/viewer/src/locales/en.yml
+++ b/viewer/src/locales/en.yml
@@ -1,6 +1,7 @@
1command: 1command:
2 back: Go back 2 back: Go back
3 parent: Go to parent directory 3 parent: Go to parent directory
4 download: Download
4 search: 5 search:
5 clear: Clear 6 clear: Clear
6 search: Search 7 search: Search
diff --git a/viewer/src/services/ui/ldItemResourceUrl.ts b/viewer/src/services/ui/ldItemResourceUrl.ts
index 7db7ab9..d6734b3 100644
--- a/viewer/src/services/ui/ldItemResourceUrl.ts
+++ b/viewer/src/services/ui/ldItemResourceUrl.ts
@@ -1,12 +1,12 @@
1import { Item } from '@/@types/gallery'; 1import { Item } from '@/@types/gallery';
2import { useGalleryStore } from '@/store/galleryStore'; 2import { useGalleryStore } from '@/store/galleryStore';
3import { computed } from 'vue'; 3import { computed, ToRef } from 'vue';
4import { isDownloadableItem } from '../itemGuards'; 4import { isDownloadableItem } from '../itemGuards';
5 5
6export const useItemResource = (item: Item) => { 6export const useItemResource = (item: ToRef<Item>) => {
7 const galleryStore = useGalleryStore(); 7 const galleryStore = useGalleryStore();
8 const itemResourceUrl = computed(() => isDownloadableItem(item) ? galleryStore.resourceRoot + item.properties.resource : ''); 8 const itemResourceUrl = computed(() => isDownloadableItem(item.value) ? galleryStore.resourceRoot + item.value.properties.resource : '');
9 const thumbnailResourceUrl = computed(() => item.thumbnail ? galleryStore.resourceRoot + item.thumbnail.resource : ''); 9 const thumbnailResourceUrl = computed(() => item.value.thumbnail ? galleryStore.resourceRoot + item.value.thumbnail.resource : '');
10 10
11 return { 11 return {
12 itemResourceUrl, 12 itemResourceUrl,
diff --git a/viewer/src/views/ItemThumbnail.vue b/viewer/src/views/ItemThumbnail.vue
index bf33043..afd0e48 100644
--- a/viewer/src/views/ItemThumbnail.vue
+++ b/viewer/src/views/ItemThumbnail.vue
@@ -50,7 +50,7 @@ import { Item } from '@/@types/gallery';
50import { useNavigation } from '@/services/navigation'; 50import { useNavigation } from '@/services/navigation';
51import { useItemResource } from '@/services/ui/ldItemResourceUrl'; 51import { useItemResource } from '@/services/ui/ldItemResourceUrl';
52import VLazyImage from 'v-lazy-image'; 52import VLazyImage from 'v-lazy-image';
53import { computed, PropType, ref } from 'vue'; 53import { computed, PropType, ref, toRef } from 'vue';
54 54
55const props = defineProps({ 55const props = defineProps({
56 item: { type: Object as PropType<Item>, required: true }, 56 item: { type: Object as PropType<Item>, required: true },
@@ -60,7 +60,7 @@ const navigation = useNavigation();
60 60
61const loading = ref(false); 61const loading = ref(false);
62 62
63const { thumbnailResourceUrl } = useItemResource(props.item); 63const { thumbnailResourceUrl } = useItemResource(toRef(props, 'item'));
64 64
65const pictureStyle = computed(() => { 65const pictureStyle = computed(() => {
66 const resolution = props.item.thumbnail?.resolution ?? { width: 1, height: 1 }; 66 const resolution = props.item.thumbnail?.resolution ?? { width: 1, height: 1 };
diff --git a/viewer/src/views/item_handlers/AudioViewer.vue b/viewer/src/views/item_handlers/AudioViewer.vue
index bbba7e5..124d132 100644
--- a/viewer/src/views/item_handlers/AudioViewer.vue
+++ b/viewer/src/views/item_handlers/AudioViewer.vue
@@ -43,7 +43,7 @@
43import { AudioItem } from '@/@types/gallery'; 43import { AudioItem } from '@/@types/gallery';
44import { useNavigation } from '@/services/navigation'; 44import { useNavigation } from '@/services/navigation';
45import { useItemResource } from '@/services/ui/ldItemResourceUrl'; 45import { useItemResource } from '@/services/ui/ldItemResourceUrl';
46import { computed, PropType } from 'vue'; 46import { computed, PropType, toRef } from 'vue';
47import { useI18n } from 'vue-i18n'; 47import { useI18n } from 'vue-i18n';
48import ItemThumbnail from '../ItemThumbnail.vue'; 48import ItemThumbnail from '../ItemThumbnail.vue';
49 49
@@ -54,7 +54,7 @@ const props = defineProps({
54const { t } = useI18n(); 54const { t } = useI18n();
55const navigation = useNavigation(); 55const navigation = useNavigation();
56 56
57const { itemResourceUrl } = useItemResource(props.item); 57const { itemResourceUrl } = useItemResource(toRef(props, 'item'));
58const itemFileName = computed(() => navigation.getFileName(props.item)); 58const itemFileName = computed(() => navigation.getFileName(props.item));
59</script> 59</script>
60 60
diff --git a/viewer/src/views/item_handlers/DownloadViewer.vue b/viewer/src/views/item_handlers/DownloadViewer.vue
index 6562bee..c627d3e 100644
--- a/viewer/src/views/item_handlers/DownloadViewer.vue
+++ b/viewer/src/views/item_handlers/DownloadViewer.vue
@@ -41,7 +41,7 @@ import { DownloadableItem } from '@/@types/gallery';
41import { useNavigation } from '@/services/navigation'; 41import { useNavigation } from '@/services/navigation';
42import { useItemResource } from '@/services/ui/ldItemResourceUrl'; 42import { useItemResource } from '@/services/ui/ldItemResourceUrl';
43import { faFileDownload } from '@fortawesome/free-solid-svg-icons'; 43import { faFileDownload } from '@fortawesome/free-solid-svg-icons';
44import { computed, PropType } from 'vue'; 44import { computed, PropType, toRef } from 'vue';
45import { useI18n } from 'vue-i18n'; 45import { useI18n } from 'vue-i18n';
46 46
47const props = defineProps({ 47const props = defineProps({
@@ -52,7 +52,7 @@ const { t } = useI18n();
52const navigation = useNavigation(); 52const navigation = useNavigation();
53 53
54const itemFileName = computed(() => navigation.getFileName(props.item)); 54const itemFileName = computed(() => navigation.getFileName(props.item));
55const { itemResourceUrl } = useItemResource(props.item); 55const { itemResourceUrl } = useItemResource(toRef(props, 'item'));
56</script> 56</script>
57 57
58<style lang="scss" module> 58<style lang="scss" module>
diff --git a/viewer/src/views/item_handlers/MarkdownViewer.vue b/viewer/src/views/item_handlers/MarkdownViewer.vue
index d5ac7e2..574029f 100644
--- a/viewer/src/views/item_handlers/MarkdownViewer.vue
+++ b/viewer/src/views/item_handlers/MarkdownViewer.vue
@@ -33,13 +33,13 @@ import { LdMarkdown } from '@/components/async';
33import LdLoading from '@/components/LdLoading.vue'; 33import LdLoading from '@/components/LdLoading.vue';
34import { useLdFetch } from '@/services/api/ldFetch'; 34import { useLdFetch } from '@/services/api/ldFetch';
35import { useItemResource } from '@/services/ui/ldItemResourceUrl'; 35import { useItemResource } from '@/services/ui/ldItemResourceUrl';
36import { PropType } from 'vue'; 36import { PropType, toRef } from 'vue';
37 37
38const props = defineProps({ 38const props = defineProps({
39 item: { type: Object as PropType<MarkdownItem>, required: true }, 39 item: { type: Object as PropType<MarkdownItem>, required: true },
40}); 40});
41 41
42const { itemResourceUrl } = useItemResource(props.item); 42const { itemResourceUrl } = useItemResource(toRef(props, 'item'));
43const { isFetching, data, error } = useLdFetch(itemResourceUrl).text(); 43const { isFetching, data, error } = useLdFetch(itemResourceUrl).text();
44</script> 44</script>
45 45
diff --git a/viewer/src/views/item_handlers/PdfViewer.vue b/viewer/src/views/item_handlers/PdfViewer.vue
index 29f8033..a6ba273 100644
--- a/viewer/src/views/item_handlers/PdfViewer.vue
+++ b/viewer/src/views/item_handlers/PdfViewer.vue
@@ -36,13 +36,13 @@
36<script setup lang="ts"> 36<script setup lang="ts">
37import { PDFItem } from '@/@types/gallery'; 37import { PDFItem } from '@/@types/gallery';
38import { useItemResource } from '@/services/ui/ldItemResourceUrl'; 38import { useItemResource } from '@/services/ui/ldItemResourceUrl';
39import { PropType } from 'vue'; 39import { PropType, toRef } from 'vue';
40import DownloadViewer from './DownloadViewer.vue'; 40import DownloadViewer from './DownloadViewer.vue';
41 41
42const props = defineProps({ 42const props = defineProps({
43 item: { type: Object as PropType<PDFItem>, required: true }, 43 item: { type: Object as PropType<PDFItem>, required: true },
44}); 44});
45 45
46const { itemResourceUrl } = useItemResource(props.item); 46const { itemResourceUrl } = useItemResource(toRef(props, 'item'));
47 47
48</script> 48</script>
diff --git a/viewer/src/views/item_handlers/PictureViewer.vue b/viewer/src/views/item_handlers/PictureViewer.vue
index 10055fd..74b978f 100644
--- a/viewer/src/views/item_handlers/PictureViewer.vue
+++ b/viewer/src/views/item_handlers/PictureViewer.vue
@@ -46,7 +46,7 @@ import { useLdZoom } from '@/services/ui/ldZoom';
46import { useUiStore } from '@/store/uiStore'; 46import { useUiStore } from '@/store/uiStore';
47import { unrefElement, VueInstance } from '@vueuse/core'; 47import { unrefElement, VueInstance } from '@vueuse/core';
48import { createToast } from 'mosha-vue-toastify'; 48import { createToast } from 'mosha-vue-toastify';
49import { CSSProperties, onMounted, onUnmounted, PropType, ref } from 'vue'; 49import { CSSProperties, onMounted, onUnmounted, PropType, ref, toRef } from 'vue';
50import { useI18n } from 'vue-i18n'; 50import { useI18n } from 'vue-i18n';
51 51
52const props = defineProps({ 52const props = defineProps({
@@ -63,7 +63,7 @@ const loader = ref(false);
63const containerElement = ref<HTMLDivElement>(); 63const containerElement = ref<HTMLDivElement>();
64const imageElement = ref<VueInstance>(); 64const imageElement = ref<VueInstance>();
65 65
66const { itemResourceUrl, thumbnailResourceUrl } = useItemResource(props.item); 66const { itemResourceUrl, thumbnailResourceUrl } = useItemResource(toRef(props, 'item'));
67 67
68onMounted(() => { 68onMounted(() => {
69 generateSlowLoadingStyle(); 69 generateSlowLoadingStyle();
diff --git a/viewer/src/views/item_handlers/PlainTextViewer.vue b/viewer/src/views/item_han