U <comment> v XML lze mít více <text>

fix #3 @1h

css/style.css

@@ -48,17 +48,19 @@ article {
   overflow-y: auto;
 }
 article img {
-  max-width: 100%;
-  max-height: 25vh;
-  margin: 1em;
-}
-
-article img:nth-child(odd) {
-  float: right;
+  max-width: 25vh;
+  max-height: 100%;
+  margin: 0.5em 1em;
+  padding: .2em;
+  clear: both;
+  border: 1px solid #bbb;
+  border-radius: .2rem;
+  float: left;
+  clear: left;
 }
 
-article img:nth-child(even) {
-  float: left;
+article p {
+  clear: right;
 }
 
 article h1:first-child {
@@ -69,6 +71,7 @@ h1,
 h2,
 h3 {
   margin-bottom: 0;
+  clear: right;
 }
 
 h1 {
@@ -154,7 +157,7 @@ article p:last-child {
   position: relative;
 }
 
-progress {
+#video-progress progress {
   position: absolute;
   width: 100%;
   height: 0.5vh;

js/comments.js

@@ -1,8 +1,12 @@
 class Comment {
-  constructor(start, end, text, fulltext) {
+  constructor(start, end, tittle, text) {
     this.start = start;
     this.end = end;
-    this.text = text;
-    this.fulltext = fulltext;
+    this.tittle = tittle;
+    this.text = [];
+
+    for (let i = 0; i < text.length; i++) {
+      this.text.push(text[i].innerHTML);
+    }
   }
 }

js/controller.js

@@ -26,7 +26,7 @@ class Controller {
   init(videoToLoad) {
     this.loadXml(videoToLoad).then(
       function (v) {
-        this.view.drawCommentsText(v);
+        this.view.drawCommentTittles(v);
         this.addEventListeners();
         this.view.drawCommentsToVideo(v);
       }.bind(this)
@@ -145,11 +145,19 @@ class Controller {
 
       if (this.activeComment !== null) {
         this.view.activateComment(this.activeComment);
+        console.log(this.model.comments[this.activeComment].text.length);
+
+        for (
+          let i = 0;
+          i < this.model.comments[this.activeComment].text.length;
+          i++
+        ) {
           this.view.activateCommentText(
-          this.model.comments[this.activeComment].fulltext
+            this.model.comments[this.activeComment].text[i]
           );
         }
       }
+    }
     this.lastActiveComment = this.activeComment;
   }
 }

js/model.js

@@ -11,10 +11,10 @@ class Model {
     for (let i = 0; i < comment.length; i++) {
       let start = comment[i].getElementsByTagName("start")[0].innerHTML;
       let end = comment[i].getElementsByTagName("end")[0].innerHTML;
-      let text = comment[i].getElementsByTagName("text")[0].innerHTML;
-      let fulltext = comment[i].getElementsByTagName("fulltext")[0].innerHTML;
+      let tittle = comment[i].getElementsByTagName("tittle")[0].innerHTML;
+      let text = comment[i].getElementsByTagName("text");
 
-      this.comments.push(new Comment(start, end, text, fulltext));
+      this.comments.push(new Comment(start, end, tittle, text));
     }
 
     return this.comments;

js/view.js

@@ -21,7 +21,7 @@ class View {
     ); */
   }
 
-  drawCommentsText(comments) {
+  drawCommentTittles(comments) {
     let aside = document.getElementsByTagName("aside")[0];
 
     for (let i = 0; i < comments.length; i++) {
@@ -49,11 +49,11 @@ class View {
 
       comment.appendChild(time);
 
-      let commentText = document.createElement("div");
-      commentText.setAttribute("class", "commentText");
-      commentText.innerHTML = comments[i].text;
+      let commentTittle = document.createElement("div");
+      commentTittle.setAttribute("class", "commentText");
+      commentTittle.innerHTML = comments[i].tittle;
 
-      comment.appendChild(commentText);
+      comment.appendChild(commentTittle);
 
       aside.appendChild(comment);
 
@@ -120,7 +120,14 @@ class View {
   activateCommentText(text) {
     let textArea = document.getElementsByTagName("article")[0];
 
+    if (text == null) {
       textArea.innerHTML = text;
+      return;
+    }
+
+    let div = document.createElement("div");
+    div.innerHTML = text;
+    textArea.append(div);
   }
 
   commentHover(c, active = true) {