aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/components/item_handlers/LdPicture.vue
diff options
context:
space:
mode:
authorpacien2020-09-25 16:01:49 +0200
committerpacien2020-09-25 16:01:49 +0200
commite93f7b1eb84c083d67567115284c0002a3a7d5fc (patch)
tree8d373e8f7f571485e1330928f43b090ed004c525 /viewer/src/components/item_handlers/LdPicture.vue
parent8e3ac8fe44bebb38e1882ca7f06b8100078ad88d (diff)
parentfd542f75a1d94ee5f804d0925823276b97f38581 (diff)
downloadldgallery-e93f7b1eb84c083d67567115284c0002a3a7d5fc.tar.gz
Merge branch 'develop' for release v2.0v2.0
Diffstat (limited to 'viewer/src/components/item_handlers/LdPicture.vue')
-rw-r--r--viewer/src/components/item_handlers/LdPicture.vue127
1 files changed, 127 insertions, 0 deletions
diff --git a/viewer/src/components/item_handlers/LdPicture.vue b/viewer/src/components/item_handlers/LdPicture.vue
new file mode 100644
index 0000000..e652afc
--- /dev/null
+++ b/viewer/src/components/item_handlers/LdPicture.vue
@@ -0,0 +1,127 @@
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 { Component, Vue, Prop, Ref } from "vue-property-decorator";
46import LdZoom from "@/services/ldzoom";
47import DragScrollClickFix from "@/services/dragscrollclickfix";
48
49@Component
50export default class LdPicture extends Vue {
51 @Prop({ required: true }) readonly item!: Gallery.Picture;
52 @Ref() readonly containerElement!: HTMLDivElement;
53 @Ref() readonly imageElement!: Vue;
54
55 readonly SLOW_LOADING_TIMEOUT_MS: number = 1500;
56 readonly dragScrollClickFix = new DragScrollClickFix();
57
58 slowLoadingStyle: string | null = null;
59 loader: boolean = false;
60 timer: NodeJS.Timeout | null = null;
61
62 mounted() {
63 this.timer = setTimeout(this.generateSlowLoadingStyle, this.SLOW_LOADING_TIMEOUT_MS);
64 new LdZoom(
65 this.containerElement,
66 this.imageElement.$el as HTMLImageElement,
67 this.item.properties,
68 10,
69 1 / 5
70 ).install();
71 }
72
73 destroyed() {
74 this.clearSlowLoading();
75 }
76
77 clearSlowLoading() {
78 if (this.timer) clearTimeout(this.timer);
79 this.timer = null;
80 this.slowLoadingStyle = null;
81 this.loader = false;
82 }
83
84 pictureSrc(resource: string) {
85 return this.$galleryStore.resourceRoot + resource;
86 }
87
88 generateSlowLoadingStyle() {
89 this.clearSlowLoading();
90 this.loader = true;
91 if (this.item.thumbnail) {
92 const url = this.pictureSrc(this.item.thumbnail.resource);
93 this.slowLoadingStyle = `background-image: url('${url}');`;
94 }
95 }
96}
97</script>
98
99<style lang="scss">
100@import "~@/assets/scss/theme.scss";
101
102.ld-picture-container {
103 height: 100%;
104}
105
106.ld-picture-element {
107 max-width: unset;
108 max-height: unset;
109 cursor: grab;
110}
111
112.slow-loading {
113 background-repeat: no-repeat;
114 background-position: center;
115 background-size: contain;
116 background-color: $content-bgcolor;
117 background-blend-mode: soft-light;
118 opacity: 1 !important;
119}
120
121.ld-picture-loader {
122 position: relative;
123 & .loading-background {
124 background: none !important;
125 }
126}
127</style>