Reddit - Top Comments Preview [ Lite-mod ]

// ==UserScript==
// @name           Reddit - Top Comments Preview
// @namespace      https://greasyfork.org/users/5174-jesuis-parapluie
// @author         Erik Wannebo, gavin19, jesuis-unparapluie
// @description    Preview to the top comments on Reddit
// @include        http://*.reddit.com/*
// @exclude        http://*.reddit.com/*/comments/*
// @include        https://*.reddit.com/*
// @exclude        https://*.reddit.com/*/comments/*
// @grant          none
// @version        1.62
// ==/UserScript==
(function () {
    'use strict';
    var topCP = {
        opts: {
            /* Number of comments to display. Default is 3 */
            topComments: 3,
            /* click or hover. Do you want to hover the link to trigger it, or click? */
            eventType: 'click',
            /* set keyboard shortcut 't' to show/hide active top comments (only with RES) */
            setShortCut: true,
            /* auto expand on siteload (for RES) */
            setAutoExpand: false
        },
        addTopLinks: function () {
            var i, len, link, articleID, tmp,
                a = document.querySelectorAll('.linklisting .comments:not(.empty)');
            if (a.length) {
                for (i = 0, len = a.length; i < len; i += 1) {
                    if (!a[i].parentNode.querySelector('.toplink') && /[0-9]/.test(a[i])) {
                        articleID = a[i].getAttribute('href');
                        articleID = articleID.substring(articleID.indexOf('/comments/') + 10, articleID.indexOf('/comments/') + 16);
                        link = document.createElement('a');
                        link.className = 'toplink';
                        tmp = "java";
                        link.href = tmp + 'script:;';
                        link.setAttribute('id', 'toplink' + articleID);
                        link.setAttribute('style', 'color:grey;text-decoration:none;');
                        link.textContent = ' top';
                        a[i].parentNode.parentNode.querySelector('.first').insertBefore(link, null);
                        topCP.addListener(link, articleID);
                    }
                }
            }
        },
        addListener: function (link, id) {
            link.addEventListener(topCP.opts.eventType, function () {
                topCP.retrieveTopComments(this, id);
            });
        },
        retrieveTopComments: function (ele, articleID) {
            var pre, url, xhr, thisPre;
            topCP.kill_preview = function () { this.parentNode.removeChild(this); }
            ele = ele.parentNode.parentNode;
            if (!document.querySelector('#preview' + articleID)) {
                pre = document.createElement('div');
                pre.setAttribute('id', 'preview' + articleID);
                pre.classList.add('loading');
                pre.addEventListener('click', topCP.kill_preview);
                ele.querySelector('.first').insertBefore(pre, null);

                url =  window.location.href.split("/")[0]+'//www.reddit.com/comments/' + articleID + '/.json?limit=' + (topCP.opts.topComments + 5) + '&sort=top';
                xhr = new XMLHttpRequest();
                xhr.open('GET', url, true);
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        topCP.onloadJSON(xhr);
                    }
                };
                xhr.send(null);
            } else {
                thisPre = document.querySelector('#preview' + articleID);
                thisPre.parentNode.parentNode.style.marginBottom = '';
                thisPre.parentNode.removeChild(thisPre);
            }
        },
        onloadJSON: function (response) {
            var i, len, content, ups, downs, contentDiv, article, author, permalink,
                newHTML = '',
                comments = JSON.parse(response.responseText),
                commentsLength = comments[1].data.children.length,
                articleID = comments[0].data.children[0].data.id,
                threadLink = comments[0].data.children[0].data.permalink;
            len = topCP.opts.topComments < commentsLength ? topCP.opts.topComments : commentsLength;
            for (i = 0; i < len; i += 1) {
                content = comments[1].data.children[i].data.body_html;
                if (content) {
                    contentDiv = document.createElement('div');
                    contentDiv.innerHTML = content;
                    content = contentDiv.firstChild.textContent;
                    author = comments[1].data.children[i].data.author;
                    ups = comments[1].data.children[i].data.ups;
                    permalink = threadLink + comments[1].data.children[i].data.id;
                    newHTML += (i > 0 ? '<hr noshade color=#dddddd>' : '');
                    newHTML += '<a class="authorLink" target="_blank" href="/u/' + author;
                    newHTML += '">' + author + '</a>&nbsp;&nbsp;';
                    newHTML += '(+' + ups + ')';
                    newHTML += '<a href="' + permalink + '" target="_blank" class="perma">permalink</a>';
                    newHTML += '<br />' + content;
                }
            }
            article = document.querySelector('#preview' + articleID);
            article.classList.remove('loading');
            article.innerHTML = newHTML;
            article.parentNode.parentNode.style.marginBottom = (article.offsetHeight + 5) + 'px';
            article.removeEventListener('click', topCP.kill_preview);
        },
        addStyle: function () {
            var style,
                sheet = '';
            sheet += "div[id^=preview]{color:#f4f4f4;box-sizing:border-box;-moz-box-sizing:border-box;background:rgba(247,247,248,.9);border-radius:5px;white-space:normal;padding:5px;position:absolute;margin-top: 2px;}";
            sheet += ".loading:before{content:\"Loading...\";}div[id^=preview] .md{background:rgba(254,255,237,.9);box-sizing:border-box;-moz-box-sizing:border-box;margin:3px;padding:2px 8px;}";
            sheet += "div[id^=preview] .md a{font-weight:bold;text-decoration:underline;color:#4D9AE7!important;}";
            sheet += "div[id^=preview] .md{background-color:#ffffff!important;}";
            sheet += "div[id^=preview] .md p{font-size: 115%;color:#000000;}";
            sheet += "div[id^=preview] .authorLink{color:#3366aa!important;}";
            sheet += ".listing-page .linklisting .buttons li { vertical-align: top; }";
            sheet += ".perma {float:right;color:#888!important;}";
            style = document.createElement('style');
            style.type = 'text/css';
            style.textContent = sheet;
            document.querySelector('head').appendChild(style);
        },
        init: function () {
            document.body.addEventListener('DOMNodeInserted', function (e) {
                if ((e.target.tagName === 'DIV') && (e.target.getAttribute('id') && e.target.getAttribute('id').indexOf('siteTable') !== -1)) {
                    topCP.addTopLinks();
                }
            }, true);
            document.body.addEventListener('DOMNodeInserted', function (e) {
                if ((e.target.tagName === 'DIV') && (e.target.getAttribute('id') && e.target.getAttribute('id').indexOf('siteTable') !== -1)) {
                    topCP.addTopLinks();
                }
            }, true);
            if (topCP.opts.setShortCut)
            {
                window.addEventListener("keyup", function(e) {
                 //t: keycode 84
                 if(e.keyCode === 84 && document.querySelector('.RES-keyNav-activeElement')) {
                    document.querySelector('.RES-keyNav-activeElement .toplink').click();
                  }
                });
            }
            if (topCP.opts.setAutoExpand)
            {
                document.querySelector('#viewImagesButton').click();
            }
            topCP.addStyle();
            topCP.addTopLinks();
        }
    };
    if (document.body) {
        setTimeout(function () {
            topCP.init();
        }, 300);
    } else {
        window.addEventListener('load', function () {
            topCP.init();
        }, false);
    }
}());