Ugly implementation of inline-title edit on double click.

1 files changed, 80 insertions, 20 deletions

diff --git a/proto.js b/proto.js
index f3cece5..92f90fc 100644
--- a/proto.js
+++ b/proto.js
@@ -57,6 +57,30 @@ var BrowserDetect = {
 
 BrowserDetect.init();
 
+function createId(boardid, taskid)
+{
+  return "b" + boardid + "_t" + taskid;
+}
+
+function idFromStr(str)
+{
+  return str.substring(str.search('t') + 1, str.length);
+}
+
+function getElementsByClass(searchClass, domNode, tagName) { 
+	if (domNode == null) domNode = document;
+	if (tagName == null) tagName = '*';
+	var el = new Array();
+	var tags = domNode.getElementsByTagName(tagName);
+	var tcl = " "+searchClass+" ";
+	for(i=0,j=0; i<tags.length; i++) { 
+		var test = " " + tags[i].className + " ";
+		if (test.indexOf(tcl) != -1) 
+			el[j++] = tags[i];
+	} 
+	return el;
+}
+
 function get_appropriate_ws_url()
 {
     var pcol;
@@ -143,30 +167,23 @@ try {
 
             var board = document.getElementById("board_" + observeid);
             if(!board) {
-              //alert('missing board')
               board = document.createElement("div");
-
               board.name = "board";
               board.setAttribute("class", "board");
-              board.setAttribute("style", "background-color: black; fixed-width: 100px; min-height: 200px; margin: 4px;");
-              //board.setAttribute("ondrop", "drop(this, event)");
-              //board.setAttribute("ondragover", "return false");
-              //board.setAttribute("draggable", true);
-              //board.setAttribute("ondragstart", "drag(this, event)");
               board.id = "board_" + observeid;
               boards.appendChild(board);
             }
 
             if(cmd == "remove") {
-                var task = document.getElementById("board_" + observeid + "task_" + id);
+              var task = document.getElementById(createId(observeid, id));
                 task.parentNode.removeChild(task);
             }
             else if(cmd == "move") {
 	              var parent_id = msg[3];
-                var task = document.getElementById("board_" + observeid + "task_" + id);
+                var task = document.getElementById(createId(observeid, id));
                 if(parent_id != -1) {
-                    var parent_task = document.getElementById("board_" + observeid + "task_" + parent_id);
-	                  parent_task.appendChild(task);
+                  var parent_task = document.getElementById(createId(observeid, parent_id));
+                  parent_task.appendChild(task);
                 }
                 else {
                     board.appendChild(task);
@@ -178,18 +195,21 @@ try {
 
                 task.name = "task";
                 task.setAttribute("class", "task");
+                task.setAttribute("ondblclick", "editTitle(this, event)");
                 task.setAttribute("ondrop", "drop(this, event)");
                 task.setAttribute("ondragover", "return false");
                 task.setAttribute("draggable", true);
                 task.setAttribute("ondragstart", "drag(this, event)");
 
-	              task.id = "board_" + observeid + "task_" + id;
+	              task.id = createId(observeid, id);
 
-                var taskText = document.createTextNode('[' + task.id + ']');
-                taskText.id = "txt";
-	              task.appendChild(taskText);
+                var txtdiv = document.createElement("div");
+                txtdiv.id = createId(observeid, id) + "_txt";
+                var txt = document.createTextNode(createId(observeid, id));
+	              txtdiv.appendChild(txt);
+	              task.appendChild(txtdiv);
 	                    	        
-                var parent_task = document.getElementById("board_" + observeid + "task_" + parent_id);
+                var parent_task = document.getElementById(createId(observeid, parent_id));
 
 	              if(parent_task) {
                     parent_task.appendChild(task);
@@ -200,9 +220,12 @@ try {
             }
             else if(cmd == "update") {
                 var title = msg[3];
-                var task = document.getElementById("board_" + observeid + "task_" + id);
-	              var taskText = document.createTextNode(title);
-	              task.appendChild(taskText);
+                //var task = document.getElementById(createId(observeid, id));
+                var txtdiv = document.getElementById(createId(observeid, id) + "_txt");
+                txtdiv.removeChild(txtdiv.firstChild);
+
+                var txt = document.createTextNode(title);
+	              txtdiv.appendChild(txt);
             }
             f++;
         }
@@ -241,5 +264,42 @@ function drop(target, e) {
 
     var id = e.dataTransfer.getData('Text');
     var task = document.getElementById(id);
-    socket_task.send("move " + id.substring(12, id.length) + " " + target.id.substring(12, target.id.length) + ";");
+    socket_task.send("move " + idFromStr(id) + " " + idFromStr(target.id) + ";");
 }
+
+//
+// Butt ugly.. but hey! it works...
+//
+var updateid;
+var divtxt;
+var oldtxt;
+var oldtitle;
+function onKeyUpHandler(target, e)
+{
+  if(e.which == 13) { // enter
+    divtxt.removeChild(target);
+    oldtxt.nodeValue = 'updating...';
+    socket_task.send("update " + updateid + " \""+target.value+"\";");
+  }
+  if(e.which == 27) { // escape
+    divtxt.removeChild(target);
+    oldtxt.nodeValue = oldtitle;
+  }
+}
+
+function editTitle(target, 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)");
+  lineedit = inp;
+  txtdiv.appendChild(inp);
+  inp.focus();
+}
\ No newline at end of file