From a0c7776dc0f97c5ef6ba64e30d1f3cf2eb7c35d2 Mon Sep 17 00:00:00 2001 From: Bent Bisballe Nyeng Date: Tue, 16 Jun 2020 16:34:34 +0200 Subject: Use className instead of setAttribute. Hide addChild button when node is collapsed. --- src/ws/munia.css | 7 ++++++- src/ws/node.js | 29 +++++++++++++++-------------- 2 files changed, 21 insertions(+), 15 deletions(-) (limited to 'src/ws') 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)"); -- cgit v1.2.3