aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/components/LdPicture.vue
diff options
context:
space:
mode:
authorOzoneGrif2020-02-10 15:11:25 +0100
committerGitHub2020-02-10 15:11:25 +0100
commit6ee5926ceb928aa04df5d0b47390ff10376a6d01 (patch)
treeec281f000348f52b9c98b192200154f68492f4df /viewer/src/components/LdPicture.vue
parentff4917dd2c0f510c56edeeca434186110bf76b3c (diff)
parentb56fd91c3ecc61ccbe692a21e8eb0f378b4a90ca (diff)
downloadldgallery-6ee5926ceb928aa04df5d0b47390ff10376a6d01.tar.gz
Merge pull request #113 from pacien/scrolling-breadcrumbs
viewer: ldbreadcrumbs: implement horizontal scrolling
Diffstat (limited to 'viewer/src/components/LdPicture.vue')
-rw-r--r--viewer/src/components/LdPicture.vue14
1 files changed, 6 insertions, 8 deletions
diff --git a/viewer/src/components/LdPicture.vue b/viewer/src/components/LdPicture.vue
index 154c4bd..8a9a08e 100644
--- a/viewer/src/components/LdPicture.vue
+++ b/viewer/src/components/LdPicture.vue
@@ -22,8 +22,10 @@
22 v-dragscroll 22 v-dragscroll
23 class="scrollbar" 23 class="scrollbar"
24 :class="{'fit-to-screen': !$uiStore.fullscreen, 'original-size': $uiStore.fullscreen}" 24 :class="{'fit-to-screen': !$uiStore.fullscreen, 'original-size': $uiStore.fullscreen}"
25 @click="onClick" 25 @click.capture="e => dragScrollClickFix.onClickCapture(e)"
26 @dragscrollstart="dragging=true" 26 @click="$uiStore.toggleFullscreen()"
27 @dragscrollstart="dragScrollClickFix.onDragScrollStart()"
28 @dragscrollend="dragScrollClickFix.onDragScrollEnd()"
27 > 29 >
28 <v-lazy-image 30 <v-lazy-image
29 :src="pictureSrc()" 31 :src="pictureSrc()"
@@ -37,14 +39,15 @@
37 39
38<script lang="ts"> 40<script lang="ts">
39import { Component, Vue, Prop } from "vue-property-decorator"; 41import { Component, Vue, Prop } from "vue-property-decorator";
42import DragScrollClickFix from "@/dragscrollclickfix";
40 43
41@Component 44@Component
42export default class LdPicture extends Vue { 45export default class LdPicture extends Vue {
43 @Prop({ required: true }) readonly picture!: Gallery.Picture; 46 @Prop({ required: true }) readonly picture!: Gallery.Picture;
44 47
45 readonly SLOW_LOADING_TIMEOUT_MS: number = 1500; 48 readonly SLOW_LOADING_TIMEOUT_MS: number = 1500;
49 readonly dragScrollClickFix = new DragScrollClickFix();
46 50
47 dragging: boolean = false;
48 slowLoadingStyle: string | null = null; 51 slowLoadingStyle: string | null = null;
49 loader: boolean = false; 52 loader: boolean = false;
50 timer: NodeJS.Timeout | null = null; 53 timer: NodeJS.Timeout | null = null;
@@ -74,11 +77,6 @@ export default class LdPicture extends Vue {
74 if (this.picture.thumbnail) 77 if (this.picture.thumbnail)
75 this.slowLoadingStyle = `background-image: url('${process.env.VUE_APP_DATA_URL}${this.picture.thumbnail.resource}');`; 78 this.slowLoadingStyle = `background-image: url('${process.env.VUE_APP_DATA_URL}${this.picture.thumbnail.resource}');`;
76 } 79 }
77
78 onClick() {
79 if (!this.dragging) this.$uiStore.toggleFullscreen();
80 this.dragging = false;
81 }
82} 80}
83</script> 81</script>
84 82