summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorBent Bisballe Nyeng <deva@aasimon.org>2020-06-11 18:12:45 +0200
committerBent Bisballe Nyeng <deva@aasimon.org>2020-06-11 20:15:15 +0200
commit4877c43451d30a0ae0e2d3eaae6b684304683581 (patch)
tree32b81479478dcba2bab2a83a1363763daabb81f6
parentd28cc096abf6aad4c12e3a90f30edf4c5c6fed1f (diff)
Add intermistic title edit functionality using double-click.
-rw-r--r--src/ws/munia.css28
-rw-r--r--src/ws/node.js20
-rw-r--r--src/ws/view.js58
3 files changed, 66 insertions, 40 deletions
diff --git a/src/ws/munia.css b/src/ws/munia.css
index ad7b7fd..93e5ffe 100644
--- a/src/ws/munia.css
+++ b/src/ws/munia.css
@@ -32,6 +32,34 @@ body
max-width: 300px;
}
+.node .id
+{
+ font-size: 0.7em;
+ vertical-align: text-top;
+ opacity: 0.3;
+ min-width: 2em;
+ display: inline-block;
+ pointer-events: none;
+}
+
+.node .title
+{
+ padding-left: 5px;
+ background: transparent;
+ pointer-events: none;
+}
+
+.node .edit
+{
+ border-color: red;
+/*
+ border: inherit;
+ padding: inherit;
+ margin: inherit;
+ background: inherit;
+*/
+}
+
.board
{
width: *;
diff --git a/src/ws/node.js b/src/ws/node.js
index 6abc8b2..3baeb02 100644
--- a/src/ws/node.js
+++ b/src/ws/node.js
@@ -11,6 +11,11 @@ function idFromStr(str)
return str.substring(str.search('t') + 1, str.length);
}
+function subscriptionIdFromStr(str)
+{
+ return str.substring(1, str.search('_'));
+}
+
var nodes = new Array();
function findNode(id, subscribeid)
@@ -39,7 +44,9 @@ function Node(id, subscribeid)
// 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()
@@ -116,7 +123,7 @@ Node.prototype.create = function()
node.name = "node";
node.setAttribute("class", "node");
- node.setAttribute("ondblclick", "editTitle(this, event)");
+ node.setAttribute("ondblclick", "editTitle(event)");
//node.setAttribute("onclick", "showHideChildren(this, event)");
node.setAttribute("ondrop", "drop(event)");
node.setAttribute("ondragenter", "dragenter(event)");
@@ -153,13 +160,9 @@ Node.prototype.create = function()
this.element.appendChild(this.div_id);
var id_txt = document.createTextNode(this.id);
- this.div_id.style.padding = "5px";
- this.div_id.style.opacity = "0.3";
this.div_id.appendChild(id_txt);
-
this.element.appendChild(this.div_title);
-
- this.setAttribute("title", "(missing title)");
+ this.setAttribute("title", "");
};
Node.prototype.setAttribute = function(name, value)
@@ -194,3 +197,8 @@ Node.prototype.setAttribute = function(name, value)
}
}
};
+
+Node.prototype.getTitle = function()
+{
+ return this.attributes["title"];
+};
diff --git a/src/ws/view.js b/src/ws/view.js
index 4a10386..b960170 100644
--- a/src/ws/view.js
+++ b/src/ws/view.js
@@ -200,52 +200,42 @@ function node_submit_KeyUpHandler(target, e)
// Butt ugly.. but hey! it works...
//
var updateid;
-var divtxt;
-var oldtxt;
-var oldtitle;
-function onKeyUpHandler(target, e)
+var lineedit;
+var lineeditparent;
+function onKeyUpHandler(e)
{
if(e.which == 13)
{ // enter
- divtxt.removeChild(target);
- oldtxt.nodeValue = 'updating...';
- update(updateid, "title", target.value);
+ lineeditparent.removeChild(lineedit);
+ lineeditparent.nodeValue = 'updating...';
+ update(updateid, "title", lineedit.value);
}
if(e.which == 27)
{ // escape
- divtxt.removeChild(target);
- oldtxt.nodeValue = oldtitle;
+ lineeditparent.removeChild(lineedit);
}
}
-function onLostFocusHandler(target, e)
+function onLostFocusHandler(e)
{
- if(target.value == oldtitle)
- {
- divtxt.removeChild(target);
- oldtxt.nodeValue = oldtitle;
- }
+ lineeditparent.removeChild(lineedit);
}
-function editTitle(target, e)
+function editTitle(e)
{
e.stopPropagation();
- updateid = idFromStr(target.id);
- if(updateid < 10)
- {
- return;
- }
- var inp = document.createElement("input");
- var txtdiv = document.getElementById(target.id + "_txt");
- divtxt = txtdiv;
- oldtxt = txtdiv.firstChild;
- oldtitle = oldtxt.nodeValue;
- oldtxt.nodeValue = "";
- inp.setAttribute("onkeyup", "onKeyUpHandler(this, event)");
- inp.setAttribute("onblur", "onLostFocusHandler(this, event)");
- inp.setAttribute("style", "border: inherit; padding: inherit; margin: inherit; background: inherit;");
- inp.value = oldtitle;
- lineedit = inp;
- txtdiv.appendChild(inp);
- inp.focus();
+ updateid = idFromStr(e.target.id);
+ subscriptionId = subscriptionIdFromStr(e.target.id);
+
+ var node = findNode(updateid, subscriptionId);
+
+ 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.focus();
}