Reddit: Highlight New Comments

Emulate the Reddit Gold feature of highlighting new comments since your last visit.

您需要先安装一个扩展,例如 篡改猴Greasemonkey暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴Userscripts ,之后才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。

您需要先安装用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name            Reddit: Highlight New Comments
// @description     Emulate the Reddit Gold feature of highlighting new comments since your last visit.
// @author          Chris H (Zren / Shade)
// @icon            https://reddit.com/favicon.ico
// @namespace       https://github.com/Zren
// @version         2
// @include         /https?:\/\/((www|pay|[a-z]{2})\.)?reddit\.com\/r\/[a-zA-Z0-9]+\/comments\/.*/
// @grant           GM_addStyle
// ==/UserScript==

// Based on:
//		https://greasyfork.org/scripts/1868-reddit-highlight-newest-comments/code/Reddit%20highlight%20newest%20comments.user.js


(function(uw) {
    //--- Settings
    var threadTTL = 3 * 24 * 60 * 60 * 1000; // 3 Days
    var applyStyle = true; // Set to true to overload Reddit's default styling of new comments with the style below.
    
    // Remove .res-commentBoxes if you're not using RES.
    var style = " \
.res-commentBoxes .new-comment .usertext-body { \
background-color: transparent; \
border: 0; \
margin: 0; \
} \
\
.res-commentBoxes .comment.new-comment, \
.res-commentBoxes .comment .comment .comment.new-comment, \
.res-commentBoxes .comment .comment .comment .comment .comment.new-comment, \
.res-commentBoxes .comment .comment .comment .comment .comment .comment .comment.new-comment, \
.res-commentBoxes .comment .comment .comment .comment .comment .comment .comment .comment .comment.new-comment \
{ background-color: #f2f8ff !important; border: solid 1px #d6e3f3 !important; } \
\
.res-commentBoxes .comment .comment.new-comment, \
.res-commentBoxes .comment .comment .comment .comment.new-comment, \
.res-commentBoxes .comment .comment .comment .comment .comment .comment.new-comment, \
.res-commentBoxes .comment .comment .comment .comment .comment .comment .comment .comment.new-comment, \
.res-commentBoxes .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment.new-comment \
{ background-color: #e5efff !important; border: solid 1px #cddaf3 !important; } \
";
    
    //--- Variables
    var nowAtLoad = Date.now();
    var lastVisitedAtLoad = null;
    
    //--- Functions
    var getThreadId = function() {
        var element = document.querySelector('[rel="shorturl"]');
        if (!element)
            return null;
        return "redd_id_" + element.href.substr(-6);
    };
    
    var setThreadLastVisited = function(threadId, t) {
        if (typeof t === 'object' && t.getTime) { // Date
            t = t.getTime();
        }
        localStorage.setItem(threadId, t);
        console.log('set localStorage["' + threadId + '"] = ', t);
    };
    
    var getThreadLastVisited = function(threadId) {
        var t = localStorage.getItem(threadId);
        t = parseInt(t, 10);
        //console.log('get localStorage["' + threadId + '"] = ', t);
        return t;
    };
    
    var deleteThreadLastVisited = function(threadId) {
        localStorage.removeItem(threadId);
        console.log('del localStorage["' + threadId + '"]');
    };
    
    var highlightNewCommentsSince = function(t) {
        $('.comment').each(function(i, comment) {
            var $comment = $(comment);
            if ($comment.hasClass('deleted'))
                return;
            
            var $commentTime = $comment.children('.entry').children('.tagline').children('time');
            var commentTime = $commentTime.attr('datetime');
            commentTime = new Date(commentTime);
            
            if (commentTime > t) {
                $comment.addClass('new-comment');
            } else {
                $comment.removeClass('new-comment');
            }
        });
    };
    
    
    var updateLastVisited = function() {
        var threadId = getThreadId();
        var threadLastVisited = getThreadLastVisited(threadId);
        if (threadLastVisited) {
            highlightNewCommentsSince(threadLastVisited);
        } else {
        	threadLastVisited = nowAtLoad;
        }
        setThreadLastVisited(threadId, nowAtLoad);
        lastVisitedAtLoad = threadLastVisited;
    };
    
    var purgeExpiredData = function() {
        var keys = Object.keys(localStorage);
        var threadIdRegex = /redd_id_([a-zA-Z0-9]{6})/;
        // Filter out non threadLastVisited keys.
        keys = keys.filter(function(key) {
            return threadIdRegex.test(key);
        });
        // Filter out non expired keys.
        keys = keys.filter(function(threadId) {
            var threadLastVisited = getThreadLastVisited(threadId);
            return nowAtLoad - threadTTL >= threadLastVisited; // Return true if it has expired.
        });
        keys.forEach(function(threadId) {
            deleteThreadLastVisited(threadId);
        });
    };
    
    var update = function() {
        if (lastVisitedAtLoad) {
            highlightNewCommentsSince(lastVisitedAtLoad);
        } else {
        	updateLastVisited();
        }
        purgeExpiredData();
    };
    
    //--- Main
    if (!getThreadId())
        return;
    
    // Wrap the function called when requesting more comments.
    var reddit_morechildren = uw.morechildren.__origional__ || uw.morechildren;
    uw.morechildren = function() {
        reddit_morechildren.apply(this, arguments);
        setTimeout(update, 1000);
    };
    uw.morechildren.__origional__ = reddit_morechildren;

    // Overwrite Reddit's default styling.
    if (applyStyle)
        GM_addStyle(style);
    
    update();
    
})(typeof unsafeWindow !== 'undefined' ? unsafeWindow : window);