☰

Reddit - Load 'Continue this thread' inline

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

当前为 2018-07-13 提交的版本，查看 最新版本。

  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.9.5
  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/svg+xml;charset=utf-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2029%2025%22%3E%3Cg%20transform=%22translate(1%201)%22%20stroke-width=%221.1%22%20fill-rule=%22evenodd%22%20fill=%22none%22%3E%3Ccircle%20stroke=%22#000%22%20cx=%222.7%22%20r=%222.7%22%20cy=%2210.7%22%20fill=%22#fff%22/%3E%3Ccircle%20stroke=%22#000%22%20cx=%2224.7%22%20r=%222.7%22%20cy=%2210.7%22%20fill=%22#fff%22/%3E%3Cpath%20stroke-linejoin=%22round%22%20stroke=%22#000%22%20stroke-linecap=%22round%22%20d=%22M21.23%201.35L15.83.08l-2%207.28%22/%3E%3Ccircle%20stroke=%22#000%22%20cx=%2223.13%22%20r=%222.13%22%20cy=%222.13%22%20fill=%22#fff%22/%3E%3Cellipse%20cy=%2214.99%22%20rx=%2212.24%22%20ry=%227.99%22%20stroke=%22#000%22%20cx=%2213.24%22%20fill=%22#fff%22/%3E%3Cg%20transform=%22translate(8%2012)%22%3E%3Ccircle%20stroke=%22#FF4500%22%20cx=%221%22%20r=%221.43%22%20cy=%221.43%22%20fill=%22#FF4500%22/%3E%3Ccircle%20stroke=%22#FF4500%22%20cx=%2210%22%20r=%221.43%22%20cy=%221.43%22%20fill=%22#FF4500%22/%3E%3Cpath%20stroke=%22#000%22%20d=%22M1.5%206.23C2.58%207.3%204.3%207.5%205.73%207.5m4.24-1.27C8.9%207.3%207.17%207.5%205.77%207.5%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E
  9. // @match          *://*.reddit.com/r/*/comments/*
  10. // @grant          none
  11. // @run-at         document-end
  12. // @require        https://unpkg.com/jquery@3/dist/jquery.min.js
  13. // @require        https://greasyfork.org/scripts/7602-mutation-observer/code/mutation-observer.js
  14. // ==/UserScript==
  15.  
  16. /* jshint asi: true, es6: true, laxbreak: true */
  17. /* global jQuery, MutationSummary */
  18.  
  19. /*
  20. ==== 1.9.5 (2018.07.11) ====
  21. * Updated jQuery to v3 and source from unpkg.com
  22. * Add downloadURL to update from Gist
  23. ==== 1.9.4 (2018.02.11) ====
  24. * Added @icon field in metadata as SVG wasn't displaying on the installed userscript page
  25. ==== 1.9.3 (2017.12.03) ====
  26. * Changed base-64 encoded PNG icons to an SVG icon
  27. ==== 1.9.2 (2017.10.11) ====
  28. * Gets correct comment ID for links
  29. * Changed location in comment HTML to use as its root
  30. * Get children of first comment when it is already on the page
  31. ==== 1.9.1 (2017.10.11) ====
  32. * Fix broken $target selector
  33. ==== 1.9.0 ====
  34. * Catch failed loads, log them to the console and then restore original load link
  35. */
  36.  
  37. ; (function userScript($) {
  38.   'use strict'
  39.  
  40.   const NORMAL = 'font-weight: normal; text-decoration: none; color: black'
  41.   const ERROR = 'font-weight: bold; color: #f4f'
  42.   const LINK = [ 'color: #05f; text-decoration: underline', NORMAL ]
  43.   const BOLD = [ 'font-weight: bold', NORMAL ]
  44.   const BLUE = [ 'color: #05f', NORMAL ]
  45.   const RED = [ 'color: #e32636', NORMAL ]
  46.  
  47.   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'
  48.   
  49.   // --------------------------------------------------------------------
  50.  
  51.   const units = (v, s) => `${v}${s}`
  52.   
  53.   const pluralise = (w, n) => w + (n !== 1 ? 's' : '')
  54.   
  55.   const capitalise = s => typeof s === 'string' && s && s.split(/\s+/g).map(w => w[0].toUpperCase() + w.substr(1).toLowerCase()).join(' ')
  56.   
  57.   function* flatten (arr) {
  58.     for (let x of arr) {
  59.       if (Array.isArray(x)) {
  60.         yield* (flatten(x))
  61.       }
  62.       else {
  63.         yield x
  64.       }
  65.     }
  66.   }
  67.  
  68.   // --------------------------------------------------------------------
  69.   
  70.   $.fn.extend({
  71.     spinner (options) {
  72.       options = Object.assign({}, $.fn.spinner.defaults, options)
  73.  
  74.       const $spinner = $('<div class="pulsar-horizontal"></div>')
  75.         .css({
  76.           padding: units(options.size * 0.25, 'px'),
  77.           height: units(options.size, 'px')
  78.         })
  79.  
  80.       const total_duration = (options.steps + 1) * options.step_duration
  81.  
  82.       for (let i = 0; i < options.steps; i++) {
  83.         const delay = i * options.step_duration
  84.  
  85.         $('<div></div>')
  86.           .css({
  87.             width: units(options.size, 'px'),
  88.             height: units(options.size, 'px'),
  89.             backgroundColor: options.colour,
  90.             animationDuration: units(total_duration, 's'),
  91.             animationDelay: units(delay, 's')
  92.           })
  93.           .appendTo($spinner)
  94.       }
  95.  
  96.       if (options.replace) {
  97.         this.empty()
  98.       }
  99.  
  100.       return options.mode === 'prepend'
  101.         ? this.prepend($spinner) 
  102.         : this.append($spinner)
  103.     },
  104.     
  105.     log (name, ...extras) {
  106.       const title = [ `%c${name || '$'}%c : %c${this.length}%c ${pluralise('item', this.length)}`, ...BOLD, ...BLUE ]
  107.       
  108.       if (this.length > 0 || extras.length > 0) {
  109.         console.group.apply(console, title)
  110.  
  111.         if (this.length > 0) {
  112.           console.info(this)
  113.         }
  114.         extras.forEach(extra => {
  115.           console.log(extra)
  116.         })
  117.  
  118.         console.groupEnd()
  119.       }
  120.       else {
  121.         console.info.apply(console, title)
  122.       }
  123.       
  124.       return this
  125.     }
  126.   })
  127.  
  128.   $.fn.spinner.defaults = {
  129.     replace: true,
  130.     mode: 'append',
  131.     steps: 3,
  132.     size: 24,
  133.     colour: '#28f',
  134.     step_duration: 0.25
  135.   }
  136.  
  137.   // --------------------------------------------------------------------
  138.  
  139.   async function getCommentPage (id) {
  140.     const url = postUrl + id
  141.  
  142.     const data = await $.get(url)
  143.  
  144.     const $listing = $('.nestedlisting', data)
  145.  
  146.     console.groupCollapsed(`getCommentPage(%c${id}%c, %c${url}%c)`, ...RED, ...LINK)
  147.     // console.log(data)
  148.     console.log($listing.get(0).outerHTML)
  149.     console.groupEnd()
  150.  
  151.     return $listing
  152.   }
  153.  
  154.   // --------------------------------------------------------------------
  155.  
  156.   function addComments($target, $comments) {
  157.     $target
  158.       .empty()
  159.       .append($comments)
  160.       .find('.usertext.border .usertext-body')
  161.         .css('animation', 'fadenewpost 4s ease-out 4s both')
  162.   }
  163.  
  164.   // --------------------------------------------------------------------
  165.  
  166.   function loadComments ($span, $target, ids) {
  167.     let insertChildren = false
  168.  
  169.     if (!Array.isArray(ids)) {
  170.       ids = [ ids ]
  171.       insertChildren = true
  172.     }
  173.  
  174.     const urls = ids.map(id => postUrl + id)
  175.  
  176.     /*
  177.     console.group(`%cloadComments%c(${ids.length} ${ids.length > 1 ? 'ids' : 'id'}: ${ids.join(', ')})`, ...BOLD)
  178.     console.info($span[0].outerHTML)
  179.     console.log(`%c${urls.join('\n')}%c`, ...LINK)
  180.     console.groupEnd()
  181.     */
  182.     
  183.     const original = $span.parent().html()
  184.  
  185.     $span.spinner({
  186.       colour: '#28f',
  187.       size: 24,
  188.       step_duration: 0.25,
  189.       replace: true
  190.     })
  191.  
  192.     const pageRequests = urls.map(url => {
  193.       return $.get(url)
  194.         .then(
  195.           // data => $('.nestedlisting > .thing', data).next().andSelf().get(),
  196.           data => $('.nestedlisting', data).get(),
  197.           (xhr, textStatus, errorThrown) => {
  198.             console.warn(`%c${capitalise(textStatus)}: ${xhr.status} ${xhr.statusText}%c %c${url}%c`, ERROR, NORMAL, LINK, NORMAL)
  199.           }
  200.         )
  201.     })
  202.  
  203.     $.when(...pageRequests)
  204.       .then((...children) => {
  205.         let $children = $([...flatten(children)])
  206.         // $children.log('$children')
  207.  
  208.         if (insertChildren) {
  209.           $children = $children.find('> .thing > .child > .sitetable')
  210.  
  211.           $children
  212.             .find('> .entry > .usertext.border')
  213.             .removeClass('border')
  214.         }
  215.  
  216.         $target
  217.           .empty()
  218.           .append($children)
  219.           .find('.usertext.border .usertext-body')
  220.             .css('animation', 'fadenewpost 4s ease-out 4s both')
  221.       })
  222.       .fail((xhr, textStatus, errorThrown) => {
  223.         $span.parent().html(original)
  224.       })
  225.   }
  226.  
  227.   // --------------------------------------------------------------------
  228.  
  229.   function getCommentId (linkElem) {
  230.     const m = linkElem.pathname.match(/\/([a-z0-9]+)\/?$/)
  231.     if (!m) {
  232.       throw new Error(`No comment ID parsed from link URL "${linkElem.href}"`)
  233.     }
  234.     return m[1]
  235.   }
  236.  
  237.   // --------------------------------------------------------------------
  238.  
  239.   function processDeepThreadSpans (deepThreadSpans) {
  240.     const $deepThreadSpans = $(deepThreadSpans)
  241.       .filter(':not([data-comment-ids])')
  242.  
  243.     // console.info(`processDeepThreadSpans: processing ${$deepThreadSpans.length}/${deepThreadSpans.length} deep thread spans`)
  244.  
  245.     $deepThreadSpans.each(function() {
  246.       const $span = $(this),
  247.             $target = $span.closest('.child'),
  248.             $a = $span.children('a'),
  249.             cid = getCommentId($a[0])
  250.  
  251.       // $span.log('$span')
  252.       // $target.log('$target')
  253.  
  254.       $span
  255.         .attr('data-comment-ids', cid)
  256.         .addClass('expand-inline')
  257.  
  258.       async function load () {
  259.         $span.spinner()
  260.  
  261.         const $listing = await getCommentPage(cid)
  262.         const $children = $listing.find('> .thing > .child > .sitetable')
  263.  
  264.         addComments($target, $children)
  265.       }
  266.  
  267.       $a.one('click', event => {
  268.         load()
  269.  
  270.         return false
  271.       })
  272.     })
  273.   }
  274.  
  275.   // --------------------------------------------------------------------
  276.   
  277.   function processMoreCommentsSpans(moreCommentsSpans) {
  278.     const $moreCommentsSpans = $(moreCommentsSpans)
  279.       .filter(':not([data-comment-ids])')
  280.     
  281.     // console.info(`processMoreCommentsSpans: processing ${$moreCommentsSpans.length}/${moreCommentsSpans.length} more comment spans`)
  282.     
  283.     $moreCommentsSpans.each(function() {
  284.       const $span = $(this),
  285.             $target = $span.closest('.child'),
  286.             $a = $span.children('a'),
  287.             onclick = $a.attr('onclick'),
  288.             cids = onclick.split(', ')[3].slice(1, -1).split(',')
  289.       
  290.       $span
  291.         .attr('data-comment-ids', cids.join(','))
  292.         .addClass('expand-inline')
  293.  
  294.       async function load () {
  295.         $span.spinner()
  296.  
  297.         const $listings = $(await Promise.all(cids.map(getCommentPage)))
  298.  
  299.         addComments($target, $listings)
  300.       }
  301.  
  302.       $a
  303.         .removeAttr('onclick')
  304.         .attr('data-onclick', onclick)
  305.         .one('click', event => {
  306.           // loadComments($span, $target, ...cids)
  307.           load()
  308.  
  309.           return false
  310.         })
  311.     })
  312.   }
  313.  
  314.   function processMoreCommentsSpans2 (moreCommentsSpans) {
  315.     $(moreCommentsSpans).addClass('expand-inline')
  316.   }
  317.  
  318.   // --------------------------------------------------------------------
  319.   
  320.   const rootUrl = `https://${location.hostname}/`
  321.   const postUrl = $('.thing.link > .entry a.comments').prop('href')
  322.   
  323.   // console.info(`%cSite:%c %c${rootUrl}%c\n%cPost:%c %c${postUrl}%c`, ...BOLD, ...LINK, ...BOLD, ...LINK)
  324.  
  325.   // --------------------------------------------------------------------
  326.  
  327.   const observer = new MutationSummary({
  328.     callback(summaries) {
  329.       const deepThreadSpans = summaries.shift().added,
  330.             moreCommentsSpans = summaries.shift().added
  331.  
  332.       // console.log(`Added ${deepThreadSpans.length} deep thread spans and ${moreCommentsSpans.length} more comment spans`)
  333.  
  334.       processDeepThreadSpans(deepThreadSpans)
  335.       processMoreCommentsSpans2(moreCommentsSpans)
  336.     },
  337.     rootNode: document.body,
  338.     queries: [
  339.       { element: 'span.deepthread' },
  340.       { element: 'span.morecomments' }
  341.     ]
  342.   })
  343.  
  344.   // To process spans in the HTML source
  345.   processDeepThreadSpans($('span.deepthread'))
  346.   processMoreCommentsSpans2($('span.morecomments'))
  347.  
  348.   // --------------------------------------------------------------------
  349.   
  350.   $(document.body).append(`<style type="text/css">
  351.     .expand-inline {
  352.       display: block;
  353.       padding: 0;
  354.     }
  355.     .expand-inline:after {
  356.       display: none !important;
  357.     }
  358.     .expand-inline a {
  359.       display: block;
  360.       background: transparent url(${EXPAND_ICON}) no-repeat center left;
  361.       padding-left: 40px;
  362.       height: 40px;
  363.       line-height: 40px;
  364.       font-size: 1.4rem !important;
  365.       font-weight: normal !important;
  366.       vertical-align: middle;
  367.       text-align: left;
  368.     }
  369.     .expand-inline a:hover {
  370.       background-color: rgba(0, 105, 255, 0.05);
  371.       text-decoration: none;
  372.     }
  373.     .pulsar-horizontal {
  374.       display: inline-block;
  375.     }
  376.     .pulsar-horizontal > div {
  377.       display: inline-block;
  378.       border-radius: 100%;
  379.       animation-name: pulsing;
  380.       animation-timing-function: ease-in-out;
  381.       animation-iteration-count: infinite;
  382.       animation-fill-mode: both;
  383.     }
  384.     @keyframes pulsing {
  385.       0%, 100% {
  386.         transform: scale(0);
  387.         opacity: 0.5;
  388.       }
  389.       50% {
  390.         transform: scale(1);
  391.         opacity: 1;
  392.       }
  393.     }
  394.     @keyframes fadenewpost {
  395.       0% {
  396.         background-color: #ffc;
  397.         padding-left: 5px;
  398.       }
  399.       100% {
  400.         background-color: transparent;
  401.         padding-left: 0;
  402.       }
  403.     }
  404.   </style>`)
  405.  
  406. })(jQuery)
  407.  
  408. jQuery.noConflict(true)