From c695a392d6eaf8d17817862b144bec83555ce4e6 Mon Sep 17 00:00:00 2001
From: Shaun Collins <shaunc311@gmail.com>
Date: Thu, 17 Dec 2020 17:17:20 -0500
Subject: [PATCH] Add depth of each comment to the json.  When creating the
 html, determine if the comment is an even or odd depth for css.

---
 dist/css/styles.css        | 146 ++++---------------------------------
 inc/compilePostComments.js |   4 +-
 inc/processJsonPost.js     |  22 +++---
 3 files changed, 30 insertions(+), 142 deletions(-)

diff --git a/dist/css/styles.css b/dist/css/styles.css
index 95352dc..08554a7 100644
--- a/dist/css/styles.css
+++ b/dist/css/styles.css
@@ -98,77 +98,17 @@ body.dark .comment .body blockquote {
 	color: #afafaf;
 	border-color: #464646;
 }
-body.dark .comment {
+body.dark .even-depth {
 	background: var(--darkbg);
 }
-body.dark .comment .comment {
+body.dark .odd-depth {
 	background: var(--darkbglight);
+}
+
+body.dark .comment .comment {
 	border-left: 1px solid #545454;
 }
-body.dark .comment .comment .comment {
-	background: var(--darkbg);
-}
-body.dark .comment .comment .comment .comment {
-	background: var(--darkbglight);
-}
-body.dark .comment .comment .comment .comment .comment {
-	background: var(--darkbg);
-}
-body.dark .comment .comment .comment .comment .comment .comment {
-	background: var(--darkbglight);
-}
-body.dark .comment .comment .comment .comment .comment .comment .comment {
-	background: var(--darkbg);
-}
-/* Is there any better way to do this??? send help naow */
-body.dark .comment .comment .comment .comment .comment .comment .comment .comment {
-	background: var(--darkbglight);
-}
-body.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment {
-	background: var(--darkbg);
-}
-body.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
-	background: var(--darkbglight);
-}
-body.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
-	background: var(--darkbg);
-}
-body.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
-	background: var(--darkbglight);
-}
-body.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
-	background: var(--darkbg);
-}
-body.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
-	background: var(--darkbglight);
-}
-body.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
-	background: var(--darkbg);
-}
-body.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
-	background: var(--darkbglight);
-}
-body.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
-	background: var(--darkbg);
-}
-body.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
-	background: var(--darkbglight);
-}
-body.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
-	background: var(--darkbg);
-}
-body.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
-	background: var(--darkbglight);
-}
-body.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
-	background: var(--darkbg);
-}
-body.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
-	background: var(--darkbglight);
-}
-body.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
-	background: var(--darkbg);
-}
+
 body.dark .comment .meta .created a {
 	color: #7b7b7b;
 }
@@ -691,75 +631,19 @@ input[type="submit"]:hover,
 .comment .md {
 	max-width: 60em;
 }
-.comment .comment {
+
+.even-depth {
+	background: var(--whitebg);
+}
+
+.odd-depth {
 	background: var(--lightgray);
+}
+.comment .comment {
 	border-left: 1px solid #dcdcdc;
 	margin-top: 10px;
 }
-.comment .comment .comment {
-	background: var(--whitebg);
-}
-.comment .comment .comment .comment {
-	background: var(--lightgray);
-}
-.comment .comment .comment .comment .comment {
-	background: var(--whitebg);
-}
-.comment .comment .comment .comment .comment .comment {
-	background: var(--lightgray);
-}
-.comment .comment .comment .comment .comment .comment .comment {
-	background: var(--whitebg);
-}
-/* Is there any better way to do this??? send help naow */
-.comment .comment .comment .comment .comment .comment .comment .comment {
-	background: var(--lightgray);
-}
-.comment .comment .comment .comment .comment .comment .comment .comment .comment {
-	background: var(--whitebg);
-}
-.comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
-	background: var(--lightgray);
-}
-.comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
-	background: var(--whitebg);
-}
-.comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
-	background: var(--lightgray);
-}
-.comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
-	background: var(--whitebg);
-}
-.comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
-	background: var(--lightgray);
-}
-.comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
-	background: var(--whitebg);
-}
-.comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
-	background: var(--lightgray);
-}
-.comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
-	background: var(--whitebg);
-}
-.comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
-	background: var(--lightgray);
-}
-.comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
-	background: var(--whitebg);
-}
-.comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
-	background: var(--lightgray);
-}
-.comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
-	background: var(--whitebg);
-}
-.comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
-	background: var(--lightgray);
-}
-.comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
-	background: var(--whitebg);
-}
+
 /* POST */
 #post .info {
 	float: left;
