Last active
June 27, 2024 23:42
-
-
Save evanreichard/96d89512cbfe23e5d7a81479c482e6da to your computer and use it in GitHub Desktop.
hn-tweaks.user.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ==UserScript== | |
// @name Hacker News Tweaks | |
// @version 0.0.3 | |
// @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 = await GM.getValue('enabled', true); | |
if (isEnabled === true){ | |
GM.unregisterMenuCommand('Disable Style'); | |
isEnabled = false; | |
activeStyleElement?.remove(); | |
GM.registerMenuCommand('Enable Style', toggleStyle); | |
} else { | |
GM.unregisterMenuCommand('Enable Style'); | |
applyStyle() | |
isEnabled = true; | |
GM.registerMenuCommand('Disable Style', toggleStyle); | |
} | |
await GM.setValue('enabled', isEnabled); | |
} | |
function applyStyle(){ | |
activeStyleElement = GM.addStyle(`.comhead { | |
font-size: 12pt; | |
line-height: 20pt; | |
}`); | |
} | |
function findParent(el, index){ | |
let previousSibling = el.previousElementSibling; | |
let foundElem = previousSibling.querySelector(`[indent="${index}"]`); | |
return foundElem ? foundElem.closest('.athing') : findParent(previousSibling, index); | |
} | |
GM.getValue('enabled', true).then(isEnabled => { | |
if (isEnabled === true){ | |
GM.registerMenuCommand('Disable Style', toggleStyle); | |
applyStyle(); | |
} else { | |
GM.registerMenuCommand('Enable Style', toggleStyle); | |
} | |
}); | |
Array.from(document.querySelectorAll('.ind')).forEach(indent => { | |
indent.style.position = 'relative'; | |
let indCount = parseInt(indent.getAttribute('indent')); | |
let colWidth = indent.querySelector('img').offsetWidth; | |
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); | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment