☰

FreshRSS NG Filter

Mark as read and hide articles matching the rule in FreshRSS. Rules are described by regular expressions.

// ==UserScript==
// @name        FreshRSS NG Filter
// @namespace   https://github.com/hiroki-miya
// @version     1.0.4
// @description Mark as read and hide articles matching the rule in FreshRSS. Rules are described by regular expressions.
// @author      hiroki-miya
// @license     MIT
// @match       https://freshrss.example.net/*
// @grant       GM_addStyle
// @grant       GM_getValue
// @grant       GM_registerMenuCommand
// @grant       GM_setValue
// @run-at      document-idle
// ==/UserScript==

(function() {
    'use strict';

    // Language for sorting
    const sortLocale = 'ja';

    // Retrieve saved filters
    let savedFilters = GM_getValue('filters', {});

    // Define editingFilterName globally (the name of the filter currently being edited)
    let editingFilterName = null;

    // Add styles
    GM_addStyle(`
        #freshrss-ng-filter {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 10000;
            background-color: white;
            border: 1px solid black;
            padding: 10px;
            width: max-content;
        }
        #freshrss-ng-filter > h2 {
            box-shadow: inset 0 0 0 0.5px black;
            padding: 5px 10px;
            text-align: center;
            cursor: move;
        }
        #freshrss-ng-filter > h4 {
            margin-top: 0;
        }
        #filter-list {
            margin-bottom: 10px;
            max-height: 50vh;
            overflow-y: auto;
        }
        .filter-item  {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        #filter-edit > div {
            display: flex;
            justify-content: space-between;
            align-items: center;
            line-height: 2;
            margin-bottom: 5px;
        }
        #filter-edit > div input {
            line-height: 2;
            margin: 0;
        }
        .filter-name,
        #filter-edit > div > label {
            flex-grow: 1;
            margin-right: 10px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        #filter-edit > div > div:has(input[type="checkbox"]) {
            margin-left: 5px;
            max-width: 90%;
            width: 300px;
        }
        #filter-edit > div input[type="checkbox"] {
            transform: scale(1.5);
            margin-left: 4px;
        }
        .edit-filter, .delete-filter,
        #filter-edit > div > input {
            margin-left: 5px;
        }
        .filter-info-label {
            display: inline;
        }
        .filter-info {
            display: inline-block;
            border-radius: 50%;
            width: 16px;
            height: 16px;
            min-height: 16px;
            line-height: 1.2;
            margin-left: 4px;
            position: relative;
            top: -6px;
            text-align: center;
            background-color: black;
            color: white;
            font-weight: 700;
        }
    `);

    // Function to render the filter list
    function updateFilterList() {
        // Sort filters
        const filterNames = Object.keys(savedFilters).sort((a, b) => a.localeCompare(b, sortLocale));
        const filterList = filterNames.map(name => {
            const filter = savedFilters[name];
            const checked = filter.disabled ? 'checked' : '';
            return `
                <div class="filter-item">
                    <div class="filter-name">${name}</div>
                    <button class="edit-filter" data-name="${name}">Edit</button>
                    <button class="delete-filter" data-name="${name}">Delete</button>
                    <label><input type="checkbox" class="disable-filter" data-name="${name}" ${checked}> Disabled</label>
                </div>
            `;
        }).join('');

        // Render the filter list
        document.getElementById('filter-list').innerHTML = filterList || 'No registered filters';

        // Re-register the filter edit button events
        Array.from(document.querySelectorAll('.edit-filter')).forEach(button => {
            button.addEventListener('click', () => {
                const filterName = button.getAttribute('data-name');
                const filter = savedFilters[filterName];

                // Pre-fill the form with the filter values
                document.getElementById('filter-name').value = filterName;
                document.getElementById('filter-currentUrl').value = filter.currentUrl || '';
                document.getElementById('filter-title').value = filter.title || '';
                document.getElementById('filter-url').value = filter.url || '';
                document.getElementById('filter-content').value = filter.content || '';
                document.getElementById('filter-text').value = filter.text || '';
                document.getElementById('filter-case').checked = filter.caseInsensitive || false;

                editingFilterName = filterName;

                // Update the form heading for editing
                document.querySelector('#filter-edit-title').innerText = 'Edit Existing Filter';
                document.querySelector('#fnfs-save').innerText = 'Update';
            });
        });

        Array.from(document.querySelectorAll('.disable-filter')).forEach(checkbox => {
            checkbox.addEventListener('change', (e) => {
                const filterName = e.target.getAttribute('data-name');
                savedFilters[filterName].disabled = e.target.checked;
                GM_setValue('filters', savedFilters);
                applyAllFilters();
            });
        });

        document.getElementById('fnfs-toggle-all-filters').innerText = areFiltersDisabled() ? 'Enable All Filters' : 'Disable All Filters';
        // Re-register the filter delete button events
        Array.from(document.querySelectorAll('.delete-filter')).forEach(button => {
            button.addEventListener('click', () => {
                const filterName = button.getAttribute('data-name');
                delete savedFilters[filterName];
                GM_setValue('filters', savedFilters);
                updateFilterList();
                applyAllFilters();
            });
        });
    }

    function areFiltersDisabled() {
        return Object.values(savedFilters).every(filter => filter.disabled);
    }

    function toggleAllFilters() {
        const disableAll = !areFiltersDisabled();
        Object.keys(savedFilters).forEach(filterName => {
            savedFilters[filterName].disabled = disableAll;
        });
        GM_setValue('filters', savedFilters);
        updateFilterList();
        applyAllFilters();
    }

    // Display filter settings
    function showSettings() {
        const settingsHTML = `
            <h2>NG Filter Settings</h2>
            <h4>Saved Filters</h4>
            <div id="filter-list"></div>
            <button id="fnfs-toggle-all-filters">${areFiltersDisabled() ? 'Enable All Filters' : 'Disable All Filters'}</button>
            <br>
            <hr>
            <h4 id="filter-edit-title">Create New Filter</h4>
            <div id="filter-edit">
            <div><label>Filter Name</label><input type="text" id="filter-name"></div>
            <div><label>FreshRSS Feed List URL</label><input type="text" id="filter-currentUrl"></div>
            <div><label>Title</label><input type="text" id="filter-title"></div>
            <div><label>Content URL</label><input type="text" id="filter-url"></div>
            <div><label class="filter-info-label">Content<div title="article.flux_content.innerText" class="filter-info">i</div></label><input type="text" id="filter-content"></div>
            <div><label class="filter-info-label">Text<div title="div.text.innerHTML" class="filter-info">i</div></label><input type="text" id="filter-text"></div>
            <div><label>Case insensitive?</label><div><input type="checkbox" id="filter-case"></div></div>
            <br>
            </div>
            <button id="fnfs-save">Save</button>
            <button id="fnfs-clear">Clear</button>
            <button id="fnfs-close">Close</button>
        `;

        const settingsDiv = document.createElement('div');
        settingsDiv.id = 'freshrss-ng-filter';
        settingsDiv.innerHTML = settingsHTML;
        document.body.appendChild(settingsDiv);

        // Initial render of saved filter list
        updateFilterList();

        // Make settings panel draggable
        makeDraggable(settingsDiv);

        // Save or update button event
        document.getElementById('fnfs-save').addEventListener('click', () => {
            const filterName = document.getElementById('filter-name').value;
            const filterCurrentUrl = document.getElementById('filter-currentUrl').value;
            const filterTitle = document.getElementById('filter-title').value;
            const filterUrl = document.getElementById('filter-url').value;
            const filterContent = document.getElementById('filter-content').value;
            const filterText = document.getElementById('filter-text').value;
            const caseInsensitive = document.getElementById('filter-case').checked;

            if (!filterName) {
                alert('Please enter a filter name');
                return;
            }

            // Save or update the filter
            savedFilters[filterName] = {
                currentUrl: filterCurrentUrl,
                title: filterTitle,
                url: filterUrl,
                content: filterContent,
                text: filterText,
                caseInsensitive: caseInsensitive,
                disabled: false
            };

            // If the filter name was changed during editing, delete the old filter
            if (editingFilterName && editingFilterName !== filterName) {
                delete savedFilters[editingFilterName];
            }

            GM_setValue('filters', savedFilters);

            showTooltip('Saved');

            initEdit();

            // Update filter list
            updateFilterList();

            // Apply filters immediately after saving
            applyAllFilters();
        });

        // Clear button event
        document.getElementById('fnfs-clear').addEventListener('click', () => {
            initEdit();
        });

        // Close button event
        document.getElementById('fnfs-close').addEventListener('click', () => {
            document.body.removeChild(settingsDiv);
        });

        document.getElementById('fnfs-toggle-all-filters').addEventListener('click', toggleAllFilters);
    }

    function initEdit() {
        editingFilterName = null;
        document.getElementById('filter-name').value = '';
        document.getElementById('filter-currentUrl').value = '';
        document.getElementById('filter-title').value = '';
        document.getElementById('filter-url').value = '';
        document.getElementById('filter-content').value = '';
        document.getElementById('filter-text').value = '';
        document.getElementById('filter-case').checked = false;

        // Update the form heading for creating a new filter
        document.querySelector('#filter-edit-title').innerText = 'Create New Filter';
        document.querySelector('#fnfs-save').innerText = 'Save';
    }

    // Function to display the tooltip
    function showTooltip(message) {
        // Create the tooltip element
        const tooltip = document.createElement('div');
        tooltip.textContent = message;
        tooltip.style.position = 'fixed';
        tooltip.style.top = '50%';
        tooltip.style.left = '50%';
        tooltip.style.transform = 'translate(-50%, -50%)';
        tooltip.style.backgroundColor = 'rgba(0, 0, 0, 0.75)';
        tooltip.style.color = 'white';
        tooltip.style.padding = '10px 20px';
        tooltip.style.borderRadius = '5px';
        tooltip.style.zIndex = '10000';
        tooltip.style.fontSize = '16px';
        tooltip.style.textAlign = 'center';

        // Add the tooltip to the page
        document.body.appendChild(tooltip);

        // Automatically remove the tooltip after 1 second
        setTimeout(() => {
            document.body.removeChild(tooltip);
        }, 1000);
    }

    // Make element draggable
    function makeDraggable(elmnt) {
        const header = elmnt.querySelector('h2');
        let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
        header.onmousedown = dragMouseDown;

        function dragMouseDown(e) {
            e = e || window.event;
            e.preventDefault();

            // Get the mouse cursor position at startup:
            pos3 = e.clientX;
            pos4 = e.clientY;
            document.onmouseup = closeDragElement;
            document.onmousemove = elementDrag;
        }

        function elementDrag(e) {
            e = e || window.event;
            e.preventDefault();

            // Calculate the new cursor position:
            pos1 = pos3 - e.clientX;
            pos2 = pos4 - e.clientY;
            pos3 = e.clientX;
            pos4 = e.clientY;

            // Set the element's new position:
            elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
            elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
        }

        function closeDragElement() {
            document.onmouseup = null;
            document.onmousemove = null;
        }
    }

    // Mark as read and hide articles
    function markAsNG(articleElement) {
        if (!articleElement) return;

        // Check if mark_read function is available
        if (typeof mark_read === 'function') {
            mark_read(articleElement, true, true);
        } else {
            // Fallback: manually add 'read' class and trigger 'read' event
            articleElement.classList.add('read');
            const event = new Event('read');
            articleElement.dispatchEvent(event);
        }

        // Hide the article
        articleElement.remove();
    }

    // Apply all filters automatically
    function applyAllFilters() {
        const articles = Array.from(document.querySelectorAll('#stream > .flux'));
        const currentPageUrl = window.location.href;

        articles.forEach(article => {
            const title = article.querySelector('a.item-element.title')?.innerText || '';
            const url = article.querySelector('a.item-element.title')?.href || '';
            const content = article.querySelector('.flux_content')?.innerText || '';
            const text = article.querySelector('div.text')?.innerHTML || '';

            let matchesAnyFilter = false;

            for (let filterName in savedFilters) {
                const filter = savedFilters[filterName];
                if (filter.disabled) continue;

                const regexFlags = filter.caseInsensitive ? 'i' : '';
                const currentUrlMatch = !filter.currentUrl || new RegExp(filter.currentUrl, regexFlags).test(currentPageUrl);
                const titleMatch = !filter.title || new RegExp(filter.title, regexFlags).test(title);
                const urlMatch = !filter.url || new RegExp(filter.url, regexFlags).test(url);
                const contentMatch = !filter.content || new RegExp(filter.content, regexFlags).test(content);
                const textMatch = !filter.text || new RegExp(filter.text, regexFlags).test(text);

//                 console.log('titleMatch(' + titleMatch + '): ' + filter.title + ' = ' + title + '\n' +
//                      'urlMatch(' + urlMatch + '): ' + filter.url + ' = ' + url + '\n' +
//                      'contentMatch(' + contentMatch + '): ' + filter.content + ' = ' + content + '\n' +
//                      'textMatch(' + textMatch + '): ' + filter.text + ' = ' + text + '\n');

                // Check if all filter conditions are met (AND condition)
                if (currentUrlMatch && titleMatch && urlMatch && contentMatch && textMatch) {
                    markAsNG(article);
                    break;
                }
            }
        });
    }

    // Setup MutationObserver
    function setupObserver() {
        const targetNode = document.querySelector('#stream');
        if (targetNode) {
            const observer = new MutationObserver(applyAllFilters);
            observer.observe(targetNode, { childList: true, subtree: true });
            applyAllFilters();
        } else {
            // Retry if #stream is not found
            setTimeout(setupObserver, 1000);
        }
    }

    // Register settings screen
    GM_registerMenuCommand('Settings', showSettings);

    // Start setupObserver when the script starts
    setupObserver();
})();