Useless Things Series: Text Hider Overlay

Overlay to hide text with blur effect and draggable/resizable features.
当前为 2024-02-24 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         Useless Things Series: Text Hider Overlay
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Overlay to hide text with blur effect and draggable/resizable features.
// @match        *://*/*
// @grant        none
// @license      MIT
// @namespace https://greasyfork.org/users/1126616
// ==/UserScript==
(function() {
    'use strict';

    // Create overlay elements
    const overlay = document.createElement('div');
    overlay.id = 'text-hide-overlay';
    overlay.innerHTML = `
        <div id="draggable"></div>
        <div id="resize-controls">
            <div id="resize-minus">-</div>
            <input type="number" id="overlay-size" value="200" min="100">
            <div id="resize-plus">+</div>
        </div>
        <input type="range" min="0" max="10" value="5" id="blur-slider">
    `;
    document.body.appendChild(overlay);

    // Style overlay
    GM_addStyle(`
#text-hide-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    border: 1px solid #ccc;
    overflow: hidden;
    filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    pointer-events: none; /* Allow mouse events to pass through */
    display: none; /* Initially hide the overlay */
}

#text-hide-overlay * {
    pointer-events: auto; /* Enable mouse events for all children */
}

#draggable {
    width: 100%;
    height: 20px;
    cursor: move;
    background-color: #dc143c;
}

#resize-controls {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    background-color: #dc143c;

}

#resize-plus,
#resize-minus {
    width: 20px;
    height: 20px;
    cursor: pointer;
    background-color: #fff;
    text-align: center;
    line-height: 20px;
    background-color: #dc143c;

}

#resize-plus {
    margin-left: 5px;
    margin-right: 5px;
    background-color: #dc143c;
}

#resize-minus {
    margin-right: 5px;
    background-color: #dc143c;
}

#overlay-size {
    width: 50px;
    text-align: center;
    background-color: #dc143c;
}

#blur-slider {
    position: relative;
    z-index: 9999;
    background-color: #dc143c;

}

    `);

    // Drag and drop functionality
    let isDragging = false;
    let offsetX, offsetY;

    document.getElementById('draggable').addEventListener('mousedown', startDrag);

    function startDrag(e) {
        isDragging = true;
        offsetX = e.clientX - overlay.offsetLeft;
        offsetY = e.clientY - overlay.offsetTop;
        document.addEventListener('mousemove', drag);
        document.addEventListener('mouseup', stopDrag);
    }

    function drag(e) {
        if (isDragging) {
            overlay.style.left = e.clientX - offsetX + 'px';
            overlay.style.top = e.clientY - offsetY + 'px';
        }
    }

    function stopDrag() {
        isDragging = false;
        document.removeEventListener('mousemove', drag);
        document.removeEventListener('mouseup', stopDrag);
    }
    // Toggle overlay visibility
    function toggleOverlay() {
        const overlay = document.getElementById('text-hide-overlay');
        overlay.style.display = overlay.style.display === 'none' ? 'block' : 'none';
    }

    // Functionality for resizing the overlay
    function resizeOverlay(newSize) {
        overlay.style.width = newSize + 'px';
        overlay.style.height = newSize + 'px';
        document.getElementById('overlay-size').value = newSize;
    }

    // Call toggleOverlay function when a specific key is pressed
    document.addEventListener('keydown', function(event) {
        if (event.altKey && event.key === '/') {
            toggleOverlay();
        }
    });

    // Resize functionality
    document.getElementById('resize-plus').addEventListener('click', () => {
        const newSize = parseInt(document.getElementById('overlay-size').value) + 10;
        document.getElementById('overlay-size').value = newSize;
        overlay.style.width = newSize + 'px';
        overlay.style.height = newSize + 'px';
    });

    document.getElementById('resize-minus').addEventListener('click', () => {
        const newSize = parseInt(document.getElementById('overlay-size').value) - 10;
        if (newSize >= 100) {
            document.getElementById('overlay-size').value = newSize;
            overlay.style.width = newSize + 'px';
            overlay.style.height = newSize + 'px';
        }
    });

    // Set default blur value to 0
    document.getElementById('blur-slider').value = 0;

    // Apply initial blur to the overlay
    const initialBlurValue = 0;
    overlay.style.filter = `blur(${initialBlurValue}px)`;
    overlay.style.webkitFilter = `blur(${initialBlurValue}px)`;

    // Slider functionality
    document.getElementById('blur-slider').addEventListener('input', (e) => {
        const blurValue = e.target.value;
        overlay.style.filter = `blur(${blurValue}px)`;
        overlay.style.webkitFilter = `blur(${blurValue}px)`;
    });


    document.getElementById('overlay-size').addEventListener('keyup', (e) => {
        if (e.key === 'Enter') {
            const newSize = parseInt(document.getElementById('overlay-size').value);
            if (!isNaN(newSize) && newSize >= 100) {
                resizeOverlay(newSize);
            }
        }
    });


})();