aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorZero~Informatique2020-02-10 05:41:16 +0100
committerpacien2020-02-10 14:56:47 +0100
commitb56fd91c3ecc61ccbe692a21e8eb0f378b4a90ca (patch)
tree9215394932855b94e480aeeb94ced45cdd8b1f0c
parente561958ba30d88cb5a3413f3076e12a05d41a006 (diff)
downloadldgallery-b56fd91c3ecc61ccbe692a21e8eb0f378b4a90ca.tar.gz
viewer: ldbreadcrumbs: implement horizontal scrolling
This comes with a fix for the DragScroll component for mobile devices. GitHub: closes #101, closes #102
-rw-r--r--viewer/src/assets/scss/theme.scss2
-rw-r--r--viewer/src/components/LdBreadcrumb.vue93
-rw-r--r--viewer/src/components/LdPicture.vue14
-rw-r--r--viewer/src/dragscrollclickfix.ts51
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;
57$toolbar-color: $palette-300; // FIXME: should be named "scrollbar" 57$toolbar-color: $palette-300; // FIXME: should be named "scrollbar"
58$loader-color: $palette-800; 58$loader-color: $palette-800;
59$input-tag-delete-background-color: $palette-700; 59$input-tag-delete-background-color: $palette-700;
60$breadcrumb-margins: 13px;
61$breadcrumb-overflow-mask-size: $breadcrumb-margins + 60px;
60 62
61 63
62// Layout 64// 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 @@
18--> 18-->
19 19
20<template> 20<template>
21 <ul class="ld-breadcrumb"> 21 <div
22 <li v-for="(item,idx) in $galleryStore.currentItemPath" :key="item.path"> 22 ref="breadcrumb"
23 <router-link :to="item.path"> 23 v-dragscroll
24 <fa-icon :icon="getIcon(item)" size="lg" /> 24 class="ld-breadcrumb flex scrollbar"
25 {{item.title}} 25 @click.capture="e => dragScrollClickFix.onClickCapture(e)"
26 </router-link> 26 @dragscrollstart="dragScrollClickFix.onDragScrollStart()"
27 <fa-icon v-if="(idx+1) < $galleryStore.currentItemPath.length" icon="angle-right" /> 27 @dragscrollend="dragScrollClickFix.onDragScrollEnd()"
28 </li> 28 @dragscrollmove="checkForOverflowMask"
29 </ul> 29 >
30 <div v-show="overflowMask" class="ld-breadcrumb-overflow-mask"></div>
31 <ul class="ld-breadcrumb">
32 <li v-for="(item,idx) in $galleryStore.currentItemPath" :key="item.path">
33 <fa-icon v-if="idx > 0" icon="angle-right" class="disabled" />
34 <router-link :to="item.path" class="link">
35 <fa-icon :icon="getIcon(item)" size="lg" />
36 {{item.title}}
37 </router-link>
38 </li>
39 </ul>
40 </div>
30</template> 41</template>
31 42
32<script lang="ts"> 43<script lang="ts">
33import { Component, Vue } from "vue-property-decorator"; 44import { Component, Vue, Ref, Watch } from "vue-property-decorator";
45import DragScrollClickFix from "@/dragscrollclickfix";
34import Tools from "@/tools"; 46import Tools from "@/tools";
35 47
36@Component 48@Component
37export default class LdBreadcrumb extends Vue { 49export default class LdBreadcrumb extends Vue {
50 @Ref() readonly breadcrumb!: HTMLUListElement;
51
52 readonly dragScrollClickFix = new DragScrollClickFix();
53
54 dragging: boolean = false;
55 overflowMask: boolean = false;
56
57 mounted() {
58 window.addEventListener("resize", this.checkForOverflowMask);
59 }
60
61 destroyed() {
62 window.removeEventListener("resize", this.checkForOverflowMask);
63 }
64
65 checkForOverflowMask() {
66 this.overflowMask = this.breadcrumb.scrollLeft > 1;
67 }
68
69 @Watch("$galleryStore.currentItemPath")
70 changedCurrentItemPath() {
71 this.$nextTick(() => {
72 this.breadcrumb.scrollLeft = this.breadcrumb.scrollWidth;
73 this.checkForOverflowMask();
74 });
75 }
76
38 getIcon(item: Gallery.Item) { 77 getIcon(item: Gallery.Item) {
39 return Tools.getIcon(item); 78 return Tools.getIcon(item);
40 } 79 }
@@ -44,16 +83,36 @@ export default class LdBreadcrumb extends Vue {
44<style lang="scss"> 83<style lang="scss">
45@import "@/assets/scss/theme.scss"; 84@import "@/assets/scss/theme.scss";
46 85
86.ld-breadcrumb-overflow-mask {
87 position: absolute;
88 width: 100%;
89 height: 100%;
90 background: linear-gradient(
91 to right,
92 rgba($panel-top-bgcolor, 1) $breadcrumb-margins,
93 rgba($panel-top-bgcolor, 0) $breadcrumb-overflow-mask-size
94 );
95 pointer-events: none;
96}
97
47.ld-breadcrumb { 98.ld-breadcrumb {
48 padding-left: 15px; 99 ul {
49 display: flex; 100 display: flex;
50 list-style: none; 101 height: 100%;
51 margin: 5px; 102 align-items: center;
103 white-space: nowrap;
104 }
52 a { 105 a {
53 margin-right: 5px; 106 margin-left: $breadcrumb-margins;
107 }
108 li {
109 margin-right: $breadcrumb-margins;
54 } 110 }
55 li:not(:first-child) { 111 &.scrollbar {
56 margin-left: 10px; 112 scrollbar-width: none;
113 &::-webkit-scrollbar {
114 height: 0;
115 }
57 } 116 }
58} 117}
59</style> 118</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 @@
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
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 @@
1/* ldgallery - A static generator which turns a collection of tagged
2-- pictures into a searchable web gallery.
3--
4-- Copyright (C) 2019-2020 Guillaume FOUET
5--
6-- This program is free software: you can redistribute it and/or modify
7-- it under the terms of the GNU Affero General Public License as
8-- published by the Free Software Foundation, either version 3 of the
9-- License, or (at your option) any later version.
10--
11-- This program is distributed in the hope that it will be useful,
12-- but WITHOUT ANY WARRANTY; without even the implied warranty of
13-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
14-- GNU Affero General Public License for more details.
15--
16-- You should have received a copy of the GNU Affero General Public License
17-- along with this program. If not, see <https://www.gnu.org/licenses/>.
18*/
19
20// https://github.com/donmbelembe/vue-dragscroll/issues/61
21export default class DragScrollClickFix {
22
23 readonly DRAG_DELAY = 100; // This is the minimal delay to consider a click to be a drag, mostly usefull for touch devices
24
25 timer: NodeJS.Timeout | null = null;
26 dragging: boolean = false;
27
28 onDragScrollStart() {
29 this.timer = setTimeout(() => this.onTimer(), this.DRAG_DELAY);
30 }
31
32 onTimer() {
33 this.timer = null;
34 this.dragging = true;
35 }
36
37<