Hacker News - Folding Subtrees

Fold and unfold arbitrary comment subtrees.
换行
// ==UserScript==
// @name        Hacker News - Folding Subtrees
// @namespace   https://github.com/pdkl95/user_scripts
// @description Fold and unfold arbitrary comment subtrees.
// @include     https://news.ycombinator.com/item*
// @version     1.2
// @grant       none
// ==/UserScript==
 
/*
    hacker_news-folding_subtrees.user.js
    A user script to fold Hacker News.comments.
    Copyright (C) 2015 Brent Sanders
 
    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.
 
    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.
 
    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/
 
(function () {
  var  icon_padding_px = 6;
 
  var    post_selector = '.athing';
  var  indent_selector = '.ind';
  var  header_selector = '.default div:nth-child(1)';
  var votebox_selector = 'tr td:nth-child(2)';
  
  var style_r90        = ".rotate90  { transform: rotate(90deg);  }";
  var style_r270       = ".rotate270 { transform: rotate(270deg); }";
  var style_foldunfold = ".foldunfoldbtn { position: relative; top: -1px; }";
  var style_fold       = '.foldbtn { opacity: 0.5; }';
  var style_unfold     = '.unfoldbtn { opacity: 0.7; }';
  var style_ctlbox     = '.foldctlbox { position: absolute; padding-left: ' + icon_padding_px + 'px; }'; 
  var style_list = [style_r90, style_r270, style_foldunfold, style_fold, style_unfold, style_ctlbox];
  
  var extra_style_sheet = document.createElement('style');
  extra_style_sheet.type = 'text/css';
  extra_style_sheet.appendChild(document.createTextNode(style_list.join("\n")));
  
  var head = document.querySelector('head');
  head.appendChild(extra_style_sheet);
  
  var foldified_count = 0;
  
  function hide (el) {
    el.style.display = 'none';
  }
 
  function show_element (el, mode) {
    if (el) {
      el.style.display = mode;
    }
  }
 
  function show_block        (el) { show_element(el, 'block'       ); }
  function show_inline       (el) { show_element(el, 'inline'      ); }
  function show_inline_block (el) { show_element(el, 'inline-block'); }
 
  function set_toggle_button_fold (btn) {
    btn.classList.add('foldbtn');
    btn.classList.add('rotate90');
    btn.classList.remove('unfoldbtn');
    btn.classList.remove('rotate270');
  }
  
  function set_toggle_button_unfold (btn) {
    btn.classList.remove('foldbtn');
    btn.classList.remove('rotate90');
    btn.classList.add('unfoldbtn');
    btn.classList.add('rotate270');
  }
 
  function make_toggle_button (btn_type, rotation_class) {
    var btn = document.createElement('div');
    btn.classList.add('votearrow');
    btn.classList.add('foldunfoldbtn');
    set_toggle_button_fold(btn);
    show_inline_block(btn);
    return btn;
  }
  
  
  function each_subtree_post (post, func) {
    if (!post.hasOwnProperty('indent_width')) { return; }
 
    var width = post.indent_width || 0;
    post = post.nextElementSibling;
 
    while (post && post.hasOwnProperty('indent_width') && (post.indent_width > width)) {
      func(post);
      post = post.nextElementSibling;
    }
  }
 
  function foldify_post(post_el, idx) {
    var ind_el = post_el.querySelector(indent_selector);
    if (!ind_el) { return; }
 
    var spacer_img = ind_el.firstChild;
    if (!spacer_img) { return; }
    post_el.indent_width = spacer_img.width;
    
    var  header_el = post_el.querySelector(header_selector);
    var votebox_el = post_el.querySelector(votebox_selector);
    
    var votepad_el = null;
    
    var body_br_el = null;
    var body_comment_el = null;
    var body_pad_el = null;
    
    if (header_el) {
      post_el.header_el = header_el;
      votepad_el = document.createElement('span');
      votepad_el.style.display = 'none';
 
      body_pad_el = document.createElement('div');
      body_pad_el.classList.add('comment');
 
      var comhead_el = header_el.querySelector('.comhead');
 
      if (votebox_el) {
        var icon_width = votebox_el.offsetWidth;
        votepad_el.style.width = icon_width;
 
        if (comhead_el) {
          var comhead_width = comhead_el.offsetWidth;
          body_pad_el.style.width = '' + (comhead_width + icon_width + icon_padding_px) + 'px';
        }
      }
      
      header_el.insertBefore(votepad_el, header_el.firstChild);
 
      body_br_el      = header_el.parentElement.children[1];
      body_comment_el = header_el.parentElement.children[2];
      
      header_el.parentElement.appendChild(body_pad_el);
      
    }
    
    var toggle_btn = make_toggle_button();
    
    post_el.fold_self = function () {
      post_el.is_folded = true;
 
      set_toggle_button_unfold(toggle_btn);
      
      hide(votebox_el);
      show_inline_block(votepad_el);
      hide(body_br_el);
      hide(body_comment_el);
      show_block(body_pad_el);
    };
    
    post_el.unfold_self = function () {
      post_el.is_folded = false;
 
      set_toggle_button_fold(toggle_btn);
      
      show_block(votebox_el);
      hide(votepad_el);
      show_inline(body_br_el);
      show_block(body_comment_el);
      hide(body_pad_el);
    };
    
    post_el.fold_subtree = function () {
      each_subtree_post(post_el, function (post) { post.fold_self(); });
    };
    
    post_el.unfold_subtree = function () {
      each_subtree_post(post_el, function (post) { post.unfold_self(); });
    };
 
    post_el.fold = function () {
      post_el.fold_self();
      post_el.fold_subtree();
    };
    
    post_el.unfold = function () {
      post_el.unfold_self();
      post_el.unfold_subtree();
    };
    
    post_el.is_folded = false;
    post_el.toggle_fold = function () {
      if (post_el.is_folded) {
        post_el.unfold();
      } else {
        post_el.fold();
      }
    };
 
    var toggle_event = function (event) {
      post_el.toggle_fold();
    };
    toggle_btn.addEventListener('click', toggle_event, false);
 
    var ctl_box = document.createElement('div');
    ctl_box.classList.add('foldctlbox');
    ctl_box.appendChild(toggle_btn);
    show_inline_block(ctl_box);
    
    header_el.appendChild(ctl_box);
    
    foldified_count = foldified_count + 1;
  }
  
  function setup_posts () {
    var posts = document.querySelectorAll(post_selector);
    /*console.log('found ' + posts.length + ' posts');*/
    if (posts) {
      Array.prototype.forEach.call(posts, foldify_post);
    }
  }
  
  setup_posts();
  
  /*console.log("foldified " + foldified_count + ' posts');*/
})();