Merge pull request #113 from pacien/scrolling-breadcrumbs

viewer: ldbreadcrumbs: implement horizontal scrolling

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 @@
     v-dragscroll
     class="scrollbar"
     :class="{'fit-to-screen': !$uiStore.fullscreen, 'original-size': $uiStore.fullscreen}"
-    @click="onClick"
-    @dragscrollstart="dragging=true"
+    @click.capture="e => dragScrollClickFix.onClickCapture(e)"
+    @click="$uiStore.toggleFullscreen()"
+    @dragscrollstart="dragScrollClickFix.onDragScrollStart()"
+    @dragscrollend="dragScrollClickFix.onDragScrollEnd()"
   >
     <v-lazy-image
       :src="pictureSrc()"
@@ -37,14 +39,15 @@
 
 <script lang="ts">
 import { Component, Vue, Prop } from "vue-property-decorator";
+import DragScrollClickFix from "@/dragscrollclickfix";
 
 @Component
 export default class LdPicture extends Vue {
   @Prop({ required: true }) readonly picture!: Gallery.Picture;
 
   readonly SLOW_LOADING_TIMEOUT_MS: number = 1500;
+  readonly dragScrollClickFix = new DragScrollClickFix();
 
-  dragging: boolean = false;
   slowLoadingStyle: string | null = null;
   loader: boolean = false;
   timer: NodeJS.Timeout | null = null;
@@ -74,11 +77,6 @@ export default class LdPicture extends Vue {
     if (this.picture.thumbnail)
       this.slowLoadingStyle = `background-image: url('${process.env.VUE_APP_DATA_URL}${this.picture.thumbnail.resource}');`;
   }
-
-  onClick() {
-    if (!this.dragging) this.$uiStore.toggleFullscreen();
-    this.dragging = false;
-  }
 }
 </script>