/bag/ filter v1

// ==UserScript==
// @name         Filter v1 (Improved)
// @namespace    http://tampermonkey.net/
// @version      1.4.3
// @description  Partially filters images based on file type on 4chan VG threads.
// @author       Anonymous
// @match        https://boards.4chan.org/vg*
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    // Validate thread subject: Only proceed if the thread subject contains keywords like "bag/", "blue archive" (case-insensitive).
    const subjectElem = document.querySelector('.postInfo.desktop .subject');
    const subjectText = subjectElem?.textContent?.trim() ?? '';
    // Improved regex: checks for "bag/" or "blue archive" (case-insensitive)
    if (!/(bag\/|blue archive)/i.test(subjectText)) {
        return;
    }

    // Inject CSS to control the filtered images and hide deleted posts.
    const style = document.createElement('style');
    style.textContent = `
        .fileThumb img.filtered-image {
            width: 40px !important;
            height: 40px !important;
            object-fit: cover;
            object-position: center top;
            transition: all 0.2s ease;
        }
        .fileThumb:hover img.filtered-image {
            width: auto !important;
            height: auto !important;
            object-fit: initial;
            z-index: 100;
        }
        .deleted-post {
            display: none;
        }
    `;
    document.head.appendChild(style);

    /**
     * Apply partial filtering to image thumbnails.
     * For each post, if its file name ends with .png or .jpg, mark the thumbnail with a "filtered-image" class.
     * Otherwise, if the file is of type gif, mp4, or webm, skip it.
     */
    function applyPartialImageFiltering() {
        const posts = document.querySelectorAll('.postContainer');
        posts.forEach((post) => {
            const fileText = post.querySelector('.fileText-original, .fileText');
            if (!fileText) return;

            const link = fileText.querySelector('a');
            if (!link) return;

            const filename = link.textContent.trim();
            const isPngOrJpg = /\.(png|jpg)$/i.test(filename);

            // If not PNG or JPG, skip if file type is gif, mp4, or webm.
            if (!isPngOrJpg) {
                const excludedTypes = /\.(gif|mp4|webm)$/i;
                if (excludedTypes.test(filename)) return;
            }

            const img = post.querySelector('.fileThumb img');
            if (img && !img.classList.contains('filtered-image')) {
                img.classList.add('filtered-image');
                // Cache original dimensions (if not already stored)
                if (!img.dataset.originalWidth) {
                    img.dataset.originalWidth = img.style.width || img.getAttribute('width') || '';
                    img.dataset.originalHeight = img.style.height || img.getAttribute('height') || '';
                }
                img.dataset.filtered = 'true';
            }
        });
    }

    /**
     * Patch compatibility with external extensions.
     * For example, if the ImageExpansion extension is present, override its expand method
     * to temporarily remove the filtered-image class so that the full image is shown.
     */
    function patchExtensionCompatibility() {
        setTimeout(() => {
            if (window.ImageExpansion) {
                const originalExpand = window.ImageExpansion.expand;
                window.ImageExpansion.expand = function (e) {
                    const targetImg = e.target.nodeName === 'IMG'
                        ? e.target
                        : e.target.querySelector('img');
                    if (targetImg && targetImg.dataset.filtered === 'true') {
                        targetImg.classList.remove('filtered-image');
                    }
                    return originalExpand.apply(this, arguments);
                };
            }
        }, 1000);
    }

    // Set up a MutationObserver to run the filtering function whenever new posts are added.
    const observer = new MutationObserver(() => {
        applyPartialImageFiltering();
    });
    observer.observe(document.body, { childList: true, subtree: true });

    // Initial run
    applyPartialImageFiltering();
    patchExtensionCompatibility();
})();