hn-tweaks.user.js

hn-tweaks.user.js

// ==UserScript==
// @name Hacker News Tweaks
// @version 0.0.3
// @downloadURL https://gist.githubusercontent.com/evanreichard/96d89512cbfe23e5d7a81479c482e6da/raw/hn-tweaks.user.js
// @match *://news.ycombinator.com/*
// @grant GM.addStyle
// @grant GM.registerMenuCommand
// @grant GM.unregisterMenuCommand
// @grant GM.getValue
// @grant GM.setValue
// @noframes
// @run-at document-idle
// ==/UserScript==

/**
 * This is a hacked together UserScript to add comment collapsing like old reddit.
 * It also adds the following CSS tweak: https://news.ycombinator.com/item?id=29494475
 **/

let activeStyleElement;

async function toggleStyle(){
  let isEnabled = await GM.getValue('enabled', true);
  if (isEnabled === true){
    GM.unregisterMenuCommand('Disable Style');
  isEnabled = false;
    activeStyleElement?.remove();
    GM.registerMenuCommand('Enable Style', toggleStyle);
  } else {
    GM.unregisterMenuCommand('Enable Style');
    applyStyle()
  isEnabled = true;
    GM.registerMenuCommand('Disable Style', toggleStyle);
  }
  await GM.setValue('enabled', isEnabled);
}

function applyStyle(){
  activeStyleElement = GM.addStyle(`.comhead {
    font-size: 12pt;
    line-height: 20pt;
  }`);
}

function findParent(el, index){
  let previousSibling = el.previousElementSibling;
  let foundElem = previousSibling.querySelector(`[indent="${index}"]`);
  return foundElem ? foundElem.closest('.athing') : findParent(previousSibling, index);
}

GM.getValue('enabled', true).then(isEnabled => {
  if (isEnabled === true){
    GM.registerMenuCommand('Disable Style', toggleStyle);
    applyStyle();
  } else {
    GM.registerMenuCommand('Enable Style', toggleStyle);
  }
});

Array.from(document.querySelectorAll('.ind')).forEach(indent => {
  indent.style.position = 'relative';
  let indCount = parseInt(indent.getAttribute('indent'));
  let colWidth = indent.querySelector('img').offsetWidth;

  let voteOffset = indent.nextElementSibling.querySelector('center').offsetHeight;
  
  for (let i = 0; i <= indCount; i += 1){
    let marginLeft = i === 0 ? '10px' : (colWidth / indCount) * i + 10 + 'px';
    let topOffset = i === indCount ? voteOffset + 15 : -10;
    let newElem = document.createElement('div')
    newElem.setAttribute('style', `cursor: pointer; height: calc(100% - ${topOffset + 2}px); width: 0px; position: absolute; margin-left: ${marginLeft}; top: ${topOffset}px; border-left: 2px solid green; padding: 0px min(${colWidth / 2}px, 5px);`);
    newElem.onclick = () => {
      let commentBlock = newElem.closest('.athing');
      if (i === indCount){
        commentBlock.querySelector('.togg.clicky').click()
      } else {
        let parentComment = findParent(commentBlock, i);
        parentComment.querySelector('.togg.clicky').click()
      }
    }
    indent.appendChild(newElem);
  }
});