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.

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"
+            {{draggable
               didStartDrag=link.didStartDrag
               didEndDrag=link.didEndDrag
               dragMove=link.dragMove
-              )
-            )}}
+            }}
           />
         {{else}}
           <Sidebar::SectionLink
@@ -37,15 +33,11 @@
             @prefixType="icon"
             @prefixValue={{link.icon}}
             @class={{link.linkDragCss}}
-            {{(if
-              this.canReorder
-              (modifier
-                "draggable"
+            {{draggable
               didStartDrag=link.didStartDrag
               didEndDrag=link.didEndDrag
               dragMove=link.dragMove
-              )
-            )}}
+            }}
           />
         {{/if}}
       {{/each}}

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) => {

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,12 +35,17 @@ export default class SectionLink {
   }
   delayedStart(event) {
     if (this.willDrag) {
-      this.mouseY = event.y;
+      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;
       }
     }
+  }
 
   @bind
   didEndDrag() {
@@ -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
+    );
+  }
 }

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

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;
 

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;
+    }
+  }
+}