From f30870347bfc9045d6643b6f92cae3da9e456ab8 Mon Sep 17 00:00:00 2001 From: Bent Bisballe Nyeng Date: Sun, 14 Jun 2020 21:11:54 +0200 Subject: Edit description with double-click. Improve collapse/expand and add-child buttons. --- src/ws/munia.css | 26 ++++++++++++------- src/ws/node.js | 42 ++++++++++++++++++------------- src/ws/view.js | 77 ++++++++++++++++++++++++++++++++++++++++++++++++++------ 3 files changed, 110 insertions(+), 35 deletions(-) diff --git a/src/ws/munia.css b/src/ws/munia.css index bfc1823..3704c99 100644 --- a/src/ws/munia.css +++ b/src/ws/munia.css @@ -47,10 +47,11 @@ body .node .id { + float: left; font-size: 0.8em; vertical-align: text-top; opacity: 0.6; - min-width: 2em; + min-width: 2.8em; display: inline-block; pointer-events: none; margin-left: 2px; @@ -58,12 +59,12 @@ body .node .title { + float: left; font-weight: bold; font-size: 1.1em; - padding-left: 5px; background: transparent; - pointer-events: none; - min-width: 8em; + pointer-events: auto; + width: 70%; } .node .state @@ -74,6 +75,8 @@ body background: transparent; pointer-events: auto; cursor: pointer; + background-color: #aaa; + border: solid 1px #666; } .node .description @@ -83,13 +86,15 @@ body clear: both; padding-left: 5px; background: #999; - pointer-events: none; + pointer-events: auto; + min-height: 0.5em; } .node .edit { border-color: red; pointer-events: all; + width: 90% /* border: inherit; padding: inherit; @@ -103,17 +108,17 @@ body float: right; display: inline-box; width: 1em; - height: 1em; - font-size: 0.7em; vertical-align: text-center; text-align: center; - border: solid green 2px; cursor: pointer; pointer-events: auto; + background-color: #aaa; + border: solid 1px #666; } .node .children { + clear: both; padding: 6px; min-height: 5px; border: dotted 1px black; @@ -122,6 +127,7 @@ body .collapsed .children { + clear: both; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1)); max-height: 0px; padding-top: 0px; @@ -130,7 +136,9 @@ body .collapsed .description { - display: none; + height: 0px; + overflow: hidden; + min-height: 0px; } .board diff --git a/src/ws/node.js b/src/ws/node.js index 062f892..76ad7e3 100644 --- a/src/ws/node.js +++ b/src/ws/node.js @@ -167,53 +167,50 @@ Node.prototype.create = function() this.element.appendChild(this.children_element); - this.id_element = document.createElement("span"); + this.id_element = document.createElement("div"); this.id_element.setAttribute("class", "id"); var id_txt = document.createTextNode(this.id); this.id_element.appendChild(id_txt); this.data_element.appendChild(this.id_element); - this.title_element = document.createElement("span"); + this.title_element = document.createElement("div"); this.title_element.setAttribute("class", "title"); + this.title_element.setAttribute("ondblclick", "editTitle(event)"); this.data_element.appendChild(this.title_element); -// this.setAttribute("title", ""); 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"); - var txt_plus = document.createTextNode("+"); - add_child_button.appendChild(txt_plus); + add_child_button.innerHTML = "➕"; this.data_element.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", "button"); - var txt_v = document.createTextNode("v"); - collapse_button.appendChild(txt_v); - this.data_element.appendChild(collapse_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.innerHTML = "▼"; + this.data_element.appendChild(this.collapse_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"); - var txt_state = document.createTextNode("todo"); - this.state_element.appendChild(txt_state); + this.state_element.innerHTML = "todo"; this.data_element.appendChild(this.state_element); this.description_element = document.createElement("div"); this.description_element.setAttribute("class", "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.setAttribute("ondblclick", "editTitle(event)"); node.setAttribute("ondrop", "drop(event)"); node.setAttribute("ondragenter", "dragenter(event)"); node.setAttribute("ondragover", "dragover(event)"); @@ -230,13 +227,13 @@ Node.prototype.create = function() var collapsed = getCookie(node.id+"_collapsed") == "true"; if(collapsed) { - //this.children_element.style.maxHeight = "16px"; this.element.classList.add('collapsed'); + this.collapse_button.innerHTML = "▼"; } else { - //this.children_element.style.maxHeight = "inherit"; this.element.classList.remove('collapsed'); + this.collapse_button.innerHTML = "▲"; } } }; @@ -356,3 +353,12 @@ Node.prototype.getTitle = function() { return this.attributes["title"]; }; + +Node.prototype.getDescription = function() +{ + if(this.attributes["description"]) + { + return this.attributes["description"]; + } + return ""; +}; diff --git a/src/ws/view.js b/src/ws/view.js index aa4d9de..1586389 100644 --- a/src/ws/view.js +++ b/src/ws/view.js @@ -83,7 +83,7 @@ function deleteNode(id) function getElementAfter(e) { - if(!e.target.classList.contains("children")) + if(!e.target.classList || !e.target.classList.contains("children")) { return null; } @@ -121,7 +121,7 @@ var last_over = null; function dragenter(e) { // Only highlight children areas - if(!e.target.classList.contains("children")) + if(!e.target.classList || !e.target.classList.contains("children")) { return; } @@ -155,7 +155,7 @@ function dragover(e) function dragleave(e) { // Only highlight children areas - if(!e.target.classList.contains("children")) + if(!e.target.classList || !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.classList.contains("children")) +// if(!e.target.classList || !e.target.classList.contains("children")) // { // return; // } @@ -199,7 +199,7 @@ function drop(e) e.stopPropagation(); // Only allow drops in children areas - if(!e.target.classList.contains("children")) + if(!e.target.classList || !e.target.classList.contains("children")) { return; } @@ -257,6 +257,64 @@ function node_submit_KeyUpHandler(target, e) var updateid; var lineedit; var lineeditparent; + +function onKeyUpHandlerDesc(e) +{ + var node = findNodeFromString(e.target.id); + if(node == null) + { + return; // no node + } + + var lineedit = e.target; + var updateid = idFromStr(lineedit.id); + + if(e.which == 13) + { // enter + node.data_element.removeChild(lineedit); + update(updateid, "description", lineedit.value); + } + if(e.which == 27) + { // escape + node.data_element.removeChild(lineedit); + } +} + +function onLostFocusHandlerDesc(e) +{ + var node = findNodeFromString(e.target.id); + if(node == null) + { + return; // no node + } + + var lineedit = e.target; + + node.data_element.removeChild(lineedit); +} + +function editDescription(e) +{ + e.stopPropagation(); + const idstr = e.target.parentElement.parentElement.id; + var node = findNodeFromString(idstr); + if(node == null) + { + return; // no node + } + + var lineedit = document.createElement("input"); + lineedit.setAttribute("class", "edit"); + lineedit.setAttribute("onkeyup", "onKeyUpHandlerDesc(event)"); + lineedit.setAttribute("onblur", "onLostFocusHandlerDesc(event)"); + lineedit.placeholder = "Node Description"; + lineedit.value = node.getDescription(); + lineedit.id = idstr; + node.data_element.appendChild(lineedit); + //lineeditparent = e.target; + lineedit.focus(); +} + function onKeyUpHandler(e) { var node = findNodeFromString(e.target.id); @@ -271,7 +329,6 @@ function onKeyUpHandler(e) if(e.which == 13) { // enter node.data_element.removeChild(lineedit); - //node.data_element.nodeValue = 'updating...'; update(updateid, "title", lineedit.value); } if(e.which == 27) @@ -296,7 +353,8 @@ function onLostFocusHandler(e) function editTitle(e) { e.stopPropagation(); - var node = findNodeFromString(e.target.id); + const idstr = e.target.parentElement.parentElement.id; + var node = findNodeFromString(idstr); if(node == null) { return; // no node @@ -306,8 +364,9 @@ function editTitle(e) lineedit.setAttribute("class", "edit"); lineedit.setAttribute("onkeyup", "onKeyUpHandler(event)"); lineedit.setAttribute("onblur", "onLostFocusHandler(event)"); + lineedit.placeholder = "Node Title"; lineedit.value = node.getTitle(); - lineedit.id = e.target.id; + lineedit.id = idstr; node.data_element.appendChild(lineedit); //lineeditparent = e.target; lineedit.focus(); @@ -338,10 +397,12 @@ function collapse(e) if(collapsed) { node.element.classList.add('collapsed'); + node.collapse_button.innerHTML = "▼"; } else { node.element.classList.remove('collapsed'); + node.collapse_button.innerHTML = "▲"; } } -- cgit v1.2.3