View all comments linked to a post

RomainVialard · Dec 23, 2018 · deedcb4 · deedcb4
1 parent f0b91f5
commit deedcb4
Show file tree

Hide file tree

Showing 3 changed files with 252 additions and 2 deletions.
diff --git a/Web App/index.html b/Web App/index.html
@@ -139,15 +139,39 @@ <h3>G+ Community</h3>
                   </div>
                 </div>
 
-                <div class="CKe11d" role="button" tabindex="0" aria-label="View comments">
+                <div class="CKe11d" role="button" tabindex="0" aria-label="View comments" onclick="displayAllComments(this)">
                   <div aria-hidden="true">
+
+                    <!-- Preview of comments, showing only the beginning of the last 3 comments -->
                     <div class="EMg45">
                       <template>
                         <div class="X865Z">
                           <div class="SVRkP"><span class="vGowKb" aria-label="Commenter name"></span><span class="Wj5EM">: <span aria-label="Comment"></span></span></div>
                         </div>
                       </template>
                     </div>
+
+                    <!-- Full comments list -->
+                    <div class="RIrM6d" aria-label="Comments" style="display:none">
+                      <ul class="AarIR dYuyre fFUsIf">
+                        <template>
+                          <li class="OnSI9b BCNiN XkfHGe" tabindex="-1">
+                            <span class="h7vvy oFkD6c"><img class="MqU2J" height="36" width="36" src=""></span>
+                            <div class="PGAhe" role="heading" aria-level="3">
+                              <div class="kCYXq"><span class="vGowKb"></span><span class="iOAN1d"></span></div>
+                              <div class="g6UaYd">
+                                <!-- comment -->
+                                <div></div>
+                              </div>
+                            </div>
+                            <div class="Ahjhqf MtqTje">
+                              <div class="gmFStc"><span></span></div>
+                            </div>
+                          </li>
+                        </template>
+                      </ul>
+                    </div>
+
                   </div>
                 </div>
 

