☰

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.

当前为 2021-04-01 提交的版本，查看 最新版本。

  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
  7. // @homepage        https://github.com/hjk789/Creations/tree/master/Userscripts/Collapse-HackerNews-Parent-Comments
  8. // @license         https://github.com/hjk789/Creations/tree/master/Userscripts/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 collapse = true   // Whether all comments, other than the number of comments below, should be collapsed.
  18.                         // If set to false, all comments will be left expanded and the settings below have no effect.
  19.     const numberOfRoots = 3
  20.     const numberOfReplies = 2
  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
  31. // 40px of width to this image, starting from 0 which are the root comments. The ones with a 14px width are flagged comments and
  32. // the "More comments" link. And because HackerNews layout doesn't have any easier way of identifying the hierarchy of the
  33. // comments (it's just a list of comments pushed to the right), that's the only way I've found to achieve this.
  34.  
  35. spacingImgs = document.querySelectorAll(".ind img[height='1']:not([width='14'])")
  36.  
  37. let root = 0
  38. let i = spacingImgs.length-1    // It's required to loop backwards, otherwise the hidden comments reappear when collapsed.
  39. let commentHier = []
  40.  
  41. collapseAll = setInterval(function()   // An interval of 1ms is being used to prevent the page from freezing until it finishes. Also, it creates a cool effect when
  42. {                                      // the comments are being collapsed. It does make it take a few more seconds to finish in comment-heavy posts (150+) though.
  43.     const commentContainer = spacingImgs[i].parentElement.parentElement.parentElement.parentElement.parentElement
  44.     commentContainer.style = "border-top: 5px transparent solid"  // To visually separate each vertical bar.
  45.     spacingImgs[i].parentElement.style = "position: relative"
  46.  
  47.     let commentToggle = spacingImgs[i].parentElement.parentElement.querySelector(".togg")
  48.  
  49.     if (collapse && !commentContainer.parentElement.classList.contains("coll"))   // Collapse only if it's not collapsed yet. This is for signed-in users, as HN remembers which comments were collapsed.
  50.         commentToggle.click()
  51.  
  52.     i--
  53.  
  54.     if (i == -1)    // When finished collapsing and adding the vertical bars to all comments, now it's time to expand only a few of the first comments.
  55.     {
  56.         clearInterval(collapseAll)
  57.  
  58.         for (i=0; i < spacingImgs.length; i++)
  59.         {
  60.             const level = spacingImgs[i].width / 40
  61.  
  62.             let commentToggle = spacingImgs[i].parentElement.parentElement.querySelector(".togg")
  63.  
  64.             // Store the current hierarchy in an array
  65.             commentHier[level] = commentToggle
  66.  
  67.  
  68.             let divs = []
  69.             for (j = spacingImgs[i].width; j >= 0; j -= 40)  // Start adding the vertical bar from the current depth and go backwards.
  70.             {
  71.                 // Create the vertical bar
  72.  
  73.                 const div = document.createElement("div")
  74.                 div.className = "verticalBar"
  75.                 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.
  76.                 div.onclick = commentHier[j/40].onclick    // When a vertical bar is clicked, collapse the respective parent comment.
  77.                 div.onmouseup = function(e)
  78.                 {
  79.                     if (e.target.commentHier.getBoundingClientRect().y < 0)  // If the parent comment is off-screen above,
  80.                         e.target.commentHier.scrollIntoView()                // scroll to it.
  81.                 }
  82.  
  83.                 let style = "left: " + (-5 + j) + "px; width: 12px; background-color: lightgray; position: absolute; z-index: 99; transition: 0.15s; "
  84.  
  85.                 // Make it so that the vertical bars are only separated when followed by comments of same level of depth
  86.  
  87.                 if (j == spacingImgs[i].width && spacingImgs[i-1] != null && spacingImgs[i].width <= spacingImgs[i-1].width)
  88.                     style += "top: 5px; height: calc(100% + 8px); "
  89.                 else
  90.                     style += "top: 0px; height: calc(100% + 13px); "
  91.  
  92.                 div.style = style
  93.  
  94.                 divs.push(div)
  95.             }
  96.  
  97.             for (j = divs.length - 1; j >= 0; j--)
  98.                 spacingImgs[i].parentElement.appendChild(divs[j])
  99.         }
  100.  
  101.         if (collapse)
  102.         {
  103.             root = 0
  104.             for (i=0; i < spacingImgs.length; i++)
  105.             {
  106.                 commentToggle = spacingImgs[i].parentElement.parentElement.querySelector(".togg")
  107.  
  108.                 if (spacingImgs[i].width == 0)  // If it's a root comment.
  109.                 {
  110.                     root++
  111.                     if (root == numberOfRoots + 1)  break  // If there's already <numberOfRoots> comments expanded, then stop expanding.
  112.  
  113.                     commentToggle.click()
  114.                     sub40 = 0
  115.                     sub80 = 0
  116.                 }
  117.                 else if (spacingImgs[i].width == 40 && sub40 < numberOfReplies)  // If it's a reply to the root comment, only expand up to <numberOfReplies>.
  118.                 {
  119.                     commentToggle.click()
  120.                     sub40++
  121.                     sub80 = 0
  122.                 }
  123.                 else if (spacingImgs[i].width == 80 && sub80 < numberOfRepliesOfReplies)  // If it's a reply to the reply, only expand up to <numberOfRepliesOfReplies>.
  124.                 {
  125.                     commentToggle.click()
  126.                     sub80++
  127.                 }
  128.             }
  129.         }
  130.     }
  131.  
  132. }, 1)
  133.