2015-10-26 14:52:42 +03:00
|
|
|
|
2015-10-14 18:52:04 +03:00
|
|
|
</ul>
|
|
|
|
</main>
|
2015-10-28 17:57:38 +03:00
|
|
|
<script>
|
|
|
|
var searchField = document.getElementById("search");
|
|
|
|
searchField.addEventListener('input', function (evt) {
|
|
|
|
search();
|
|
|
|
});
|
2015-10-28 18:47:31 +03:00
|
|
|
|
2015-10-28 18:53:06 +03:00
|
|
|
hashSearch();
|
|
|
|
window.addEventListener('hashchange', function (evt) {
|
|
|
|
hashSearch();
|
|
|
|
});
|
|
|
|
|
|
|
|
function hashSearch() {
|
|
|
|
var query = window.location.hash.substring(1);
|
|
|
|
document.getElementById("search").value = query;
|
|
|
|
search();
|
|
|
|
}
|
2015-10-28 18:47:31 +03:00
|
|
|
|
2015-10-28 17:57:38 +03:00
|
|
|
function search() {
|
|
|
|
var searchTerm = searchField.value.toLowerCase();
|
|
|
|
var icons = document.getElementsByClassName("tiles__item");
|
|
|
|
for (var i = 0; i < icons.length; i++) {
|
|
|
|
icons[i].style.display = "inline-block";
|
|
|
|
var index = icons[i].dataset.search.indexOf(searchTerm);
|
|
|
|
if (index == -1) {
|
|
|
|
icons[i].style.display = "none";
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2015-12-24 16:16:51 +03:00
|
|
|
|
|
|
|
function toggleNames() {
|
|
|
|
var list = document.getElementsByClassName("tiles tiles--icons");
|
|
|
|
if(list.length == 1) {
|
|
|
|
list[0].className = "tiles tiles--full";
|
2016-02-24 14:19:05 +03:00
|
|
|
document.getElementById("toggle-button").innerHTML = "Hide names & colour values";
|
2015-12-24 16:16:51 +03:00
|
|
|
} else {
|
|
|
|
var list = document.getElementsByClassName("tiles tiles--full");
|
|
|
|
list[0].className = "tiles tiles--icons";
|
2016-02-24 14:19:05 +03:00
|
|
|
document.getElementById("toggle-button").innerHTML = "Show names & colour values";
|
2015-12-24 16:16:51 +03:00
|
|
|
}
|
|
|
|
}
|
2015-10-28 17:57:38 +03:00
|
|
|
</script>
|
2015-10-14 18:52:04 +03:00
|
|
|
</body>
|
|
|
|
</html>
|