css/style.css

@@ -28,11 +28,6 @@ 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,29 +1,6 @@
 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");
 
@@ -36,22 +13,19 @@ window.onload = function () {
 	const time = document.querySelector("#time")
 	const waiting = document.querySelector("#waiting")
 
-	addInteractHandler(
+	document.querySelector("input#next").addEventListener("click", (e) => {
-		document.querySelector("input#next"), (e) => {
 		ws.send(JSON.stringify({
 			"event": "next"
 		}))
 	})
 
-	addInteractHandler(
+	document.querySelector("input#prev").addEventListener("click", (e) => {
-		document.querySelector("input#prev"), (e) => {
 		ws.send(JSON.stringify({
 			"event": "prev"
 		}))
 	})
 
 	Sortable.create(items, {
-		delay: DND_DELAY,
 		delayOnTouchOnly: true,
 		group: "dndmusicbot-playlists",
 		filter: ".locked",
@@ -74,7 +48,6 @@ window.onload = function () {
 	})
 
 	Sortable.create(amb, {
-		delay: DND_DELAY,
 		delayOnTouchOnly: true,
 		group: "dndmusicbot-ambiance",
 		filter: ".locked",
@@ -154,8 +127,8 @@ window.onload = function () {
 		}
 	}
 
-	addInteractHandler(document.querySelector("#addambiance"), (e, isTouch) => {
+	document.querySelector("#addambiance").addEventListener("click", (e) => {
-		isTouch && e.preventDefault()
+		e.preventDefault()
 
 		output.innerText = ""
 		var title = document.querySelector("#inputambiance > input[name='title']")
@@ -174,8 +147,8 @@ window.onload = function () {
 		}))
 	})
 
-	addInteractHandler(submit, (e, isTouch) => {
+	submit.addEventListener("click", (e) => {
-		isTouch && e.preventDefault()
+		e.preventDefault()
 
 		output.innerText = ""
 		var title = document.querySelector("#inputplaylist > input[name='title']")
@@ -197,8 +170,8 @@ window.onload = function () {
 		url.innerText = ""
 	})
 
-	document.querySelectorAll("#items .item").forEach(item => addInteractHandler(item, (e, isTouch) => {
+	document.querySelectorAll("#items .item").forEach(item => item.addEventListener("click", (e) => {
-		isTouch && e.preventDefault()
+		e.preventDefault()
 		e.target.parentElement.style.pointerEvents = 'none'
 		const disableui = setTimeout((t) => {
 			t.style.pointerEvents = 'auto'
@@ -211,8 +184,8 @@ window.onload = function () {
 		}))
 	}));
 
-	document.querySelectorAll("#ambiance .item").forEach(item => addInteractHandler(item, (e, isTouch) => {
+	document.querySelectorAll("#ambiance .item").forEach(item => item.addEventListener("click", (e) => {
-		isTouch && e.preventDefault()
+		e.preventDefault()
 		e.target.parentElement.style.pointerEvents = 'none'
 		const disableui = setTimeout((t) => {
 			t.style.pointerEvents = 'auto'
@@ -232,8 +205,8 @@ function addPlaylist(payload) {
 	newdiv.className = "item"
 	newdiv.dataset.id = payload.url
 	newdiv.innerText = payload.title
-	addInteractHandler(newdiv, (e, isTouch) => {
+	newdiv.addEventListener("click", (e) => {
-		isTouch && e.preventDefault()
+		e.preventDefault()
 
 		var id = e.target.dataset.id
 		ws.send(JSON.stringify({