aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/components/LdPicture.vue
diff options
context:
space:
mode:
authorNotkea2020-01-31 18:09:33 +0100
committerGitHub2020-01-31 18:09:33 +0100
commit245fee3fe5abdc6ad14513ef6522446aba4c905a (patch)
tree749ec466c404499f19d571834262b87c14f0d0af /viewer/src/components/LdPicture.vue
parentd94b987463169b254ab69a79ddb58e5beccb0941 (diff)
parentbe8ec3edaed843f08dac3d2bf2f10f7247ef3d3a (diff)
downloadldgallery-245fee3fe5abdc6ad14513ef6522446aba4c905a.tar.gz
Merge pull request #68 from pacien/oz-viewer
Diffstat (limited to 'viewer/src/components/LdPicture.vue')
-rw-r--r--viewer/src/components/LdPicture.vue119
1 files changed, 119 insertions, 0 deletions
diff --git a/viewer/src/components/LdPicture.vue b/viewer/src/components/LdPicture.vue
new file mode 100644
index 0000000..5425a00
--- /dev/null
+++ b/viewer/src/components/LdPicture.vue
@@ -0,0 +1,119 @@
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 <div
22 v-dragscroll
23 class="scrollbar"
24 :class="{'fit-to-screen': !$uiStore.fullscreen, 'original-size': $uiStore.fullscreen}"
25 @click="onClick"
26 @dragscrollstart="dragging=true"
27 >
28 <v-lazy-image
29 :src="pictureSrc()"
30 :class="{'slow-loading': Boolean(slowLoadingStyle)}"
31 :style="slowLoadingStyle"
32 @load="clearTimer"
33 />
34 <b-loading :active="Boolean(slowLoadingStyle)" :is-full-page="false" class="ld-picture-loader" />
35 </div>
36</template>
37
38<script lang="ts">
39import { Component, Vue, Prop } from "vue-property-decorator";
40
41@Component
42export default class LdPicture extends Vue {
43 @Prop({ required: true }) readonly picture!: Gallery.Picture;
44
45 readonly SLOW_LOADING_TIMEOUT_MS: number = 1500;
46
47 dragging: boolean = false;
48 slowLoadingStyle: string | null = null;
49 timer: NodeJS.Timeout | null = null;
50
51 mounted() {
52 if (this.picture.thumbnail) this.timer = setTimeout(this.generateSlowLoadingStyle, this.SLOW_LOADING_TIMEOUT_MS);
53 }
54
55 destroyed() {
56 this.clearTimer();
57 }
58
59 clearTimer() {
60 if (this.timer) clearTimeout(this.timer);
61 this.timer = null;
62 this.slowLoadingStyle = null;
63 }
64
65 pictureSrc() {
66 return `${process.env.VUE_APP_DATA_URL}${this.picture.properties.resource}`;
67 }
68
69 generateSlowLoadingStyle() {
70 this.clearTimer();
71 this.slowLoadingStyle = `background-image: url('${process.env.VUE_APP_DATA_URL}${this.picture.thumbnail}');`;
72 }
73
74 onClick() {
75 if (!this.dragging) this.$uiStore.toggleFullscreen();
76 this.dragging = false;
77 }
78}
79</script>
80
81<style lang="scss">
82@import "@/assets/scss/theme.scss";
83
84.ld-picture-loader {
85 position: relative;
86 & .loading-background {
87 background: none !important;
88 }
89}
90img.slow-loading {
91 background-repeat: no-repeat;
92 background-position: center;
93 background-size: contain;
94 background-color: $content-bgcolor;
95 background-blend-mode: soft-light;
96 opacity: 1 !important;
97}
98.fit-to-screen {
99 display: flex;
100 justify-content: space-around;
101 height: 100%;
102 & > img {
103 object-fit: contain;
104 cursor: zoom-in;
105 }
106}
107.original-size {
108 display: block;
109 text-align: center;
110 cursor: grab;
111 height: 100%;
112 & > img {
113 max-width: unset;
114 max-height: unset;
115 object-fit: none;
116 cursor: zoom-out;
117 }
118}
119</style>