soundboard/static/main.js

function ready(fn) {
	if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading") {
		fn();
	} else {
		document.addEventListener("DOMContentLoaded", fn);
	}
}

ready(function() {
	hideSections();

	var sections = document.querySelectorAll("section");
	var nav = document.querySelectorAll("nav > a");

	if (sections.length > 0)
		sections[0].style.display = "block";

	nav.forEach(function(item) {
		item.onclick = function(e) {
			e.preventDefault();

			var target = e.target.href.split("#");
			var id = target[target.length - 1];

			hideSections();

			document.querySelector("#" + id).style.display = "block";
		};
	});

	var searchfield = document.querySelector("#search");

	filter(searchfield, ".sound", "inline-block");
	filter(searchfield, ".tag", "block");

	var reset = document.querySelector("#sounds .reset");

	if (reset !== null) {
		reset.addEventListener("click", function() {
			var buttons = document.querySelectorAll(".sound");

			buttons.forEach(function(item) {
				item.style.display = "inline-block";
			});

			searchfield.value = "";
		});
	}

	var taginputs = document.querySelectorAll(".taginput");

	if (taginputs.length > 0) {
		taginputs.forEach(function(taginput) {
			taginput.addEventListener("keydown", function(e) {
				if (e.target == taginput && (e.which == 13 || e.keyCode == 13)) {
					e.preventDefault();
				} else if (e.which == 32 || e.keyCode == 13) {
					console.log("Space");
					addTag(e.target);
				}
			});
		});
	}
});

function filter(searchfield, itemSelector, unHideStyle) {
	if (searchfield !== null) {
		searchfield.addEventListener("keyup", function() {
			var items = document.querySelectorAll(itemSelector);

			items.forEach(function(item) {
				item.style.display = unHideStyle;
			});

			items.forEach(function(item) {
				var name = item.firstChild.innerHTML;
				console.log(name);

				if (name.toLowerCase().indexOf(searchfield.value.toLowerCase()) === -1) {
					item.style.display = "none";
				}
			});
		});
	}
}

function hideSections() {
	var sections = document.querySelectorAll("section");

	sections.forEach(function(item, i) {
		item.style.display = "none";
	});
}