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");

	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");

	searchfield.addEventListener("keyup", function() {

		var buttons = document.querySelectorAll(".sound");

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

		buttons.forEach(function(item) {
			var name = item.firstChild.innerHTML;
	
			if (name.toLowerCase().indexOf(searchfield.value.toLowerCase()) === -1) {
				item.style.display = "none";
			}
		});
	});

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

	reset.addEventListener("click", resetSearch, false);
	sounds_nav.addEventListener("click", resetSearch, false);

	document.onkeydown = function(evt) {
    		evt = evt || window.event;
		if (evt.keyCode == 27) {
			resetSearch();
		}
	};
});


function resetSearch() {
	var searchfield = document.querySelector("#search");
	var buttons = document.querySelectorAll(".sound");

	searchfield.blur();

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

        searchfield.value = "";
}


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

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

function ajaxRequest(filename){
    var ajaxRequest;
    try{
        ajaxRequest = new XMLHttpRequest();
        var url = "play/" + filename;
        ajaxRequest.open("GET", url, true);
        ajaxRequest.send(null);
    }catch (e){
        alert("Your browser broke!");
        return false;
    }
}