Add collapse button and store collapse state of each node as cookies.

3 files changed, 94 insertions, 4 deletions

diff --git a/src/ws/munia.css b/src/ws/munia.css
index 3a94e85..8eeebba 100644
--- a/src/ws/munia.css
+++ b/src/ws/munia.css
@@ -29,7 +29,10 @@ body
 	border-radius: 3px;
 	padding: 6px;
 	margin: 10px;
-	max-width: 300px;
+/*	max-width: 800px;*/
+	margin-left: auto;
+	margin-right: auto;
+	overflow: hidden;
 }
 
 .node .id
@@ -73,12 +76,28 @@ body
 	cursor: pointer;
 }
 
+.node .collapse_button
+{
+	float: right;
+	display: inline-box;
+	width: 1em;
+	height: 1em;
+	font-size: 0.5em;
+	vertical-align: text-center;
+	text-align: center;
+	border: solid green 2px;
+	cursor: pointer;
+}
+
 .board
 {
-	width: *;
+/*	width: *; */
 	min-height: 100px;
+	width: 500px;
 	padding: 2px;
 	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,
@@ -91,6 +110,7 @@ body
 
 .log
 {
+	clear: both;
 	height: 20em;
 	font-family: monospace;
 	font-size: 1em;
diff --git a/src/ws/node.js b/src/ws/node.js
index a8208fd..d79137d 100644
--- a/src/ws/node.js
+++ b/src/ws/node.js
@@ -94,8 +94,8 @@ Node.prototype.addChild = function(node, insertBeforeId)
 		if(this.children[i].id == insertBeforeId)
 		{
 			this.children.splice(i - 1, 0, node);
-			// Insert after id, title and add button (ie. + 3)
-			this.element.insertBefore(node.element, this.element.childNodes[i + 3]);
+			// Insert after id, title, add button and collapse button (ie. + 4)
+			this.element.insertBefore(node.element, this.element.childNodes[i + 4]);
 			inserted = true;
 			break;
 		}
@@ -148,6 +148,15 @@ Node.prototype.create = function()
 	add_child_button.appendChild(txt_plus);
 	node.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", "collapse_button");
+	var txt_plus = document.createTextNode("v");
+	collapse_button.appendChild(txt_plus);
+	node.appendChild(collapse_button);
+
 /*
 	var subscribe_button = document.createElement("div");
 	subscribe_button.name = "subscribe_button";
@@ -173,6 +182,18 @@ Node.prototype.create = function()
 	this.div_id.appendChild(id_txt);
 	this.element.appendChild(this.div_title);
 	this.setAttribute("title", "");
+
+	{
+		var collapsed = getCookie(node.id+"_collapsed") == "true";
+		if(collapsed)
+		{
+			this.element.style.maxHeight = "32px";
+		}
+		else
+		{
+			this.element.style.maxHeight = "inherit";
+		}
+	}
 };
 
 Node.prototype.setAttribute = function(name, value)
diff --git a/src/ws/view.js b/src/ws/view.js
index 78b23c1..2c9d507 100644
--- a/src/ws/view.js
+++ b/src/ws/view.js
@@ -13,6 +13,37 @@ function createNode()
 }
 */
 
+var cookies = null;
+function initCookie(cookie, index)
+{
+	name = cookie.split('=')[0].trim();
+	value = cookie.split('=')[1];
+	cookies[name] = value;
+}
+function initCookies()
+{
+	cookies = new Object();
+	document.cookie.split(';').forEach(initCookie);
+}
+function setCookie(name, value)
+{
+	if(cookies == null)
+	{
+		initCookies();
+	}
+	cookies[name] = value;
+	document.cookie = name + "=" + value+"; expires=Fri, 31 Dec 9999 23:59:59 GMT";
+}
+
+function getCookie(name)
+{
+	if(cookies == null)
+	{
+		initCookies();
+	}
+	return cookies[name];
+}
+
 function getNode(subscribeid, id)
 {
 }
@@ -249,3 +280,21 @@ function addChild(e)
 	id = idFromStr(e.target.parentElement.id);
 	create("x", id, -1);
 }
+
+function collapse(e)
+{
+	var id = e.target.parentElement.id;
+	var collapsed = getCookie(id+"_collapsed") == "true";
+	collapsed = !collapsed;
+	setCookie(id+"_collapsed", collapsed?"true":"false");
+
+	e.stopPropagation();
+	if(collapsed)
+	{
+		e.target.parentElement.style.maxHeight = "32px";
+	}
+	else
+	{
+		e.target.parentElement.style.maxHeight = "inherit";
+	}
+}