aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/components/item_handlers/LdPictureViewer.vue
diff options
context:
space:
mode:
Diffstat (limited to 'viewer/src/components/item_handlers/LdPictureViewer.vue')
-rw-r--r--viewer/src/components/item_handlers/LdPictureViewer.vue128
1 files changed, 128 insertions, 0 deletions
diff --git a/viewer/src/components/item_handlers/LdPictureViewer.vue b/viewer/src/components/item_handlers/LdPictureViewer.vue
new file mode 100644
index 0000000..003ffe9
--- /dev/null
+++ b/viewer/src/components/item_handlers/LdPictureViewer.vue
@@ -0,0 +1,128 @@
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 <!-- FIXME: v-dragscroll interferes with pinch-to-zoom -->
22 <div
23 ref="containerElement"
24 v-dragscroll
25 class="scrollbar ld-picture-container"
26 @click.capture="e => dragScrollClickFix.onClickCapture(e)"
27 @dblclick="$uiStore.toggleFullscreen()"
28 @dragstart.prevent
29 @dragscrollstart="dragScrollClickFix.onDragScrollStart()"
30 @dragscrollend="dragScrollClickFix.onDragScrollEnd()"
31 >
32 <v-lazy-image
33 ref="imageElement"
34 :src="pictureSrc(item.properties.resource)"
35 class="ld-picture-element"
36 :class="{ 'slow-loading': Boolean(slowLoadingStyle) }"
37 :style="slowLoadingStyle"
38 @load="clearSlowLoading"
39 />
40 <b-loading :active="loader" :is-full-page="false" class="ld-picture-loader" />
41 </div>
42</template>
43
44<script lang="ts">
45import { PictureItem } from "@/@types/gallery";
46import DragScrollClickFix from "@/services/dragscrollclickfix";
47import LdZoom from "@/services/ldzoom";
48import { Component, Prop, Ref, Vue } from "vue-property-decorator";
49
50@Component
51export default class LdPictureViewer extends Vue {
52 @Prop({ required: true }) readonly item!: PictureItem;
53 @Ref() readonly containerElement!: HTMLDivElement;
54 @Ref() readonly imageElement!: Vue;
55
56 readonly SLOW_LOADING_TIMEOUT_MS: number = 1500;
57 readonly dragScrollClickFix = new DragScrollClickFix();
58
59 slowLoadingStyle: string | null = null;
60 loader: boolean = false;
61 timer: NodeJS.Timeout | null = null;
62
63 mounted() {
64 this.timer = setTimeout(this.generateSlowLoadingStyle, this.SLOW_LOADING_TIMEOUT_MS);
65 new LdZoom(
66 this.containerElement,
67 this.imageElement.$el as HTMLImageElement,
68 this.item.properties,
69 10,
70 1 / 5
71 ).install();
72 }
73
74 destroyed() {
75 this.clearSlowLoading();
76 }
77
78 clearSlowLoading() {
79 if (this.timer) clearTimeout(this.timer);
80 this.timer = null;
81 this.slowLoadingStyle = null;
82 this.loader = false;
83 }
84
85 pictureSrc(resource: string) {
86 return this.$galleryStore.resourceRoot + resource;
87 }
88
89 generateSlowLoadingStyle() {
90 this.clearSlowLoading();
91 this.loader = true;
92 if (this.item.thumbnail) {
93 const url = this.pictureSrc(this.item.thumbnail.resource);
94 this.slowLoadingStyle = `background-image: url('${url}');`;
95 }
96 }
97}
98</script>
99
100<style lang="scss">
101@import "~@/assets/scss/theme.scss";
102
103.ld-picture-container {
104 height: 100%;
105}
106
107.ld-picture-element {
108 max-width: unset;
109 max-height: unset;
110 cursor: grab;
111}
112
113.slow-loading {
114 background-repeat: no-repeat;
115 background-position: center;
116 background-size: contain;
117 background-color: $content-bgcolor;
118 background-blend-mode: soft-light;
119 opacity: 1 !important;
120}
121
122.ld-picture-loader {
123 position: relative;
124 & .loading-background {
125 background: none !important;
126 }
127}
128</style>