Hacker News collapsible comments

Reddit style collapsible comments for Hacker News

当前为 2014-07-02 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name Hacker News collapsible comments
  3. // @namespace hackernewscollapsecomments
  4. // @description Reddit style collapsible comments for Hacker News
  5. // @version 1.0
  6. // @author kaixi
  7. // @homepage http://userscripts.org/scripts/show/138037
  8. // @include https://news.ycombinator.com/item?id=*
  9. // @include https://news.ycombinator.com/threads?*
  10. // @include https://news.ycombinator.com/x?fnid=*
  11. // @match https://news.ycombinator.com/item?id=*
  12. // @match https://news.ycombinator.com/threads?*
  13. // @match https://news.ycombinator.com/x?fnid=*
  14. // @grant none
  15. // ==/UserScript==
  16.  
  17. var init = function() {
  18. // CSS styles for the toggle button
  19. var style = document.createElement('style');
  20. style.innerHTML = '.toggle_button { cursor: pointer; font-size: 10px; margin-right: 5px; padding: 0 1px 1px; }'
  21. + ' .hover { background: #828282; color: #f6f6ef; }';
  22. document.head.appendChild(style);
  23.  
  24. // Find all the comments
  25. var comments = [];
  26. i = 0;
  27. $('td.default').each(function() {
  28. var comment = $($(this).parents('tr')[1]).addClass('collapsible').attr('id', i + '_comment');
  29. comments.push({
  30. container: comment,
  31. indentation: comment.find('img').first()[0].width
  32. });
  33. ++i;
  34. });
  35.  
  36. $('<span></span>', {
  37. text: '[–]',
  38. class: 'toggle_button'
  39. })
  40. .insertBefore('div > .comhead')
  41. .on('mouseenter', function() {
  42. $(this).addClass('hover');
  43. })
  44. .on('mouseleave', function() {
  45. $(this).removeClass('hover');
  46. })
  47. .on('click', function() {
  48. var $this = $(this),
  49. current_id = parseInt($this.closest('tr.collapsible').attr('id')),
  50. i = current_id + 1,
  51. children_count = 0;
  52. // Toggle child comments
  53. while(i < comments.length && comments[i].indentation > comments[current_id].indentation) {
  54. comments[i].container.toggle();
  55. // Skip comments that shouldn't be toggled
  56. if (/[+]/i.test(comments[i].container.find('span.toggle_button').text())) {
  57. var j = i + 1;
  58. while(j < comments.length && comments[j].indentation > comments[i].indentation) {
  59. j++;
  60. }
  61. i = j;
  62. } else {
  63. i++;
  64. }
  65. }
  66. // Toggle current comment
  67. var content = comments[current_id].container.find('span.comment').toggle().next().toggle().end();
  68. if (content.is(':visible')) {
  69. $this.text('[–]');
  70. } else {
  71. $this.text('[+]');
  72. }
  73. });
  74. };
  75.  
  76. // Credit: http://erikvold.com/blog/index.cfm/2010/6/14/using-jquery-with-a-user-script
  77. (function(fn) {
  78. var script = document.createElement('script');
  79. script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js';
  80. script.addEventListener('load', function() {
  81. var script = document.createElement('script');
  82. script.textContent = 'jQuery.noConflict();(function($){(' + fn.toString() + ')();})(jQuery);';
  83. document.body.appendChild(script);
  84. }, false);
  85. document.body.appendChild(script);
  86. })(init);

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址