Unified 3D & Filter Controls with Button Adjustments

Add 3D pop-out effect and adjustable image filters (brightness, contrast, saturation) using plus/minus buttons in a unified panel.
安裝腳本 ?
發表問題、評論、或檢舉該腳本。
Wrap lines
// ==UserScript==
// @name         Unified 3D & Filter Controls with Button Adjustments
// @namespace    http://your.namespace.here/
// @version      2.1
// @description  Add 3D pop-out effect and adjustable image filters (brightness, contrast, saturation) using plus/minus buttons in a unified panel.
// @author       tae (modified)
// @match        *://*/*
// @grant        none
// @run-at       document-end
// ==/UserScript==

(function () {
    'use strict';

    window.addEventListener('load', () => {
        if (document.querySelector('.control-toggle-btn')) return;

        // Global filter values
        let is3D = false, brightness = 0, contrast = 0, saturation = 0;

        // Create Main Toggle Button for the Control Panel
        const controlToggleButton = document.createElement('button');
        controlToggleButton.textContent = 'Filters & 3D';
        controlToggleButton.className = 'control-toggle-btn';
        controlToggleButton.style.cssText =
            "position: fixed; top: 10px; right: 10px; background-color: #333; color: white; border: none; padding: 8px 12px; font-size: 14px; z-index: 2147483647; border-radius: 5px; cursor: pointer; box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3); transition: background 0.2s ease-in-out;";
        document.body.appendChild(controlToggleButton);

        // Create Unified Control Panel
        const controlPanel = document.createElement('div');
        controlPanel.className = 'control-panel';
        controlPanel.style.cssText =
            "position: fixed; top: 50px; right: 10px; background-color: rgba(0, 0, 0, 0.85); color: white; padding: 15px; z-index: 2147483646; border-radius: 10px; width: 200px; font-family: Arial, sans-serif; display: none; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);";
        document.body.appendChild(controlPanel);

        // Toggle panel visibility
        controlToggleButton.addEventListener('click', () => {
            controlPanel.style.display = controlPanel.style.display === 'none' ? 'block' : 'none';
        });

        // Create 3D Toggle Button inside the Panel
        const toggle3DButton = document.createElement('button');
        toggle3DButton.textContent = 'Enable 3D';
        toggle3DButton.style.cssText =
            "width: 100%; background-color: #444; color: white; border: none; padding: 8px; border-radius: 5px; cursor: pointer; margin-bottom: 10px;";
        controlPanel.appendChild(toggle3DButton);

        function update3DEffect() {
            document.querySelectorAll('img, video, .thumbnail').forEach(el => {
                if (is3D) {
                    el.style.transform = 'perspective(1200px) translateZ(50px) rotateX(15deg) rotateY(15deg)';
                    el.style.transition = 'transform 0.2s ease-out';
                } else {
                    el.style.transform = 'none';
                }
            });
        }

        toggle3DButton.addEventListener('click', () => {
            is3D = !is3D;
            update3DEffect();
            toggle3DButton.textContent = is3D ? 'Disable 3D' : 'Enable 3D';
            toggle3DButton.style.backgroundColor = is3D ? '#d9534f' : '#444'; // Red when enabled
        });

        update3DEffect(); // Ensure initial state is correct

        // Update CSS filters based on current values
        function updateFilters() {
            document.documentElement.style.filter =
                `brightness(${100 + brightness}%) contrast(${100 + contrast}%) saturate(${100 + saturation}%)`;
        }

        // Create button controls for filters
        function createButtonControl(labelText, currentValue, min, max, step, onChange) {
            const container = document.createElement('div');
            container.style.marginBottom = '10px';

            const label = document.createElement('span');
            label.textContent = `${labelText}: ${currentValue}`;
            label.style.display = 'block';
            label.style.marginBottom = '3px';

            // Container for the - and + buttons
            const buttonContainer = document.createElement('div');
            buttonContainer.style.display = 'flex';
            buttonContainer.style.justifyContent = 'space-between';

            const minusButton = document.createElement('button');
            minusButton.textContent = '–'; // en-dash for a nice minus sign
            minusButton.style.flex = '1';
            minusButton.style.marginRight = '5px';
            minusButton.addEventListener('click', () => {
                currentValue = Math.max(min, currentValue - step);
                label.textContent = `${labelText}: ${currentValue}`;
                onChange(currentValue);
            });

            const plusButton = document.createElement('button');
            plusButton.textContent = '+';
            plusButton.style.flex = '1';
            plusButton.style.marginLeft = '5px';
            plusButton.addEventListener('click', () => {
                currentValue = Math.min(max, currentValue + step);
                label.textContent = `${labelText}: ${currentValue}`;
                onChange(currentValue);
            });

            buttonContainer.appendChild(minusButton);
            buttonContainer.appendChild(plusButton);

            container.appendChild(label);
            container.appendChild(buttonContainer);
            controlPanel.appendChild(container);
        }

        // Add filter controls using plus/minus buttons
        createButtonControl('Brightness', brightness, -50, 50, 5, (value) => {
            brightness = value;
            updateFilters();
        });
        createButtonControl('Contrast', contrast, -50, 50, 5, (value) => {
            contrast = value;
            updateFilters();
        });
        createButtonControl('Saturation', saturation, -50, 50, 5, (value) => {
            saturation = value;
            updateFilters();
        });

        // Make the panel draggable
        function makeDraggable(element) {
            let isDragging = false, startX, startY, initialLeft, initialTop;

            element.addEventListener('mousedown', (event) => {
                isDragging = true;
                startX = event.clientX;
                startY = event.clientY;
                initialLeft = element.offsetLeft;
                initialTop = element.offsetTop;
                event.preventDefault();
            });

            document.addEventListener('mousemove', (event) => {
                if (isDragging) {
                    const deltaX = event.clientX - startX;
                    const deltaY = event.clientY - startY;
                    element.style.left = `${Math.max(0, initialLeft + deltaX)}px`;
                    element.style.top = `${Math.max(0, initialTop + deltaY)}px`;
                }
            });

            document.addEventListener('mouseup', () => {
                isDragging = false;
            });
        }

        makeDraggable(controlPanel);
    });
})();
欢迎访问Greasy Fork镜像
