summaryrefslogtreecommitdiff
path: root/src/ws
diff options
context:
space:
mode:
authorBent Bisballe Nyeng <deva@aasimon.org>2020-06-10 20:31:39 +0200
committerBent Bisballe Nyeng <deva@aasimon.org>2020-06-10 20:31:39 +0200
commitf17eb393600759581d9798cee9dfe2cbff48f488 (patch)
tree3628e29de9c38b2f3761550c8202b4ae8c5ee7c7 /src/ws
parentfe4231b1dbb41f9eced8005b2e46453a81f08fa9 (diff)
JS: Add support for re-ordering using the mouse.
Diffstat (limited to 'src/ws')
-rw-r--r--src/ws/munia.css11
-rw-r--r--src/ws/node.js8
-rw-r--r--src/ws/view.js87
3 files changed, 91 insertions, 15 deletions
diff --git a/src/ws/munia.css b/src/ws/munia.css
index 5d98c94..ad7b7fd 100644
--- a/src/ws/munia.css
+++ b/src/ws/munia.css
@@ -22,12 +22,13 @@ body
-o-user-select: none;
user-select: none;
cursor: move;
- background-color: #888;
+ background-color: #aaa;
border-style: solid;
- border-width: medium;
- /*border-radius: 15px;*/
- padding: 4px;
- margin: 6px;
+ border-width: 1px;
+ border-color: black;
+ border-radius: 3px;
+ padding: 6px;
+ margin: 10px;
max-width: 300px;
}
diff --git a/src/ws/node.js b/src/ws/node.js
index e9d68b6..6abc8b2 100644
--- a/src/ws/node.js
+++ b/src/ws/node.js
@@ -118,8 +118,10 @@ Node.prototype.create = function()
node.setAttribute("class", "node");
node.setAttribute("ondblclick", "editTitle(this, event)");
//node.setAttribute("onclick", "showHideChildren(this, event)");
- node.setAttribute("ondrop", "drop(this, event)");
- node.setAttribute("ondragover", "return false");
+ node.setAttribute("ondrop", "drop(event)");
+ node.setAttribute("ondragenter", "dragenter(event)");
+ node.setAttribute("ondragover", "dragover(event)");
+ node.setAttribute("ondragleave", "dragleave(event)");
node.setAttribute("draggable", true);
node.setAttribute("ondragstart", "drag(this, event)");
node.setAttribute("ondragend", "dragEnd(event)");
@@ -151,6 +153,8 @@ Node.prototype.create = function()
this.element.appendChild(this.div_id);
var id_txt = document.createTextNode(this.id);
+ this.div_id.style.padding = "5px";
+ this.div_id.style.opacity = "0.3";
this.div_id.appendChild(id_txt);
this.element.appendChild(this.div_title);
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";
}