summaryrefslogtreecommitdiff
path: root/src/ws
diff options
context:
space:
mode:
Diffstat (limited to 'src/ws')
-rw-r--r--src/ws/munia.css41
-rw-r--r--src/ws/node.js134
-rw-r--r--src/ws/view.js19
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');
}
}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-14 03:13:20 +0000