From a48f449c5905b35f014e9e409428821e79fc7bb9 Mon Sep 17 00:00:00 2001
From: itsjohncs <johnsullivan.pem@gmail.com>
Date: Sun, 10 Oct 2021 00:50:54 -0700
Subject: [PATCH 1/2] Allow network list reordering via touch.

Users can now long touch and drag a channel or network to change its
ordering in the sidebar.
---
 client/components/ChannelWrapper.vue | 14 ++++---
 client/components/NetworkList.vue    | 56 ++++++++++++++++++----------
 client/css/style.css                 | 19 +++++++---
 3 files changed, 59 insertions(+), 30 deletions(-)

diff --git a/client/components/ChannelWrapper.vue b/client/components/ChannelWrapper.vue
index 62dcb297..aa3e507a 100644
--- a/client/components/ChannelWrapper.vue
+++ b/client/components/ChannelWrapper.vue
@@ -82,11 +82,15 @@ export default {
 			this.$root.switchToChannel(this.channel);
 		},
 		openContextMenu(event) {
-			eventbus.emit("contextmenu:channel", {
-				event: event,
-				channel: this.channel,
-				network: this.network,
-			});
+			// events.buttons will be 0 when the event is caused by a long
+			// touch on Android.
+			if (event.buttons !== 0) {
+				eventbus.emit("contextmenu:channel", {
+					event: event,
+					channel: this.channel,
+					network: this.network,
+				});
+			}
 		},
 	},
 };
diff --git a/client/components/NetworkList.vue b/client/components/NetworkList.vue
index 3b2de503..97b7616c 100644
--- a/client/components/NetworkList.vue
+++ b/client/components/NetworkList.vue
@@ -56,17 +56,18 @@
 		<Draggable
 			v-else
 			:list="$store.state.networks"
-			:filter="isCurrentlyInTouch"
-			:prevent-on-filter="false"
+			:delay="LONG_TOUCH_DURATION"
+			:delay-on-touch-only="true"
+			:touch-start-threshold="10"
 			handle=".channel-list-item[data-type='lobby']"
 			draggable=".network"
 			ghost-class="ui-sortable-ghost"
-			drag-class="ui-sortable-dragged"
+			drag-class="ui-sortable-dragging"
 			group="networks"
 			class="networks"
 			@change="onNetworkSort"
-			@start="onDragStart"
-			@end="onDragEnd"
+			@choose="onDraggableChoose"
+			@unchoose="onDraggableUnchoose"
 		>
 			<div
 				v-for="network in $store.state.networks"
@@ -100,15 +101,16 @@
 				<Draggable
 					draggable=".channel-list-item"
 					ghost-class="ui-sortable-ghost"
-					drag-class="ui-sortable-dragged"
+					drag-class="ui-sortable-dragging"
 					:group="network.uuid"
-					:filter="isCurrentlyInTouch"
-					:prevent-on-filter="false"
 					:list="network.channels"
+					:delay="LONG_TOUCH_DURATION"
+					:delay-on-touch-only="true"
+					:touch-start-threshold="10"
 					class="channels"
 					@change="onChannelSort"
-					@start="onDragStart"
-					@end="onDragEnd"
+					@choose="onDraggableChoose"
+					@unchoose="onDraggableUnchoose"
 				>
 					<template v-for="(channel, index) in network.channels">
 						<Channel
@@ -246,6 +248,10 @@ export default {
 			this.setActiveSearchItem();
 		},
 	},
