viewer: ldbreadcrumbs: implement horizontal scrolling

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

GitHub: closes #101, closes #102

4 files changed, 135 insertions, 25 deletions

diff --git a/viewer/src/assets/scss/theme.scss b/viewer/src/assets/scss/theme.scss
index 7972d48..cd6142a 100644
--- a/viewer/src/assets/scss/theme.scss
+++ b/viewer/src/assets/scss/theme.scss
@@ -57,6 +57,8 @@ $content-bgcolor: $palette-900;
 $toolbar-color: $palette-300;  // FIXME: should be named "scrollbar"
 $loader-color: $palette-800;
 $input-tag-delete-background-color: $palette-700;
+$breadcrumb-margins: 13px;
+$breadcrumb-overflow-mask-size: $breadcrumb-margins + 60px;
 
 
 // Layout
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>
 
diff --git a/viewer/src/dragscrollclickfix.ts b/viewer/src/dragscrollclickfix.ts
new file mode 100644
index 0000000..3db0b20
--- /dev/null
+++ b/viewer/src/dragscrollclickfix.ts
@@ -0,0 +1,51 @@
+/* ldgallery - A static generator which turns a collection of tagged
+--             pictures into a searchable web gallery.
+--
+-- Copyright (C) 2019-2020  Guillaume FOUET
+--
+-- This program is free software: you can redistribute it and/or modify
+-- it under the terms of the GNU Affero General Public License as
+-- published by the Free Software Foundation, either version 3 of the
+-- License, or (at your option) any later version.
+--
+-- This program is distributed in the hope that it will be useful,
+-- but WITHOUT ANY WARRANTY; without even the implied warranty of
+-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+-- GNU Affero General Public License for more details.
+--
+-- You should have received a copy of the GNU Affero General Public License
+-- along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+// https://github.com/donmbelembe/vue-dragscroll/issues/61
+export default class DragScrollClickFix {
+
+  readonly DRAG_DELAY = 100; // This is the minimal delay to consider a click to be a drag, mostly usefull for touch devices
+
+  timer: NodeJS.Timeout | null = null;
+  dragging: boolean = false;
+
+  onDragScrollStart() {
+    this.timer = setTimeout(() => this.onTimer(), this.DRAG_DELAY);
+  }
+
+  onTimer() {
+    this.timer = null;
+    this.dragging = true;
+  }
+