path: root/src/ws/view.js

/* -*- Mode: js2; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
/* vim: set et sw=2 ts=2: */
'use strict';

/*
function createNode()
{
	var node = new Node();
	node.id = 42;
	node.dump = function()
	{
		alert(this.id);
	}
}
*/

function getNode(subscribeid, id)
{
}

function updateNode(subscribeid, id, name, value)
{
}

function getBoard(subscribeid)
{
	var board = document.getElementById("board_" + subscribeid);
	if(!board)
	{
		board = document.createElement("div");
		board.name = "board";
		board.setAttribute("class", "board");
		board.id = "board_" + subscribeid;
		boards.appendChild(board);
	}

	return board;
}

function removeBoard(subscribeid)
{
	var board = document.getElementById("board_" + subscribeid);
	if(board)
	{
		boards.removeChild(board);
	}
}

//////////////////////////////////////////////////////
//////////////////////////////////////////////////////

function clear()
{
	document.getElementById("input_data").value = "";
}

function deleteNode(id)
{
	remove(id);
}

function getElementAfter(e)
{
	if(!e.target.classList || !e.target.classList.contains("children"))
	{
		return null;
	}

	var element_after = null;
	var min_y_diff = 9999999999999;
	for(var i = 0; i < e.target.childNodes.length; ++i)
	{
		if(!e.target.children[i].classList.contains("node")) // Only look at node elements
		{
			continue;
		}

		var y_diff = e.target.children[i].getBoundingClientRect().y - e.y;
		if(y_diff > 0 && y_diff < min_y_diff)
		{
			element_after = e.target.children[i];
			min_y_diff = y_diff;
		}
	}

	return element_after;
}

function drag(e)
{
	// 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(id), "dragged", "true");
}

var last_over = null;
function dragenter(e)
{
	// Only highlight children areas
	if(!e.target.classList || !e.target.classList.contains("children"))
	{
		return;
	}

	e.target.style.backgroundColor = "#c4ffd0";
	last_over = e.target;
}

var last_after = null;
function dragover(e)
{
//	// Only highlight children areas
//	if(!e.target.classList.contains("children"))
//	{
//		return;
//	}

	e.preventDefault();
/*
	var after = getElementAfter(e);
	if(last_after != null)
	{
		last_after.style.borderColor = "black";
	}
	if(after != null)
	{
		after.style.borderColor = "red black black black";
	}
	last_after = after;
*/
}

function dragleave(e)
{
	// Only highlight children areas
	if(!e.target.classList || !e.target.classList.contains("children"))
	{
		return;
	}

	e.target.style.backgroundColor = "";
}

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.classList || !e.target.classList.contains("children"))
//	{
//		return;
//	}

	//e.target.style.backgroundColor = "";

	if(last_after != null)
	{
		last_after.style.borderColor = "black";
		last_after = null;
	}

	if(last_over != null)
	{
		last_over.style.backgroundColor = "";
		last_over = null;
	}

	e.preventDefault();
}

function drop(e)
{
	e.stopPropagation();

	// Only allow drops in children areas
	if(!e.target.classList || !e.target.classList.contains("children"))
	{
		return;
	}

	var id = e.dataTransfer.getData('id');
	//update(idFromStr(id), "dragged", "false");

	// Get drop id from targets parent (children tag inside the node)
	var dropid = e.target.parentElement.id;
	// Prevent dropping on item itself
	if(id == dropid)
	{
		return;
	}

	var before_id = -1;
	var element_after = getElementAfter(e);
	if(element_after != null)
	{
		before_id = idFromStr(element_after.id);
	}
	move(idFromStr(id), idFromStr(dropid), before_id);
}

function subscribeMe(target, e)
{
	e.stopPropagation();
	subscribe(target.nodeid);
}

function unsubscribeMe(target, e)
{
	e.stopPropagation();
	unsubscribe(target.nodeid);
}

function node_submit()
{
	var data = document.getElementById("input_node_data");
	transmit(data.value);
	data.value = "";
}

function node_submit_KeyUpHandler(target, e)
{
	if(e.which == 13)
	{ // enter
		node_submit();
	}
}

function onKeyUpHandlerDesc(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 && e.ctrlKey)
	{ // enter
		node.data_element.removeChild(lineedit);
		update(updateid, "description", lineedit.value);
		node.setDraggable(true);
	}
	if(e.which == 27)
	{ // escape
		node.data_element.removeChild(lineedit);
		node.setDraggable(true);
	}
}

