aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/components/LdPicture.vue
diff options
context:
space:
mode:
Diffstat (limited to 'viewer/src/components/LdPicture.vue')
-rw-r--r--viewer/src/components/LdPicture.vue11
1 files changed, 4 insertions, 7 deletions
diff --git a/viewer/src/components/LdPicture.vue b/viewer/src/components/LdPicture.vue
index 622165d..de46bcb 100644
--- a/viewer/src/components/LdPicture.vue
+++ b/viewer/src/components/LdPicture.vue
@@ -18,6 +18,7 @@
18--> 18-->
19 19
20<template> 20<template>
21 <!-- FIXME: v-dragscroll interferes with pinch-to-zoom -->
21 <div 22 <div
22 ref="containerElement" 23 ref="containerElement"
23 v-dragscroll 24 v-dragscroll
@@ -34,7 +35,7 @@
34 class="ld-picture-element" 35 class="ld-picture-element"
35 :class="{'slow-loading': Boolean(slowLoadingStyle)}" 36 :class="{'slow-loading': Boolean(slowLoadingStyle)}"
36 :style="slowLoadingStyle" 37 :style="slowLoadingStyle"
37 @load="lazyImageLoaded" 38 @load="clearSlowLoading"
38 /> 39 />
39 <b-loading :active="loader" :is-full-page="false" class="ld-picture-loader" /> 40 <b-loading :active="loader" :is-full-page="false" class="ld-picture-loader" />
40 </div> 41 </div>
@@ -49,7 +50,7 @@ import DragScrollClickFix from "@/services/dragscrollclickfix";
49export default class LdPicture extends Vue { 50export default class LdPicture extends Vue {
50 @Prop({ required: true }) readonly picture!: Gallery.Picture; 51 @Prop({ required: true }) readonly picture!: Gallery.Picture;
51 @Ref() readonly containerElement!: HTMLDivElement; 52 @Ref() readonly containerElement!: HTMLDivElement;
52 @Ref() readonly imageElement!: any; // FIXME: no typedef for v-lazy-image 53 @Ref() readonly imageElement!: Vue;
53 54
54 readonly SLOW_LOADING_TIMEOUT_MS: number = 1500; 55 readonly SLOW_LOADING_TIMEOUT_MS: number = 1500;
55 readonly dragScrollClickFix = new DragScrollClickFix(); 56 readonly dragScrollClickFix = new DragScrollClickFix();
@@ -60,17 +61,13 @@ export default class LdPicture extends Vue {
60 61
61 mounted() { 62 mounted() {
62 this.timer = setTimeout(this.generateSlowLoadingStyle, this.SLOW_LOADING_TIMEOUT_MS); 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();
63 } 65 }
64 66
65 destroyed() { 67 destroyed() {
66 this.clearSlowLoading(); 68 this.clearSlowLoading();
67 } 69 }
68 70
69 lazyImageLoaded() {
70 this.clearSlowLoading();
71 new LdZoom(this.containerElement, this.imageElement.$el, 10, 1 / 5).install();
72 }
73
74 clearSlowLoading() { 71 clearSlowLoading() {
75 if (this.timer) clearTimeout(this.timer); 72 if (this.timer) clearTimeout(this.timer);
76 this.timer = null; 73 this.timer = null;