From b2d6e2b4ac56e4ece3ecbe3f98d64ea9bd107151 Mon Sep 17 00:00:00 2001 From: Bent Bisballe Nyeng Date: Sat, 13 Jun 2020 23:57:19 +0200 Subject: Refactor the way node hierarchies are being represented. Add state attribute. --- src/ws/view.js | 143 +++++++++++++++++++++++++++++++++++++-------------------- 1 file changed, 94 insertions(+), 49 deletions(-) (limited to 'src/ws/view.js') diff --git a/src/ws/view.js b/src/ws/view.js index 2c9d507..986e3f9 100644 --- a/src/ws/view.js +++ b/src/ws/view.js @@ -82,6 +82,11 @@ function deleteNode(id) function getElementAfter(e) { + if(e.target.className != "children") + { + return null; + } + var element_after = null; var min_y_diff = 9999999999999; for(i = 0; i < e.target.children.length; ++i) @@ -102,15 +107,22 @@ function getElementAfter(e) return element_after; } -function drag(target, e) +function drag(e) { - e.dataTransfer.setData('id', target.id); + // e.target is always a node.element here + var id = e.target.id; + e.dataTransfer.setData('id', id); e.stopPropagation(); // <--- this fixes the drag target problem - update(idFromStr(target.id), "dragged", "true"); + update(idFromStr(id), "dragged", "true"); } function dragenter(e) { + // Only highlight children areas + if(e.target.className != "children") + { + return; + } e.target.style.backgroundColor = "#646588"; last_over = e.target; } @@ -118,6 +130,12 @@ function dragenter(e) var last_after = null; function dragover(e) { +// // Only highlight children areas +// if(e.target.className != "children") +// { +// return; +// } + e.preventDefault(); var after = getElementAfter(e); @@ -134,11 +152,29 @@ function dragover(e) function dragleave(e) { + // Only highlight children areas + if(e.target.className != "children") + { + return; + } + e.target.style.backgroundColor = "#aaa"; } function dragEnd(e) { + e.stopPropagation(); + + // FIXME: This doesn't seem to work in Chromium 65 + var id = e.dataTransfer.getData('id'); + update(idFromStr(id), "dragged", "false"); + +// // Only highlight children areas +// if(e.target.className != "children") +// { +// return; +// } + e.target.style.backgroundColor = "#aaa"; if(last_after != null) @@ -154,20 +190,26 @@ function dragEnd(e) } e.preventDefault(); - e.stopPropagation(); - - // FIXME: This doesn't seem to work in Chromium 65 - var id = e.dataTransfer.getData('id'); - update(idFromStr(id), "dragged", "false"); } function drop(e) { + e.stopPropagation(); + + // Only allow drops in children areas + if(e.target.className != "children") + { + return; + } + var id = e.dataTransfer.getData('id'); - update(idFromStr(id), "dragged", "false"); + //update(idFromStr(id), "dragged", "false"); + // 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 == e.target.id) + if(id == dropid) { return; } @@ -178,7 +220,7 @@ function drop(e) { before_id = idFromStr(element_after.id); } - move(idFromStr(id), idFromStr(e.target.id), before_id); + move(idFromStr(id), idFromStr(dropid), before_id); } function subscribeMe(target, e) @@ -193,28 +235,6 @@ function unsubscribeMe(target, e) unsubscribe(target.nodeid); } -function showHideChildren(target, e) -{ - e.stopPropagation(); - updateid = idFromStr(target.id); - if(target.style.backgroundColor != "red") - { - target.style.backgroundColor = "red"; - for(i = 1; i < target.childNodes.length; i++) - { - target.childNodes[i].style.display = "none"; - } - } - else - { - target.style.backgroundColor = "#aaa"; - for(i = 1; i < target.childNodes.length; i++) - { - target.childNodes[i].style.display = "block"; - } - } -} - function node_submit() { var data = document.getElementById("input_node_data"); @@ -238,52 +258,77 @@ var lineedit; var lineeditparent; function onKeyUpHandler(e) { + var node = findNodeFromString(e.target.id); + if(node == null) + { + return; // no node + } + + var lineedit = e.target; + var updateid = idFromStr(lineedit.id); + if(e.which == 13) { // enter - lineeditparent.removeChild(lineedit); - lineeditparent.nodeValue = 'updating...'; + node.data_element.removeChild(lineedit); + //node.data_element.nodeValue = 'updating...'; update(updateid, "title", lineedit.value); } if(e.which == 27) { // escape - lineeditparent.removeChild(lineedit); + node.data_element.removeChild(lineedit); } } function onLostFocusHandler(e) { - lineeditparent.removeChild(lineedit); + var node = findNodeFromString(e.target.id); + if(node == null) + { + return; // no node + } + + var lineedit = e.target; + + node.data_element.removeChild(lineedit); } function editTitle(e) { e.stopPropagation(); - updateid = idFromStr(e.target.id); - subscriptionId = subscriptionIdFromStr(e.target.id); - - var node = findNode(updateid, subscriptionId); + var node = findNodeFromString(e.target.id); + if(node == null) + { + return; // no node + } - lineedit = document.createElement("input"); + var 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.id = e.target.id; + node.data_element.appendChild(lineedit); + //lineeditparent = e.target; lineedit.focus(); } function addChild(e) { e.stopPropagation(); - id = idFromStr(e.target.parentElement.id); + id = idFromStr(e.target.parentElement.parentElement.id); create("x", id, -1); } function collapse(e) { - var id = e.target.parentElement.id; + var id = e.target.parentElement.parentElement.id; + + var node = findNodeFromString(id); + if(node == null) + { + return; // no node + } + var collapsed = getCookie(id+"_collapsed") == "true"; collapsed = !collapsed; setCookie(id+"_collapsed", collapsed?"true":"false"); @@ -291,10 +336,10 @@ function collapse(e) e.stopPropagation(); if(collapsed) { - e.target.parentElement.style.maxHeight = "32px"; + node.children_element.classList.add('collapsed'); } else { - e.target.parentElement.style.maxHeight = "inherit"; + node.children_element.classList.remove('collapsed'); } } -- cgit v1.2.3