☰

Reddit - Load 'Continue this thread' inline

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

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

  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.2.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          GM_addStyle
  11. // @grant          GM_getResourceURL
  12. // @run-at         document-end
  13. // @resource       expand 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
  14. // @require        https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.js
  15. // @require        https://greasyfork.org/scripts/7602-mutation-observer/code/mutation-observer.js
  16. // ==/UserScript==
  17.  
  18. /* jshint asi: true, esnext: true */
  19. /* global jQuery, MutationSummary, GM_addStyle, GM_getResourceURL */
  20.  
  21. ; (function($) {
  22.   'use strict';
  23.  
  24.   // --------------------------------------------------------------------
  25.  
  26.   const units = (v, s) => `${v}${s}`
  27.  
  28.   $.fn.spinner = function(options) {
  29.     options = Object.assign({}, $.fn.spinner.defaults, options)
  30.  
  31.     const $spinner = $('<div class="pulsar-horizontal"></div>')
  32.       .css({
  33.         padding: units(options.size * 0.25, 'px'),
  34.         height: units(options.size, 'px')
  35.       })
  36.  
  37.     const total_duration = (options.steps + 1) * options.step_duration
  38.  
  39.     for (let i = 0; i < options.steps; i++) {
  40.       const delay = i * options.step_duration
  41.  
  42.       $('<div></div>')
  43.         .css({
  44.           width: units(options.size, 'px'),
  45.           height: units(options.size, 'px'),
  46.           backgroundColor: options.colour,
  47.           animationDuration: units(total_duration, 's'),
  48.           animationDelay: units(delay, 's')
  49.         })
  50.         .appendTo($spinner)
  51.     }
  52.  
  53.     if (options.replace) {
  54.       this.empty()
  55.     }
  56.  
  57.     return this.append($spinner)
  58.   }
  59.  
  60.  
  61.   $.fn.spinner.defaults = {
  62.     replace: false,
  63.     steps: 3,
  64.     size: 16,
  65.     colour: 'white',
  66.     step_duration: 0.4
  67.   }
  68.  
  69.  
  70.   // --------------------------------------------------------------------
  71.  
  72.   function processSpans($spans) {
  73.     $spans.children('a')
  74.       .one('click', continueThisThreadClicked)
  75.     $spans.parent()
  76.       .css('padding', '0px')
  77.     $spans.prev()
  78.       .remove()
  79.   }
  80.  
  81.  
  82.   function continueThisThreadClicked(event) {
  83.     /* jshint -W040 */
  84.     this.hostname = location.hostname
  85.  
  86.     let $a = $(this),
  87.         href = this.href,
  88.         $target = $a.parent()
  89.  
  90.     $target.spinner({ colour: '#28f', size: 24, step_duration: 0.25, replace: true })
  91.  
  92.     $.get(href, function(data) {
  93.       const $child = $('.nestedlisting > .comment > .child', $(data))
  94.         .css('margin-left', '0px')
  95.  
  96.       $target
  97.         .parentsUntil('.child')
  98.         .replaceWith($child)
  99.     })
  100.  
  101.     return false
  102.   }
  103.  
  104.  
  105.   // --------------------------------------------------------------------
  106.  
  107.   const observer = new MutationSummary({
  108.     callback(summaries) {
  109.       let $spans = $(summaries[0].added)
  110.       // console.log(`Added ${$spans.length} spans`)
  111.       processSpans($spans)
  112.     },
  113.     rootNode: document.body,
  114.     queries: [
  115.       { element: 'span.deepthread' }
  116.     ]
  117.   })
  118.  
  119.   processSpans($('span.deepthread'))  // To process spans in the HTML source
  120.  
  121.  
  122.   // --------------------------------------------------------------------
  123.  
  124.   GM_addStyle(`
  125.     .deepthread {
  126.       display: block;
  127.       padding: 0;
  128.     }
  129.     .deepthread:after {
  130.       visibility: hidden;
  131.     }
  132.     .deepthread a {
  133.       display: inline-block;
  134.       background: transparent url(${GM_getResourceURL('expand')}) no-repeat center left;
  135.       padding-left: 36px;
  136.       height: 40px;
  137.       line-height: 40px;
  138.       font-size: 1.4rem;
  139.       vertical-align: middle;
  140.     }
  141.  
  142.     .pulsar-horizontal {
  143.       display: inline-block;
  144.     }
  145.     .pulsar-horizontal > div {
  146.       display: inline-block;
  147.       border-radius: 100%;
  148.       animation-name: pulsing;
  149.       animation-timing-function: ease-in-out;
  150.       animation-iteration-count: infinite;
  151.       animation-fill-mode: both;
  152.     }
  153.     @keyframes pulsing {
  154.       0%, 100% {
  155.         transform: scale(0);
  156.         opacity: 0.5;
  157.       }
  158.       50% {
  159.         transform: scale(1);
  160.         opacity: 1;
  161.       }
  162.     }
  163.   `)
  164.  
  165. })(jQuery)
  166.  
  167. jQuery.noConflict()