Add logic to principles list

Again, a very very ugly script. Rewrite if possible.

index.html

@@ -80,27 +80,37 @@
 					<!-- Used on mobile -->
 					<select name="principles" id="principles-dropdown">
 						<option value="principle-1">Prevence</option>
+						<option value="principle-2">Rozpoznání situace</option>
+						<option value="principle-3">aaa</option>
 					</select>
 				</div>
-				<div class="list">
+				<div class="list" id="principles-list">
 					<!-- Used on wide screens -->
-					<div class="active">
+					<div class="active" data-value="principle-1">
 						<p class="title">Prevence</p>
 						<p>Prevence pomáhá zamezovat nežádoucím situacím a slouží nám jako informační nástroj&hellip;</p>
 					</div>
-					<div>
+					<div data-value="principle-2">
 						<p class="title">Rozpoznání situace</p>
 						<p>Je důležité, aby se naše vnímání neomezilo jen na to, jestli se žák ve škole objevuje s modřinami nebo jinými známkami násilí&hellip;</p>
 					</div>
-					<div>
+					<div data-value="principle-3">
 						<p class="title">Prevence</p>
 						<p>Prevence pomáhá zamezovat nežádoucím situacím a slouží nám jako informační nástroj, pomocí kterého třídu seznamujeme&hellip;</p>
 					</div>
 				</div>
-				<div class="content">
-					<div id="principle-1">
+				<div class="content" id="principles-content">
+					<div class="visible" id="principle-1">
 						<h2 class="title">Prevence</h2>
-						<p>Prevence pomáhá zamezovat nežádoucím situacím a slouží nám jako informační nástroj, pomocí kterého třídu seznamujeme s tím, co se ve společnosti a rodinách děje. Děti díky ní zjišťují, že nejsou na všechno samotné a učí se, jak spolu o citlivých věcech mluvit. Díky prevenci můžeme podat pomocnou ruku konkrétním žákům, kteří to potřebují – ať už tím, že jim sami pomůžeme, nebo jim nabídneme další nástroje řešení (Linka bezpečí, Dětské krizové centrum, Bílý kruh bezpečí, …). </p>
+						<p>Prevence pomáhá zamezovat nežádoucím situacím a slouží nám jako informační nástroj, pomocí kterého třídu seznamujeme s tím, co se ve společnosti a rodinách děje. Děti díky ní zjišťují, že nejsou na všechno samotné a učí se, jak spolu o citlivých věcech mluvit. Díky prevenci můžeme podat pomocnou ruku konkrétním žákům, kteří to potřebují – ať už tím, že jim sami pomůžeme, nebo jim nabídneme další nástroje řešení (Linka bezpečí, Dětské krizové centrum, Bílý kruh bezpečí, …).</p>
+					</div>
+					<div id="principle-2">
+						<h2 class="title">Rozpoznání situace</h2>
+						<p>Je důležité, aby se naše vnímání neomezilo jen na to, jestli se žák ve škole objevuje s modřinami nebo jinými známkami násilí. Pozorní bychom měli být také k náhlým změnám v chování dítěte (ať už se mění v „problémového žáka” nebo naopak), vysokým absencím, změně v tom, jak je žák připravený na výuku a upravený, nebo také k žákům, kteří stojí stranou kolektivu. Ne každá situace je případ pro OSPOD nebo policii, ale naše všímavost může udělat velký rozdíl.</p>
+					</div>
+					<div id="principle-3">
+						<h2 class="title">Vyhodnocení situace</h2>
+						<p>Ve chvíli, kdy si všimneme dítěte, které vzbudí naše obavy, můžeme oslovit kolegy a promluvit s nimi o tom, jestli situaci vnímají stejně. K dispozici máme také výchovného poradce či psychologa, stejně tak se ve všech situacích můžeme obrátit na organizace uvedené na tomto webu. Pokud se ale dítě nachází v situaci, která ho ohrožuje (sebevražedné sklony, strach z návratu domů), není prostor pro váhání a vždy voláme 158 nebo 155.</p>
 					</div>
 				</div>
 			</div>
@@ -364,6 +374,7 @@
 	<script type="text/javascript" src="/static/js/nav.js"></script>
 	<script type="text/javascript" src="/static/js/player.js"></script>
 	<script type="text/javascript" src="/static/js/accordion.js"></script>
+	<script type="text/javascript" src="/static/js/principles.js"></script>
 	<script type="text/javascript" src="/static/js/vanilla-tilt.js"></script>
 	</body>
 </html>

sass/style.scss

@@ -408,6 +408,20 @@ body.noscroll {
 		flex-direction: column;
 		justify-content: center;
 
+		&>div {
+			height: 0;
+			overflow: hidden;
+			opacity: 0;
+			transform: translatey(-1em);
+			transition: opacity .2s ease-out, transform .2s ease-out;
+
+			&.visible {
+				height: auto;
+				opacity: 1;
+				transform: translatex(0);
+			}
+		}
+
 		h2 {
 			position: relative;
 			text-align: left;
@@ -894,6 +908,11 @@ footer {
 		.list {
 			display: flex;
 		}
+
+		.content > div {
+			transform: translatey(0);
+			transform: translatex(-2em);
+		}
 	}
 
 	.checklist {

static/js/principles.js

@@ -0,0 +1,27 @@
+var list = document.querySelectorAll("#principles-list > div");
+var dropdown = document.getElementById("principles-dropdown");
+var content = document.querySelectorAll("#principles-content > div");
+var i;
+
+function change_content(id) {
+	for (i = 0; i < content.length; i++) {
+		if (content[i].id == id)
+			content[i].classList.add("visible");
+		else
+			content[i].classList.remove("visible");
+	}
+}
+
+for (i = 0; i < list.length; i++) {
+	list[i].addEventListener("click", function() {
+		for (i = 0; i < list.length; i++) {
+			list[i].classList.remove("active");
+		}
+		this.classList.add("active");
+		change_content(this.getAttribute("data-value"));
+	});
+}
+
+dropdown.addEventListener("change", function() {
+	change_content(this.value);
+});