☰

Greasy Fork is available in English.

Old Reddit Highlight Unread Comments

On topic pages, show "X unread comments (Y total)"; on comment pages, highlight unread comments. Local storage only -- does not work across multiple computers.

// ==UserScript==
// @name           Old Reddit Highlight Unread Comments
// @description    On topic pages, show "X unread comments (Y total)"; on comment pages, highlight unread comments. Local storage only -- does not work across multiple computers.
// @author         Xiao
// @namespace      https://greasyfork.org/users/5802
// @match          https://old.reddit.com/*
// @grant          GM_setValue
// @grant          GM_getValue
// @grant          GM_listValues
// @grant          GM_deleteValue
// @version        1.0
// ==/UserScript==

/*
todo
- navegar pelo new pra não ter que usar o teclado
- selecionar os minutos quando eu der espaço passando pelo ':'
Features:
 * Replaces "10 comments" with "5 unread comments (10 total)"
 * Unread comments are highlighted for ease of skimming
 * You can navigate through unread comments with the following hotkeys:
   Alt+Q / Alt+W -or- Ctrl+Up arrow / Ctrl+Down arrow
Mix code from:
https://greasyfork.org/scripts/8937-reddit-unread-comment-helper-fork/
https://greasyfork.org/scripts/8029-reddit-highlight-new-comments/
And a little piece of:
https://addons.mozilla.org/firefox/addon/cozy-reddit/

*/
(function(){

    var DELETE_OLDER_THAN = 1000*60*60*24*30; // Items older than 30 days
    /* Shove an item into local storage */
    function getData(id) {
        var data = GM_getValue(id);
        if (data === undefined || data.substr(0, 1) != "{")
            return null;
        return JSON.parse(data);
    }
    /* Get an item out of local storage */
    function setData(id, data) {
		console.log('unread:');
		console.log(data);
        GM_setValue(id, JSON.stringify(data));
    }
    /* Delete old items out of local storage */
    function deleteOldItems() {
        var data = GM_getValue('_last_clean_time');
        if (data !== null && Date.now() - data < 1000*60*60*24) { // Cleanup every 24 hours
            return;
        }
        var row;
        for (var key in GM_listValues()) {
            data = GM_getValue(key);
            if (data === undefined || data.substr(0, 1) != "{") {
                continue;
            }
            row = JSON.parse(data);
            if (Date.now() - row.t < DELETE_OLDER_THAN) {
                continue;
            }
            GM_deleteValue(key);
        }
        GM_setValue('_last_clean_time', Date.now());
    }
	/* Cozy Reddit */
	 function calculateCommentTop (comment) {
        var curTopPos = 0;
        if (comment.offsetParent) {
            do {
                curTopPos += comment.offsetTop;
            } while (comment = comment.offsetParent);

            return [curTopPos - 10];
        }
    }
    /* Get sorted array of unread comments offsets. */
    function getCommentsOffsetTop() {
        var comments = document.getElementsByClassName('unreadHighlighted');
        var arr = new Array(comments.length);
        for (var i = 0; i < comments.length; i++) {
            arr[i] = calculateCommentTop(comments[i]);
        }
        arr.sort(function(a, b) {
            return a - b;
        });
        return arr;
    }
    /* Jump to the next new comment. */
    function jumpToNextComment() {
        var unread = getCommentsOffsetTop();
        var scrollUnread;
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        for (var i = 0; i < unread.length; i++) {
            scrollUnread = unread[i];
            if (scrollUnread > scrollTop) {
                window.scrollTo(0, scrollUnread);
                break;
            }
        }
    }
    /* Jump to the previous new comment. */
    function jumpToPrevComment() {
        var unread = getCommentsOffsetTop().reverse();
        var scrollUnread;
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        for (var i = 0; i < unread.length; i++) {
            scrollUnread = unread[i];
            if (scrollUnread < scrollTop) {
                window.scrollTo(0, scrollUnread);
                break;
            }
        }
    }

    /*
    Handle a list page, adding "n unread comments" links etc.
    */
    function handleListPage() {
        var snap = document.evaluate("//a" +
                "[contains(concat(' ', normalize-space(@class), ' '), ' comments ')]" +
                "[contains(@href, '/comments')]",
            document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);

        var b36tid, row, match, comments, seen, newcomments, newlink;
        for(var elm = null, i = 0; (elm = snap.snapshotItem(i)); i++) {
            match = elm.firstChild.nodeValue.match(/(\d+) (comment|comentário)/);
            // No comments; bail early.
            if (!match)
                continue;

            comments = match[1];

            // Alphanumeric base-36 id, like "1lp5".
            b36tid = elm.getAttribute("href").match(/\/comments\/([^\/]+)/)[1];
            row = getData(b36tid);

            seen = row ? row.c : 0;

            newcomments = comments - seen;
            // Can be negative if comments are deleted.
            if (newcomments < 0) newcomments = 0;

            newlink = elm.cloneNode(false);

            var cstring = "unread comment" + (newcomments != 1 ? "s" : "");

            if (newcomments > 0) {
				nc = document.createElement('span');
				nc.style.color = "#333";
				nc.textContent = newcomments + " " + cstring;
				elm.textContent = comments > newcomments ? ' (' + comments + ' total)' : '';
				elm.insertBefore(nc, elm.childNodes[0]);
			}
        }
    }

    /*
    Handle a comments page: highlight new comments, save the ID of the highest
    comment, etc.
    */
    function handleCommentsPage() {
        var url = document.location.href.split("#");
        var frag = url.length > 1 ? url[1] : false;
        var b36tid = url[0].match(/\/comments\/([^\/]+)/)[1];

        var row = getData(b36tid);

        var partida, max_cid = 0, newmax = 0;
        if (row) {
            newmax = max_cid = row.m;
			partida = row.t;
        } else {
			partida = Date.parse(document.getElementById('siteTable').getElementsByClassName('tagline')[0].getElementsByTagName('time')[document.getElementById('siteTable').getElementsByClassName('tagline')[0].getElementsByTagName('time').length - 1].getAttribute('datetime'));
		}

        var comments, i, split, b36cid, cid;
        comments = document.getElementsByClassName('comment');
        for(i=0; i<comments.length; i++) {
            split = comments[i].className.split("_");
            if(split.length == 2)
            {
                b36cid = split[1].split(' ')[0].substr(1);
                cid = parseInt(b36cid, 36);
                if (cid > max_cid) {
					comments[i].getElementsByClassName("entry")[0].parentElement.classList.add('unreadHighlighted');
					comments[i].getElementsByClassName("entry")[0].parentElement.setAttribute('style', HNC.generate_comment_style(Date.parse(comments[i].getElementsByClassName('tagline')[0].getElementsByTagName('time')[comments[i].getElementsByClassName('tagline')[0].getElementsByTagName('time').length - 1].getAttribute('datetime')), partida));
                    if (cid > newmax) {
                        newmax = cid;
                    }
                }
            }
        }

		if (getData(document.location.href.split("#")[0].match(/\/comments\/([^\/]+)/)[1]))
			ui.create_comment_highlighter(getData(document.location.href.split("#")[0].match(/\/comments\/([^\/]+)/)[1]).t, 0);
		else
			ui.create_comment_highlighter(Date.parse(document.getElementById('siteTable').getElementsByClassName('tagline')[0].getElementsByTagName('time')[document.getElementById('siteTable').getElementsByClassName('tagline')[0].getElementsByTagName('time').length - 1].getAttribute('datetime')), 1);

		if (row)
			setTimeout(jumpToNextComment, 250);

        comments = document.getElementsByClassName('comments')[0].innerHTML.match(/\b\d+\b/);
        if (comments && comments[0] > 0) {
            setData(b36tid, {"m": newmax, "c": comments, "t": Date.now()});
        }
    }

	let HNC = {
		highlight: function (since) {
			let comments = document.getElementsByClassName('comment'),
				username
			;

			if (document.body.classList.contains('loggedin')) {
				username = document.getElementsByClassName('user')[0].firstElementChild.textContent;
			}

			for (let comment of comments) {
				/* skip removed or deleted comments */
				if (comment.classList.contains('deleted') || comment.classList.contains('spam')) {
					continue;
				}

				/* skip our own comments */
				let author = comment.getElementsByClassName('author')[0].textContent;
				if (username && username == author) {
					continue;
				}

				/* select original or edited comment time */
				let times = comment.getElementsByClassName('tagline')[0].getElementsByTagName('time'),
					time  = Date.parse(times[times.length - 1].getAttribute('datetime'))
				;

				/* add styles */
				if (time > since) {
					comment.getElementsByClassName("entry")[0].parentElement.classList.add('unreadHighlighted');
					comment.getElementsByClassName("entry")[0].parentElement.setAttribute('style', this.generate_comment_style(time, since));
				}
			}
		},

		reset_highlighting: function () {
			let comments = document.getElementsByClassName('unreadHighlighted');

			for (let i = comments.length; i > 0; i--) {
				let comment = comments[i - 1];
				comment.classList.remove('unreadHighlighted');
				comment.removeAttribute('style');
			}
		},

		generate_comment_style: function (comment_time, since) {
			let style = 'background-color: %color !important;\npadding: 0 5px;';

			style = style.replace(/\s+/g, ' ');
			style = style.replace(/%color/g, this.get_color(Date.now() - comment_time, Date.now() - since));

			return style;
		},

		get_color: function (comment_age, highlighting_since) {
			let time_diff = 1 - comment_age / highlighting_since,
				color_newer = tinycolor('hsl(214, 16, 9').toHsl(), // hsl(210, 16.7%, 9.4%)
				color_older = tinycolor('hsl(214, 16, 9').toHsl()
			;

			let color_final = tinycolor({
				h: color_older.h + (color_newer.h - color_older.h) * time_diff,
				s: color_older.s + (color_newer.s - color_older.s) * time_diff,
				l: color_older.l + (color_newer.l - color_older.l) * time_diff,
			});

			return color_final.toHslString();
		},
	};

	data = {
		comment_highlighter: function () {/*
			<div class="title" style="line-height: 20px;">Highlight comments since:
				<select id="comment-visits">
					<option value="">no highlighting</option>
					<option value="custom">custom</option>
				</select>
				<input id="hnc_custom_visit" type="text" value="00:00" pattern="\d+?:\d+?" style="text-align: center; display: none;" />
			</div>
		*/},

		get: function (name) {
			return this.function_to_string(this[name]);
		},

		/* original authored by lavoiesl, at https://gist.github.com/lavoiesl/5880516*/
		function_to_string: function (func, strip_leading_whitespace) {
			if (strip_leading_whitespace === undefined) {
				strip_leading_whitespace = 1;
			}

			let matches = func.toString().match(/function[\s\w]*?\(\)\s*?\{[\S\s]*?\/\*\!?\s*?\n([\s\S]+?)\s*?\*\/\s*\}/);

			if (!matches) {
				return false;
			}

			if (strip_leading_whitespace) {
				matches[1] = matches[1].replace(/^(\t| {4})/gm, '');
			}

			return matches[1];
		}
	};

	ui = {
		create_comment_highlighter: function (visit, first) {
			/* create element */
			let highlighter = document.createElement('div');

			highlighter.innerHTML = data.get('comment_highlighter');
			highlighter.classList.add('rounded', 'gold-accent', 'comment-visits-box');

			let commentarea      = document.getElementsByClassName('commentarea')[0],
				sitetable        = commentarea.getElementsByClassName('sitetable')[0],
				comment_margin   = window.getComputedStyle(sitetable.firstChild).getPropertyValue('margin-left'),
				gold_highlighter = document.getElementsByClassName('comment-visits-box')[0]
			;

			/* remove default comment highlighter */
			if (gold_highlighter) {
				gold_highlighter.parentNode.removeChild(gold_highlighter);
			}

			/* properly place */
			highlighter.style.setProperty('margin-left', comment_margin);
			commentarea.insertBefore(highlighter, sitetable);

			/* generate visits */
			let select = document.getElementById('comment-visits');
			select.style.textAlignLast = 'center';

			let option = document.createElement('option');
			option.textContent = (Math.floor(Math.floor((Date.now() - visit) / 1000) / 3600) < 10 ? '0' : '') + Math.floor(Math.floor((Date.now() - visit) / 1000) / 3600) + ':' + (Math.floor((Math.floor((Date.now() - visit) / 1000) % 3600) / 60) < 10 ? '0' : '') + Math.floor((Math.floor((Date.now() - visit) / 1000) % 3600) / 60);
			option.value = visit;
			select.appendChild(option);
			select.children[2].setAttribute('selected', '');

			if (!first) {
				let visit0 = Date.parse(document.getElementById('siteTable').getElementsByClassName('tagline')[0].getElementsByTagName('time')[document.getElementById('siteTable').getElementsByClassName('tagline')[0].getElementsByTagName('time').length - 1].getAttribute('datetime'));
				let option2 = document.createElement('option');
				option2.textContent = (Math.floor(Math.floor((Date.now() - visit0) / 1000) / 3600) < 10 ? '0' : '') + Math.floor(Math.floor((Date.now() - visit0) / 1000) / 3600) + ':' + (Math.floor((Math.floor((Date.now() - visit0) / 1000) % 3600) / 60) < 10 ? '0' : '') + Math.floor((Math.floor((Date.now() - visit0) / 1000) % 3600) / 60);
				option2.value = visit0;
				document.getElementById('comment-visits').appendChild(option2);
			}


			// add listeners
			select.addEventListener('change', this.update_highlighting);

			let custom = document.getElementById('hnc_custom_visit');
			custom.style.setProperty('width', (select.getBoundingClientRect().width) + 'px');
			custom.addEventListener('keydown', this.custom_visit_key_monitor);
			custom.addEventListener('blur', this.set_custom_visit);

			this.custom_pos = 0;
		},

		update_highlighting: function (event) {
			/* no highlighting */
			if (event.target.value == '') {
				HNC.reset_highlighting();
			}

			/* custom */
			else if (event.target.value == 'custom') {
				document.getElementById('comment-visits').style.setProperty('display', 'none');
				let custom = document.getElementById('hnc_custom_visit');
				custom.style.removeProperty('display');
				custom.focus();
				custom.setSelectionRange(0, 2);
			}

			/* previous visit */
			else {
				HNC.reset_highlighting();
				HNC.highlight(parseInt(event.target.value, 10));
				jumpToNextComment();
			}
			event.target.blur();
		},

		custom_visit_key_monitor: function (event) {
			if (event.altKey || event.ctrlKey || (event.shiftKey && event.key != 'Tab')) {
				return;
			}
			if (event.key == 'Tab') {

				let match = event.target.value.match(/^(\d+?:)\d+?$/);

				if (match) {
					if (event.shiftKey) {
						ui.custom_pos--;
					}
					else {
						ui.custom_pos++;
					}

					if (ui.custom_pos % 2 == 0) {
						event.target.setSelectionRange(0, match[1].length - 1);
					}
					else {
						event.target.setSelectionRange(match[1].length, match[0].length);
					}

					event.preventDefault();
					event.stopPropagation();
				}
			}
			else if (event.key == 'Enter') {
				event.target.blur();
				event.preventDefault();
				event.stopPropagation();
			}
		},

		set_custom_visit: function (event) {
			let select = document.getElementById('comment-visits'),
				match  = event.target.value.match(/^(\d+?):(\d+?)$/)
			;

			if (match) {
				let option  = document.createElement('option'),
					hours   = parseInt(match[1], 10),
					minutes = parseInt(match[2], 10),
					visit   = Date.now() - (hours * 60 + minutes) * 60 * 1000
				;

				option.value = visit;
				option.textContent = (hours < 10 ? '0' : '') + hours + ':' + (minutes < 10 ? '0' : '') + minutes;

				select.add(option, 2);
				select.selectedIndex = 2;
			}
			else {
				select.selectedIndex = 0;
			}

			let change = new Event('change');
			select.dispatchEvent(change);

			event.target.value = '00:00';
			event.target.style.setProperty('display', 'none');
			select.style.removeProperty('display');
		}
	};

    if (document.location.href.match(/\/comments(\/|\?|#|$)/)) {
        if (document.location.href.match(/\/comments\/[^\/?#]+(\/([^\/?#]+\/?)?)?(\?|#|$)/)) {
            deleteOldItems();
			handleCommentsPage();

            document.addEventListener('keydown', function(e) {
                // Alt+Q
                if (e.keyCode == "Q".charCodeAt(0) && !e.shiftKey && !e.ctrlKey && e.altKey && !e.metaKey) {
                    jumpToPrevComment();
					e.preventDefault();
                    return false;
                }
                // Alt+W
                if (e.keyCode == "W".charCodeAt(0) && !e.shiftKey && !e.ctrlKey && e.altKey && !e.metaKey) {
                    jumpToNextComment();
					e.preventDefault();
                    return false;
                }

                // Ctrl+up
                if (e.keyCode == 38 && !e.shiftKey && e.ctrlKey && !e.altKey && !e.metaKey) {
                    jumpToPrevComment();
					e.preventDefault();
                    return false;
                }
                // Ctrl+down
                if (e.keyCode == 40 && !e.shiftKey && e.ctrlKey && !e.altKey && !e.metaKey) {
                    jumpToNextComment();
					e.preventDefault();
                    return false;
                }
            }, false);
        }
    } else {
        handleListPage();
    }

})();