☰

kbin collapsible comments

Collapse and hide comments on kbin.social

  1. // ==UserScript==
  2. // @name        kbin collapsible comments
  3. // @match       https://kbin.social/*
  4. // @match       https://fedia.io/*
  5. // @match       https://karab.in/*
  6. // @description Collapse and hide comments on kbin.social
  7. // @version     1.2.1
  8. // @namespace https://greasyfork.org/users/1096641
  9. // ==/UserScript==
  10.  
  11. (function () {
  12.   "use strict";
  13.  
  14.   // This function will run for each comment block
  15.   function processComment(commentBlock, level) {
  16.     // Find the header, figure, footer, and content within this comment block
  17.     var header = commentBlock.querySelector("header");
  18.     var figure = commentBlock.querySelector("figure");
  19.     var footer = commentBlock.querySelector("footer");
  20.     var content = commentBlock.querySelector(".content");
  21.     var menu = footer.querySelector("menu");
  22.  
  23.     // Create the collapse/expand button
  24.     var button = document.createElement("a");
  25.     button.innerHTML = '<i class="fa-solid fa-chevron-up"></i>';
  26.     button.style.cursor = "pointer";
  27.     button.style.marginLeft = "1rem";
  28.  
  29.     // Add the button to the header
  30.     header.appendChild(button);
  31.  
  32.     // Set a click event for the collapse/expand button
  33.     button.addEventListener("click", function () {
  34.       if (content.style.display === "none") {
  35.         content.style.display = "";
  36.         footer.style.display = "";
  37.         figure.style.display = "";
  38.         commentBlock.style.height = "";
  39.         button.innerHTML = '<i class="fa-solid fa-chevron-up"></i>';
  40.  
  41.         // Find all following comment blocks
  42.         var followingComments = commentBlock.nextElementSibling;
  43.         while (
  44.           followingComments &&
  45.           followingComments.className.match(/comment-level--(\d)/)[1] > level
  46.         ) {
  47.           followingComments.style.display = "";
  48.           collapseChildrenLink.innerHTML = "hide replies";
  49.           followingComments = followingComments.nextElementSibling;
  50.         }
  51.       } else {
  52.         content.style.display = "none";
  53.         footer.style.display = "none";
  54.         figure.style.display = "none";
  55.         commentBlock.style.height = "40px";
  56.         commentBlock.style.paddingTop = "0.53rem";
  57.         button.innerHTML = '<i class="fa-solid fa-chevron-down"></i>';
  58.  
  59.         // Find all following comment blocks
  60.         var followingComments = commentBlock.nextElementSibling;
  61.         while (
  62.           followingComments &&
  63.           followingComments.className.match(/comment-level--(\d)/)[1] > level
  64.         ) {
  65.           followingComments.style.display = "none";
  66.           collapseChildrenLink.innerHTML = "show replies";
  67.           followingComments = followingComments.nextElementSibling;
  68.         }
  69.       }
  70.     });
  71.  
  72.     // Check if this comment has any children
  73.     var nextComment = commentBlock.nextElementSibling;
  74.     if (
  75.       nextComment &&
  76.       nextComment.classList.contains("comment-level--" + (level + 1))
  77.     ) {
  78.       // Create the collapse children button
  79.       var collapseChildrenButton = document.createElement("li");
  80.       var collapseChildrenLink = document.createElement("button");
  81.       collapseChildrenLink.class = "stretched-link";
  82.       collapseChildrenLink.innerHTML = "hide replies";
  83.       collapseChildrenLink.style.cursor = "pointer";
  84.       collapseChildrenButton.appendChild(collapseChildrenLink);
  85.  
  86.       // Add the button to the menu in the footer
  87.       menu.appendChild(collapseChildrenButton);
  88.  
  89.       // Set a click event for the collapse children button
  90.       collapseChildrenLink.addEventListener("click", function () {
  91.         // Find all following comment blocks
  92.         var followingComments = commentBlock.nextElementSibling;
  93.         while (
  94.           followingComments &&
  95.           followingComments.className.match(/comment-level--(\d)/)[1] > level
  96.         ) {
  97.           if (followingComments.style.display === "none") {
  98.             followingComments.style.display = "";
  99.             collapseChildrenLink.innerHTML = "hide replies";
  100.           } else {
  101.             followingComments.style.display = "none";
  102.             collapseChildrenLink.innerHTML = "show replies";
  103.           }
  104.           followingComments = followingComments.nextElementSibling;
  105.         }
  106.       });
  107.     }
  108.   }
  109.  
  110.   // Find all comment blocks on the page
  111.   var commentBlocks = document.querySelectorAll("blockquote.entry-comment");
  112.  
  113.   // Process each comment block
  114.   for (var i = 0; i < commentBlocks.length; i++) {
  115.     var level = parseInt(
  116.       commentBlocks[i].className.match(/comment-level--(\d)/)[1]
  117.     );
  118.     processComment(commentBlocks[i], level);
  119.   }
  120. })();