From 4877c43451d30a0ae0e2d3eaae6b684304683581 Mon Sep 17 00:00:00 2001
From: Bent Bisballe Nyeng <deva@aasimon.org>
Date: Thu, 11 Jun 2020 18:12:45 +0200
Subject: Add intermistic title edit functionality using double-click.

---
 src/ws/munia.css | 28 +++++++++++++++++++++++++++
 src/ws/node.js   | 20 +++++++++++++------
 src/ws/view.js   | 58 +++++++++++++++++++++++---------------------------------
 3 files changed, 66 insertions(+), 40 deletions(-)

(limited to 'src')

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();
 }
-- 
cgit v1.2.3