From b56fd91c3ecc61ccbe692a21e8eb0f378b4a90ca Mon Sep 17 00:00:00 2001 From: Zero~Informatique Date: Mon, 10 Feb 2020 05:41:16 +0100 Subject: viewer: ldbreadcrumbs: implement horizontal scrolling This comes with a fix for the DragScroll component for mobile devices. GitHub: closes #101, closes #102 --- viewer/src/assets/scss/theme.scss | 2 + viewer/src/components/LdBreadcrumb.vue | 93 +++++++++++++++++++++++++++------- viewer/src/components/LdPicture.vue | 14 +++-- viewer/src/dragscrollclickfix.ts | 51 +++++++++++++++++++ 4 files changed, 135 insertions(+), 25 deletions(-) create mode 100644 viewer/src/dragscrollclickfix.ts (limited to 'viewer/src') 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 @@ --> 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://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; + } + + onDragScrollEnd() { + if (this.timer) { + clearTimeout(this.timer); + this.timer = null; + } + } + + onClickCapture(e: MouseEvent) { + if (this.dragging) { + this.dragging = false; + e.preventDefault(); + e.stopPropagation(); + } + } +} \ No newline at end of file -- cgit v1.2.3