Rework layout and add description field.

3 files changed, 116 insertions, 78 deletions

diff --git a/src/ws/munia.css b/src/ws/munia.css
index 38b435f..bfd63c7 100644
--- a/src/ws/munia.css
+++ b/src/ws/munia.css
@@ -10,6 +10,8 @@
 body
 {
 	cursor: default;
+	font-family: sans-serif;
+	font-size: 0.8em;
 }
 
 .node
@@ -45,19 +47,23 @@ body
 
 .node .id
 {
-	font-size: 0.7em;
+	font-size: 0.8em;
 	vertical-align: text-top;
-	opacity: 0.3;
+	opacity: 0.6;
 	min-width: 2em;
 	display: inline-block;
 	pointer-events: none;
+	margin-left: 2px;
 }
 
 .node .title
 {
+	font-weight: bold;
+	font-size: 1.1em;
 	padding-left: 5px;
 	background: transparent;
 	pointer-events: none;
+	min-width: 8em;
 }
 
 .node .state
@@ -71,9 +77,11 @@ body
 
 .node .description
 {
+	border-top: solid black 1px;
+	display: block;
 	clear: both;
 	padding-left: 5px;
-	background: transparent;
+	background: #999;
 	pointer-events: none;
 }
 
@@ -111,30 +119,27 @@ body
 	overflow: hidden;
 }
 
-.collapsed
+.collapsed .children
+{
+	background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1));
+	max-height: 0px;
+	padding-top: 0px;
+	opacity: 0.2;
+}
+
+.collapsed .description
 {
-	background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.6));
-	max-height: 16px;
-	padding: 16px;
+	display: none;
 }
 
 .board
 {
-/*	width: *; */
-	min-height: 100px;
+	min-height: 200px;
 	width: 500px;
-	padding: 2px;
+	padding: 8px;
 	margin: 2px;
 	display: inline-box;
 	float:left;
-
-	background: -moz-linear-gradient(left center, rgb(0,0,0), rgb(79,79,79), rgb(21,21,21));
-	background: -webkit-gradient(linear, left top, right top,
-	                             color-stop(0, rgb(0,0,0)),
-	                             color-stop(0.50, rgb(79,79,79)),
-	                             color-stop(1, rgb(21,21,21)));
-	background: -webkit-linear-gradient(left center, rgb(0,0,0), rgb(79,79,79), rgb(21,21,21));
-	background: -ms-linear-gradient(left center, rgb(0,0,0), rgb(79,79,79), rgb(21,21,21));
 }
 
 .log
diff --git a/src/ws/node.js b/src/ws/node.js
index 047c1e3..6e60b37 100644
--- a/src/ws/node.js
+++ b/src/ws/node.js
@@ -167,34 +167,16 @@ Node.prototype.create = function()
 	this.element.appendChild(this.children_element);
 
 
-	this.div_id = document.createElement("span");
-	this.div_id.setAttribute("class", "id");
-	this.data_element.appendChild(this.div_id);
-
-	this.div_title = document.createElement("span");
-	this.div_title.setAttribute("class", "title");
+	this.id_element = document.createElement("span");
+	this.id_element.setAttribute("class", "id");
 	var id_txt = document.createTextNode(this.id);
-	this.div_id.appendChild(id_txt);
-	this.data_element.appendChild(this.div_title);
-	this.setAttribute("title", "");
+	this.id_element.appendChild(id_txt);
+	this.data_element.appendChild(this.id_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)");
-	node.setAttribute("ondragleave", "dragleave(event)");
-	node.setAttribute("draggable", true);
-	node.setAttribute("ondragstart", "drag(event)");
-	node.setAttribute("ondragend", "dragEnd(event)");
-	node.setAttribute("nodeid", this.id);
-
-	// This is a hack to make it possible to identify the nodeid and
-	// oberveid from the node id alone.
-	node.id = createId(this.subscribeid, this.id);
+	this.title_element = document.createElement("span");
+	this.title_element.setAttribute("class", "title");
+	this.data_element.appendChild(this.title_element);
+//	this.setAttribute("title", "");
 
 	var add_child_button = document.createElement("div");
 	add_child_button.name = "add_button";
@@ -223,53 +205,105 @@ Node.prototype.create = function()
 	this.state_element.appendChild(txt_state);
 	this.data_element.appendChild(this.state_element);
 
