From d9ffda308865872d3bf477043e2835d23d4c1c7f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Z=C3=A1le=C5=A1=C3=A1k?= <dz@pixx.cz>
Date: Tue, 22 Dec 2020 17:43:51 +0100
Subject: [PATCH] uprava vzhledu dir tree

---
 css/style.css    | 43 +++++++++++++++++++++++++++----------------
 index.php        |  2 +-
 js/controller.js |  1 +
 js/view.js       | 22 +++++++++++++++++++++-
 4 files changed, 50 insertions(+), 18 deletions(-)

diff --git a/css/style.css b/css/style.css
index 21a46bc..8849789 100644
--- a/css/style.css
+++ b/css/style.css
@@ -23,26 +23,33 @@ ul:nth-child(1) {
 }
 
 li:hover {
-  background-color: blue;
+  background-color: rgb(0, 0, 130);
+  color: white;
+}
+
+li {
+  cursor: pointer;
+  user-select: none;
 }
 
 li::before {
   content: "";
-  margin-right: 5pt;
-  width: 1em;
-  height: 1em;
+  color: black;
   display: inline-block;
 }
-li[style]::before {
-  content: "";
-  display: inline-block;
-  background-image: url("../img/arrow-down.svg");
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: center;
-  width: 0.7em;
-  height: 0.7em;
-  margin-right: 3pt;
+
+.caret-down::before {
+  transform: rotate(90deg);  
+}
+.nested {
+  display: none;
+}
+.active {
+  display: block;
+}
+.caret::before {
+  content: "\25B6";
+  margin-right: 6px;
 }
 
 .container {
@@ -64,12 +71,16 @@ aside {
   height: 100%;
   grid-area: aside;
   overflow-y: scroll;
-  margin-right: 2px solid #ccc;
+  margin-right: 2px solid #c3c3c3;
 }
 
 footer {
-  border-top: 2px solid #ccc;
+  border-top: 2px solid #c3c3c3;
   grid-area: footer;
   text-align: right;
   padding: 0.3em 2em;
 }
+
+sub {
+  display: block;
+}
diff --git a/index.php b/index.php
index 4272d99..b97538b 100644
--- a/index.php
+++ b/index.php
@@ -30,7 +30,7 @@
         </section>
 
         <footer>
-            CoMato © 2020 David Zálešák <br><sub>Seminární práce do předmětu tvorba www aplikací</sub>
+            CoMato © 2020 David Zálešák<sub>Seminární práce do předmětu tvorba www aplikací</sub>
         </footer>
     </div>
 
diff --git a/js/controller.js b/js/controller.js
index 5d193da..f31d86c 100644
--- a/js/controller.js
+++ b/js/controller.js
@@ -32,6 +32,7 @@ class Controller {
       function (value) {
         view.removeDirTree();
         view.drawDirTree(value);
+        view.dirTreeToggler();
       },
       function (error) {}
     );
diff --git a/js/view.js b/js/view.js
index ef8ceab..12a2742 100644
--- a/js/view.js
+++ b/js/view.js
@@ -6,11 +6,12 @@ class View {
     var tag = document.createElement("li");
     var text = document.createTextNode(dirtree[0]);
     tag.appendChild(text);
-    tag.style.fontWeight = "bold";
+    tag.classList.add("caret");
 
     ulToAdd.appendChild(tag);
     if (dirtree.length > 1) {
       var newul = document.createElement("ul");
+      newul.classList.add("nested");
 
       tag.parentElement.appendChild(newul);
       for (let i = 1; i < dirtree.length; i++) {
@@ -33,4 +34,23 @@ class View {
     }
     this.hloubka = 1;
   }
+
+  dirTreeToggler() {
+    var toggler = document.getElementsByClassName("caret");
+    var i;
+
+    function addClass() {
+      this.nextSibling.classList.toggle("active");
+      this.classList.toggle("caret-down");
+    }
+
+    for (i = 0; i < toggler.length; i++) {
+      toggler[i].addEventListener("click", addClass);
+    }
+    toggler[0].classList.add("caret-down");
+    if (toggler[0].nextSibling) {
+      toggler[0].nextSibling.classList.add("active");
+    }
+    toggler[0].removeEventListener("click", addClass);
+  }
 }