☰

Useless Things Series: Text Hider Overlay

Overlay to hide text with blur effect and draggable/resizable features. Good for when using a computer or laptop in a public area. With create(alt h) multiple overlays, remove(alt j) the last created overlay, remove all overlay(alt k) except one, hide or show(alt l) all overlays.

// ==UserScript==
// @name         Useless Things Series: Text Hider Overlay
// @namespace    http://tampermonkey.net/
// @version      2.0
// @description  Overlay to hide text with blur effect and draggable/resizable features. Good for when using a computer or laptop in a public area.  With create(alt h) multiple overlays, remove(alt j) the last created overlay, remove all overlay(alt k) except one, hide or show(alt l) all overlays.
// @match        *://*/*
// @grant        GM_addStyle
// @license      MIT
// @namespace https://greasyfork.org/users/1126616
// ==/UserScript==

(function() {
    'use strict';
    // Function to create a new overlay
    function createOverlay() {
        const overlay = document.createElement('div');
        overlay.className = 'text-hide-overlay';
        overlay.innerHTML = `
            <div class="draggable-handle"></div>
            <div class="resize-controls">
                <div class="resize-minus">-</div>
                <input type="number" class="overlay-size" value="200" min="100">
                <div class="resize-plus">+</div>
            </div>
            <input type="range" min="0" max="10" value="5" class="blur-slider">
        `;
        document.body.appendChild(overlay);

        // Apply styles
        overlay.style.position = 'fixed';
        overlay.style.top = '50%';
        overlay.style.left = '50%';
        overlay.style.transform = 'translate(-50%, -50%)';
        overlay.style.width = '200px';
        overlay.style.height = '200px';
        overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
        overlay.style.zIndex = '9999';
        overlay.style.border = '1px solid #ccc';
        overlay.style.overflow = 'hidden';
        overlay.style.filter = 'blur(5px)';
        overlay.style.webkitBackdropFilter = 'blur(5px)';
        overlay.style.backdropFilter = 'blur(5px)';
        overlay.style.pointerEvents = 'none'; /* Allow mouse events to pass through */
        overlay.style.display = 'none'; /* Initially hide the overlay */

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

        const draggableHandle = overlay.querySelector('.draggable-handle');

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

        // Functionality for resizing the overlay
        const resizePlus = overlay.querySelector('.resize-plus');
        const resizeMinus = overlay.querySelector('.resize-minus');
        const overlaySize = overlay.querySelector('.overlay-size');
        const blurSlider = overlay.querySelector('.blur-slider');

        resizePlus.addEventListener('click', () => {
            const newSize = parseInt(overlaySize.value) + 10;
            overlaySize.value = newSize;
            overlay.style.width = newSize + 'px';
            overlay.style.height = newSize + 'px';
        });

        resizeMinus.addEventListener('click', () => {
            const newSize = parseInt(overlaySize.value) - 10;
            if (newSize >= 100) {
                overlaySize.value = newSize;
                overlay.style.width = newSize + 'px';
                overlay.style.height = newSize + 'px';
            }
        });

        // Set default blur value to 0
        blurSlider.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
        blurSlider.addEventListener('input', (e) => {
            const blurValue = e.target.value;
            overlay.style.filter = `blur(${blurValue}px)`;
            overlay.style.webkitFilter = `blur(${blurValue}px)`;
        });

        overlaySize.addEventListener('keyup', (e) => {
            if (e.key === 'Enter') {
                const newSize = parseInt(overlaySize.value);
                if (!isNaN(newSize) && newSize >= 100) {
                    overlay.style.width = newSize + 'px';
                    overlay.style.height = newSize + 'px';
                }
            }
        });

        return overlay;
    }

    // Function to create overlay
    function toggleOverlay(overlay) {
        overlay.style.display = overlay.style.display === 'none' ? 'block' : 'none';
    }

    // Function to remove the last created overlay when 'j' is pressed
    function removeLastOverlay() {
        const overlay = document.querySelector('.text-hide-overlay:last-child');
        if (overlay) {
            overlay.parentNode.removeChild(overlay);
        }
    }

    // Function to remove all overlays except for one
    function removeAllOverlaysExceptOne() {
        const overlays = document.querySelectorAll('.text-hide-overlay');
        const numOverlays = overlays.length;
        if (numOverlays > 1) {
            for (let i = 0; i < numOverlays - 1; i++) {
                overlays[i].parentNode.removeChild(overlays[i]);
            }
        }
    }

    // Function to hide or show all overlays
    function toggleAllOverlays() {
        const overlays = document.querySelectorAll('.text-hide-overlay');
        overlays.forEach(overlay => {
            overlay.style.display = overlay.style.display === 'none' ? 'block' : 'none';
        });
    }

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

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

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

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

    // Adding GM styles
    GM_addStyle(`
.text-hide-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    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-handle {
    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;
}

.resize-minus {
    margin-right: 5px;
}

.overlay-size {
    width: 50px;
    text-align: center;
}

.blur-slider {
    position: relative;
    z-index: 9999;
}
    `);

})();