☰

Collapse HackerNews Parent Comments

Adds vertical bars to the left of the comments, enabling you to easily collapse the parent comments. It also can leave only a specified number of comments expanded and auto-collapse the rest.

  1. // ==UserScript==
  2. // @name            Collapse HackerNews Parent Comments
  3. // @description     Adds vertical bars to the left of the comments, enabling you to easily collapse the parent comments. It also can leave only a specified number of comments expanded and auto-collapse the rest.
  4. // @author          BLBC (github.com/hjk789, greasyfork.org/users/679182-hjk789)
  5. // @copyright       2020+, BLBC (github.com/hjk789, greasyfork.org/users/679182-hjk789)
  6. // @version         1.2.6
  7. // @homepage        https://github.com/hjk789/Userscripts/tree/master/Collapse-HackerNews-Parent-Comments
  8. // @license         https://github.com/hjk789/Userscripts/tree/master/Collapse-HackerNews-Parent-Comments#license
  9. // @grant           none
  10. // @include         https://news.ycombinator.com/item*
  11. // @namespace https://greasyfork.org/users/679182
  12. // ==/UserScript==
  13.  
  14.  
  15. //--------------- Settings -----------------
  16.  
  17. const autoCollapse = false       // Whether all comments, other than the number of comments below, should be auto-collapsed.
  18.                                  // If set to false, all comments will be left expanded and the settings below have no effect.
  19.     const numberOfRoots = 5
  20.     const numberOfReplies = 3
  21.     const numberOfRepliesOfReplies = 1
  22.  
  23. //------------------------------------------
  24.  
  25.  
  26. const fadeOnHoverStyle = document.createElement("style")
  27. fadeOnHoverStyle.innerHTML = ".verticalBar:hover { background-color: gray !important; }"
  28. document.body.appendChild(fadeOnHoverStyle)
  29.  
  30. // HackerNews puts a 1x1 image before each comment and sets it's width according to each comment depth. Each level of depth adds 40px of width to this
  31. // image, starting from 0 which are the root comments. The ones with a 14px width are flagged comments and the "More comments" link.
  32. // This userscript was first created before HN implemented the root/parent/prev/next links, and at that time the layout didn't have any easier way of identifying
  33. // the hierarchy of the comments (it was just a list of comments pushed to the right), so that's the only way I had found to achieve this at that time.
  34.  
  35. const spacingImgs = document.querySelectorAll(".ind img[height='1']:not([width='14'])")
  36.  
  37. let root = 0
  38. let index = spacingImgs.length-1        // It's required to loop backwards, otherwise the hidden comments reappear when collapsed.
  39. let commentHier = []
  40.  
  41. if (autoCollapse)
  42.     var collapseAll = setInterval(function() { main(index, collapseAll) }, 1)     // An interval of 1ms is being used to prevent the page from freezing until it finishes collapsing. Also, it creates a cool effect
  43. else                                                                              // when the comments are being collapsed. It does make it take a few more seconds to finish in comment-heavy posts (150+) though.
  44. {
  45.     for (let j=0; j < spacingImgs.length; j++)        // Optimize the addition of the bars when the auto collapse is disabled.
  46.         main(j)
  47. }
  48.  
  49.  
  50.  
  51. function main(i, collapseAll)
  52. {
  53.     let commentContainer = spacingImgs[i].parentElement.parentElement.parentElement.parentElement.parentElement.parentElement
  54.     commentContainer.firstChild.style = "border-top: 5px transparent solid"             // To visually separate each vertical bar.
  55.     spacingImgs[i].parentElement.style = "position: relative"
  56.  
  57.     const clicky = commentContainer.querySelectorAll(".clicky:not(.togg)")              // HN added a scrolling animation to the hierarchy links, which breaks the script.
  58.     for (let j=0; j < clicky.length; j++)                                               // The animation is only applied to elements with the class "clicky".
  59.         clicky[j].className = clicky[j].className.replace("clicky","")                  // This removes the clicky class from every hierarchy link of the comment.
  60.  
  61.     if (autoCollapse && !commentContainer.classList.contains("coll"))               // Collapse only if it's not collapsed yet. This is for signed-in users, as HN remembers which comments were collapsed.
  62.         commentContainer.querySelector(".togg").click()
  63.  
  64.     index--
  65.     i--
  66.  
  67.     if (i == -1 || i == spacingImgs.length-1)                // When finished collapsing all comments, now it's time to add the bars.
  68.     {
  69.         clearInterval(collapseAll)
  70.  
  71.         for (let i=0; i < spacingImgs.length; i++)
  72.         {
  73.             const level = spacingImgs[i].width / 40
  74.             commentContainer = spacingImgs[i].parentElement.parentElement.parentElement.parentElement.parentElement.parentElement
  75.             var commentToggle = commentContainer.querySelector(".togg")
  76.  
  77.  
  78.             // Store the current hierarchy in an array
  79.             commentHier[level] = commentToggle
  80.  
  81.  
  82.             let divs = []
  83.             for (let j = spacingImgs[i].width; j >= 0; j -= 40)             // Start adding the vertical bar from the current depth and go backwards.
  84.             {
  85.                 // Create the vertical bar
  86.  
  87.                 const div = document.createElement("div")
  88.                 div.className = "verticalBar"
  89.                 div.commentHier = commentHier[j/40]             // Store in an attribute of the element this comment's parent respective to the level of the vertical bar, for easy access.
  90.                 div.onclick = function(e)
  91.                 {
  92.                     e.target.commentHier.click()                // When a vertical bar is clicked, collapse the respective parent comment.
  93.  
  94.                     // Click the "next" link of the parent comment when it's out of view.
  95.                     if (e.target.commentHier.getBoundingClientRect().y < 0)
  96.                         e.target.commentHier.previousElementSibling.lastChild.click()
  97.  
  98.                 }
  99.  
  100.                 let style = "left: " + (-5 + j) + "px; width: 12px; background-color: lightgray; position: absolute; z-index: 99; transition: 0.15s; "
  101.  
  102.                 // Make it so that the vertical bars are only separated when followed by comments of same level of depth
  103.  
  104.                 if (j == spacingImgs[i].width && spacingImgs[i-1] != null && spacingImgs[i].width <= spacingImgs[i-1].width)
  105.                     style += "top: 5px; height: calc(100% + 8px); "
  106.                 else
  107.                     style += "top: 0px; height: calc(100% + 13px); "
  108.  
  109.                 div.style = style
  110.  
  111.                 divs.push(div)
  112.             }
  113.  
  114.             for (let j = divs.length - 1; j >= 0; j--)
  115.                 spacingImgs[i].parentElement.appendChild(divs[j])
  116.         }
  117.  
  118.         if (autoCollapse)               // When finished collapsing and adding the vertical bars to all comments, now it's time to expand only a few of the first comments.
  119.         {
  120.             let sub40, sub80
  121.  
  122.             for (i=0; i < spacingImgs.length; i++)
  123.             {
  124.                 commentToggle = spacingImgs[i].parentElement.parentElement.querySelector(".togg")
  125.  
  126.                 if (spacingImgs[i].width == 0)          // If it's a root comment.
  127.                 {
  128.                     root++
  129.                     if (root == numberOfRoots + 1)          // If there's already <numberOfRoots> comments expanded, then stop expanding.
  130.                         break
  131.  
  132.                     commentToggle.click()
  133.                     sub40 = 0
  134.                     sub80 = 0
  135.                 }
  136.                 else if (spacingImgs[i].width == 40 && sub40 < numberOfReplies)         // If it's a reply to the root comment, only expand up to <numberOfReplies>.
  137.                 {
  138.                     commentToggle.click()
  139.                     sub40++
  140.                     sub80 = 0
  141.                 }
  142.                 else if (spacingImgs[i].width == 80 && sub80 < numberOfRepliesOfReplies)            // If it's a reply to the reply, only expand up to <numberOfRepliesOfReplies>.
  143.                 {
  144.                     commentToggle.click()
  145.                     sub80++
  146.                 }
  147.             }
  148.         }
  149.     }
  150. }