viewer: ldbreadcrumbs: implement horizontal scrolling

This comes with a fix for the DragScroll component for mobile devices.

GitHub: closes #101, closes #102

2 files changed, 82 insertions, 25 deletions

diff --git a/viewer/src/components/LdBreadcrumb.vue b/viewer/src/components/LdBreadcrumb.vue
index ebefc50..5f9695d 100644
--- a/viewer/src/components/LdBreadcrumb.vue
+++ b/viewer/src/components/LdBreadcrumb.vue
@@ -18,23 +18,62 @@
 -->
 
 <template>
-  <ul class="ld-breadcrumb">
-    <li v-for="(item,idx) in $galleryStore.currentItemPath" :key="item.path">
-      <router-link :to="item.path">
-        <fa-icon :icon="getIcon(item)" size="lg" />
-        {{item.title}}
-      </router-link>
-      <fa-icon v-if="(idx+1) < $galleryStore.currentItemPath.length" icon="angle-right" />
-    </li>
-  </ul>
+  <div
+    ref="breadcrumb"
+    v-dragscroll
+    class="ld-breadcrumb flex scrollbar"
+    @click.capture="e => dragScrollClickFix.onClickCapture(e)"
+    @dragscrollstart="dragScrollClickFix.onDragScrollStart()"
+    @dragscrollend="dragScrollClickFix.onDragScrollEnd()"
+    @dragscrollmove="checkForOverflowMask"
+  >
+    <div v-show="overflowMask" class="ld-breadcrumb-overflow-mask"></div>
+    <ul class="ld-breadcrumb">
+      <li v-for="(item,idx) in $galleryStore.currentItemPath" :key="item.path">
+        <fa-icon v-if="idx > 0" icon="angle-right" class="disabled" />
+        <router-link :to="item.path" class="link">
+          <fa-icon :icon="getIcon(item)" size="lg" />
+          {{item.title}}
+        </router-link>
+      </li>
+    </ul>
+  </div>
 </template>
 
 <script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
+import { Component, Vue, Ref, Watch } from "vue-property-decorator";
+import DragScrollClickFix from "@/dragscrollclickfix";
 import Tools from "@/tools";
 
 @Component
 export default class LdBreadcrumb extends Vue {
+  @Ref() readonly breadcrumb!: HTMLUListElement;
+
+  readonly dragScrollClickFix = new DragScrollClickFix();
+
+  dragging: boolean = false;
+  overflowMask: boolean = false;
+
+  mounted() {
+    window.addEventListener("resize", this.checkForOverflowMask);
+  }
+
+  destroyed() {
+    window.removeEventListener("resize", this.checkForOverflowMask);
+  }
+
+  checkForOverflowMask() {
+    this.overflowMask = this.breadcrumb.scrollLeft > 1;
+  }
+
+  @Watch("$galleryStore.currentItemPath")
+  changedCurrentItemPath() {
+    this.$nextTick(() => {
+      this.breadcrumb.scrollLeft = this.breadcrumb.scrollWidth;
+      this.checkForOverflowMask();
+    });
+  }
+
   getIcon(item: Gallery.Item) {
     return Tools.getIcon(item);
   }
@@ -44,16 +83,36 @@ export default class LdBreadcrumb extends Vue {
 <style lang="scss">
 @import "@/assets/scss/theme.scss";
 
+.ld-breadcrumb-overflow-mask {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    to right,
+    rgba($panel-top-bgcolor, 1) $breadcrumb-margins,
+    rgba($panel-top-bgcolor, 0) $breadcrumb-overflow-mask-size
+  );
+  pointer-events: none;
+}
+
 .ld-breadcrumb {
-  padding-left: 15px;
-  display: flex;
-  list-style: none;
-  margin: 5px;
+  ul {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    white-space: nowrap;
+  }
   a {
-    margin-right: 5px;
+    margin-left: $breadcrumb-margins;
+  }
+  li {
+    margin-right: $breadcrumb-margins;
   }
-  li:not(:first-child) {
-    margin-left: 10px;
+  &.scrollbar {
+    scrollbar-width: none;
+    &::-webkit-scrollbar {
+      height: 0;
+    }
   }
 }
 </style>
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>