Navigate between parent comments on Reddit
// ==UserScript==
// @name REDDIT: Comment Navigation Button
// @namespace https://github.com/KenKaneki73985/Reddit-Comment-Navigation
// @version 1.1.1
// @license MIT
// @description Navigate between parent comments on Reddit
// @author Ken Kaneki
// @match https://www.reddit.com/*
// @grant none
// ==/UserScript==
// user_script = "moz-extension://762e4395-b145-4620-8dd9-31bf09e052de/options.html#nav=456d07d2-2ca3-4a29-bd4d-3d3b7726255f+editor"
// https://greasyfork.org/en/scripts/505012-reddit-comment-navigation
// GUIDES:
// next_btn.textContent = 'next'
(function() {
'use strict'
let current_index = -1
let PARENT_COMMENTS_arr = []
function FIND_PARENT_COMMENTS() {
PARENT_COMMENTS_arr = []
const comments = document.querySelectorAll('shreddit-comment[depth="0"')
comments.forEach(comment => PARENT_COMMENTS_arr.push(comment))
}
function NEXT_PARENT_COMMENT() {
FIND_PARENT_COMMENTS() // refresh new comments
if (PARENT_COMMENTS_arr.length > current_index + 1) { // 5 (len) - 1 > 4 (index) ? 4 > 4 = false
current_index++
PARENT_COMMENTS_arr[current_index].scrollIntoView()
HIGHLIGHT_COMMENT(PARENT_COMMENTS_arr[current_index])
ADJUST_POSITION()
}
}
function PREV_PARENT_COMMENT() {
FIND_PARENT_COMMENTS() // refresh new comments
if (current_index > 0) {
current_index--
PARENT_COMMENTS_arr[current_index].scrollIntoView()
HIGHLIGHT_COMMENT(PARENT_COMMENTS_arr[current_index])
ADJUST_POSITION()
}
}
function ADJUST_POSITION() {
window.scrollBy(0, -70); // Scroll up by 100 pixels
}
function HIGHLIGHT_COMMENT(active_comment) {
PARENT_COMMENTS_arr.forEach(comment => comment.style.border = "none") // Remove highlight from all comments
active_comment.style.border = '1px solid gray' // Highlight the current comment
}
// ---------------------- PREVIOUS BUTTON ----------------------
const prev_btn = document.createElement('button')
prev_btn.innerHTML = '<svg viewBox="0 0 24 24" width="24" height="24"><path fill="#808080" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/></svg>'
prev_btn.style.position = 'fixed'
prev_btn.style.right = '20px'
prev_btn.style.top = '83%'
prev_btn.addEventListener('click', PREV_PARENT_COMMENT)
// ---------------------- NEXT BUTTON ----------------------
const next_btn = document.createElement('button')
next_btn.innerHTML = '<svg viewBox="0 0 24 24" width="24" height="24"><path fill="#808080" d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>'
next_btn.style.position = 'fixed'
next_btn.style.right = '20px'
next_btn.style.top = '90%'
next_btn.addEventListener('click', NEXT_PARENT_COMMENT)
document.body.appendChild(prev_btn)
document.body.appendChild(next_btn)
window.addEventListener('load', () => {current_index = -1})
window.addEventListener('load', FIND_PARENT_COMMENTS)
// window.addEventListener('scroll', FIND_PARENT_COMMENTS);
})()