Use className instead of setAttribute. Hide addChild button when node is collapsed.

2 files changed, 21 insertions, 15 deletions

diff --git a/src/ws/munia.css b/src/ws/munia.css
index 6841731..db030d6 100644
--- a/src/ws/munia.css
+++ b/src/ws/munia.css
@@ -72,7 +72,7 @@ body
 	font-size: 1.1em;
 	background: transparent;
 	pointer-events: auto;
-	min-width: 20em;
+	min-width: 15em;
 	width: 100%;
 	min-height: 1.1em;
 	padding-top: 0.4em;
@@ -169,6 +169,11 @@ body
 	width: unset;
 }
 
+.collapsed .add_child
+{
+	display: none;
+}
+
 .board
 {
 	width: 48%;
diff --git a/src/ws/node.js b/src/ws/node.js
index 2dc5608..439165b 100644
--- a/src/ws/node.js
+++ b/src/ws/node.js
@@ -168,49 +168,50 @@ Node.prototype.create = function()
 
 
 	this.id_element = document.createElement("div");
-	this.id_element.setAttribute("class", "id");
+	this.id_element.className = "id";
 	var id_txt = document.createTextNode(this.id);
 	this.id_element.appendChild(id_txt);
 	this.data_element.appendChild(this.id_element);
 
-	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");
-	add_child_button.innerHTML = "➕";
-	this.data_element.appendChild(add_child_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.className = "button";
 	this.collapse_button.innerHTML = "▼";
 	this.data_element.appendChild(this.collapse_button);
 
+	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.className = "button";
+	add_child_button.classList.add('add_child');
+	add_child_button.innerHTML = "➕";
+	this.data_element.appendChild(add_child_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");
+	this.state_element.className = "state";
 	this.setAttribute("state", "todo");
 	this.data_element.appendChild(this.state_element);
 
 	this.title_element = document.createElement("div");
-	this.title_element.setAttribute("class", "title");
+	this.title_element.className = "title";
 	this.title_element.setAttribute("ondblclick", "editTitle(event)");
 	this.data_element.appendChild(this.title_element);
 
 	this.description_element = document.createElement("div");
-	this.description_element.setAttribute("class", "description");
+	this.description_element.className = "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.className = "node";
 	node.setAttribute("ondrop", "drop(event)");
 	node.setAttribute("ondragenter", "dragenter(event)");
 	node.setAttribute("ondragover", "dragover(event)");