☰

PixAI UI Helpers

Helpers for PixAI: Toggle between 4x1 and 2x2 layouts for the image grid and toggle the visibility of the right sidebar.

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

// ==UserScript==
// @name         PixAI UI Helpers
// @namespace    http://yourname.tampermonkey.net/
// @version      1.3
// @description  Helpers for PixAI: Toggle between 4x1 and 2x2 layouts for the image grid and toggle the visibility of the right sidebar.
// @author       Yada
// @match        https://pixai.art/generator/*
// @icon         https://pixai.art/favicon.ico
// @grant        none
// @license      MIT
// @supportURL   http://yoursupporturl.com
// ==/UserScript==

(function() {
    'use strict';

    let is2x2Layout = false;
    let isRightBarCollapsed = false;

    // Function to get the target element for grid layout
    function getGridTargetElement() {
        return document.querySelector('#workbench-layout main > div > div:nth-child(2) > div > div:nth-child(1)');
    }

    // Function to set the layout to 4x1
    function setLayout4x1() {
        const imageContainer = getGridTargetElement();
        if (imageContainer) {
            imageContainer.style.setProperty('--grid-cols', '4');
            imageContainer.style.setProperty('--grid-rows', '1');
            is2x2Layout = false;
        }
    }

    // Function to set the layout to 2x2
    function setLayout2x2() {
        const imageContainer = getGridTargetElement();
        if (imageContainer) {
            imageContainer.style.setProperty('--grid-cols', '2');
            imageContainer.style.setProperty('--grid-rows', '2');
            is2x2Layout = true;
        }
    }

    // Function to toggle between layouts
    function toggleLayout() {
        if (is2x2Layout) {
            setLayout4x1();
        } else {
            setLayout2x2();
        }
    }

    // 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';
            isRightBarCollapsed = true;
        }
    }

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

    // Function to toggle the right bar's visibility
    function toggleRightBar() {
        if (isRightBarCollapsed) {
            restoreRightBarWidth();
        } else {
            setRightBarWidthToZero();
        }
    }

    // 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';

    // 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',
    };

    // Create toggle layout button
    const toggleLayoutButton = document.createElement('button');
    toggleLayoutButton.textContent = 'Toggle Image Layout';
    Object.assign(toggleLayoutButton.style, buttonStyle);
    toggleLayoutButton.onclick = toggleLayout;

    // Create toggle right bar button
    const toggleRightBarButton = document.createElement('button');
    toggleRightBarButton.textContent = 'Toggle Right Bar';
    Object.assign(toggleRightBarButton.style, buttonStyle);
    toggleRightBarButton.onclick = toggleRightBar;

    // Append buttons to container
    buttonContainer.appendChild(toggleLayoutButton);
    buttonContainer.appendChild(toggleRightBarButton);

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

    // Set initial layout based on current grid settings
    const initialGridContainer = getGridTargetElement();
    if (initialGridContainer && initialGridContainer.style.getPropertyValue('--grid-cols') === '4') {
        is2x2Layout = false;
    } else {
        is2x2Layout = true;
    }

    // Set initial state for the right bar
    const workbenchLayout = document.querySelector('#workbench-layout');
    if (workbenchLayout && workbenchLayout.style.gridTemplateColumns.includes('0px')) {
        isRightBarCollapsed = true;
    } else {
        isRightBarCollapsed = false;
    }
})();