Highlight original poster comments on Hackers News and navigate them with the keyboard
// ==UserScript==
// @name Hacker News - Highlight and navigate original poster's comments
// @description Highlight original poster comments on Hackers News and navigate them with the keyboard
// @namespace valacar
// @author valacar
// @include https://news.ycombinator.com/item?id=*
// @version 0.3
// @grant none
// @noframes
// @license MIT
// @compatible firefox Firefox
// @compatible chrome Chrome
// ==/UserScript==
(function() {
'use strict';
const ENABLE_KEYBOARD_NAVIGATION = true;
const VERTICAL_CENTER_PERCENT = 0.25; // percentage from the top
function appendStyle(cssString) {
const parent = document.head || document.documentElement;
if (parent) {
const style = document.createElement("style");
style.setAttribute("type", "text/css");
style.textContent = cssString;
parent.appendChild(style);
}
}
appendStyle(
`
.originalPoster,
.opPostCountInfo
{
background: #ffc;
}
.currentHighlight
{
background: linear-gradient(to right, #ffc 66%, transparent);
}
`);
const posterUserName = document.querySelector('.subtext a').textContent;
let opPostCount = 0;
if (posterUserName) {
const commentUserLinks = document.querySelectorAll('.comhead a');
if (commentUserLinks) {
for (let i = 0; i < commentUserLinks.length; i++) {
let commentUserName = commentUserLinks[i].textContent;
if (posterUserName === commentUserName) {
opPostCount++;
commentUserLinks[i].classList.add('originalPoster');
commentUserLinks[i].id = 'op-post-' + opPostCount;
}
}
}
}
if (opPostCount > 0) {
const newSpan = document.createElement('span');
newSpan.textContent = ' (' + opPostCount + ' by original poster)';
newSpan.className = 'opPostCountInfo';
if (ENABLE_KEYBOARD_NAVIGATION) {
newSpan.setAttribute('title', "Use the left/right arrow keys\n(or n/N, or n/p) to scroll to OP comments.");
newSpan.setAttribute('style', "cursor: help;");
}
const subText = document.querySelectorAll('.subtext a[href^="item?id="')[1];
subText.appendChild(newSpan);
}
// http://stackoverflow.com/questions/8922107/javascript-scrollintoview-middle-alignment
Element.prototype.documentOffsetTop = function () {
return this.offsetTop + (this.offsetParent ? this.offsetParent.documentOffsetTop() : 0);
};
function ScrollToID(id) {
const target = document.getElementById(id);
const top = target.documentOffsetTop() - (window.innerHeight * VERTICAL_CENTER_PERCENT);
window.scrollTo(0, top);
const oldCurrent = document.querySelector(".currentHighlight");
if (oldCurrent) {
oldCurrent.classList.remove("currentHighlight");
}
// XXX: not the best idea to blindly go back two parents
target.parentNode.parentNode.classList.add("currentHighlight");
}
if (ENABLE_KEYBOARD_NAVIGATION) {
let num = 0;
window.addEventListener("keydown", function (event) {
// Should do nothing if the key event was already consumed.
if (event.defaultPrevented) {
return;
}
// don't break alt-left and alt-right history navigation
// and exit if textarea is in focus
if (event.altKey || /(input|textarea)/i.test(document.activeElement.nodeName)) {
return;
}
switch (event.key) {
case "n":
case "ArrowRight":
case "Right":
if (num < opPostCount) {
num++;
}
break;
case "N":
case "p":
case "ArrowLeft":
case "Left":
if (num > 1) {
num--;
}
break;
default:
return; // Quit when this doesn't handle the key event.
}
// Consume the event for suppressing "double action".
event.preventDefault();
//console.log('num = ' + num + ' focus = ' + document.activeElement.tagName);
ScrollToID("op-post-" + num);
}, true);
}
})();