Filtr nástrojů

content/chci-ucit-online.md

@@ -7,6 +7,7 @@ description = "Zabezpečit kvalitní on-line výuku v době povinně naří
 indexnav = true
 mainimage = "uceni.jpg"
 softwarelist = true
+filters = true
 +++
 
 ### Jak učit online?

sass/style.scss

@@ -157,6 +157,27 @@ main {
 			}
 		}
 
+		&.filters {
+			display: flex;
+			justify-content: center;
+			flex-wrap: wrap;
+
+			button {
+				color: #fff;
+				background-color: #d22d40;
+				border: 2px solid #fff;
+				border-radius: 1em;
+				font-weight: bold;
+				padding: .8em 1em;
+				margin: .5em;
+
+				&:hover, &.active {
+					color: #d22d40;
+					background-color: #fff;
+				}
+			}
+		}
+
 		&.software {
 			display: flex;
 			justify-content: space-between;
@@ -166,6 +187,9 @@ main {
 				width: 48%;
 				box-sizing: border-box;
 				margin-top: 4em;
+				display: none; // for filtering
+
+				&.show { display: block; } // when filtered
 
 				img {
 					max-height: 3em;

static/js/filters.js

@@ -0,0 +1,19 @@
+filterSelection("all");
+function filterSelection(c) {
+	var x = document.getElementsByClassName("program");
+	if (c == "all") c = "";
+	for (var i = 0; i < x.length; i++) {
+		x[i].classList.remove("show");
+		if (x[i].className.indexOf(c) >= 0) x[i].classList.add("show");
+	}
+}
+
+var btnContainer = document.getElementById("filters");
+var btns = btnContainer.getElementsByClassName("btn");
+for (var i = 0; i < btns.length; i++) {
+	btns[i].addEventListener("click", function() {
+		var current = document.getElementsByClassName("active");
+		current[0].className = current[0].className.replace(" active", "");
+		this.className += " active";
+	});
+}

templates/index.html

@@ -63,4 +63,5 @@
 	<script>
 		function togglevisible(id){document.querySelector(id).classList.toggle("visible")}
 	</script>
+	{% block customjs %}{% endblock %}
 </html>

templates/macros.html

@@ -1,5 +1,11 @@
 {% macro print_tool(program) %}
-	<div class="program">
+	<div class="program
+		{% if program.taxonomies.tags %}
+			{% for tag in program.taxonomies.tags %}
+				 {{ tag | slugify }}
+			{% endfor %}
+		{% endif %}
+	">
 		{% if program.extra.linkto and program.extra.directlink %}
 			<a href="{{ program.extra.linkto }}">
 		{% else %}

templates/page.html

@@ -1,6 +1,10 @@
 {% extends "index.html" %}
 {% import "macros.html" as macros %}
 
+{% block customjs %}
+	<script type="text/javascript" src="/js/filters.js"></script>
+{% endblock %}
+
 {% block content %}
 	<section class="meta">
 		<div>
@@ -17,6 +21,26 @@
 		{% set section = get_section(path="software/_index.md") %}
 		{% if section.pages %}
 			<h3>Doporučené nástroje</h3>
+
+			{% if page.extra.filters %}
+				{% set tags = [] %}
+				{% for program in section.pages %}
+					{% if program.taxonomies.categories and program.taxonomies.categories is containing(page.slug) %}
+						{% if program.taxonomies.tags %}
+							{% set_global tags = tags | concat(with=program.taxonomies.tags) %}
+						{% endif %}
+					{% endif %}
+				{% endfor %}
+				{% set_global tags = tags | unique %}
+
+				<section class="filters" id="filters">
+					<button class="btn active" onclick="filterSelection('all')">Ukázat vše</button>
+					{% for tag in tags %}
+						<button class="btn" onclick="filterSelection('{{ tag | slugify }}')">{{ tag }}</button>
+					{% endfor %}
+				</section>
+			{% endif %}
+
 			<section class="software">
 			{% for program in section.pages %}
 				{% if program.taxonomies.categories and program.taxonomies.categories is containing(page.slug) %}
@@ -33,6 +57,7 @@
 				{% endif %}
 			{% endfor %}
 			</section>
+
 		{% endif %}
 	{% endif %}
 {% endblock %}