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);
	}
}
*/

var cookies = null;
function initCookie(cookie, index)
{
	const name = cookie.split('=')[0].trim();
	const value = cookie.split('=')[1];
	cookies[name] = value;
}
function initCookies()
{
	cookies = new Object();
	document.cookie.split(';').forEach(initCookie);
}
function setCookie(name, value)
{
	if(cookies == null)
	{
		initCookies();
	}
	cookies[name] = value;
	document.cookie = name + "=" + value+"; expires=Fri, 31 Dec 9999 23:59:59 GMT";
}

function getCookie(name)
{
	if(cookies == null)
	{
		initCookies();
	}
	return cookies[name];
}

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 clear()
{
	document.getElementById("input_data").value = "";
}

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

function getElementAfter(e)
{
	if(!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.contains("children"))
	{
		return;
	}
	e.target.style.backgroundColor = "#646588";
	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.contains("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.classList.contains("children"))
//	{
//		return;
//	}

	e.target.style.backgroundColor = "#aaa";

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

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

	e.preventDefault();
}

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

	// Only allow drops in children areas
	if(!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();
	}
}

//
// Butt ugly.. but hey! it works...
//
var updateid;
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
		node.data_element.removeChild(lineedit);
		//node.data_element.nodeValue = 'updating...';
		update(updateid, "title", lineedit.value);
	}
	if(e.which == 27)
	{ // escape
		node.data_element.removeChild(lineedit);
	}
}

function onLostFocusHandler(e)
{
	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();
	var node = findNodeFromString(e.target.id);
	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.value = node.getTitle();
	lineedit.id = e.target.id;
	node.data_element.appendChild(lineedit);
	//lineeditparent = e.target;
	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 = getCookie(id+"_collapsed") == "true";
	collapsed = !collapsed;
	setCookie(id+"_collapsed", collapsed?"true":"false");

	e.stopPropagation();
	if(collapsed)
	{
		node.element.classList.add('collapsed');
	}
	else
	{
		node.element.classList.remove('collapsed');
	}
}