☰

South Plus Image Preview

预览帖子图片

当前为 2024-12-22 提交的版本，查看 最新版本。

// ==UserScript==
// @name         South Plus Image Preview
// @namespace    http://tampermonkey.net/
// @version      0.1.6
// @description  预览帖子图片
// @author       lyscop
// @match        https://bbs.imoutolove.me/read.php*
// @match        *://*.blue-plus.net/thread.php?*
// @match        *://*.summer-plus.net/thread.php?*
// @match        *://*.spring-plus.net/thread.php?*
// @match        *://*.soul-plus.net/thread.php?*
// @match        *://*.south-plus.net/thread.php?*
// @match        *://*.north-plus.net/thread.php?*
// @match        *://*.snow-plus.net/thread.php?*
// @match        *://*.level-plus.net/thread.php?*
// @match        *://*.www.level-plus.net/thread.php?*
// @match        *://*.white-plus.net/thread.php?*
// @match        *://*.south-plus.org/thread.php?*
// @match        *://*.east-plus.net/thread.php?*
// @grant        GM_xmlhttpRequest
// @grant        GM_addStyle
// @license MIT
// ==/UserScript==

(function() {
    'use strict';

    // Create a preview div element
    const previewDiv = document.createElement('div');
    previewDiv.style.position = 'fixed';
    previewDiv.style.display = 'none';
    previewDiv.style.zIndex = '9999';
    previewDiv.style.border = '1px solid black';
    previewDiv.style.backgroundColor = 'white';
    document.body.appendChild(previewDiv);

    // Function to show the preview
    const showPreview = (imgUrl, x, y) => {
        const img = new Image();
        img.onload = () => {
            previewDiv.innerHTML = '';
            previewDiv.appendChild(img);
            previewDiv.style.left = `${x + 10}px`;
            if(y > window.innerHeight/2) {
                // previewDiv.style.bottom = `${y + 10}px`;
                previewDiv.style.top = `${y - window.innerHeight/2}px`;
            } else {
                previewDiv.style.top = `${y + 10}px`;
            }
            previewDiv.style.display = 'block';

            const maxWidth = window.innerWidth * 0.5;
            const maxHeight = window.innerHeight * 0.5;

            // if (img.width > maxWidth) {
            //     img.style.width = `${maxWidth}px`;
            // }
            if (img.height > window.innerHeight - y) {
               img.style.height = `${maxHeight}px`;
             }
        };
        img.src = imgUrl;
        img.style.maxWidth = '100%';
        img.style.maxHeight = '100%';
    };

    // Function to hide the preview
    const hidePreview = () => {
        previewDiv.style.display = 'none';
    };


    function addPreviewListeners(imageIcons) {
        imageIcons.forEach(icon => {
            icon.addEventListener('mouseover', (event) => {
                var postUrl = icon.parentNode.children[0].children[0].href;
                GM_xmlhttpRequest({
                    method: "GET",
                    url: postUrl,
                    onload: function(response) {
                        const html = response.responseText;
                        const parser = new DOMParser();
                        const doc = parser.parseFromString(html, 'text/html');
                        const imageElements = doc.querySelectorAll('.tpc_content img')[0];
                        const imageSrcs = imageElements.src;
                        // const imageSrcs = Array.from(imageElements).map(img => img.src);

                        if (imageSrcs.length > 0 && imageSrcs.indexOf('attachment') > -1) {
                            showPreview(imageSrcs, event.clientX, event.clientY);
                        } else {
                            console.log('未找到');
                        }
                    }
                });
            });

            icon.addEventListener('mouseout', () => {
                hidePreview();
            });
        });
    }

    //Mouse Scroll
    document.addEventListener('scroll', function(e){
        hidePreview();
    });

    // Initial setup
    const imageIcons = document.querySelectorAll('img[src="images/colorImagination/file/img.gif"]');
    addPreviewListeners(imageIcons);

     // Observe changes to the DOM for dynamic content loading
    const observer = new MutationObserver(mutations => {
        mutations.forEach(mutation => {
            if (mutation.addedNodes) {
                mutation.addedNodes.forEach(node => {
                    if (node.nodeType === Node.ELEMENT_NODE) {
                        const newImageIcons = node.querySelectorAll('img[src="images/colorImagination/file/img.gif"]');
                        addPreviewListeners(newImageIcons);
                    }
                });
            }
        });
    });

    // Start observing
    observer.observe(document.body, { childList: true, subtree: true });

    GM_addStyle(".tr3.t_one a:visited {color: #aaa;}");

})();