diff options
Diffstat (limited to 'viewer/src/components')
-rw-r--r-- | viewer/src/components/LdPicture.vue | 11 |
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"; | |||
49 | export default class LdPicture extends Vue { | 50 | export 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; |