Handle touch input in chrome mobile

css/style.css

@@ -28,6 +28,11 @@ h2.bot {
 }
 
 .item {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
   display: flex;
   justify-content: center;
   align-items: center;

js/script.js

@@ -1,6 +1,29 @@
 import ReconnectingWebSocket from 'reconnecting-websocket';
 import Sortable from 'sortablejs';
 
+const DND_DELAY = 300;
+
+const addInteractHandler = (source, handler) => {
+	source.addEventListener("click", e => {
+		console.log("click", e);
+		handler(e, false);
+	});
+
+	let touchStart;
+	source.addEventListener("touchstart", e => {
+		console.log("touch start", touchStart, e.timeStamp, e);
+		touchStart = e.timeStamp;
+	}, {passive: true})
+
+	source.addEventListener("touchend", e => {
+		console.log("touch end", touchStart, e);
+		console.log(e.timeStamp - touchStart)
+		if ((e.timeStamp - touchStart) < DND_DELAY) {
+			handler(e, true);
+		}
+	}, {passive: true});
+}
+
 window.onload = function () {
 	const ws = new ReconnectingWebSocket(((window.location.protocol === "https:") ? "wss://" : "ws://") + window.location.host + "/ws");
 
@@ -13,19 +36,22 @@ window.onload = function () {
 	const time = document.querySelector("#time")
 	const waiting = document.querySelector("#waiting")
 
-	document.querySelector("input#next").addEventListener("click", (e) => {
+	addInteractHandler(
+		document.querySelector("input#next"), (e) => {
 			ws.send(JSON.stringify({
 				"event": "next"
 			}))
 		})
 
-	document.querySelector("input#prev").addEventListener("click", (e) => {
+	addInteractHandler(
+		document.querySelector("input#prev"), (e) => {
 			ws.send(JSON.stringify({
 				"event": "prev"
 			}))
 		})
 
 	Sortable.create(items, {
+		delay: DND_DELAY,
 		delayOnTouchOnly: true,
 		group: "dndmusicbot-playlists",
 		filter: ".locked",
@@ -48,6 +74,7 @@ window.onload = function () {
 	})
 
 	Sortable.create(amb, {
+		delay: DND_DELAY,
 		delayOnTouchOnly: true,
 		group: "dndmusicbot-ambiance",
 		filter: ".locked",
@@ -127,8 +154,8 @@ window.onload = function () {
 		}
 	}
 
-	document.querySelector("#addambiance").addEventListener("click", (e) => {
+	addInteractHandler(document.querySelector("#addambiance"), (e, isTouch) => {
-		e.preventDefault()
+		isTouch && e.preventDefault()
 
 		output.innerText = ""
 		var title = document.querySelector("#inputambiance > input[name='title']")
@@ -147,8 +174,8 @@ window.onload = function () {
 		}))
 	})
 
-	submit.addEventListener("click", (e) => {
+	addInteractHandler(submit, (e, isTouch) => {
-		e.preventDefault()
+		isTouch && e.preventDefault()
 
 		output.innerText = ""
 		var title = document.querySelector("#inputplaylist > input[name='title']")
@@ -170,8 +197,8 @@ window.onload = function () {
 		url.innerText = ""
 	})
 
-	document.querySelectorAll("#items .item").forEach(item => item.addEventListener("click", (e) => {
+	document.querySelectorAll("#items .item").forEach(item => addInteractHandler(item, (e, isTouch) => {
-		e.preventDefault()
+		isTouch && e.preventDefault()
 		e.target.parentElement.style.pointerEvents = 'none'
 		const disableui = setTimeout((t) => {
 			t.style.pointerEvents = 'auto'
@@ -184,8 +211,8 @@ window.onload = function () {
 		}))
 	}));
 
-	document.querySelectorAll("#ambiance .item").forEach(item => item.addEventListener("click", (e) => {
+	document.querySelectorAll("#ambiance .item").forEach(item => addInteractHandler(item, (e, isTouch) => {
-		e.preventDefault()
+		isTouch && e.preventDefault()
 		e.target.parentElement.style.pointerEvents = 'none'
 		const disableui = setTimeout((t) => {
 			t.style.pointerEvents = 'auto'
@@ -205,8 +232,8 @@ function addPlaylist(payload) {
 	newdiv.className = "item"
 	newdiv.dataset.id = payload.url
 	newdiv.innerText = payload.title
-	newdiv.addEventListener("click", (e) => {
+	addInteractHandler(newdiv, (e, isTouch) => {
-		e.preventDefault()
+		isTouch && e.preventDefault()
 
 		var id = e.target.dataset.id
 		ws.send(JSON.stringify({