真紅 SFW

屏蔽图片,公共场合也能上真紅,防止突出出现的色图导致社死!

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Greasemonkey 油猴子Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Userscripts ,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name         真紅 SFW
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  屏蔽图片,公共场合也能上真紅,防止突出出现的色图导致社死!
// @author       biolxy
// @match        https://galgame.dev/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=galgame.dev
// @grant        none
// @license      MIT
// ==/UserScript==
// @ref:         修改自 https://greasyfork.org/zh-CN/scripts/369659-north-plus-sfw

(function() {
    'use strict';

    const TIME_FADE_IN = 2;
    const TIME_FADE_OUT = 0.1;


    const CLS_IMG_LIST = ['img'];
    const CLS_IMG_BLOCKER = 'img-blocker';
    const CLS_BLOCKER_ENABLED = 'blocker-enabled';
    const BLOCKER_STYLE = `
    div.${CLS_BLOCKER_ENABLED} {
        position:absolute;
        background-color:#F2F3F4;
        opacity: 1;
        transition: opacity ${TIME_FADE_OUT}s;
    }
    div.${CLS_BLOCKER_ENABLED}:hover {
        opacity: 0;
        transition: opacity ${TIME_FADE_IN}s;
    }`;

    const DEFAULT_BLK_W = 1200; //495;
    const DEFAULT_BLW_H = 1000; //880;

    // 为每个图片添加遮挡层和事件监听
    // 2. CODE ENTRYPOINT.
    
    // 移除对头像类图片的处理
    let imgs = [];
    CLS_IMG_LIST.forEach(cls => {
        Array.from(document.body.querySelectorAll(cls)).filter(
            (im) => {
                if(!im.src.includes('component')){
                    removeLoadAttribute(im);
                    imgs.push(im);
                };
            });
    });

    if (imgs) {
        let blockerStyleTag = document.createElement('style');
        blockerStyleTag.textContent = BLOCKER_STYLE;
        document.head.append(blockerStyleTag);

        imgs.forEach((im) => {
            imgBlockerCb(im);
        });
    }


    function imgBlockerCb(im) {
        let blocker = document.createElement('div');
        blocker.classList.add(CLS_IMG_BLOCKER);
        blocker.classList.add(CLS_BLOCKER_ENABLED);
        let h = im.height ? im.height : DEFAULT_BLW_H;
        let w = im.width ? im.width : DEFAULT_BLK_W;
        setSize(blocker, h, w);
        let wrapper = document.createElement('div');
        im.parentElement.insertBefore(wrapper, im);
        wrapper.append(blocker, im);
        im.addEventListener('load', () => {
            setSize(blocker, im.height, im.width);
        });
        im.addEventListener('error', () =>{
            setSize(blocker, h, w);
        });
    }

    function setSize(elem, h, w) {
        h += 20;
        w += 20;
        elem.style.height = `${h}px`;
        elem.style.width = `${w}px`;
    }

    // 移除 _load 属性
    function removeLoadAttribute(img) {
        const loadAttributes = ['_load', 'lazyloaded', 'lazyloadthumb'];
        loadAttributes.forEach(attr => {
            if (img.getAttribute(attr) !== null) {
                img.removeAttribute(attr);
            }
        });
    }

})();