support auto folding

imsun · imsun · commit f689df6140ad · 2017-04-03T03:02:15.000+08:00
diff --git a/src/gitment.js b/src/gitment.js
@@ -57,6 +57,7 @@ class Gitment {
       theme: defaultTheme,
       oauth: {},
       perPage: 30,
+      maxCommentHeight: 250,
     }, options)
 
     this.useTheme(this.theme)
diff --git a/src/theme/default.js b/src/theme/default.js
@@ -119,6 +119,28 @@ function renderComments({ meta, comments, commentReactions, currentPage, user, e
       likeButton.classList.remove('liked')
       likeButton.onclick = () => instance.likeAComment(comment.id)
     }
+
+    // dirty
+    // use a blank image to trigger height calculating when element rendered
+    const imgTrigger = document.createElement('img')
+    const markdownBody = commentItem.querySelector('.gitment-comment-body')
+    imgTrigger.className = 'gitment-hidden'
+    imgTrigger.src = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
+    imgTrigger.onload = () => {
+      if (markdownBody.clientHeight > instance.maxCommentHeight) {
+        markdownBody.classList.add('gitment-comment-body-folded')
+        markdownBody.style.maxHeight = instance.maxCommentHeight + 'px'
+        markdownBody.title = 'Click to Expand'
+        markdownBody.onclick = () => {
+          markdownBody.classList.remove('gitment-comment-body-folded')
+          markdownBody.style.maxHeight = ''
+          markdownBody.title = ''
+          markdownBody.onclick = null
+        }
+      }
+    }
+    commentItem.appendChild(imgTrigger)
+
     commentsList.appendChild(commentItem)
   })
 
diff --git a/style/default.css b/style/default.css
@@ -173,7 +173,7 @@ a.gitment-header-issue-link:hover {
   width: 0;
   height: 0;
   pointer-events: none;
-  content: " ";
+  content: "";
   border-color: transparent;
   border-style: solid solid outset;
 }
@@ -264,7 +264,41 @@ a.gitment-editor-logout-link:hover {
 
 
 .gitment-comment-body {
+  position: relative;
   padding: 15px;
+  overflow: hidden;
+}
+
+.gitment-comment-body-folded {
+  cursor: pointer;
+}
+
+.gitment-comment-body-folded::before {
+  display: block !important;
+  content: "";
+  position: absolute;
+  width: 100%;
+  left: 0;
+  top: 0;
+  bottom: 50px;
+  pointer-events: none;
+  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(255, 255, 255, .9));
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(255, 255, 255, .9));
+}
+
+.gitment-comment-body-folded::after {
+  display: block !important;
+  content: "Click to Expand" !important;
+  text-align: center;
+  color: #586069;
+  position: absolute;
+  width: 100%;
+  height: 50px;
+  line-height: 50px;
+  left: 0;
+  bottom: 0;
+  pointer-events: none;
+  background: rgba(255, 255, 255, .9);
 }
 
 .gitment-editor-body {
@@ -331,7 +365,7 @@ a.gitment-editor-logout-link:hover {
 .gitment-editor-footer::after {
   display: table;
   clear: both;
-  content: " ";
+  content: "";
 }
 
 a.gitment-editor-footer-tip {
