Změny designu

closes #2 @1h

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");
 

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;