☰

Reddit - Load 'Continue this thread' inline

Changes 'Continue this thread' links to insert the linked comments into the current page

当前为 2016-04-01 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name           Reddit - Load 'Continue this thread' inline
  3. // @description    Changes 'Continue this thread' links to insert the linked comments into the current page
  4. // @author         James Skinner <spiralx@gmail.com> (http://github.com/spiralx)
  5. // @namespace      http://spiralx.org/
  6. // @version        1.7.0
  7. // @icon           data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAFiAAABYgAWToQQYAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuNWWFMmUAAAF3SURBVDhP1ZI/SAJhGMZN3WpKOAgsKGiIoKWg0K2LXIJWj6DAhpAgKMiW7irBqziHbhYE12sLGtWGKHBx0kHcQrBJXNIz9e35vvsQoj841g9+fHy8z/PyHZzrXzANNbgKF2ASHsOhOYGTUIb3cBSq4hyKa3Ey2GsMeMRvvzALd+AVvIPbcAb+yAq8hBehUOgxnU5TtVol27ap3W5TpVKhVCpFsiw/IHMusstwgOHxeDZM07T7/T5Rr0vUfacBvR7uHWIzwzBayK+zDm8KktFo9FXEifaXiHbnxAXEZKKtqcHSSCTygs6nBYuWZfEhR1eIzjbFBdzsYcma8xKQyWQInXmn6jCeSCQ6fDoEqqqyzxhzqgK/368Xi0UeKJfLpGka5fN5yuVyrEClUonPCoUCSZLE/oMvjGBwqut6q16vU6PRoGw2yxc0m02q1WoUj8fffD5fjGWdyvdMeL3ew2AweKsoynM4HH4KBAKW2+0+wExyIn8Hl+sDt5ENCrpr91QAAAAASUVORK5CYII=
  8. // @icon64         data:image/png;base64,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
  9. // @match          *://*.reddit.com/r/*/comments/*
  10. // @grant          none
  11. // @run-at         document-end
  12. // @require        https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.js
  13. // @require        https://greasyfork.org/scripts/7602-mutation-observer/code/mutation-observer.js
  14. // ==/UserScript==
  15.  
  16. /* jshint asi: true, esnext: true */
  17. /* global jQuery, MutationSummary */
  18.  
  19. ; (function userScript($) {
  20.   'use strict'
  21.  
  22.   const NORMAL = 'font-weight: normal; text-decoration: none; color: black'
  23.   const ERROR = 'font-weight: bold; color: #f4f'
  24.   const LINK = 'color: #05f; text-decoration: underline'
  25.   const BOLD = 'font-weight: bold'
  26.   const BLUE = 'color: #05f'
  27.  
  28.   const EXPAND_ICON = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAADZklEQVR42tVXv08TURyvIdbYjg0DCQuaLjA4Y5rQ61lo0jASHIQFEnUQ/BGDkqJiAj00YkuPa0Fw4S8gYYDgxEYTdHaDgAMDDQUGBunz+7m79t6112srFPEln6Tpfd/3+3nfX+/7HI7/bQmCcDsQCNwnjIqBwEcAv/EfvtXFaCgUahQFYSwgCD/bu/tZa7/EWh4vseahZRUtj5bU//ANMpAN+XyNF2H4BpR1dIZPvINJ5n6/wxzTjDk+F2FaxyfG3OM7zDuQZNijEiEdf2VcFMVb5NYfbX2TzBnNaIZiOuIWiJkJOSczDHuhA7pqjfMdQQztNz1fMwzDyIyOhAXy33gy5JGmZ2vML3btQ2fVJxdog+d12jCeNyprcE3tMc/YpgkuaddMJmZ4wzOSVklU9ERPT4+Tkuh74eRxzvgsQQFy7OHwS/Ztfd2E4RcjrGHmVCOZ4LzBeQK6YaP86SlpEDeTcZkznmTsWirHJElixUuWZXY9ntXkZvV9M+ZwtD2YYLBhnfFUNshcp5Qx3J43ToYdKcIcEZi3IZDIanJJfR8fDj0xO+6FTyxLFMxQaoXTJ4qMzxO+EIEFGwJyVpNLMcMTCXMovAOKtRfQQNQ650+vmI07FonAog0BJavJzXEkZLMX3O921GZV0l7bu/ssTp+jmJ+R2wkLhK/A7/IEkoeaHOSxTzkjPbkSL8CWqSLQx9FK+dO7Puyp2T5FxoqxsrJSQgCVYCULHS5pz0SgtS8KAr08gVH0dp6A502arZPS8y7o8IyljTAQAdwdsGkkIN1ozcPLZgJv60SA8qD5yTKDzatD4J+HwDIJp3bV9ionEiWwIraxsWEpO0Q6XNFd+yRESViVYYN8St3tiBoMQSGkgMOyZXgz/kuTgzz2xY+0+6FSGV5uI9oubUR6K454B5XLasURy8vI3xk+VqefOl5G/mD42FduXtSu44l6X8eRKgaS1YoDCSqBR8WB5Olq5YEEKxgMtmB88rzatB/JqE8UQHVuP5JtqiMZdNcwlHbtFzxxrqF0tbahlO8NFK8t5IQzelDdWB7jx/KDfMy3qj65VU4gaZC5KFH3+Lb9wwR1TjIoNezB3ooxr2ahbKAMDeQudTG00uKnWRv9h2/60yziu4inWdnQUB8vfpyKfn9vzS+gq7D+AAlDQCI1XwNKAAAAAElFTkSuQmCC'
  29.   
  30.   // --------------------------------------------------------------------
  31.  
  32.   const units = (v, s) => `${v}${s}`
  33.   
  34.   const pluralise = (w, n) => w + (n !== 1 ? 's' : '')
  35.   
  36.   function* flatten (arr) {
  37.     for (let x of arr) {
  38.       if (Array.isArray(x)) {
  39.         yield* (flatten(x))
  40.       }
  41.       else {
  42.         yield x
  43.       }
  44.     }
  45.   }
  46.  
  47.   // --------------------------------------------------------------------
  48.   
  49.   $.fn.extend({
  50.     spinner (options) {
  51.       options = Object.assign({}, $.fn.spinner.defaults, options)
  52.  
  53.       const $spinner = $('<div class="pulsar-horizontal"></div>')
  54.         .css({
  55.           padding: units(options.size * 0.25, 'px'),
  56.           height: units(options.size, 'px')
  57.         })
  58.  
  59.       const total_duration = (options.steps + 1) * options.step_duration
  60.  
  61.       for (let i = 0; i < options.steps; i++) {
  62.         const delay = i * options.step_duration
  63.  
  64.         $('<div></div>')
  65.           .css({
  66.             width: units(options.size, 'px'),
  67.             height: units(options.size, 'px'),
  68.             backgroundColor: options.colour,
  69.             animationDuration: units(total_duration, 's'),
  70.             animationDelay: units(delay, 's')
  71.           })
  72.           .appendTo($spinner)
  73.       }
  74.  
  75.       if (options.replace) {
  76.         this.empty()
  77.       }
  78.  
  79.       return this.append($spinner)
  80.     },
  81.     
  82.     log (name, ...extras) {
  83.       const title = [ `%c${name || '$'}%c : %c${this.length}%c ${pluralise('item', this.length)}`, BOLD, NORMAL, BLUE, NORMAL ]
  84.       
  85.       if (this.length > 0 || extras.length > 0) {
  86.         console.group.apply(console, title)
  87.  
  88.         if (this.length > 0) {
  89.           console.info(this)
  90.         }
  91.         extras.forEach(extra => {
  92.           console.log(extra)
  93.         })
  94.  
  95.         console.groupEnd()
  96.       }
  97.       else {
  98.         console.info.apply(console, title)
  99.       }
  100.       
  101.       return this
  102.     }
  103.   })
  104.  
  105.   $.fn.spinner.defaults = {
  106.     replace: false,
  107.     steps: 3,
  108.     size: 16,
  109.     colour: 'white',
  110.     step_duration: 0.4
  111.   }
  112.  
  113.   // --------------------------------------------------------------------
  114.  
  115.   function loadComments ($span, $target, ...ids) {
  116.     const urls = ids.map(id => postUrl + id)
  117.  
  118.     /*
  119.     console.group(`%cloadComments%c(${ids.join(', ')})`, BOLD, NORMAL)
  120.     console.info($span[0].outerHTML)
  121.     console.log(`%c${urls.join('\n')}%c`, LINK, NORMAL)
  122.     console.groupEnd()
  123.     */
  124.  
  125.     $span.spinner({
  126.       colour: '#28f',
  127.       size: 24,
  128.       step_duration: 0.25,
  129.       replace: true
  130.     })
  131.     
  132.     const pageRequests = urls.map(url => {
  133.       return $.get(url)
  134.         .then(
  135.           data => $('.nestedlisting > .thing', data).next().andSelf().get(),
  136.           console.warn.bind(console)
  137.         )
  138.     })
  139.     
  140.     $.when(...pageRequests).then((...$children) => {
  141.       const $all = $([...flatten($children)])
  142.       
  143.       if ($all.length === 2) {
  144.         $all
  145.           .find('> .entry > .usertext.border')
  146.           .log('.border')
  147.           .removeClass('border')
  148.       }
  149.  
  150.       $all
  151.         .replaceAll($target)
  152.         .find('.usertext.border .usertext-body')
  153.           .css('animation', 'fadenewpost 4s ease-out 4s both')
  154.     })
  155.   }
  156.  
  157.   // --------------------------------------------------------------------
  158.  
  159.   function processDeepThreadSpans (deepThreadSpans) {
  160.     const $deepThreadSpans = $(deepThreadSpans)
  161.       .filter(':not([data-comment-ids])')
  162.     
  163.     // console.info(`processDeepThreadSpans: processing ${$deepThreadSpans.length}/${deepThreadSpans.length} deep thread spans`)
  164.     
  165.     $deepThreadSpans.each(function() {
  166.       const $span = $(this),
  167.             $a = $span.children('a'),
  168.             cid = $a[0].pathname.split('/').pop()
  169.       
  170.       const $target = $span.parents(`.thing[data-fullname=t1_${cid}]`)
  171.       
  172.       $span
  173.         .attr('data-comment-ids', cid)
  174.         .addClass('expand-inline')
  175.     
  176.       $a.one('click', event => {
  177.         loadComments($span, $target, cid)
  178.         return false
  179.       })
  180.     })
  181.   }
  182.  
  183.   // --------------------------------------------------------------------
  184.   
  185.   function processMoreCommentsSpans(moreCommentsSpans) {
  186.     const $moreCommentsSpans = $(moreCommentsSpans)
  187.       .filter(':not([data-comment-ids])')
  188.     
  189.     // console.info(`processMoreCommentsSpans: processing ${$moreCommentsSpans.length}/${moreCommentsSpans.length} more comment spans`)
  190.     
  191.     $moreCommentsSpans.each(function() {
  192.       const $span = $(this),
  193.             $target = $span.closest('.thing'),
  194.             $a = $span.children('a'),
  195.             cids = $a.attr('onclick').split(', ')[3].slice(1, -1).split(',')
  196.       
  197.       $span
  198.         .attr('data-comment-ids', cids.join(','))
  199.         .addClass('expand-inline')
  200.  
  201.       $a
  202.         .removeAttr('onclick')
  203.         .one('click', event => {
  204.           loadComments($span, $target, ...cids)
  205.           return false
  206.         })
  207.     })
  208.   }
  209.   
  210.   // --------------------------------------------------------------------
  211.   
  212.   const rootUrl = `https://${location.hostname}/`
  213.   const postUrl = $('.thing.link > .entry a.comments').prop('href')
  214.   
  215.   // console.info(`%cSite:%c %c${rootUrl}%c\n%cPost:%c %c${postUrl}%c`, BOLD, NORMAL, LINK, NORMAL, BOLD, NORMAL, LINK, NORMAL)
  216.   
  217.   // --------------------------------------------------------------------
  218.  
  219.   const observer = new MutationSummary({
  220.     callback(summaries) {
  221.       const deepThreadSpans = summaries.shift().added,
  222.             moreCommentsSpans = summaries.shift().added
  223.       
  224.       // console.log(`Added ${deepThreadSpans.length} deep thread spans and ${moreCommentsSpans.length} more comment spans`)
  225.       
  226.       processDeepThreadSpans(deepThreadSpans)
  227.       processMoreCommentsSpans(moreCommentsSpans)
  228.     },
  229.     rootNode: document.body,
  230.     queries: [
  231.       { element: 'span.deepthread' },
  232.       { element: 'span.morecomments' }
  233.     ]
  234.   })
  235.  
  236.   // To process spans in the HTML source
  237.   processDeepThreadSpans($('span.deepthread'))
  238.   processMoreCommentsSpans($('span.morecomments'))
  239.  
  240.   // --------------------------------------------------------------------
  241.   
  242.   $(document.body).append(`<style type="text/css">
  243.     .expand-inline {
  244.       display: block;
  245.       padding: 0;
  246.     }
  247.     .expand-inline:after {
  248.       display: none !important;
  249.     }
  250.     .expand-inline a {
  251.       display: block;
  252.       background: transparent url(${EXPAND_ICON}) no-repeat center left;
  253.       padding-left: 40px;
  254.       height: 40px;
  255.       line-height: 40px;
  256.       font-size: 1.4rem !important;
  257.       font-weight: normal !important;
  258.       vertical-align: middle;
  259.       text-align: left;
  260.     }
  261.     .expand-inline a:hover {
  262.       background-color: rgba(0, 105, 255, 0.05);
  263.       text-decoration: none;
  264.     }
  265.  
  266.     .pulsar-horizontal {
  267.       display: inline-block;
  268.     }
  269.     .pulsar-horizontal > div {
  270.       display: inline-block;
  271.       border-radius: 100%;
  272.       animation-name: pulsing;
  273.       animation-timing-function: ease-in-out;
  274.       animation-iteration-count: infinite;
  275.       animation-fill-mode: both;
  276.     }
  277.  
  278.     @keyframes pulsing {
  279.       0%, 100% {
  280.         transform: scale(0);
  281.         opacity: 0.5;
  282.       }
  283.       50% {
  284.         transform: scale(1);
  285.         opacity: 1;
  286.       }
  287.     }
  288.  
  289.     @keyframes fadenewpost {
  290.       0% {
  291.         background-color: #ffc;
  292.         padding-left: 5px;
  293.       }
  294.       100% {
  295.         background-color: transparent;
  296.         padding-left: 0;
  297.       }
  298.     }
  299.   </style>`)
  300.  
  301. })(jQuery)
  302.  
  303. jQuery.noConflict(true)