From f5fadc31499bb01effc0a70350b4c2acc6ce9802 Mon Sep 17 00:00:00 2001 From: Krzysztof Kotlarek Date: Wed, 29 Mar 2023 08:57:04 +1100 Subject: [PATCH] FIX: reorder custom sidebar links on touch screen (#20856) Previously, reorder on touch screens was disabled https://github.com/discourse/discourse/pull/20769. This PR enables it again. However, link has to be hold for 300 ms to enable drag&drop. Otherwise, normal scroll is performed. --- .../sidebar/user/custom-sections.hbs | 28 +++++++------------ .../sidebar/user/custom-sections.js | 6 ---- .../components/sidebar/user/section-link.js | 27 ++++++++++++++---- .../components/topic-timeline/container.js | 6 ++-- .../discourse/app/modifiers/draggable.js | 2 -- .../common/base/sidebar-custom-section.scss | 16 +++++++++++ 6 files changed, 51 insertions(+), 34 deletions(-) diff --git a/app/assets/javascripts/discourse/app/components/sidebar/user/custom-sections.hbs b/app/assets/javascripts/discourse/app/components/sidebar/user/custom-sections.hbs index da43c6652ec..67453e08bba 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/user/custom-sections.hbs +++ b/app/assets/javascripts/discourse/app/components/sidebar/user/custom-sections.hbs @@ -17,15 +17,11 @@ @prefixValue={{link.icon}} @href={{link.value}} @class={{link.linkDragCss}} - {{(if - this.canReorder - (modifier - "draggable" - didStartDrag=link.didStartDrag - didEndDrag=link.didEndDrag - dragMove=link.dragMove - ) - )}} + {{draggable + didStartDrag=link.didStartDrag + didEndDrag=link.didEndDrag + dragMove=link.dragMove + }} /> {{else}} {{/if}} {{/each}} diff --git a/app/assets/javascripts/discourse/app/components/sidebar/user/custom-sections.js b/app/assets/javascripts/discourse/app/components/sidebar/user/custom-sections.js index ab8ee860d50..3562777db9e 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/user/custom-sections.js +++ b/app/assets/javascripts/discourse/app/components/sidebar/user/custom-sections.js @@ -28,12 +28,6 @@ export default class SidebarUserCustomSections extends Component { }); } - get canReorder() { - return document - .getElementsByTagName("html")[0] - .classList.contains("no-touch"); - } - @bind _refresh() { return ajax("/sidebar_sections.json", {}).then((json) => { diff --git a/app/assets/javascripts/discourse/app/components/sidebar/user/section-link.js b/app/assets/javascripts/discourse/app/components/sidebar/user/section-link.js index 0961e9b9ceb..a15608d7f5e 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/user/section-link.js +++ b/app/assets/javascripts/discourse/app/components/sidebar/user/section-link.js @@ -25,7 +25,8 @@ export default class SectionLink { @bind didStartDrag(event) { // 0 represents left button of the mouse - if (event.button === 0) { + if (event.button === 0 || event.targetTouches) { + this.startMouseY = this.#calcMouseY(event); this.willDrag = true; discourseLater(() => { this.delayedStart(event); @@ -34,10 +35,15 @@ export default class SectionLink { } delayedStart(event) { if (this.willDrag) { - this.mouseY = event.y; - this.linkDragCss = "drag"; - this.section.disable(); - this.drag = true; + const currentMouseY = this.#calcMouseY(event); + if (currentMouseY === this.startMouseY) { + event.stopPropagation(); + event.preventDefault(); + this.mouseY = this.#calcMouseY(event); + this.linkDragCss = "drag"; + this.section.disable(); + this.drag = true; + } } } @@ -53,10 +59,13 @@ export default class SectionLink { @bind dragMove(event) { + this.startMouseY = this.#calcMouseY(event); if (!this.drag) { return; } - const currentMouseY = event.y; + event.stopPropagation(); + event.preventDefault(); + const currentMouseY = this.#calcMouseY(event); const distance = currentMouseY - this.mouseY; if (!this.linkHeight) { this.linkHeight = document.getElementsByClassName( @@ -76,4 +85,10 @@ export default class SectionLink { } } } + + #calcMouseY(event) { + return Math.round( + event.targetTouches ? event.targetTouches[0].clientY : event.y + ); + } } diff --git a/app/assets/javascripts/discourse/app/components/topic-timeline/container.js b/app/assets/javascripts/discourse/app/components/topic-timeline/container.js index 82cf2e84cc4..3d9c95fa108 100644 --- a/app/assets/javascripts/discourse/app/components/topic-timeline/container.js +++ b/app/assets/javascripts/discourse/app/components/topic-timeline/container.js @@ -287,8 +287,10 @@ export default class TopicTimelineScrollArea extends Component { } @bind - dragMove(e) { - this.updatePercentage(e); + dragMove(event) { + event.stopPropagation(); + event.preventDefault(); + this.updatePercentage(event); } @bind diff --git a/app/assets/javascripts/discourse/app/modifiers/draggable.js b/app/assets/javascripts/discourse/app/modifiers/draggable.js index 3008cc6b6a3..dfc4850019b 100644 --- a/app/assets/javascripts/discourse/app/modifiers/draggable.js +++ b/app/assets/javascripts/discourse/app/modifiers/draggable.js @@ -29,8 +29,6 @@ export default class DraggableModifier extends Modifier { @bind dragMove(e) { - e.stopPropagation(); - e.preventDefault(); if (!this.hasStarted) { this.hasStarted = true; diff --git a/app/assets/stylesheets/common/base/sidebar-custom-section.scss b/app/assets/stylesheets/common/base/sidebar-custom-section.scss index 204f0695763..3aebcc91251 100644 --- a/app/assets/stylesheets/common/base/sidebar-custom-section.scss +++ b/app/assets/stylesheets/common/base/sidebar-custom-section.scss @@ -18,6 +18,15 @@ cursor: move; } + a { + -webkit-touch-callout: none !important; + -webkit-user-select: none !important; + -moz-user-select: none !important; + -ms-user-select: none !important; + -o-user-select: none !important; + user-select: none; + } + .sidebar-section-wrapper.disabled { a { pointer-events: none; @@ -38,3 +47,10 @@ } } } +.discourse-touch { + .sidebar-custom-sections { + a:hover { + background: none !important; + } + } +}