diff --git a/css/style.css b/css/style.css index aca630a..89968d7 100644 --- a/css/style.css +++ b/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; diff --git a/js/comments.js b/js/comments.js index d1f39cd..b6c1051 100644 --- a/js/comments.js +++ b/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); + } } } diff --git a/js/controller.js b/js/controller.js index 4c0a1d8..029b431 100644 --- a/js/controller.js +++ b/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,9 +145,17 @@ class Controller { if (this.activeComment !== null) { this.view.activateComment(this.activeComment); - this.view.activateCommentText( - this.model.comments[this.activeComment].fulltext - ); + 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].text[i] + ); + } } } this.lastActiveComment = this.activeComment; diff --git a/js/model.js b/js/model.js index 92a9196..10d6b33 100644 --- a/js/model.js +++ b/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; diff --git a/js/view.js b/js/view.js index aae320d..839745d 100644 --- a/js/view.js +++ b/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]; - textArea.innerHTML = text; + if (text == null) { + textArea.innerHTML = text; + return; + } + + let div = document.createElement("div"); + div.innerHTML = text; + textArea.append(div); } commentHover(c, active = true) {