Collapse HN comments (WIP)

hn-comments.js

(function() {
  'use strict';

  function get_comment_index(seed, currWidth, prevWidth, prevIndex) {
    if (currWidth === 0 || prevIndex === undefined) {
      return seed;
    }
    if (currWidth > prevWidth) {
      return prevIndex + '-' + (seed + 1);
    } if (currWidth == prevWidth) {
      return prevIndex;
    } if (currWidth < prevWidth) {
      var arr = prevIndex.split('-').slice(0, parseInt((currWidth - prevWidth) / 40));
      var lastElem = arr[arr.length - 1];
      arr[arr.length - 1] = parseInt(lastElem) + 1;
      return arr.join("-");
    }
  }
  var indents = document.querySelectorAll('td.ind');
  var seed = 0;

  for (var i = 0; i < indents.length; i++) {
    var currWidth = indents[i].childNodes.item(0).width;
    if (currWidth === 0 || currWidth < prevWidth) {
      seed += 1;
    }
    indents[i].setAttribute('data-s', get_comment_index(seed, currWidth, prevWidth, prevIndex));
    prevWidth = currWidth;
    prevIndex = indents[i].getAttribute('data-s');
  }

  var uva = document.querySelectorAll('a[id^="up_"]');
  for (var i = 0; i < uva.length; i++) {
    var d = document.createElement('div');
    d.classList.add('expand');
    uva[i].parentNode.appendChild(d);
  }

  function expandParent() {
    var parentTr = this.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode;
    var childPrefix = this.parentNode.parentNode.parentNode.childNodes.item(0).getAttribute('data-s');
    var _selector = 'td.ind[data-s^="' + childPrefix + '-"]';
    var childComments = document.querySelectorAll(_selector);
    console.log(_selector, childComments);
    for (var i = 0; i < childComments.length; i++) {
      childComments[i].parentNode.parentNode.parentNode.parentNode.parentNode.classList.toggle('athing--hidden');
    }
  }
  var expandButtons = document.getElementsByClassName('expand');
  for (var i = 0; i < expandButtons.length; i++) {
    expandButtons[i].addEventListener('click', expandParent);
  }
  // Add some styling
  var css = '.athing { position: relative; will-change: transform; transition: transform 0s; } .expand { width: 1rem; height: 1rem; background-color: red; } .athing--hidden { transform: scaleY(0); position: absolute;}',
    head = document.head || document.getElementsByTagName('head')[0],
    style = document.createElement('style');
  style.type = 'text/css';
  if (style.styleSheet) {
    style.styleSheets.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
  head.appendChild(style);
}());