From 4877c43451d30a0ae0e2d3eaae6b684304683581 Mon Sep 17 00:00:00 2001 From: Bent Bisballe Nyeng 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