summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorBent Bisballe Nyeng <deva@aasimon.org>2020-06-13 15:26:41 +0200
committerBent Bisballe Nyeng <deva@aasimon.org>2020-06-13 15:50:19 +0200
commit7c1295bf5dc8f72f4e0e43af72fe67847faadf6f (patch)
treeaf405f82beac37263d317f1329f67962cee3a4db
parent476d0319fad29ceccfc157aed1a49c88fa499959 (diff)
Add collapse button and store collapse state of each node as cookies.
-rw-r--r--src/ws/munia.css24
-rw-r--r--src/ws/node.js25
-rw-r--r--src/ws/view.js49
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";
+ }
+}