Edit description with double-click. Improve collapse/expand and add-child buttons.

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 = "➕";
 	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 = "▼";
+	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 = "▼";
 		}
 		else
 		{
-			//this.children_element.style.maxHeight = "inherit";
 			this.element.classList.remove('collapsed');
+			this.collapse_button.innerHTML = "▲";
 		}
 	}
 };
@@ -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 = "▼";
 	}
 	else
 	{
 		node.element.classList.remove('collapsed');
+		node.collapse_button.innerHTML = "▲";
 	}
 }