140 lines
3.8 KiB
JavaScript
140 lines
3.8 KiB
JavaScript
// ==UserScript==
|
|
// @name Hacker News Tweaks
|
|
// @version 0.0.4
|
|
// @downloadURL https://gist.githubusercontent.com/evanreichard/96d89512cbfe23e5d7a81479c482e6da/raw/hn-tweaks.user.js
|
|
// @match *://news.ycombinator.com/*
|
|
// @grant GM.addStyle
|
|
// @grant GM.registerMenuCommand
|
|
// @grant GM.unregisterMenuCommand
|
|
// @grant GM_getValue
|
|
// @grant GM.setValue
|
|
// @noframes
|
|
// @run-at document-idle
|
|
// ==/UserScript==
|
|
|
|
/**
|
|
* This is a hacked together UserScript to add comment collapsing like old reddit.
|
|
* It also adds the following CSS tweak: https://news.ycombinator.com/item?id=29494475
|
|
**/
|
|
|
|
let activeStyleElement;
|
|
|
|
async function toggleStyle() {
|
|
let isEnabled = GM_getValue("enabled", true);
|
|
if (isEnabled === true) {
|
|
GM.unregisterMenuCommand("Disable Style");
|
|
GM.registerMenuCommand("Enable Style", toggleStyle);
|
|
activeStyleElement?.remove();
|
|
} else {
|
|
GM.unregisterMenuCommand("Enable Style");
|
|
GM.registerMenuCommand("Disable Style", toggleStyle);
|
|
applyStyle();
|
|
}
|
|
await GM.setValue("enabled", !isEnabled);
|
|
}
|
|
|
|
function applyStyle() {
|
|
activeStyleElement = GM.addStyle(`.comhead {
|
|
font-size: 12pt;
|
|
line-height: 20pt;
|
|
}
|
|
@media (prefers-color-scheme: dark) { body { background-color: #1F2430; }
|
|
#hnmain { background-color: #232834; }
|
|
|
|
a:link.storylink,
|
|
#hnmain > tbody > tr:first-child > td a,
|
|
.commtext, .commtext a:link,
|
|
td {
|
|
color: #fafafa;
|
|
}
|
|
|
|
#hnmain > tbody > tr:first-child > td { background-color: #333a4a; }
|
|
|
|
a:link,
|
|
.sitebit, .subtext, .sitestr, .subtext a:link,
|
|
.rank, a.morelink,
|
|
.pagetop, .yclinks a,
|
|
.comhead a:link, .comhead,
|
|
.hnmore a:link, .reply a:link {
|
|
color: #8c96ac;
|
|
}
|
|
|
|
a:visited {
|
|
color: #979cf4;
|
|
}
|
|
|
|
.votearrow {
|
|
overflow: visible;
|
|
position: relative;
|
|
}
|
|
|
|
.votearrow::before {
|
|
content: "";
|
|
width: 0;
|
|
height: 0;
|
|
left: 1px;
|
|
top: 3px;
|
|
display: block;
|
|
position: absolute;
|
|
border-left: 4px solid transparent;
|
|
border-right: 4px solid transparent;
|
|
border-bottom: 7px solid #bebfd1;
|
|
}
|
|
|
|
input[type=text],
|
|
textarea {
|
|
background-color: #333a4a;
|
|
color: #fafafa;
|
|
border: 1px solid #1F2430;
|
|
}
|
|
}`);
|
|
}
|
|
|
|
function findParent(el, index) {
|
|
let previousSibling = el.previousElementSibling;
|
|
let foundElem = previousSibling.querySelector(`[indent="${index}"]`);
|
|
return foundElem
|
|
? foundElem.closest(".athing")
|
|
: findParent(previousSibling, index);
|
|
}
|
|
|
|
let isEnabled = GM_getValue("enabled", true);
|
|
if (isEnabled === true) {
|
|
GM.registerMenuCommand("Disable Style", toggleStyle);
|
|
applyStyle();
|
|
} else {
|
|
GM.registerMenuCommand("Enable Style", toggleStyle);
|
|
}
|
|
|
|
Array.from(document.querySelectorAll(".ind")).forEach((indent) => {
|
|
let imgEl = indent.querySelector("img");
|
|
if (!imgEl) return;
|
|
let colWidth = imgEl.offsetWidth;
|
|
|
|
indent.style.position = "relative";
|
|
let indCount = parseInt(indent.getAttribute("indent"));
|
|
|
|
let voteOffset =
|
|
indent.nextElementSibling.querySelector("center").offsetHeight;
|
|
|
|
for (let i = 0; i <= indCount; i += 1) {
|
|
let marginLeft = i === 0 ? "10px" : (colWidth / indCount) * i + 10 + "px";
|
|
let topOffset = i === indCount ? voteOffset + 15 : -10;
|
|
let newElem = document.createElement("div");
|
|
newElem.setAttribute(
|
|
"style",
|
|
`cursor: pointer; height: calc(100% - ${topOffset + 2}px); width: 0px; position: absolute; margin-left: ${marginLeft}; top: ${topOffset}px; border-left: 2px solid green; padding: 0px min(${colWidth / 2}px, 5px);`,
|
|
);
|
|
newElem.onclick = () => {
|
|
let commentBlock = newElem.closest(".athing");
|
|
if (i === indCount) {
|
|
commentBlock.querySelector(".togg.clicky").click();
|
|
} else {
|
|
let parentComment = findParent(commentBlock, i);
|
|
parentComment.querySelector(".togg.clicky").click();
|
|
}
|
|
};
|
|
indent.appendChild(newElem);
|
|
}
|
|
});
|