Image Names

Load Image Pokemon Name By HyperBeam
当前为 2024-08-05 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         Image Names
// @namespace    http://tampermonkey.net/
// @version      1.3
// @description  Load Image Pokemon Name By HyperBeam
// @run-at       document-end
// @author       @HyperBeam & @Jann
// @match        https://sangtacviet.vip/truyen/*
// @license      GPL-3.0
// @icon64       https://sangtacviet.vip/favicon.png
// @grant        GM_setValue
// @grant        GM_getValue
// ==/UserScript==

(function() {
    'use strict';

    const BUTTON_STYLES = {
        fontSize: '14px',
        outline: 'none',
        borderRadius: '100%',
        height: '50px',
        width: '50px',
        marginBottom: '10px',
        cursor: 'pointer',
        border: '1px solid #ccc',
        backgroundColor: '#f0f0f0',
        transition: 'background-color 0.3s'
    };

    const IMAGE_STYLES = {
        '.pokemon-image': {
            display: 'inline-block',
            margin: '-25px -5px -20px 0',
            width: '60px',
            height: '60px'
        },
        '.pokemon-type': {
            display: 'inline-block',
            margin: '-5px -2px 0px 2px',
            width: '25px',
            height: '25px'
        },
        '.pokemon-ball': {
            display: 'inline-block',
            margin: '-5px 0 0 2px',
            width: '35px',
            height: '35px'
        }
    };

    const boxMenu = document.createElement('div');
    Object.assign(boxMenu.style, {
        position: 'fixed',
        bottom: '100px',
        right: '10px',
        display: 'flex',
        flexDirection: 'column',
    });

    let config = {
        showCopyButton: true,
        showStartButton: true,
        showNamesButton: true,
        showReloadButton: true
    };

    function loadConfig() {
        const savedConfig = GM_getValue('imageNamesConfig');
        if (savedConfig) {
            config = JSON.parse(savedConfig);
        }
    }

    function saveConfig() {
        GM_setValue('imageNamesConfig', JSON.stringify(config));
    }

    function loadImage() {
        const italicTags = document.getElementsByTagName('i');
        Array.from(italicTags).forEach(tag => {
            if (tag.textContent.includes('<img')) {
                tag.innerHTML = tag.textContent;
            }
        });
        Object.entries(IMAGE_STYLES).forEach(([selector, styles]) => {
            document.querySelectorAll(selector).forEach(element => {
                Object.assign(element.style, styles);
            });
        });
    }

    function createButton(text, onClickFunction) {
        const button = document.createElement('button');
        button.textContent = text;
        Object.assign(button.style, BUTTON_STYLES);

        button.addEventListener('mouseover', () => {button.style.backgroundColor = '#e0e0e0'});
        button.addEventListener('mouseout', () => {button.style.backgroundColor = '#f0f0f0'});

        button.addEventListener('click', onClickFunction);

        console.log(boxMenu);
        boxMenu.appendChild(button);
        document.body.appendChild(boxMenu);
        return button;
    }

    async function copyName() {
        if (!config.showCopyButton) return;
        const copyButton = createButton('Copy', null);
        copyButton.addEventListener('click', async () => {
            const copyText = document.querySelector("#namewd").value || '';
            try {
                await navigator.clipboard.writeText(copyText);
                console.log(copyText);
                copyButton.textContent = 'Copied!';
                setTimeout(() => {copyButton.textContent = 'Copy'}, 2000);
            } catch (err) {
                copyButton.textContent = 'Error!';
                console.error('Failed to copy:', err);
            }
        });
    }

    function runName() {
        if (!config.showStartButton) return;
        createButton('Start', () => {
            document.querySelector("button[onclick='excute()']")?.click();
        });
    }

    function showNS() {
        if (!config.showNamesButton) return;
        createButton('Names', () => {
            document.querySelector("button[onclick='showNS()']")?.click();
        });
    }

    function createConfigMenu() {
        const modal = document.createElement('div');
        modal.style.cssText = `
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        `;

        const menuContent = document.createElement('div');
        menuContent.style.cssText = `
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            max-width: 300px;
            width: 90%;
        `;

        const title = document.createElement('h2');
        title.textContent = 'Configuration';
        title.style.marginTop = '0';

        menuContent.appendChild(title);

        const options = [
            { key: 'showCopyButton', label: 'Show Copy Button' },
            { key: 'showStartButton', label: 'Show Start Button' },
            { key: 'showNamesButton', label: 'Show Names Button' },
            { key: 'showReloadButton', label: 'Show Reload Button' }
        ];

        options.forEach(option => {
            const label = document.createElement('label');
            label.style.display = 'block';
            label.style.marginBottom = '10px';

            const checkbox = document.createElement('input');
            checkbox.type = 'checkbox';
            checkbox.checked = config[option.key];
            checkbox.id = option.key; // Thêm id cho checkbox
            checkbox.style.webkitAppearance = 'auto';

            // Sửa lỗi checkbox không hoạt động
            checkbox.addEventListener('change', (e) => {
                config[option.key] = e.target.checked;
                console.log(config); // In ra console để kiểm tra
            });

            label.appendChild(checkbox);
            label.appendChild(document.createTextNode(' ' + option.label));
            menuContent.appendChild(label);
        });

        const saveButton = document.createElement('button');
        saveButton.textContent = 'Save';
        saveButton.style.marginRight = '10px';
        saveButton.addEventListener('click', () => {
            saveConfig();
            modal.remove();
            location.reload();
        });

        const cancelButton = document.createElement('button');
        cancelButton.textContent = 'Cancel';
        cancelButton.addEventListener('click', () => {
            modal.remove();
        });

        menuContent.appendChild(saveButton);
        menuContent.appendChild(cancelButton);

        modal.appendChild(menuContent);
        document.body.appendChild(modal);
    }

    function init() {

        loadConfig();
        loadImage();
        document.querySelector('[onclick="excute()"]')?.addEventListener('click', loadImage);
        copyName();
        runName();
        showNS();
        if (config.showReloadButton) {
            createButton('Reload', () => {
                document.querySelector("button[onclick='excute()']")?.click();
            });
        }
        createButton('Config', createConfigMenu);
    }

    setTimeout(init, 3000);
})();
欢迎访问Greasy Fork镜像
