☰

REDDIT: Comment Navigation Button

Navigate between parent comments on Reddit

  1. // ==UserScript==
  2. // @name         REDDIT: Comment Navigation Button
  3. // @namespace    https://github.com/KenKaneki73985/Reddit-Comment-Navigation
  4. // @version      1.1.1
  5. // @license      MIT
  6. // @description  Navigate between parent comments on Reddit
  7. // @author       Ken Kaneki 
  8. // @match        https://www.reddit.com/*
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12. // user_script = "moz-extension://762e4395-b145-4620-8dd9-31bf09e052de/options.html#nav=456d07d2-2ca3-4a29-bd4d-3d3b7726255f+editor"
  13. // https://greasyfork.org/en/scripts/505012-reddit-comment-navigation
  14.  
  15. // GUIDES:
  16. // next_btn.textContent = 'next'
  17.  
  18. (function() {
  19.     'use strict'
  20.     let current_index = -1
  21.     let PARENT_COMMENTS_arr = []
  22.  
  23.     function FIND_PARENT_COMMENTS() {
  24.         PARENT_COMMENTS_arr = []
  25.         const comments = document.querySelectorAll('shreddit-comment[depth="0"')
  26.         comments.forEach(comment => PARENT_COMMENTS_arr.push(comment))
  27.     }
  28.  
  29.     function NEXT_PARENT_COMMENT() {
  30.         FIND_PARENT_COMMENTS() // refresh new comments
  31.  
  32.         if (PARENT_COMMENTS_arr.length  > current_index + 1) {  // 5 (len) - 1 > 4 (index) ? 4 > 4 = false
  33.             current_index++
  34.             PARENT_COMMENTS_arr[current_index].scrollIntoView()
  35.             HIGHLIGHT_COMMENT(PARENT_COMMENTS_arr[current_index])
  36.             ADJUST_POSITION()
  37.         }
  38.     }
  39.  
  40.     function PREV_PARENT_COMMENT() {
  41.         FIND_PARENT_COMMENTS() // refresh new comments
  42.  
  43.         if (current_index > 0) {
  44.             current_index--
  45.             PARENT_COMMENTS_arr[current_index].scrollIntoView()
  46.             HIGHLIGHT_COMMENT(PARENT_COMMENTS_arr[current_index])
  47.             ADJUST_POSITION()
  48.         }
  49.     }
  50.  
  51.     function ADJUST_POSITION() {
  52.         window.scrollBy(0, -70); // Scroll up by 100 pixels
  53.     }
  54.  
  55.     function HIGHLIGHT_COMMENT(active_comment) {
  56.  
  57.         PARENT_COMMENTS_arr.forEach(comment => comment.style.border = "none") // Remove highlight from all comments
  58.         active_comment.style.border = '1px solid gray' // Highlight the current comment
  59.     }
  60.  
  61.     // ---------------------- PREVIOUS BUTTON ----------------------
  62.     const prev_btn = document.createElement('button')
  63.     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>'
  64.     prev_btn.style.position = 'fixed'
  65.     prev_btn.style.right = '20px'
  66.     prev_btn.style.top = '83%'
  67.     prev_btn.addEventListener('click', PREV_PARENT_COMMENT)
  68.  
  69.     // ---------------------- NEXT BUTTON  ----------------------
  70.     const next_btn = document.createElement('button')
  71.     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>'
  72.     next_btn.style.position = 'fixed'
  73.     next_btn.style.right = '20px'
  74.     next_btn.style.top = '90%'
  75.     next_btn.addEventListener('click', NEXT_PARENT_COMMENT)
  76.  
  77.     document.body.appendChild(prev_btn)
  78.     document.body.appendChild(next_btn)
  79.  
  80.     window.addEventListener('load', () => {current_index = -1})
  81.     window.addEventListener('load', FIND_PARENT_COMMENTS)
  82.     // window.addEventListener('scroll', FIND_PARENT_COMMENTS);
  83. })()
  84.