From 0b1ebbc02c5133d5e6dfb7beef843d937d6923b9 Mon Sep 17 00:00:00 2001
From: SukkaW <isukkaw@gmail.com>
Date: Sun, 7 Oct 2018 21:53:15 +0800
Subject: [PATCH] feat(nesting): max 4 layer nesting

---
 src/disqus.js    | 30 +++++++++++++++++++++++-------
 src/disqusjs.css |  4 ++--
 2 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/src/disqus.js b/src/disqus.js
index 6f3b995..f40f89e 100644
--- a/src/disqus.js
+++ b/src/disqus.js
@@ -487,8 +487,6 @@ function renderComment(data) {
     `;
     document.getElementById('disqus_thread').innerHTML = disqusjsBaseTpl;
 
-
-
     var commentBodyTpl = `
     <div class="dsqjs-item-container">
         <div class="dsqjs-avater">
@@ -504,14 +502,26 @@ function renderComment(data) {
         </div>
     </div>
     `
+
     data.map(s => {
         childrenComments = (s) => {
+            var nesting = s.nesting
+
             var children = (s.children || []);
-            if (typeof children === 'null') return;
 
-            var html = '<ul class="dsqjs-list dsqjs-children">';
-            console.log(children)
+            if (typeof children === 'null') {
+                return;
+            }
+
+            console.log(nesting < 4)
+            if (nesting < 4) {
+                var html = '<ul class="dsqjs-list dsqjs-children">';
+            } else {
+                var html = '<ul class="dsqjs-list">';
+            }
+
             children.map(s => {
+
                 let comment = s.comment
 
                 if (comment.author.profileUrl) {
@@ -526,7 +536,9 @@ function renderComment(data) {
                     comment.authorEl = `${comment.author.name}`
                 }
 
-                html += '<li class="dsqjs-item" id="comment-${comment.id}">'
+                s.nesting = nesting + 1
+
+                html += `<li class="dsqjs-item" id="comment-${comment.id}">`
 
                 html += baidu.template(commentBodyTpl, comment)
 
@@ -557,7 +569,11 @@ function renderComment(data) {
             comment.authorEl = `${comment.author.name}`
         }
 
-        let html = '<li class="dsqjs-item" id="comment-${comment.id}">'
+        if (s.children) {
+            s.nesting = 1
+        }
+
+        let html = `<li class="dsqjs-item" id="comment-${comment.id}">`
 
         html += baidu.template(commentBodyTpl, comment)
 
diff --git a/src/disqusjs.css b/src/disqusjs.css
index eb01a55..6141e72 100644
--- a/src/disqusjs.css
+++ b/src/disqusjs.css
@@ -90,11 +90,11 @@
     word-wrap: break-word;
 }
 
-#dsqjs .dsqjs-children .dsqjs-item {
+#dsqjs .dsqjs-children>.dsqjs-item {
     margin-left: 60px;
 }
 
 #dsqjs .dsqjs-children .dsqjs-avater img {
     width: 38px;
     height: 38px;
-}
+}
\ No newline at end of file