+	created() {
+		// Number of milliseconds a touch has to last to be considered long
+		this.LONG_TOUCH_DURATION = 500;
+	},
 	mounted() {
 		Mousetrap.bind("alt+shift+right", this.expandNetwork);
 		Mousetrap.bind("alt+shift+left", this.collapseNetwork);
@@ -279,16 +285,6 @@ export default {
 
 			return false;
 		},
-		isCurrentlyInTouch(e) {
-			// TODO: Implement a way to sort on touch devices
-			return e.pointerType !== "mouse";
-		},
-		onDragStart(e) {
-			e.target.classList.add("ui-sortable-active");
-		},
-		onDragEnd(e) {
-			e.target.classList.remove("ui-sortable-active");
-		},
 		onNetworkSort(e) {
 			if (!e.moved) {
 				return;
@@ -316,6 +312,26 @@ export default {
 				order: channel.network.channels.map((c) => c.id),
 			});
 		},
+		isTouchEvent(event) {
+			// This is the same way Sortable.js detects a touch event. See
+			// SortableJS/Sortable@daaefeda:/src/Sortable.js#L465
+			return (
+				(event.touches && event.touches[0]) ||
+				(event.pointerType && event.pointerType === "touch")
+			);
+		},
+		onDraggableChoose(event) {
+			if (this.isTouchEvent(event.originalEvent)) {
+				// onDrag is only triggered when the user actually moves the
+				// dragged object but onChoose is triggered as soon as the
+				// item is eligible for dragging. This gives us an opportunity
+				// to tell the user they've held the touch long enough.
+				event.item.classList.add("ui-sortable-dragging-touch-cue");
+			}
+		},
+		onDraggableUnchoose(event) {
+			event.item.classList.remove("ui-sortable-dragging-touch-cue");
+		},
 		toggleSearch(event) {
 			if (isIgnoredKeybind(event)) {
 				return true;
diff --git a/client/css/style.css b/client/css/style.css
index 30bceaaa..b430d777 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -707,14 +707,19 @@ background on hover (unless active) */
 
 /* Remove background on hovered/active channel when sorting/drag-and-dropping */
 .ui-sortable-ghost,
-.channel-list-item.ui-sortable-dragged,
-.ui-sortable-dragged .channel-list-item,
-.ui-sortable-active .channel-list-item:hover,
-.ui-sortable-active .channel-list-item.active {
+.ui-sortable-dragging .channel-list-item,
+.ui-sortable-dragging,
+.ui-sortable-dragging:hover,
+.ui-sortable-dragging.active,
+.ui-sortable-dragging-touch-cue .channel-list-item,
+.ui-sortable-dragging-touch-cue,
+.ui-sortable-dragging-touch-cue:hover,
+.ui-sortable-dragging-touch-cue.active {
 	background: transparent;
 }
 
-.ui-sortable-ghost::after {
+.ui-sortable-ghost::after,
+.ui-sortable-dragging-touch-cue:not(.ui-sortable-dragging)::after {
 	background: var(--body-bg-color);
 	border: 1px dashed #99a2b4;
 	border-radius: 6px;
@@ -727,6 +732,10 @@ background on hover (unless active) */
 	right: 10px;
 }
 
+.ui-sortable-dragging-touch-cue:not(.ui-sortable-ghost)::after {
+	background: transparent;
+}
+
 #sidebar .network {
 	position: relative;
 	margin-bottom: 20px;

From 5c614785bf95d32d71d69444c6f817c5e586da19 Mon Sep 17 00:00:00 2001
From: itsjohncs <johnsullivan.pem@gmail.com>
Date: Sun, 10 Oct 2021 14:38:06 -0700
Subject: [PATCH 2/2] Suppress iOS long touch behavior in network list.

When a user long touches on iOS, they will select the nearest
selectable text. This causes a distracting visual bug when reordering
the network list (which also uses a long press).
---
 client/components/NetworkList.vue | 15 +++++++++++++++
 client/css/style.css              |  4 ++++
 2 files changed, 19 insertions(+)

diff --git a/client/components/NetworkList.vue b/client/components/NetworkList.vue
index 97b7616c..3e6d047a 100644
--- a/client/components/NetworkList.vue
+++ b/client/components/NetworkList.vue
@@ -81,6 +81,9 @@
 				class="network"
 				role="region"
 				aria-live="polite"
+				@touchstart="onDraggableTouchStart"
+				@touchend="onDraggableTouchEnd"
+				@touchcancel="onDraggableTouchEnd"
 			>
 				<NetworkLobby
 					:network="network"
@@ -332,6 +335,18 @@ export default {
 		onDraggableUnchoose(event) {
 			event.item.classList.remove("ui-sortable-dragging-touch-cue");
 		},
+		onDraggableTouchStart() {
+			if (event.touches.length === 1) {
+				// This prevents an iOS long touch default behavior: selecting
+				// the nearest selectable text.
+				document.body.classList.add("force-no-select");
+			}
+		},
+		onDraggableTouchEnd(event) {
+			if (event.touches.length === 0) {
+				document.body.classList.remove("force-no-select");
+			}
+		},
 		toggleSearch(event) {
 			if (isIgnoredKeybind(event)) {
 				return true;
diff --git a/client/css/style.css b/client/css/style.css
index b430d777..b5be3e22 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -107,6 +107,10 @@ body {
 	overflow: hidden; /* iOS Safari requires overflow rather than overflow-y */
 }
 
+body.force-no-select * {
+	user-select: none !important;
+}
+
 a,
 a:hover,
 a:focus {