From f17eb393600759581d9798cee9dfe2cbff48f488 Mon Sep 17 00:00:00 2001
From: Bent Bisballe Nyeng <deva@aasimon.org>
Date: Wed, 10 Jun 2020 20:31:39 +0200
Subject: JS: Add support for re-ordering using the mouse.

---
 src/ws/view.js | 87 ++++++++++++++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 79 insertions(+), 8 deletions(-)

(limited to 'src/ws/view.js')

diff --git a/src/ws/view.js b/src/ws/view.js
index 4e2d837..4a10386 100644
--- a/src/ws/view.js
+++ b/src/ws/view.js
@@ -49,6 +49,28 @@ function deleteNode(id)
 	remove(id);
 }
 
+function getElementAfter(e)
+{
+	var element_after = null;
+	var min_y_diff = 9999999999999;
+	for(i = 0; i < e.target.children.length; ++i)
+	{
+		if(e.target.children[i].className != "node") // Only look at node elements
+		{
+			continue;
+		}
+
+		var y_diff = e.target.children[i].getBoundingClientRect().y - e.y;
+		if(y_diff > 0 && y_diff < min_y_diff)
+		{
+			element_after = e.target.children[i];
+			min_y_diff = y_diff;
+		}
+	}
+
+	return element_after;
+}
+
 function drag(target, e)
 {
 	e.dataTransfer.setData('id', target.id);
@@ -56,8 +78,47 @@ function drag(target, e)
 	update(idFromStr(target.id), "dragged", "true");
 }
 
+function dragenter(e)
+{
+	e.target.style.backgroundColor = "#646588";
+	last_over = e.target;
+}
+
+var last_after = null;
+function dragover(e)
+{
+	e.preventDefault();
+
+	var after = getElementAfter(e);
+	if(last_after != null)
+	{
+		last_after.style.borderColor = "black";
+	}
+	after.style.borderColor = "red black black black";
+	last_after = after;
+}
+
+function dragleave(e)
+{
+	e.target.style.backgroundColor = "#aaa";
+}
+
 function dragEnd(e)
 {
+	e.target.style.backgroundColor = "#aaa";
+
+	if(last_after != null)
+	{
+		last_after.style.borderColor = "black";
+		last_after = null;
+	}
+
+	if(last_over != null)
+	{
+		last_over.style.backgroundColor = "#aaa";
+		last_over = null;
+	}
+
 	e.preventDefault();
 	e.stopPropagation();
 
@@ -66,14 +127,24 @@ function dragEnd(e)
 	update(idFromStr(id), "dragged", "false");
 }
 
-function drop(target, e)
+function drop(e)
 {
-	e.preventDefault();
-	e.stopPropagation();
-
 	var id = e.dataTransfer.getData('id');
 	update(idFromStr(id), "dragged", "false");
-	move(idFromStr(id), idFromStr(target.id), -1);
+
+	// Prevent dropping on item itself
+	if(id == e.target.id)
+	{
+		return;
+	}
+
+	var before_id = -1;
+	var element_after = getElementAfter(e);
+	if(element_after != null)
+	{
+		before_id = idFromStr(element_after.id);
+	}
+	move(idFromStr(id), idFromStr(e.target.id), before_id);
 }
 
 function subscribeMe(target, e)
@@ -95,15 +166,15 @@ function showHideChildren(target, e)
 	if(target.style.backgroundColor != "red")
 	{
 		target.style.backgroundColor = "red";
-		for(var i = 1; i < target.childNodes.length; i++)
+		for(i = 1; i < target.childNodes.length; i++)
 		{
 			target.childNodes[i].style.display = "none";
 		}
 	}
 	else
 	{
-		target.style.backgroundColor = "grey";
-		for(var i = 1; i < target.childNodes.length; i++)
+		target.style.backgroundColor = "#aaa";
+		for(i = 1; i < target.childNodes.length; i++)
 		{
 			target.childNodes[i].style.display = "block";
 		}
-- 
cgit v1.2.3