☰

FreshRSS Double-Tap and Auto-Scroll

Double-tap to close active articles and auto-scroll to the active article in FreshRSS

当前为 2025-02-04 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         FreshRSS Double-Tap and Auto-Scroll
  3. // @namespace    http://tampermonkey.net/
  4. // @version      2.0
  5. // @description  Double-tap to close active articles and auto-scroll to the active article in FreshRSS
  6. // @author       Your Name
  7. // @homepage     https://greasyfork.org/en/scripts/525912
  8. // @match        http://192.168.1.2:1030/*
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.     
  15.     // Debug mode
  16.     const DEBUG = false;
  17.     
  18.     function debugLog(message) {
  19.         if (DEBUG) {
  20.             console.log(`[FreshRSS Script]: ${message}`);
  21.         }
  22.     }
  23.     
  24.     debugLog('Script loaded');
  25.  
  26.     // Function to scroll to element
  27.     function scrollToElement(element) {
  28.         if (element) {
  29.             const header = document.querySelector('header');
  30.             const headerHeight = header ? header.offsetHeight : 0;
  31.             const elementPosition = element.getBoundingClientRect().top + window.pageYOffset;
  32.             const offsetPosition = elementPosition - headerHeight - 10;
  33.  
  34.             window.scrollTo({
  35.                 top: offsetPosition,
  36.                 behavior: 'smooth'
  37.             });
  38.             debugLog('Scrolling to element: ' + element.id);
  39.         }
  40.     }
  41.  
  42.     // Handle double-tap to close
  43.     document.addEventListener('dblclick', function(event) {
  44.         const interactiveElements = ['A', 'BUTTON', 'INPUT', 'TEXTAREA', 'SELECT', 'LABEL'];
  45.         if (interactiveElements.includes(event.target.tagName)) {
  46.             debugLog('Ignored double-tap on interactive element');
  47.             return;
  48.         }
  49.  
  50.         const activeElement = event.target.closest('.flux.active');
  51.         if (activeElement) {
  52.             activeElement.classList.remove('active');
  53.             debugLog('Closed article via double-tap');
  54.             // scrollToElement(activeElement);
  55.             activeElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
  56.         }
  57.     });
  58.  
  59.     // Monitor for new active articles using both click and mutation events
  60.     document.addEventListener('click', function(event) {
  61.         const fluxElement = event.target.closest('.flux');
  62.         if (fluxElement) {
  63.             // Use a shorter delay and check multiple times
  64.             const checkInterval = setInterval(() => {
  65.                 if (fluxElement.classList.contains('active')) {
  66.                     debugLog('Article became active via click');
  67.                     scrollToElement(fluxElement);
  68.                     clearInterval(checkInterval);
  69.                 }
  70.             }, 100); // Check every 100ms
  71.             
  72.             // Stop checking after 1 second to prevent infinite checking
  73.             setTimeout(() => clearInterval(checkInterval), 1000);
  74.         }
  75.     });
  76.  
  77.     // Additional mutation observer to catch programmatic changes
  78.     const observer = new MutationObserver((mutations) => {
  79.         mutations.forEach((mutation) => {
  80.             if (mutation.target.classList && mutation.target.classList.contains('flux')) {
  81.                 if (mutation.target.classList.contains('active')) {
  82.                     debugLog('Article became active via mutation');
  83.                     scrollToElement(mutation.target);
  84.                 }
  85.             }
  86.         });
  87.     });
  88.  
  89.     // Start observing the document with the configured parameters
  90.     observer.observe(document.body, {
  91.         attributes: true,
  92.         attributeFilter: ['class'],
  93.         subtree: true
  94.     });
  95. })();