Implement loading comments beyond depth limit

index.html

@@ -28,6 +28,14 @@ <h1>Export reddit post to markdown format</h1>
     />
   </div>
 
+  <label>Acquisition option :</label>
+  <div class="form-check form-check-inine">
+    <input type="checkbox" class="form-check-input" id="postLoadComments" />
+    <label class="form-check-label" for="postLoadComments">
+      Load additional comments in seperate request if comment depth greather than 10
+    </label>
+  </div>
+
   <label>Export style :</label>
   <div class="form-check form-check-inline">
     <input class="form-check-input" type="radio" name="exportOption" id="treeOption" checked/>

script.js

@@ -4,6 +4,7 @@ let output = '';
 let style = 0;
 let escapeNewLine = false;
 let spaceComment = false;
+var postLoadAdditionalComments = false
 var selectedProxy = 'auto';
 
 // CORS Proxy configurations
@@ -36,7 +37,7 @@ const onDocumentReady = () => {
 };
 
 const getQueryParamUrl = () => new URLSearchParams(window.location.search).get(
-    'url') ?? null;
+  'url') ?? null;
 const getFieldUrl = () => document.getElementById('url-field').value;
 
 function formatRedditJsonUrl(url) {
@@ -188,7 +189,7 @@ async function fetchData(url) {
     const comments = data[1].data.children;
     displayTitle(post);
     output += '\n\n## Comments\n\n';
-    comments.forEach(displayComment);
+    comments.forEach((comment) => displayComment(comment, null));
 
     console.log('Done');
     let output_display = document.getElementById('output-display');
@@ -216,6 +217,20 @@ async function fetchData(url) {
   }
 }
 
+function loadMoreComments(url, parentid, depthInd) {
+  const h2 = new XMLHttpRequest()
+  //to allow the newly loaded comments to appear in the correct place, this call has to be synchronous
+  h2.open('GET', `${url}/${parentid}.json`, false);
+  //setting a desired response type is not supported for non-async calls
+  //h2.responseType = 'json';
+  h2.send();
+
+  //as a response type cannot be set, the result needs to be parsed to JSON manually.
+  const d2 = JSON.parse(h2.responseText)
+  const comments = d2[1].data.children[0].data.replies.data.children;
+  comments.forEach((comment) => displayComment(comment, depthInd));
+}
+
 function setStyle() {
   if (document.getElementById('treeOption').checked) {
     style = 0;
@@ -235,6 +250,12 @@ function setStyle() {
     spaceComment = false;
   }
 
+  if (document.getElementById('postLoadComments').checked) {
+    postLoadAdditionalComments = true;
+  } else {
+    postLoadAdditionalComments = false;
+  }
+
   selectedProxy = document.getElementById('proxySelection').value;
 }
 
@@ -266,7 +287,7 @@ function download(text, name, type) {
   document.getElementById('copyButton').removeAttribute('disabled');
   let download_button = document.getElementById('downloadButton');
   download_button.removeAttribute('disabled');
-  let file = new Blob([text], {type: type});
+  let file = new Blob([text], { type: type });
   download_button.href = URL.createObjectURL(file);
   download_button.download = name;
 }
@@ -288,39 +309,46 @@ function formatComment(text) {
   }
 }
 
-function displayComment(comment, index) {
+function displayComment(comment, preexistingDepth = null) {
+  let currentDepth = preexistingDepth != null ? preexistingDepth : comment.data.depth;
+  let depthTag
   if (style == 0) {
-    depthTag = '─'.repeat(comment.data.depth);
-    if (depthTag != '') {
-      output += `├${depthTag} `;
+    if (currentDepth > 0) {
+      depthTag = `├${'─'.repeat(currentDepth)} `;
     } else {
-      output += `##### `;
+      depthTag = `##### `;
     }
   } else {
-    depthTag = '\t'.repeat(comment.data.depth);
-    if (depthTag != '') {
-      output += `${depthTag}- `;
+    if (currentDepth > 0) {
+      depthTag = `${'\t'.repeat(currentDepth)}- `;
     } else {
-      output += `- `;
+      depthTag = `- `;
     }
   }
 
   if (comment.data.body) {
     console.log(formatComment(comment.data.body));
-    output += `${formatComment(
-        comment.data.body)} ⏤ by *${comment.data.author}* (↑ ${
-        comment.data.ups
-    }/ ↓ ${comment.data.downs})\n`;
+    output += `${depthTag}${formatComment(
+      comment.data.body)} ⏤ by *${comment.data.author}* (↑ ${comment.data.ups
+      }/ ↓ ${comment.data.downs})\n`;
+  } else if (comment.kind === "more") {
+    let parentID = comment.data.parent_id.substring(3);
+    if (postLoadAdditionalComments) {
+      loadMoreComments(getFieldUrl(), parentID, currentDepth); ""
+    }
+    else {
+      output += `${depthTag}comment depth-limit (${currentDepth}) reached. [view on reddit](${getFieldUrl()}/${parentID})\n`;
+    }
   } else {
-    output += 'deleted \n';
+    output += `${depthTag}deleted\n`;
   }
 
   if (comment.data.replies) {
-    const subComment = comment.data.replies.data.children;
-    subComment.forEach(displayComment);
+    const subComments = comment.data.replies.data.children;
+    subComments.forEach((subComment) => displayComment(subComment, preexistingDepth != null ? preexistingDepth + 1 : null));
   }
 
-  if (comment.data.depth == 0 && comment.data.replies) {
+  if (currentDepth == 0 && comment.data.replies) {
     if (style == 0) {
       output += '└────\n\n';
     }