diff --git a/inc/compilePostComments.js b/inc/compilePostComments.js
index 8afcf66..10c9d90 100644
--- a/inc/compilePostComments.js
+++ b/inc/compilePostComments.js
@@ -38,7 +38,7 @@ module.exports = function() {
             edited_span = `<span title="this comment is edited">*</span>`
           }
           comments_html = `
-            <div class="comment" id="${comments.id}">
+            <div class="comment ${comments.depth % 2 === 0 ? 'even-depth' : 'odd-depth'}" id="${comments.id}">
               <details open>
                 <summary>
                   <p class="author">${commentAuthor(comments, classlist, submitter && submitter_link, moderator && moderator_badge)}</p>
@@ -124,7 +124,7 @@ module.exports = function() {
                 edited_span = `<span title="this comment is edited">*</span>`
               }
               comments_html += `
-                <div class="comment" id="${comment.id}">
+                <div class="comment ${comment.depth % 2 === 0 ? 'even-depth' : 'odd-depth'} id="${comment.id}">
                 <details open>
                   <summary>
                     <p class="author">${commentAuthor(comment, classlist, submitter && submitter_link, moderator && moderator_badge)}</p>
diff --git a/inc/processJsonPost.js b/inc/processJsonPost.js
index 81999e1..a40485d 100644
--- a/inc/processJsonPost.js
+++ b/inc/processJsonPost.js
@@ -142,7 +142,8 @@ module.exports = function(fetch) {
               distinguished: comment.distinguished,
               score_hidden: comment.score_hidden,
               edited: comment.edited,
-              replies: []
+              replies: [],
+              depth: 0
             }
           } else {
             obj = {
@@ -158,7 +159,7 @@ module.exports = function(fetch) {
           if(comment.replies && kind !== 'more') {
             if(comment.replies.data) {
               if(comment.replies.data.children.length > 0) {
-                obj.replies = processReplies(comment.replies.data.children, post_id)
+                obj.replies = processReplies(comment.replies.data.children, post_id, 1)
               }
             }
           }
@@ -197,7 +198,7 @@ module.exports = function(fetch) {
     return { post_data: post_data, comments: comments_html }
   }
 
-  this.processReplies = (data, post_id) => {
+  this.processReplies = (data, post_id, depth) => {
     let return_replies = []
     for(var i = 0; i < data.length; i++) {
       let kind = data[i].kind
@@ -218,7 +219,8 @@ module.exports = function(fetch) {
           distinguished: reply.distinguished,
           score_hidden: reply.score_hidden,
           edited: reply.edited,
-          replies: []
+          replies: [],
+          depth: depth
         }
       } else {
         obj = {
@@ -227,13 +229,13 @@ module.exports = function(fetch) {
           id: reply.id,
           parent_id: reply.parent_id,
           post_id: post_id,
-          children: []
+          children: [],
+          depth: depth
         }
       }
       
       if(reply.replies && kind !== 'more') {
         if(reply.replies.data.children.length) {
-          let replies = []
           for(var j = 0; j < reply.replies.data.children.length; j++) {
             let comment = reply.replies.data.children[j].data
             let objct = {}
@@ -252,7 +254,8 @@ module.exports = function(fetch) {
                 score_hidden: comment.score_hidden,
                 distinguished: comment.distinguished,
                 distinguished: comment.edited,
-                replies: []
+                replies: [],
+                depth: depth + 1
               }
             } else {
               objct = {
@@ -261,7 +264,8 @@ module.exports = function(fetch) {
                 id: comment.id,
                 parent_id: comment.parent_id,
                 post_id: post_id,
-                children: []
+                children: [],
+                depth: depth + 1
               }
               if(comment.children) {
                 for(var k = 0; k < comment.children.length; k++) {
@@ -273,7 +277,7 @@ module.exports = function(fetch) {
             if(comment.replies) {
               if(comment.replies.data) {
                 if(comment.replies.data.children.length > 0) {
-                  objct.replies = processReplies(comment.replies.data.children, post_id)
+                  objct.replies = processReplies(comment.replies.data.children, post_id, depth )
                 }
               }
             }