diff options
Diffstat (limited to 'src/ws')
| -rw-r--r-- | src/ws/munia.css | 61 | ||||
| -rw-r--r-- | src/ws/node.js | 146 | ||||
| -rw-r--r-- | src/ws/view.js | 143 |
3 files changed, 239 insertions, 111 deletions
diff --git a/src/ws/munia.css b/src/ws/munia.css index 8eeebba..38b435f 100644 --- a/src/ws/munia.css +++ b/src/ws/munia.css @@ -27,12 +27,20 @@ body border-width: 1px; border-color: black; border-radius: 3px; - padding: 6px; - margin: 10px; -/* max-width: 800px;*/ + padding: 0px; + margin: 0px; margin-left: auto; margin-right: auto; - overflow: hidden; +} + +.node + .node +{ + margin-top: 12px; +} + +.node .data +{ + background-color: grey; } .node .id @@ -52,9 +60,27 @@ body pointer-events: none; } +.node .state +{ + float: right; + padding-left: 5px; + padding-right: 5px; + background: transparent; + pointer-events: none; +} + +.node .description +{ + clear: both; + padding-left: 5px; + background: transparent; + pointer-events: none; +} + .node .edit { border-color: red; + pointer-events: all; /* border: inherit; padding: inherit; @@ -63,30 +89,33 @@ body */ } -.node .add_button +.node .button { float: right; display: inline-box; width: 1em; height: 1em; - font-size: 0.5em; + font-size: 0.7em; vertical-align: text-center; text-align: center; border: solid green 2px; cursor: pointer; + pointer-events: auto; } -.node .collapse_button +.node .children { - 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; + padding: 6px; + min-height: 5px; + border: dotted 1px black; + overflow: hidden; +} + +.collapsed +{ + background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.6)); + max-height: 16px; + padding: 16px; } .board diff --git a/src/ws/node.js b/src/ws/node.js index fa97368..dff7056 100644 --- a/src/ws/node.js +++ b/src/ws/node.js @@ -33,6 +33,11 @@ function findNode(id, subscribeid) return null; } +function findNodeFromString(idstr) +{ + return findNode(idFromStr(idstr), subscriptionIdFromStr(idstr)); +} + function Node(id, subscribeid) { this.id = id; @@ -40,13 +45,6 @@ function Node(id, subscribeid) this.children = new Array(); this.attributes = {}; this.parent = null; - - // Elements: - this.element = document.createElement("div"); - this.div_id = document.createElement("span"); - this.div_id.setAttribute("class", "id"); - this.div_title = document.createElement("span"); - this.div_title.setAttribute("class", "title"); } Node.prototype.dump = function() @@ -94,8 +92,7 @@ Node.prototype.addChild = function(node, insertBeforeId) if(this.children[i].id == insertBeforeId) { this.children.splice(i - 1, 0, node); - // Insert after id, title, add button and collapse button (ie. + 4) - this.element.insertBefore(node.element, this.element.childNodes[i + 4]); + this.children_element.insertBefore(node.element, this.children_element.childNodes[i]); inserted = true; break; } @@ -104,17 +101,17 @@ Node.prototype.addChild = function(node, insertBeforeId) if(inserted == false) { this.children.push(node); - this.element.appendChild(node.element); + this.children_element.appendChild(node.element); } - if(this.children.length == 0) - { - this.element.style.backgroundColor = "#aaa"; - } - else - { - this.element.style.backgroundColor = "#aaaa81"; - } +// if(this.children.length == 0) +// { +// this.element.style.backgroundColor = "#aaa"; +// } +// else +// { +// this.element.style.backgroundColor = "#aaaa81"; +// } }; Node.prototype.removeChild = function(node) @@ -124,32 +121,57 @@ Node.prototype.removeChild = function(node) return e.id != node.id; }); node.parent = null; - this.element.removeChild(node.element); - - if(this.children.length == 0) - { - this.element.style.backgroundColor = "#aaa"; - } - else - { - this.element.style.backgroundColor = "#aaaa81"; - } + this.children_element.removeChild(node.element); + +// if(this.children.length == 0) +// { +// this.element.style.backgroundColor = "#aaa"; +// } +// else +// { +// this.element.style.backgroundColor = "#aaaa81"; +// } }; Node.prototype.create = function() { + // Node root element + this.element = document.createElement("div"); + + // Element for title, description, state, etc... + this.data_element = document.createElement("div"); + this.data_element.className = "data"; + this.data_element.style.pointerEvents = "none"; + this.element.appendChild(this.data_element); + + // Root element for child nodes. + this.children_element = document.createElement("div"); + this.children_element.className = "children"; + this.element.appendChild(this.children_element); + + + this.div_id = document.createElement("span"); + this.div_id.setAttribute("class", "id"); + this.data_element.appendChild(this.div_id); + + this.div_title = document.createElement("span"); + this.div_title.setAttribute("class", "title"); + var id_txt = document.createTextNode(this.id); + this.div_id.appendChild(id_txt); + this.data_element.appendChild(this.div_title); + this.setAttribute("title", ""); + var node = this.element; node.name = "node"; node.setAttribute("class", "node"); node.setAttribute("ondblclick", "editTitle(event)"); - //node.setAttribute("onclick", "showHideChildren(this, event)"); node.setAttribute("ondrop", "drop(event)"); node.setAttribute("ondragenter", "dragenter(event)"); node.setAttribute("ondragover", "dragover(event)"); node.setAttribute("ondragleave", "dragleave(event)"); node.setAttribute("draggable", true); - node.setAttribute("ondragstart", "drag(this, event)"); + node.setAttribute("ondragstart", "drag(event)"); node.setAttribute("ondragend", "dragEnd(event)"); node.setAttribute("nodeid", this.id); @@ -161,19 +183,28 @@ Node.prototype.create = function() 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", "add_button"); + add_child_button.setAttribute("class", "button"); var txt_plus = document.createTextNode("+"); add_child_button.appendChild(txt_plus); - node.appendChild(add_child_button); + 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", "collapse_button"); - var txt_plus = document.createTextNode("v"); - collapse_button.appendChild(txt_plus); - node.appendChild(collapse_button); + collapse_button.setAttribute("class", "button"); + var txt_v = document.createTextNode("v"); + collapse_button.appendChild(txt_v); + this.data_element.appendChild(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(""); + this.state_element.appendChild(txt_state); + this.data_element.appendChild(this.state_element); /* var subscribe_button = document.createElement("div"); @@ -183,7 +214,7 @@ Node.prototype.create = function() subscribe_button.setAttribute("style", "float: left; display: inline-box; width:14px; height: 14px; border: solid green 2px; cursor: pointer;"); var txt_plus = document.createTextNode("+"); subscribe_button.appendChild(txt_plus); - node.appendChild(subscribe_button); + this.data_element.appendChild(subscribe_button); var unsubscribe_button = document.createElement("div"); unsubscribe_button.name = "unsubscribe_button"; @@ -192,24 +223,20 @@ Node.prototype.create = function() unsubscribe_button.setAttribute("style", "float: left; display: inline-box; width:14px; height: 14px; border: solid red 2px; cursor: pointer;"); var txt_minus = document.createTextNode("-"); unsubscribe_button.appendChild(txt_minus); - node.appendChild(unsubscribe_button); + this.data_element.appendChild(unsubscribe_button); */ - this.element.appendChild(this.div_id); - var id_txt = document.createTextNode(this.id); - 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"; + //this.children_element.style.maxHeight = "16px"; + this.children_element.classList.add('collapsed'); } else { - this.element.style.maxHeight = "inherit"; + //this.children_element.style.maxHeight = "inherit"; + this.children_element.classList.remove('collapsed'); } } }; @@ -245,6 +272,33 @@ Node.prototype.setAttribute = function(name, value) this.element.setAttribute("draggable", true); } } + + if(name == "state") + { + var txt = this.state_element.firstChild; + if(txt != null) + { + this.state_element.removeChild(txt); + } + txt = document.createTextNode(value); + this.state_element.appendChild(txt); + if(value == "done") + { + this.state_element.style.color = "green"; + } + else if(value == "in-progress") + { + this.state_element.style.color = "yellow"; + } + else if(value == "blocked") + { + this.state_element.style.color = "red"; + } + else + { + this.state_element.style.color = "black"; + } + } }; Node.prototype.getTitle = function() diff --git a/src/ws/view.js b/src/ws/view.js index 2c9d507..986e3f9 100644 --- a/src/ws/view.js +++ b/src/ws/view.js @@ -82,6 +82,11 @@ function deleteNode(id) function getElementAfter(e) { + if(e.target.className != "children") + { + return null; + } + var element_after = null; var min_y_diff = 9999999999999; for(i = 0; i < e.target.children.length; ++i) @@ -102,15 +107,22 @@ function getElementAfter(e) return element_after; } -function drag(target, e) +function drag(e) { - e.dataTransfer.setData('id', target.id); + // e.target is always a node.element here + var id = e.target.id; + e.dataTransfer.setData('id', id); e.stopPropagation(); // <--- this fixes the drag target problem - update(idFromStr(target.id), "dragged", "true"); + update(idFromStr(id), "dragged", "true"); } function dragenter(e) { + // Only highlight children areas + if(e.target.className != "children") + { + return; + } e.target.style.backgroundColor = "#646588"; last_over = e.target; } @@ -118,6 +130,12 @@ function dragenter(e) var last_after = null; function dragover(e) { +// // Only highlight children areas +// if(e.target.className != "children") +// { +// return; +// } + e.preventDefault(); var after = getElementAfter(e); @@ -134,11 +152,29 @@ function dragover(e) function dragleave(e) { + // Only highlight children areas + if(e.target.className != "children") + { + return; + } + e.target.style.backgroundColor = "#aaa"; } function dragEnd(e) { + e.stopPropagation(); + + // FIXME: This doesn't seem to work in Chromium 65 + var id = e.dataTransfer.getData('id'); + update(idFromStr(id), "dragged", "false"); + +// // Only highlight children areas +// if(e.target.className != "children") +// { +// return; +// } + e.target.style.backgroundColor = "#aaa"; if(last_after != null) @@ -154,20 +190,26 @@ function dragEnd(e) } e.preventDefault(); - e.stopPropagation(); - - // FIXME: This doesn't seem to work in Chromium 65 - var id = e.dataTransfer.getData('id'); - update(idFromStr(id), "dragged", "false"); } function drop(e) { + e.stopPropagation(); + + // Only allow drops in children areas + if(e.target.className != "children") + { + return; + } + var id = e.dataTransfer.getData('id'); - update(idFromStr(id), "dragged", "false"); + //update(idFromStr(id), "dragged", "false"); + // Get drop id from targets parent (children tag inside the node) + var dropid = e.target.parentElement.id; + console.log("dropid: " + dropid); // Prevent dropping on item itself - if(id == e.target.id) + if(id == dropid) { return; } @@ -178,7 +220,7 @@ function drop(e) { before_id = idFromStr(element_after.id); } - move(idFromStr(id), idFromStr(e.target.id), before_id); + move(idFromStr(id), idFromStr(dropid), before_id); } function subscribeMe(target, e) @@ -193,28 +235,6 @@ function unsubscribeMe(target, e) unsubscribe(target.nodeid); } -function showHideChildren(target, e) -{ - e.stopPropagation(); - updateid = idFromStr(target.id); - if(target.style.backgroundColor != "red") - { - target.style.backgroundColor = "red"; - for(i = 1; i < target.childNodes.length; i++) - { - target.childNodes[i].style.display = "none"; - } - } - else - { - target.style.backgroundColor = "#aaa"; - for(i = 1; i < target.childNodes.length; i++) - { - target.childNodes[i].style.display = "block"; - } - } -} - function node_submit() { var data = document.getElementById("input_node_data"); @@ -238,52 +258,77 @@ var lineedit; var lineeditparent; function onKeyUpHandler(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 - lineeditparent.removeChild(lineedit); - lineeditparent.nodeValue = 'updating...'; + node.data_element.removeChild(lineedit); + //node.data_element.nodeValue = 'updating...'; update(updateid, "title", lineedit.value); } if(e.which == 27) { // escape - lineeditparent.removeChild(lineedit); + node.data_element.removeChild(lineedit); } } function onLostFocusHandler(e) { - lineeditparent.removeChild(lineedit); + var node = findNodeFromString(e.target.id); + if(node == null) + { + return; // no node + } + + var lineedit = e.target; + + node.data_element.removeChild(lineedit); } function editTitle(e) { e.stopPropagation(); - updateid = idFromStr(e.target.id); - subscriptionId = subscriptionIdFromStr(e.target.id); - - var node = findNode(updateid, subscriptionId); + var node = findNodeFromString(e.target.id); + if(node == null) + { + return; // no node + } - lineedit = document.createElement("input"); + var lineedit = document.createElement("input"); lineedit.setAttribute("class", "edit"); lineedit.setAttribute("onkeyup", "onKeyUpHandler(event)"); lineedit.setAttribute("onblur", "onLostFocusHandler(event)"); lineedit.value = node.getTitle(); - e.target.appendChild(lineedit); - //e.target.insertBefore(e.target.childNodes[2], lineedit); - lineeditparent = e.target; + lineedit.id = e.target.id; + node.data_element.appendChild(lineedit); + //lineeditparent = e.target; lineedit.focus(); } function addChild(e) { e.stopPropagation(); - id = idFromStr(e.target.parentElement.id); + id = idFromStr(e.target.parentElement.parentElement.id); create("x", id, -1); } function collapse(e) { - var id = e.target.parentElement.id; + var id = e.target.parentElement.parentElement.id; + + var node = findNodeFromString(id); + if(node == null) + { + return; // no node + } + var collapsed = getCookie(id+"_collapsed") == "true"; collapsed = !collapsed; setCookie(id+"_collapsed", collapsed?"true":"false"); @@ -291,10 +336,10 @@ function collapse(e) e.stopPropagation(); if(collapsed) { - e.target.parentElement.style.maxHeight = "32px"; + node.children_element.classList.add('collapsed'); } else { - e.target.parentElement.style.maxHeight = "inherit"; + node.children_element.classList.remove('collapsed'); } } |