diff --git a/Web App/scripts/main.js b/Web App/scripts/main.js
@@ -235,4 +235,31 @@ document.getElementsByTagName('main')[0].addEventListener('scroll', function(eve
 function expandPost(el) {
   el.classList.remove("qhIQqf");
   el.querySelector('.jVjeQd').style['max-height'] = 'none';
+}
+
+function displayAllComments(el) {
+  el.querySelector('.EMg45').style.display = 'none';
+  var fullCommentListParentEl = el.querySelector('.RIrM6d');
+  var postId = fullCommentListParentEl.parentNode.parentNode.parentNode.parentNode.parentNode.id;
+
+  fullCommentListParentEl.style.display = 'block';
+
+  var commentSection = fullCommentListParentEl.querySelector("ul");
+  var commentTemplate = commentSection.querySelector("template");
+
+  var path = '/comments/' + postId;
+  var query = firebase.database().ref(path).orderByChild('published');
+  query.on('child_added', function (snapshot) {
+    if(snapshot.val()) {
+      var comment = snapshot.val();
+      var copy = document.importNode(commentTemplate.content, true);
+      var li = copy.querySelector('li');
+      commentSection.appendChild(li);
+      li.querySelector('.vGowKb').textContent = comment.actor.displayName;
+      li.querySelector('.MqU2J').src = comment.actor.image.url;
+      li.querySelector('.g6UaYd').querySelector('div').innerHTML = comment.object.content;
+      var publicationDate = moment(comment.published);
+      li.querySelector('.gmFStc').querySelector('span').textContent = publicationDate.fromNow();
+    }
+  });
 }
diff --git a/Web App/styles/google-plus-raw.css b/Web App/styles/google-plus-raw.css
@@ -1014,7 +1014,7 @@ c-wiz>c-data {
   src: url(//fonts.gstatic.com/s/materialiconsextended/v42/kJEjBvgX7BgnkSrUwT8UnLVc38YydejYY-oE_LvJ.woff2)format('woff2');
 }
 
-/* Comments */
+/* Comments preview */
 
 .CKe11d {
   border-top: 1px solid #ebebeb;
@@ -1064,6 +1064,205 @@ c-wiz>c-data {
     color: rgba(0,0,0,0.87)
 }
 
+/* Comments full list */
+
+.RIrM6d {
+  border-top: 1px solid #ebebeb;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  outline: none
+}
+
+.AarIR {
+  list-style-type: none;
+  margin: 0;
+  padding: 0
+}
+
+.fFUsIf {
+  max-height: 400px;
+  overflow-y: auto;
+  position: relative;
+  -webkit-overflow-scrolling: touch
+}
+
+.fFUsIf::-webkit-scrollbar {
+  height: 16px;
+  overflow: visible;
+  width: 16px
+}
+
+.fFUsIf::-webkit-scrollbar-thumb {
+  background-color: rgba(0,0,0,0.2);
+  background-clip: padding-box;
+  border: solid transparent;
+  border-width: 1px 1px 1px 6px;
+  min-height: 28px;
+  padding: 100px 0 0;
+  -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,0.1),inset 0 -1px 0 rgba(0,0,0,0.07);
+  box-shadow: inset 1px 1px 0 rgba(0,0,0,0.1),inset 0 -1px 0 rgba(0,0,0,0.07)
+}
+
+.fFUsIf::-webkit-scrollbar-corner {
+  background: transparent
+}
+
+.fFUsIf::-webkit-scrollbar-track {
+  background-clip: padding-box;
+  border: solid transparent;
+  border-width: 0 0 0 4px
+}
+
+.OnSI9b.eLNT1d {
+  display: none
+}
+
+.BCNiN {
+  overflow: hidden;
+  padding: 12px 16px;
+  display: -webkit-box;
+  display: -moz-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-transition: background-color .3s cubic-bezier(0,0,0.2,1);
+  transition: background-color .3s cubic-bezier(0,0,0.2,1)
+}
+
+.BCNiN.g0Pkrd {
+  background-color: #fff;
+  display: block
+}
+
+.BCNiN.g0Pkrd.u3bW4e {
+  background-color: #fff
+}
+
+.BCNiN.g0Pkrd:first-child {
+  border-top: 1px solid #ebebeb
+}
+
+.BCNiN:focus {
+  outline: none
+}
+
+.BCNiN.u3bW4e {
+  background-color: #fafafa
+}
+
+.BCNiN:hover .Yylo3e,.BCNiN.u3bW4e .Yylo3e {
+  opacity: 1
+}
+
+.BCNiN:hover .Ahjhqf.MtqTje .gmFStc,.BCNiN.u3bW4e .Ahjhqf.MtqTje .gmFStc {
+  opacity: 0
+}
+
+.h7vvy {
+  display: block;
+  outline: none
+}
+
+.oFkD6c {
+  -webkit-border-radius: 50%;
+  border-radius: 50%;
+  -webkit-box-flex: none;
+  -webkit-flex: none;
+  flex: none
+}
+
+.oFkD6c.bhRcab {
+  background: #f44336;
+  fill: #fff
+}
+
+.MqU2J {
+  -webkit-border-radius: 50%;
+  border-radius: 50%;
+  display: block
+}
+
+.PGAhe {
+  word-break: break-word;
+  margin: 0 10px 0 16px;
+  min-width: 0;
+  -webkit-box-flex: auto;
+  -webkit-flex: auto;
+  flex: auto
+}
+
+.PGAhe.oa28d .kCYXq,.PGAhe.oa28d .g6UaYd {
+  opacity: .38
+}
+
+.kCYXq {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  white-space: nowrap;
+  -webkit-box-align: baseline;
+  box-align: baseline;
+  -webkit-align-items: baseline;
+  align-items: baseline
+}
+
+.vGowKb {
+  font-size: 14px;
+  font-weight: 500;
+  color: rgba(0,0,0,0.87);
+  text-overflow: ellipsis;
+  overflow: hidden
+}
+
+.iOAN1d {
+  font-size: 12px;
+  color: rgba(0,0,0,0.54);
+  font-weight: 500;
+  margin-left: 8px;
+  -webkit-box-flex: 1;
+  box-flex: 1;
+  -webkit-flex-grow: 1;
+  flex-grow: 1;
+  -webkit-flex-shrink: 0;
+  flex-shrink: 0
+}
+
+.iOAN1d.vnoo4e {
+  color: #b93221
+}
+
+.g6UaYd {
+  font-size: 14px;
+  line-height: 20px;
+  color: rgba(0,0,0,0.87);
+}
+
+.g6UaYd[dir=rtl] {
+  text-align: right
+}
+
+.Ahjhqf {
+  -webkit-box-flex: none;
+  -webkit-flex: none;
+  flex: none;
+  position: relative;
+  width: 32px
+}
+
+.gmFStc {
+  font-size: 12px;
+  position: absolute;
+  color: rgba(0,0,0,0.54);
+  word-wrap: break-word;
+  opacity: 1;
+  width: 100%;
+  text-align: center;
+  -webkit-transition: opacity 150ms ease-in-out;
+  transition: opacity 150ms ease-in-out
+}
+
 /* Images */
 
 .e8zLFb {