From b9c668841db7aba9787088eb503c14ade90bea4c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Z=C3=A1le=C5=A1=C3=A1k?= <dz@pixx.cz>
Date: Sat, 30 Jan 2021 01:55:11 +0100
Subject: [PATCH] =?UTF-8?q?Zm=C4=9Bny=20designu=20closes=20#2=20@1h?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/style.css    | 14 ++++++++++++--
 js/controller.js | 21 +++++++++++++++++++++
 js/view.js       |  9 +++++++++
 3 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/css/style.css b/css/style.css
index e00c238..aca630a 100644
--- a/css/style.css
+++ b/css/style.css
@@ -50,6 +50,15 @@ article {
 article img {
   max-width: 100%;
   max-height: 25vh;
+  margin: 1em;
+}
+
+article img:nth-child(odd) {
+  float: right;
+}
+
+article img:nth-child(even) {
+  float: left;
 }
 
 article h1:first-child {
@@ -92,6 +101,7 @@ article p:last-child {
     "icon time"
     "icon comment";
   border-bottom: 0.1vh solid #707070;
+  cursor: pointer;
 }
 .comment:last-child {
   border: none;
@@ -174,7 +184,7 @@ progress::-webkit-progress-bar {
   min-height: 5px;
   margin: 0;
   cursor: pointer;
-  z-index: 5;
+  z-index: 15;
 }
 
 .seek:focus {
@@ -209,7 +219,7 @@ progress::-webkit-progress-bar {
   left: 35%;
   height: 0.5vh;
   min-height: 5px;
-  z-index: 6;
+  z-index: 10;
   cursor: pointer;
 }
 
diff --git a/js/controller.js b/js/controller.js
index 14809ba..4c0a1d8 100644
--- a/js/controller.js
+++ b/js/controller.js
@@ -27,6 +27,7 @@ class Controller {
     this.loadXml(videoToLoad).then(
       function (v) {
         this.view.drawCommentsText(v);
+        this.addEventListeners();
         this.view.drawCommentsToVideo(v);
       }.bind(this)
     );
@@ -79,6 +80,26 @@ class Controller {
     );
   }
 
+  addEventListeners() {
+    let comments = document.getElementsByClassName("comment");
+
+    for (let i = 0; i < comments.length; i++) {
+      comments[i].addEventListener(
+        "mouseover",
+        function () {
+          this.view.commentHover(comments[i].firstChild);
+        }.bind(this)
+      );
+      comments[i].addEventListener(
+        "mouseout",
+        function () {
+          if (!comments[i].classList.contains("activeComment"))
+            this.view.commentHover(comments[i].firstChild, false);
+        }.bind(this)
+      );
+    }
+  }
+
   async loadVideo(v) {
     let video = document.getElementById("video");
 
diff --git a/js/view.js b/js/view.js
index 1e461db..aae320d 100644
--- a/js/view.js
+++ b/js/view.js
@@ -123,6 +123,15 @@ class View {
     textArea.innerHTML = text;
   }
 
+  commentHover(c, active = true) {
+    let svgDoc = c.contentDocument;
+
+    if (active) {
+      svgDoc.getElementById("path4").style.fill = "#ffa800";
+    } else {
+      svgDoc.getElementById("path4").style.fill = "#c1c1c1";
+    }
+  }
   /* colorTogglePlaySVG() {
     var playSVG = document.getElementById("togglePlayIcon");
     var svgDoc;