shoplist/web/script.js

var elemAdd = document.querySelector("#add");
var elemName = elemAdd.querySelector(".name");
var elemSuggestions = elemAdd.querySelector(".suggestions");
var elemList = document.querySelector("#list");

elemSuggestions.show = function() {
	elemSuggestions.className = "suggestions";
	elmeSuggestions.style.display = "block";
}
elemSuggestions.hide = function() {
	elemSuggestions.className = "suggestions hidden";
	setTimeout(function() {
		elmeSuggestions.style.display = "none";
	}, 500);
}

var events = WebEvents();
var words = [];

function capitalize(word) {
	var first = word[0].toUpperCase();
	return first + word.substring(1);
}

function remove(index) {
	var elem;
	for (var i in elemList.childNodes) {
		var e = elemList.childNodes[i];
		var eindex = parseInt(e.querySelector(".index").value);
		if (eindex == index) {
			elem = e;
			break;
		}
	}
	if (!elem)
		return;

	elem.className += " hidden";
	setTimeout(function() {
		elem.parentNode.removeChild(elem);
	}, 1000);
}

function add(word, index, animate) {
	if (!word)
		return;

	var elem = document.createElement("div");
	if (animate)
		elem.className = "elem hidden";
	else
		elem.className = "elem";

	var elemName = document.createElement("span");
	elemName.className = "name";
	elemName.textContent = capitalize(word);

	var elemIndex = document.createElement("input");
	elemIndex.className = "index";
	elemIndex.value = index;
	elemIndex.type = "hidden";

	var elemOk = document.createElement("span");
	elemOk.className = "ok";

	elemOk.addEventListener("click", function() {
		post("/remove/"+index);
	});

	elem.appendChild(elemIndex);
	elem.appendChild(elemName);
	elem.appendChild(elemOk);

	list.insertBefore(elem, list.firstChild);

	if (animate) {
		setTimeout(function() {
			elem.className = "elem";
		}, 100);
	}
}

function request(method, url, cb) {
	var xhr = new XMLHttpRequest();

	xhr.addEventListener("load", function() {
		cb(null, JSON.parse(xhr.responseText));
	});
	xhr.addEventListener("error", function(err) {
		if (cb)
			cb(err);
	});

	xhr.open(method, url);
	xhr.send();
}

function get(url, cb) {
	request("GET", url, cb);
}
function post(url, cb) {
	request("POST", url, cb);
}

function clearChildren(elem) {
	while (elem.firstChild) {
		elem.removeChild(elem.firstChild);
	}
}

elemAdd.addEventListener("submit", function(evt) {
	evt.preventDefault();
	if (elemName.value == "")
		return;

	post("/add/"+encodeURIComponent(elemName.value));
	elemName.value = "";
	setTimeout(function() {
		elemName.blur();
	}, 1);
});

function displaySuggestions() {
	setTimeout(function() {
		var name = elemName.value;
		var suggestions = words
			.filter(function(w) {
				return w.name.indexOf(name.toLowerCase()) !== -1;
			})
			.sort(function(a, b) {
				return a.count - b.count;
			});

		clearChildren(elemSuggestions);

		suggestions.forEach(function(w) {
			var elem = document.createElement("div");
			elem.className = "suggestion";
			elem.textContent = capitalize(w.name);

			elemSuggestions.insertBefore(elem, elemSuggestions.firstChild);

			elem.addEventListener("click", function() {
				console.log(w);
				post("/add/"+encodeURIComponent(w.name));
				elemSuggestions.hide();
				elemName.value = "";
				elemName.blur();
			});
		});
		if (suggestions.length > 0)
			elemSuggestions.show();
		else
			elemSuggestions.hide();
	}, 10);
}
elemName.addEventListener("keydown", displaySuggestions);
elemName.addEventListener("focus", displaySuggestions);
elemName.addEventListener("blur", function(evt) {
	elemSuggestions.hide();
});

events.on("add", function(evt) {
	add(evt.name, evt.index, true);

	var word = words.filter(function(w) {
		return w.name === evt.name;
	})[0];
	if (word)
		word.count += 1;
	else
		words.push({ name: evt.name, count: 1 });
});

events.on("remove", function(evt) {
	remove(evt.index);
});

get("/list", function(err, list) {
	list.forEach(function(word, index) { add(word, index); });
});

get("/words", function(err, w) {
	if (err)
		return console.error(err);

	words = w;
});