☰

Sleazy Fork is available in English.

South Plus Image Preview

预览帖子图片

// ==UserScript==
// @name         South Plus Image Preview
// @namespace    http://tampermonkey.net/
// @version      0.1.7
// @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) => {
                showclipboard('开始查找');
                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 {
                            showclipboard('未找到', 0);
                        }
                    }
                });
            });

            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 });

    var wrapEle = document.createElement('div');
    wrapEle.id = "wrap";
    wrapEle.setAttribute('style', '' +
                         'position:fixed;' +
                         'right:0px;' +
                         'top:0px;' +
                         'width:300px;' +//最大宽度
                         //'padding:40px;' +
                         'background-color:rgba(255,255,255,0)!important;' +
                         'z-index:2147483647!important;' +//显示最顶层
                         '');

    //document.body.appendChild(wrapEle);//元素加入body
    document.documentElement.appendChild(wrapEle);//元素加入body
    
        function showclipboard(text, c, d) {
        const wrapDiv = document.getElementById("wrap");
        var div = document.createElement('div');
        if(c == 0) {
            div.setAttribute('style', '' +
                             'display:none!important;' +//去掉直接显示
                             'left:0px;' +
                             'top:0px;' +
                             'margin-left:auto;' +//table块靠右显示
                             //'position:absolute!important;' +
                             'font-size:13px!important;' +
                             'overflow:auto!important;' +
                             'background-color:rgba(255,99,71,0.5)!important;' +//蓝
                             'font-family:sans-serif,Arial!important;' +
                             'font-weight:normal!important;' +
                             'font-color:rgba(255,255,255,1)!important;' +
                             'text-align:left!important;' +//左对齐
                             'color:#fff!important;' +//字体颜色白
                             //'padding:0.5em 1em!important;' +
                             'border-radius:3px!important;' +
                             //'border:1px solid #ccc!important;' +
                             'border: 1px solid rgb(10 10 10 / 10%) !important;'+
                             //'max-width:350px!important;' +
                             'max-height:1216px!important;' +
                             'z-index:2147483647!important;' +
                             '');
        } else if(c == 1) {
            div.setAttribute('style', '' +
                             'display:none!important;' +//去掉直接显示
                             'left:0px;' +
                             'top:0px;' +
                             'margin-left:auto;' +//table块靠右显示
                             //'position:absolute!important;' +
                             'font-size:13px!important;' +
                             'overflow:auto!important;' +
                             'background-color:rgba(8,46,84,0.6)!important;' +//红
                             'font-family:sans-serif,Arial!important;' +
                             'font-weight:normal!important;' +
                             'text-align:left!important;' +//左对齐
                             'color:#fff!important;' +
                             'padding:0.5em 1em!important;' +
                             'border-radius:3px!important;' +
                             //'border:1px solid #ccc!important;' +
                             'border: 1px solid rgb(10 10 10 / 10%) !important;'+
                             //'max-width:350px!important;' +
                             'max-height:1216px!important;' +
                             'z-index:2147483647!important;' +
                             '');
        } else {
            div.setAttribute('style', '' +
                             'display:none!important;' +//去掉直接显示
                             'left:0px;' +
                             'top:0px;' +
                             'margin-left:auto;' +//table块靠右显示
                             //'position:absolute!important;' +
                             'font-size:13px!important;' +
                             'overflow:auto!important;' +
                             'background-color:rgba(255,255,255,0.7)!important;' +//灰
                             'font-family:sans-serif,Arial!important;' +
                             'font-weight:normal!important;' +
                             'text-align:left!important;' +//左对齐
                             'color:#000!important;' +
                             //'padding:0.5em 1em!important;' +
                             'border-radius:3px!important;' +
                             //'border:1px solid #ccc!important;' +
                             'border: 1px solid rgb(10 10 10 / 10%) !important;'+
                             //'max-width:350px!important;' +
                             'max-height:1216px!important;' +
                             'z-index:2147483647!important;' +
                             '');
        }

        div.onclick = function(){
            if(d) {
                GM_openInTab(d, {
                    active: false
                });
                return false;
            }
        }

        div.innerHTML = text;
        div.style.display = 'table';// 换行显示结果
        div.style.cursor = "pointer";
        setTimeout(() => {
            //fadeIn(div);
        }, 1800)
        let fc = wrapDiv.firstElementChild
        if (fc) {
            wrapDiv.insertBefore(div,fc)
        } else {
            wrapDiv.appendChild(div);
        }
        setTimeout(() => {
            fadeOut(div);
            //div.parentNode.removeChild(div);
        },15000)

        //鼠标滚动
        document.addEventListener('scroll', function(e){
            fadeOut(div);

        });

    }

    function fadeOut(el){
        el.style.opacity = 1;

        (function fade() {
            if ((el.style.opacity -= .1) < 0) {
                el.style.display = "none";
            } else {
                requestAnimationFrame(fade);
            }
        })();
    }

    //渐入

    function fadeIn(el, display){
        el.style.opacity = 0;
        el.style.display = "block";

        (function fade() {
            var val = parseFloat(el.style.opacity);
            if (!((val += .1) > 1)) {
                el.style.opacity = val;
                requestAnimationFrame(fade);
            }
        })();
    }

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

})();