-/*
-	var subscribe_button = document.createElement("div");
-	subscribe_button.name = "subscribe_button";
-	subscribe_button.setAttribute("onclick", "subscribeMe(this, event)");
-	subscribe_button.setAttribute("nodeid", this.id);
-	subscribe_button.setAttribute("style", "float: left; display: inline-box; width:14px; height: 14px; border: solid green 2px; cursor: pointer;");
-	var txt_plus = document.createTextNode("+");
-	subscribe_button.appendChild(txt_plus);
-	this.data_element.appendChild(subscribe_button);
-
-	var unsubscribe_button = document.createElement("div");
-	unsubscribe_button.name = "unsubscribe_button";
-	unsubscribe_button.setAttribute("onclick", "unsubscribeMe(this, event)");
-	unsubscribe_button.setAttribute("nodeid", this.id);
-	unsubscribe_button.setAttribute("style", "float: left; display: inline-box; width:14px; height: 14px; border: solid red 2px; cursor: pointer;");
-	var txt_minus = document.createTextNode("-");
-	unsubscribe_button.appendChild(txt_minus);
-	this.data_element.appendChild(unsubscribe_button);
-*/
+	this.description_element = document.createElement("div");
+	this.description_element.setAttribute("class", "description");
+	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)");
+	node.setAttribute("ondragleave", "dragleave(event)");
+	node.setAttribute("draggable", true);
+	node.setAttribute("ondragstart", "drag(event)");
+	node.setAttribute("ondragend", "dragEnd(event)");
+
+	// This is a hack to make it possible to identify the nodeid and
+	// oberveid from the node id alone.
+	node.id = createId(this.subscribeid, this.id);
 
 	{
 		var collapsed = getCookie(node.id+"_collapsed") == "true";
 		if(collapsed)
 		{
 			//this.children_element.style.maxHeight = "16px";
-			this.children_element.classList.add('collapsed');
+			this.element.classList.add('collapsed');
 		}
 		else
 		{
 			//this.children_element.style.maxHeight = "inherit";
-			this.children_element.classList.remove('collapsed');
+			this.element.classList.remove('collapsed');
 		}
 	}
 };
 
+function checkHTML(html)
+{
+	var doc = document.createElement('p');
+	doc.innerHTML = html;
+
+	// Check for correct and balanced HTML
+	if(doc.innerHTML !== html)
+	{
+		return false;
+	}
+
+	// Check for valid tags
+	var elements = doc.getElementsByTagName("*");
+	for(let element of elements)
+	{
+		// Check for allowed tag-names
+		if(element.tagName != "P" &&
+		   element.tagName != "EM" &&
+		   element.tagName != "STRONG" &&
+		   element.tagName != "BR" &&
+		   element.tagName != "UL" &&
+		   element.tagName != "LI" &&
+		   // Allow no attributes
+		   element.attributes.length != 0)
+		{
+			return false;
+		}
+	}
+
+	return true;
+}
+
 Node.prototype.setAttribute = function(name, value)
 {
 	this.attributes[name] = value;
 
 	if(name == "title")
 	{
-		if(this.div_title.firstChild != null)
+		if(this.title_element.firstChild != null)
 		{
-			this.div_title.removeChild(this.div_title.firstChild);
+			this.title_element.removeChild(this.title_element.firstChild);
 		}
 		var title_txt = document.createTextNode(value);
-		this.div_title.appendChild(title_txt);
+		this.title_element.appendChild(title_txt);
+	}
+
+	if(name == "description")
+	{
+		if(this.description_element.firstChild != null)
+		{
+			this.description_element.removeChild(this.description_element.firstChild);
+		}
+		if(checkHTML(value))
+		{
+			// Insert as HTML
+			this.description_element.innerHTML = value;
+		}
+		else
+		{
+			// Not valid HTML, insert as plain text to avoid breaking things
+			var description_txt = document.createTextNode(value);
+			this.description_element.appendChild(description_txt);
+		}
 	}
 
 	if(name == "dragged")
diff --git a/src/ws/view.js b/src/ws/view.js
index 264ef9f..6c43dc8 100644
--- a/src/ws/view.js
+++ b/src/ws/view.js
@@ -83,7 +83,7 @@ function deleteNode(id)
 
 function getElementAfter(e)
 {
-	if(e.target.className != "children")
+	if(!e.target.classList.contains("children"))
 	{
 		return null;
 	}
@@ -92,7 +92,7 @@ function getElementAfter(e)
 	var min_y_diff = 9999999999999;
 	for(var i = 0; i < e.target.childNodes.length; ++i)
 	{
-		if(e.target.children[i].className != "node") // Only look at node elements
+		if(!e.target.children[i].classList.contains("node")) // Only look at node elements
 		{
 			continue;
 		}
@@ -121,7 +121,7 @@ var last_over = null;
 function dragenter(e)
 {
 	// Only highlight children areas
-	if(e.target.className != "children")
+	if(!e.target.classList.contains("children"))
 	{
 		return;
 	}
@@ -133,7 +133,7 @@ var last_after = null;
 function dragover(e)
 {
 //	// Only highlight children areas
-//	if(e.target.className != "children")
+//	if(!e.target.classList.contains("children"))
 //	{
 //		return;
 //	}
@@ -155,7 +155,7 @@ function dragover(e)
 function dragleave(e)
 {
 	// Only highlight children areas
-	if(e.target.className != "children")
+	if(!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.className != "children")
+//	if(!e.target.classList.contains("children"))
 //	{
 //		return;
 //	}
@@ -199,7 +199,7 @@ function drop(e)
 	e.stopPropagation();
 
 	// Only allow drops in children areas
-	if(e.target.className != "children")
+	if(!e.target.classList.contains("children"))
 	{
 		return;
 	}
@@ -209,7 +209,6 @@ function drop(e)
 
 	// Get drop id from targets parent (children tag inside the node)
 	var dropid = e.target.parentElement.id;
-	console.log("dropid: " + dropid);
 	// Prevent dropping on item itself
 	if(id == dropid)
 	{
@@ -338,10 +337,10 @@ function collapse(e)
 	e.stopPropagation();
 	if(collapsed)
 	{
-		node.children_element.classList.add('collapsed');
+		node.element.classList.add('collapsed');
 	}
 	else
 	{
-		node.children_element.classList.remove('collapsed');
+		node.element.classList.remove('collapsed');
 	}
 }