☰

Useless Things Series: Brightness Overlay with Slider

Add an overlay to the entire webpage with a brightness slider positioned at the center below the screen. The brightness or slider Appear and Disappear when 'b' or 'c' is clicked.

当前为 2024-02-24 提交的版本，查看 最新版本。

// ==UserScript==
// @name         Useless Things Series: Brightness Overlay with Slider
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Add an overlay to the entire webpage with a brightness slider positioned at the center below the screen. The brightness or slider Appear and Disappear when 'b' or 'c' is clicked.
// @match        *://*/*
// @grant        none
// @license      MIT
// @namespace https://greasyfork.org/users/1126616
// ==/UserScript==

(function() {
    'use strict';

    let overlayVisible = false;
    let brightnessSliderVisible = false;
    const defaultBrightnessValue = 100;
    let brightnessValue = localStorage.getItem('brightness') || defaultBrightnessValue;

    // Create overlay element
    const overlay = document.createElement('div');
    overlay.style.position = 'fixed';
    overlay.style.top = 0;
    overlay.style.left = 0;
    overlay.style.width = '100%';
    overlay.style.height = '100%';
    overlay.style.backgroundColor = `rgba(0, 0, 0, ${1 - brightnessValue / 100})`;
    overlay.style.zIndex = 9999;
    overlay.style.display = 'none';

    // Create brightness slider element
    const brightnessSlider = document.createElement('input');
    brightnessSlider.type = 'range';
    brightnessSlider.min = '0';
    brightnessSlider.max = '100';
    brightnessSlider.value = brightnessValue;
    brightnessSlider.style.width = '80%';
    brightnessSlider.style.margin = '20px auto';
    brightnessSlider.style.position = 'fixed';
    brightnessSlider.style.bottom = '50px';
    brightnessSlider.style.left = '50%';
    brightnessSlider.style.transform = 'translateX(-50%)';
    brightnessSlider.style.zIndex = 10000;
    brightnessSlider.style.background = 'linear-gradient(to right, #333, #fff)';
    brightnessSlider.style.borderRadius = '5px';
    brightnessSlider.style.border = 'none';
    brightnessSlider.style.padding = '5px';
    brightnessSlider.style.boxShadow = '0 2px 5px rgba(0, 0, 0, 0.3)';
    brightnessSlider.style.display = 'none';

    // Append overlay and slider to the body
    document.body.appendChild(overlay);
    document.body.appendChild(brightnessSlider);

    // Function to update brightness
    function updateBrightness(value) {
        overlay.style.backgroundColor = `rgba(0, 0, 0, ${1 - value / 100})`;
        localStorage.setItem('brightness', value);
    }

    // Event listener for slider input
    brightnessSlider.addEventListener('input', function() {
        const brightnessValue = this.value;
        updateBrightness(brightnessValue);
        // Reset the auto-hide timeout whenever the slider is interacted with
        resetAutoHideTimeout();
    });

    // Variable to hold timeout for automatic slider disappearance
    let autoHideTimeout;

    // Function to reset the auto-hide timeout
    function resetAutoHideTimeout() {
        // Clear the existing timeout
        clearTimeout(autoHideTimeout);
        // Set a new timeout to hide slider after 3 seconds if user is not adjusting it
        autoHideTimeout = setTimeout(() => {
            brightnessSlider.style.display = 'none';
            brightnessSliderVisible = false;
        }, 3000);
    }

    // Event listener for keydown events
    document.addEventListener('keydown', function(event) {
        if (event.key === 'b') {
            if (overlayVisible) {
                overlay.style.display = 'none';
                brightnessSlider.style.display = 'none';
                brightnessSliderVisible = false;
            } else {
                overlay.style.display = 'block';
                if (!brightnessSliderVisible) {
                    brightnessSlider.style.display = 'block';
                    brightnessSliderVisible = true;
                    // Reset the auto-hide timeout
                    resetAutoHideTimeout();
                }
            }
            overlayVisible = !overlayVisible;
        } else if (event.key === 'c') {
            if (brightnessSliderVisible) {
                brightnessSlider.style.display = 'none';
                brightnessSliderVisible = false;
            } else {
                brightnessSlider.style.display = 'block';
                brightnessSliderVisible = true;
            }
        }
    });
})();