From 5e425372f92687af2b24972ca1d28ae66d3c15d6 Mon Sep 17 00:00:00 2001 From: Bent Bisballe Nyeng Date: Sun, 14 Jun 2020 18:17:03 +0200 Subject: Rework layout and add description field. --- src/ws/munia.css | 41 +++++++++-------- src/ws/node.js | 134 ++++++++++++++++++++++++++++++++++--------------------- src/ws/view.js | 19 ++++---- 3 files changed, 116 insertions(+), 78 deletions(-) diff --git a/src/ws/munia.css b/src/ws/munia.css index 38b435f..bfd63c7 100644 --- a/src/ws/munia.css +++ b/src/ws/munia.css @@ -10,6 +10,8 @@ body { cursor: default; + font-family: sans-serif; + font-size: 0.8em; } .node @@ -45,19 +47,23 @@ body .node .id { - font-size: 0.7em; + font-size: 0.8em; vertical-align: text-top; - opacity: 0.3; + opacity: 0.6; min-width: 2em; display: inline-block; pointer-events: none; + margin-left: 2px; } .node .title { + font-weight: bold; + font-size: 1.1em; padding-left: 5px; background: transparent; pointer-events: none; + min-width: 8em; } .node .state @@ -71,9 +77,11 @@ body .node .description { + border-top: solid black 1px; + display: block; clear: both; padding-left: 5px; - background: transparent; + background: #999; pointer-events: none; } @@ -111,30 +119,27 @@ body overflow: hidden; } -.collapsed +.collapsed .children +{ + background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1)); + max-height: 0px; + padding-top: 0px; + opacity: 0.2; +} + +.collapsed .description { - background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.6)); - max-height: 16px; - padding: 16px; + display: none; } .board { -/* width: *; */ - min-height: 100px; + min-height: 200px; width: 500px; - padding: 2px; + padding: 8px; margin: 2px; display: inline-box; float:left; - - background: -moz-linear-gradient(left center, rgb(0,0,0), rgb(79,79,79), rgb(21,21,21)); - background: -webkit-gradient(linear, left top, right top, - color-stop(0, rgb(0,0,0)), - color-stop(0.50, rgb(79,79,79)), - color-stop(1, rgb(21,21,21))); - background: -webkit-linear-gradient(left center, rgb(0,0,0), rgb(79,79,79), rgb(21,21,21)); - background: -ms-linear-gradient(left center, rgb(0,0,0), rgb(79,79,79), rgb(21,21,21)); } .log diff --git a/src/ws/node.js b/src/ws/node.js index 047c1e3..6e60b37 100644 --- a/src/ws/node.js +++ b/src/ws/node.js @@ -167,34 +167,16 @@ Node.prototype.create = function() 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"); + this.id_element = document.createElement("span"); + this.id_element.setAttribute("class", "id"); var id_txt = document.createTextNode(this.id); - this.div_id.appendChild(id_txt); - this.data_element.appendChild(this.div_title); - this.setAttribute("title", ""); + this.id_element.appendChild(id_txt); + this.data_element.appendChild(this.id_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)"); - node.setAttribute("ondragleave", "dragleave(event)"); - node.setAttribute("draggable", true); - node.setAttribute("ondragstart", "drag(event)"); - node.setAttribute("ondragend", "dragEnd(event)"); - node.setAttribute("nodeid", this.id); - - // This is a hack to make it possible to identify the nodeid and - // oberveid from the node id alone. - node.id = createId(this.subscribeid, this.id); + this.title_element = document.createElement("span"); + this.title_element.setAttribute("class", "title"); + this.data_element.appendChild(this.title_element); +// this.setAttribute("title", ""); var add_child_button = document.createElement("div"); add_child_button.name = "add_button"; @@ -223,53 +205,105 @@ Node.prototype.create = function() this.state_element.appendChild(txt_state); this.data_element.appendChild(this.state_element); -/* - var subscribe_button = document.createElement("div"); - subscribe_button.name = "subscribe_button"; - subscribe_button.setAttribute("onclick", "subscribeMe(this, event)"); - subscribe_button.setAttribute("nodeid", this.id); - 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); - this.data_element.appendChild(subscribe_button); - - var unsubscribe_button = document.createElement("div"); - unsubscribe_button.name = "unsubscribe_button"; - unsubscribe_button.setAttribute("onclick", "unsubscribeMe(this, event)"); - unsubscribe_button.setAttribute("nodeid", this.id); - 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); - this.data_element.appendChild(unsubscribe_button); -*/ + this.description_element = document.createElement("div"); + this.description_element.setAttribute("class", "description"); + 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)"); + node.setAttribute("ondragleave", "dragleave(event)"); + node.setAttribute("draggable", true); + node.setAttribute("ondragstart", "drag(event)"); + node.setAttribute("ondragend", "dragEnd(event)"); + + // This is a hack to make it possible to identify the nodeid and + // oberveid from the node id alone. + node.id = createId(this.subscribeid, this.id); { var collapsed = getCookie(node.id+"_collapsed") == "true"; if(collapsed) { //this.children_element.style.maxHeight = "16px"; - this.children_element.classList.add('collapsed'); + this.element.classList.add('collapsed'); } else { //this.children_element.style.maxHeight = "inherit"; - this.children_element.classList.remove('collapsed'); + this.element.classList.remove('collapsed'); } } }; +function checkHTML(html) +{ + var doc = document.createElement('p'); + doc.innerHTML = html; + + // Check for correct and balanced HTML + if(doc.innerHTML !== html) + { + return false; + } + + // Check for valid tags + var elements = doc.getElementsByTagName("*"); + for(let element of elements) + { + // Check for allowed tag-names + if(element.tagName != "P" && + element.tagName != "EM" && + element.tagName != "STRONG" && + element.tagName != "BR" && + element.tagName != "UL" && + element.tagName != "LI" && + // Allow no attributes + element.attributes.length != 0) + { + return false; + } + } + + return true; +} + Node.prototype.setAttribute = function(name, value) { this.attributes[name] = value; if(name == "title") { - if(this.div_title.firstChild != null) + if(this.title_element.firstChild != null) { - this.div_title.removeChild(this.div_title.firstChild); + this.title_element.removeChild(this.title_element.firstChild); } var title_txt = document.createTextNode(value); - this.div_title.appendChild(title_txt); + this.title_element.appendChild(title_txt); + } + + if(name == "description") + { + if(this.description_element.firstChild != null) + { + this.description_element.removeChild(this.description_element.firstChild); + } + if(checkHTML(value)) + { + // Insert as HTML + this.description_element.innerHTML = value; + } + else + { + // Not valid HTML, insert as plain text to avoid breaking things + var description_txt = document.createTextNode(value); + this.description_element.appendChild(description_txt); + } } if(name == "dragged") diff --git a/src/ws/view.js b/src/ws/view.js index 264ef9f..6c43dc8 100644 --- a/src/ws/view.js +++ b/src/ws/view.js @@ -83,7 +83,7 @@ function deleteNode(id) function getElementAfter(e) { - if(e.target.className != "children") + if(!e.target.classList.contains("children")) { return null; } @@ -92,7 +92,7 @@ function getElementAfter(e) var min_y_diff = 9999999999999; for(var i = 0; i < e.target.childNodes.length; ++i) { - if(e.target.children[i].className != "node") // Only look at node elements + if(!e.target.children[i].classList.contains("node")) // Only look at node elements { continue; } @@ -121,7 +121,7 @@ var last_over = null; function dragenter(e) { // Only highlight children areas - if(e.target.className != "children") + if(!e.target.classList.contains("children")) { return; } @@ -133,7 +133,7 @@ var last_after = null; function dragover(e) { // // Only highlight children areas -// if(e.target.className != "children") +// if(!e.target.classList.contains("children")) // { // return; // } @@ -155,7 +155,7 @@ function dragover(e) function dragleave(e) { // Only highlight children areas - if(e.target.className != "children") + if(!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.className != "children") +// if(!e.target.classList.contains("children")) // { // return; // } @@ -199,7 +199,7 @@ function drop(e) e.stopPropagation(); // Only allow drops in children areas - if(e.target.className != "children") + if(!e.target.classList.contains("children")) { return; } @@ -209,7 +209,6 @@ function drop(e) // 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 == dropid) { @@ -338,10 +337,10 @@ function collapse(e) e.stopPropagation(); if(collapsed) { - node.children_element.classList.add('collapsed'); + node.element.classList.add('collapsed'); } else { - node.children_element.classList.remove('collapsed'); + node.element.classList.remove('collapsed'); } } -- cgit v1.2.3