function onLostFocusHandlerDesc(e)
{
	var node = findNodeFromString(e.target.id);
	if(node == null)
	{
		return; // no node
	}

	var lineedit = e.target;

	node.data_element.removeChild(lineedit);
	node.setDraggable(true);
}

function editDescription(e)
{
	e.stopPropagation();
	const idstr = e.target.parentElement.parentElement.id;
	var node = findNodeFromString(idstr);
	if(node == null)
	{
		return; // no node
	}

	var lineedit = document.createElement("textarea");
	lineedit.className = "edit";
	lineedit.rows = 16;
	lineedit.setAttribute("onkeyup", "onKeyUpHandlerDesc(event)");
	lineedit.setAttribute("onblur", "onLostFocusHandlerDesc(event)");
	lineedit.placeholder = "Node Description (Ctrl+enter to save, esc to discard)";
	lineedit.value = node.getDescription();
	lineedit.id = idstr;
	lineedit.onmouseenter =
		function(ev)
		{
			var node = findNodeFromString(ev.target.id);
			node.setDraggable(false);
		};
	lineedit.onmouseleave =
		function(ev)
		{
			var node = findNodeFromString(ev.target.id);
			node.setDraggable(true);
		};
	node.data_element.appendChild(lineedit);
	lineedit.focus();
}

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
		node.data_element.removeChild(lineedit);
		node.setDraggable(true);
		update(updateid, "title", lineedit.value);
	}
	if(e.which == 27)
	{ // escape
		node.data_element.removeChild(lineedit);
		node.setDraggable(true);
	}
}

function onLostFocusHandler(e)
{
	var node = findNodeFromString(e.target.id);
	if(node == null)
	{
		return; // no node
	}

	var lineedit = e.target;

	node.data_element.removeChild(lineedit);
	node.setDraggable(true);
}

function editTitle(e)
{
	e.stopPropagation();
	const idstr = e.target.parentElement.parentElement.id;
	var node = findNodeFromString(idstr);
	if(node == null)
	{
		return; // no node
	}

	var lineedit = document.createElement("input");
	lineedit.setAttribute("class", "edit");
	lineedit.setAttribute("onkeyup", "onKeyUpHandler(event)");
	lineedit.setAttribute("onblur", "onLostFocusHandler(event)");
	lineedit.placeholder = "Node Title (Enter to save, esc to discard)";
	lineedit.value = node.getTitle();
	lineedit.id = idstr;
	lineedit.onmouseenter =
		function(ev)
		{
			var node = findNodeFromString(ev.target.id);
			node.setDraggable(false);
		};
	lineedit.onmouseleave =
		function(ev)
		{
			var node = findNodeFromString(ev.target.id);
			node.setDraggable(true);
		};
	node.data_element.insertBefore(lineedit, node.description_element);
	lineedit.focus();
}

function addChild(e)
{
	e.stopPropagation();
	const id = idFromStr(e.target.parentElement.parentElement.id);
	create("x", id, -1);
}

function collapse(e)
{
	var id = e.target.parentElement.parentElement.id;

	var node = findNodeFromString(id);
	if(node == null)
	{
		return; // no node
	}

	var collapsed = localStorage.getItem(id+"_collapsed") == "true";
	collapsed = !collapsed;
	localStorage.setItem(id+"_collapsed", collapsed?"true":"false");

	e.stopPropagation();
	if(collapsed)
	{
		node.element.classList.add('collapsed');
		node.collapse_button.innerHTML = "&#9660;";
	}
	else
	{
		node.element.classList.remove('collapsed');
		node.collapse_button.innerHTML = "&#9650;";
	}
}

function changeState(e)
{
	const idstr = e.target.parentElement.parentElement.id;
	const node = findNodeFromString(idstr);
	if(node == null)
	{
		return; // no node
	}

	const id = idFromStr(e.target.parentElement.parentElement.id);

	switch(node.attributes["state"])
	{
	case "in-progress":
		update(id, "state", "blocked");
		break;
	case "blocked":
		update(id, "state", "done");
		break;
	case "done":
		update(id, "state", "todo");
		break;
	default:
	case "todo":
		update(id, "state", "in-progress");
		break;
	}
}