diff options
Diffstat (limited to 'src/ws/node.js')
| -rw-r--r-- | src/ws/node.js | 146 |
1 files changed, 100 insertions, 46 deletions
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() |