☰

REDDIT: Comment Navigation Button

Navigate between parent comments on Reddit

目前为 2024-08-24 提交的版本。查看 最新版本。

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