summaryrefslogtreecommitdiff
path: root/src/ws
diff options
context:
space:
mode:
authorBent Bisballe Nyeng <deva@aasimon.org>2020-06-14 21:11:54 +0200
committerBent Bisballe Nyeng <deva@aasimon.org>2020-06-14 21:11:54 +0200
commitf30870347bfc9045d6643b6f92cae3da9e456ab8 (patch)
tree8933b4afacd70dfc309f80b07f645ef23ddd44c8 /src/ws
parent67ab36c1bb87196379153881afcd7e17aea421e2 (diff)
Edit description with double-click. Improve collapse/expand and add-child buttons.
Diffstat (limited to 'src/ws')
-rw-r--r--src/ws/munia.css26
-rw-r--r--src/ws/node.js42
-rw-r--r--src/ws/view.js77
3 files changed, 110 insertions, 35 deletions
diff --git a/src/ws/munia.css b/src/ws/munia.css
index bfc1823..3704c99 100644
--- a/src/ws/munia.css
+++ b/src/ws/munia.css
@@ -47,10 +47,11 @@ body
.node .id
{
+ float: left;
font-size: 0.8em;
vertical-align: text-top;
opacity: 0.6;
- min-width: 2em;
+ min-width: 2.8em;
display: inline-block;
pointer-events: none;
margin-left: 2px;
@@ -58,12 +59,12 @@ body
.node .title
{
+ float: left;
font-weight: bold;
font-size: 1.1em;
- padding-left: 5px;
background: transparent;
- pointer-events: none;
- min-width: 8em;
+ pointer-events: auto;
+ width: 70%;
}
.node .state
@@ -74,6 +75,8 @@ body
background: transparent;
pointer-events: auto;
cursor: pointer;
+ background-color: #aaa;
+ border: solid 1px #666;
}
.node .description
@@ -83,13 +86,15 @@ body
clear: both;
padding-left: 5px;
background: #999;
- pointer-events: none;
+ pointer-events: auto;
+ min-height: 0.5em;
}
.node .edit
{
border-color: red;
pointer-events: all;
+ width: 90%
/*
border: inherit;
padding: inherit;
@@ -103,17 +108,17 @@ body
float: right;
display: inline-box;
width: 1em;
- height: 1em;
- font-size: 0.7em;
vertical-align: text-center;
text-align: center;
- border: solid green 2px;
cursor: pointer;
pointer-events: auto;
+ background-color: #aaa;
+ border: solid 1px #666;
}
.node .children
{
+ clear: both;
padding: 6px;
min-height: 5px;
border: dotted 1px black;
@@ -122,6 +127,7 @@ body
.collapsed .children
{
+ clear: both;
background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1));
max-height: 0px;
padding-top: 0px;
@@ -130,7 +136,9 @@ body
.collapsed .description
{
- display: none;
+ height: 0px;
+ overflow: hidden;
+ min-height: 0px;
}
.board
diff --git a/src/ws/node.js b/src/ws/node.js
index 062f892..76ad7e3 100644
--- a/src/ws/node.js
+++ b/src/ws/node.js
@@ -167,53 +167,50 @@ Node.prototype.create = function()
this.element.appendChild(this.children_element);
- this.id_element = document.createElement("span");
+ this.id_element = document.createElement("div");
this.id_element.setAttribute("class", "id");
var id_txt = document.createTextNode(this.id);
this.id_element.appendChild(id_txt);
this.data_element.appendChild(this.id_element);
- this.title_element = document.createElement("span");
+ this.title_element = document.createElement("div");
this.title_element.setAttribute("class", "title");
+ this.title_element.setAttribute("ondblclick", "editTitle(event)");
this.data_element.appendChild(this.title_element);
-// this.setAttribute("title", "");
var add_child_button = document.createElement("div");
add_child_button.name = "add_button";
add_child_button.setAttribute("onclick", "addChild(event)");
add_child_button.setAttribute("nodeid", this.id);
add_child_button.setAttribute("class", "button");
- var txt_plus = document.createTextNode("+");
- add_child_button.appendChild(txt_plus);
+ add_child_button.innerHTML = "&#10133;";
this.data_element.appendChild(add_child_button);
- var collapse_button = document.createElement("div");
- collapse_button.name = "add_button";
- collapse_button.setAttribute("onclick", "collapse(event)");
- collapse_button.setAttribute("nodeid", this.id);
- collapse_button.setAttribute("class", "button");
- var txt_v = document.createTextNode("v");
- collapse_button.appendChild(txt_v);
- this.data_element.appendChild(collapse_button);
+ this.collapse_button = document.createElement("div");
+ this.collapse_button.name = "add_button";
+ this.collapse_button.setAttribute("onclick", "collapse(event)");
+ this.collapse_button.setAttribute("nodeid", this.id);
+ this.collapse_button.setAttribute("class", "button");
+ this.collapse_button.innerHTML = "&#9660;";
+ this.data_element.appendChild(this.collapse_button);
this.state_element = document.createElement("div");
this.state_element.name = "state";
this.state_element.setAttribute("onclick", "changeState(event)");
this.state_element.setAttribute("nodeid", this.id);
this.state_element.setAttribute("class", "state");
- var txt_state = document.createTextNode("todo");
- this.state_element.appendChild(txt_state);
+ this.state_element.innerHTML = "todo";
this.data_element.appendChild(this.state_element);
this.description_element = document.createElement("div");
this.description_element.setAttribute("class", "description");
+ this.description_element.setAttribute("ondblclick", "editDescription(event)");
this.data_element.appendChild(this.description_element);
var node = this.element;
node.name = "node";
node.setAttribute("class", "node");
- node.setAttribute("ondblclick", "editTitle(event)");
node.setAttribute("ondrop", "drop(event)");
node.setAttribute("ondragenter", "dragenter(event)");
node.setAttribute("ondragover", "dragover(event)");
@@ -230,13 +227,13 @@ Node.prototype.create = function()
var collapsed = getCookie(node.id+"_collapsed") == "true";
if(collapsed)
{
- //this.children_element.style.maxHeight = "16px";
this.element.classList.add('collapsed');
+ this.collapse_button.innerHTML = "&#9660;";
}
else
{
- //this.children_element.style.maxHeight = "inherit";
this.element.classList.remove('collapsed');
+ this.collapse_button.innerHTML = "&#9650;";
}
}
};
@@ -356,3 +353,12 @@ Node.prototype.getTitle = function()
{
return this.attributes["title"];
};
+
+Node.prototype.getDescription = function()
+{
+ if(this.attributes["description"])
+ {
+ return this.attributes["description"];
+ }
+ return "";
+};
diff --git a/src/ws/view.js b/src/ws/view.js
index aa4d9de..1586389 100644
--- a/src/ws/view.js
+++ b/src/ws/view.js
@@ -83,7 +83,7 @@ function deleteNode(id)
function getElementAfter(e)
{
- if(!e.target.classList.contains("children"))
+ if(!e.target.classList || !e.target.classList.contains("children"))
{
return null;
}
@@ -121,7 +121,7 @@ var last_over = null;
function dragenter(e)
{
// Only highlight children areas
- if(!e.target.classList.contains("children"))
+ if(!e.target.classList || !e.target.classList.contains("children"))
{
return;
}
@@ -155,7 +155,7 @@ function dragover(e)
function dragleave(e)
{
// Only highlight children areas
- if(!e.target.classList.contains("children"))
+ if(!e.target.classList || !e.target.classList.contains("children"))
{
return;
}
@@ -172,7 +172,7 @@ function dragEnd(e)
update(idFromStr(id), "dragged", "false");
// // Only highlight children areas
-// if(!e.target.classList.contains("children"))
+// if(!e.target.classList || !e.target.classList.contains("children"))
// {
// return;
// }
@@ -199,7 +199,7 @@ function drop(e)
e.stopPropagation();
// Only allow drops in children areas
- if(!e.target.classList.contains("children"))
+ if(!e.target.classList || !e.target.classList.contains("children"))
{
return;
}
@@ -257,6 +257,64 @@ function node_submit_KeyUpHandler(target, e)
var updateid;
var lineedit;
var lineeditparent;
+
+function onKeyUpHandlerDesc(e)
+{
+ var node = findNodeFromString(e.target.id);
+ if(node == null)
+ {
+ return; // no node
+ }
+
+ var lineedit = e.target;
+ var updateid = idFromStr(lineedit.id);
+
+ if(e.which == 13)
+ { // enter
+ node.data_element.removeChild(lineedit);
+ update(updateid, "description", lineedit.value);
+ }
+ if(e.which == 27)
+ { // escape
+ node.data_element.removeChild(lineedit);
+ }
+}
+
+function onLostFocusHandlerDesc(e)
+{
+ var node = findNodeFromString(e.target.id);
+ if(node == null)
+ {
+ return; // no node
+ }
+
+ var lineedit = e.target;
+
+ node.data_element.removeChild(lineedit);
+}
+
+function editDescription(e)
+{
+ e.stopPropagation();
+ const idstr = e.target.parentElement.parentElement.id;
+ var node = findNodeFromString(idstr);
+ if(node == null)
+ {
+ return; // no node
+ }
+
+ var lineedit = document.createElement("input");
+ lineedit.setAttribute("class", "edit");
+ lineedit.setAttribute("onkeyup", "onKeyUpHandlerDesc(event)");
+ lineedit.setAttribute("onblur", "onLostFocusHandlerDesc(event)");
+ lineedit.placeholder = "Node Description";
+ lineedit.value = node.getDescription();
+ lineedit.id = idstr;
+ node.data_element.appendChild(lineedit);
+ //lineeditparent = e.target;
+ lineedit.focus();
+}
+
function onKeyUpHandler(e)
{
var node = findNodeFromString(e.target.id);
@@ -271,7 +329,6 @@ function onKeyUpHandler(e)
if(e.which == 13)
{ // enter
node.data_element.removeChild(lineedit);
- //node.data_element.nodeValue = 'updating...';
update(updateid, "title", lineedit.value);
}
if(e.which == 27)
@@ -296,7 +353,8 @@ function onLostFocusHandler(e)
function editTitle(e)
{
e.stopPropagation();
- var node = findNodeFromString(e.target.id);
+ const idstr = e.target.parentElement.parentElement.id;
+ var node = findNodeFromString(idstr);
if(node == null)
{
return; // no node
@@ -306,8 +364,9 @@ function editTitle(e)
lineedit.setAttribute("class", "edit");
lineedit.setAttribute("onkeyup", "onKeyUpHandler(event)");
lineedit.setAttribute("onblur", "onLostFocusHandler(event)");
+ lineedit.placeholder = "Node Title";
lineedit.value = node.getTitle();
- lineedit.id = e.target.id;
+ lineedit.id = idstr;
node.data_element.appendChild(lineedit);
//lineeditparent = e.target;
lineedit.focus();
@@ -338,10 +397,12 @@ function collapse(e)
if(collapsed)
{
node.element.classList.add('collapsed');
+ node.collapse_button.innerHTML = "&#9660;";
}
else
{
node.element.classList.remove('collapsed');
+ node.collapse_button.innerHTML = "&#9650;";
}
}