aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/components/LdPicture.vue
diff options
context:
space:
mode:
authorZero~Informatique2020-06-20 06:04:39 +0200
committerOzoneGrif2020-06-20 16:41:50 +0200
commit4393f8f25025ea600dae30be2d6ad9067496ba40 (patch)
treed58db0221909088ccb6bd6319a120ba6ab921d78 /viewer/src/components/LdPicture.vue
parent69dc0d20706ed41e5ecdbb77515066d8a7d7703b (diff)
downloadldgallery-4393f8f25025ea600dae30be2d6ad9067496ba40.tar.gz
viewer: component dispatch (no functional change)
a cleaner way to add new components to LdGallery
Diffstat (limited to 'viewer/src/components/LdPicture.vue')
-rw-r--r--viewer/src/components/LdPicture.vue121
1 files changed, 0 insertions, 121 deletions
diff --git a/viewer/src/components/LdPicture.vue b/viewer/src/components/LdPicture.vue
deleted file mode 100644
index 78829ec..0000000
--- a/viewer/src/components/LdPicture.vue
+++ /dev/null
@@ -1,121 +0,0 @@
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(picture.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 picture!: 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(this.containerElement, this.imageElement.$el as HTMLImageElement, this.picture.properties, 10, 1 / 5).install();
65 }
66
67 destroyed() {
68 this.clearSlowLoading();
69 }
70
71 clearSlowLoading() {
72 if (this.timer) clearTimeout(this.timer);
73 this.timer = null;
74 this.slowLoadingStyle = null;
75 this.loader = false;
76 }
77
78 pictureSrc(resource: string) {
79 return this.$galleryStore.resourceRoot + resource;
80 }
81
82 generateSlowLoadingStyle() {
83 this.clearSlowLoading();
84 this.loader = true;
85 if (this.picture.thumbnail) {
86 const url = this.pictureSrc(this.picture.thumbnail.resource);
87 this.slowLoadingStyle = `background-image: url('${url}');`;
88 }
89 }
90}
91</script>
92
93<style lang="scss">
94@import "~@/assets/scss/theme.scss";
95
96.ld-picture-container {
97 height: 100%;
98}
99
100.ld-picture-element {
101 max-width: unset;
102 max-height: unset;
103 cursor: grab;
104}
105
106.slow-loading {
107 background-repeat: no-repeat;
108 background-position: center;
109 background-size: contain;
110 background-color: $content-bgcolor;
111 background-blend-mode: soft-light;
112 opacity: 1 !important;
113}
114
115.ld-picture-loader {
116 position: relative;
117 & .loading-background {
118 background: none !important;
119 }
120}
121</style>