☰

PixAI Right Bar Width Control

A script to set the right bar width to zero on PixAI's generator page with an option to restore the original width.

目前為 2024-08-21 提交的版本，檢視 最新版本。

// ==UserScript==
// @name         PixAI Right Bar Width Control
// @namespace    http://yourname.tampermonkey.net/
// @version      1.2
// @description  A script to set the right bar width to zero on PixAI's generator page with an option to restore the original width.
// @author       Yada
// @match        https://pixai.art/generator/*
// @icon         https://pixai.art/favicon.ico
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    let buttonsAdded = false;

    // Function to set right bar width to zero
    function setRightBarWidthToZero() {
        const workbenchLayout = document.querySelector('#workbench-layout');
        if (workbenchLayout) {
            workbenchLayout.style.gridTemplateColumns = 'min-content 1fr 0px';
        }
    }

    // Function to restore the original width
    function restoreRightBarWidth() {
        const workbenchLayout = document.querySelector('#workbench-layout');
        if (workbenchLayout) {
            workbenchLayout.style.gridTemplateColumns = 'min-content 1fr 380px';
        }
    }

    // Function to add the buttons
    function addButtons() {
        if (buttonsAdded) return;

        // Create button container
        const buttonContainer = document.createElement('div');
        buttonContainer.style.position = 'fixed';
        buttonContainer.style.top = '10px';
        buttonContainer.style.right = '10px';
        buttonContainer.style.zIndex = '1000';
        buttonContainer.style.display = 'flex';
        buttonContainer.style.flexDirection = 'row';
        buttonContainer.style.gap = '5px';

        // Common button styles
        const buttonStyle = {
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: 'transparent',
            color: 'white',
            fontFamily: 'Inter, sans-serif',
            fontSize: '0.75rem',
            fontWeight: '500',
            textShadow: '0 1px 2px rgba(0, 0, 0, 0.5)',
            padding: '0.25rem 0.5rem',
            border: 'none',
            borderRadius: '0.25rem',
            cursor: 'pointer',
            transition: 'background-color 0.3s',
        };

        // Function to apply common styles to a button
        function applyButtonStyle(button) {
            for (const [key, value] of Object.entries(buttonStyle)) {
                button.style[key] = value;
            }

            // Add hover effect
            button.addEventListener('mouseover', () => {
                button.style.backgroundColor = 'rgba(0, 0, 0, 0.1)';
            });

            button.addEventListener('mouseout', () => {
                button.style.backgroundColor = 'transparent';
            });
        }

        // Create button to set right bar width to zero
        const zeroButton = document.createElement('button');
        zeroButton.textContent = 'Collapse';
        applyButtonStyle(zeroButton);
        zeroButton.onclick = setRightBarWidthToZero;

        // Create button to restore original width
        const restoreButton = document.createElement('button');
        restoreButton.textContent = 'Restore';
        applyButtonStyle(restoreButton);
        restoreButton.onclick = restoreRightBarWidth;

        // Append buttons to container
        buttonContainer.appendChild(zeroButton);
        buttonContainer.appendChild(restoreButton);

        // Append button container to body
        document.body.appendChild(buttonContainer);

        buttonsAdded = true;
    }

    // Function to remove the buttons
    function removeButtons() {
        const buttonContainer = document.querySelector('div[style*="position: fixed"]');
        if (buttonContainer) {
            buttonContainer.remove();
            buttonsAdded = false;
        }
    }

    // Function to monitor URL changes
    function monitorURLChanges() {
        const currentURL = window.location.href;

        if (currentURL.includes('/generator/')) {
            addButtons();
        } else {
            removeButtons();
        }
    }

    // Monitor for history changes (when navigating between pages using internal links)
    window.addEventListener('popstate', monitorURLChanges);

    // Monitor for pushState changes (when navigating between pages using internal links)
    const originalPushState = history.pushState;
    history.pushState = function() {
        originalPushState.apply(this, arguments);
        monitorURLChanges();
    };

    // Initial check to add/remove buttons based on the current page
    monitorURLChanges();
})();