☰

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 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         PixAI UI Helpers
  3. // @namespace    http://yourname.tampermonkey.net/
  4. // @version      1.3
  5. // @description  Helpers for PixAI: Toggle between 4x1 and 2x2 layouts for the image grid and toggle the visibility of the right sidebar.
  6. // @author       Yada
  7. // @match        https://pixai.art/generator/*
  8. // @icon         https://pixai.art/favicon.ico
  9. // @grant        none
  10. // @license      MIT
  11. // @supportURL   http://yoursupporturl.com
  12. // ==/UserScript==
  13.  
  14. (function() {
  15.     'use strict';
  16.  
  17.     let is2x2Layout = false;
  18.     let isRightBarCollapsed = false;
  19.  
  20.     // Function to get the target element for grid layout
  21.     function getGridTargetElement() {
  22.         return document.querySelector('#workbench-layout main > div > div:nth-child(2) > div > div:nth-child(1)');
  23.     }
  24.  
  25.     // Function to set the layout to 4x1
  26.     function setLayout4x1() {
  27.         const imageContainer = getGridTargetElement();
  28.         if (imageContainer) {
  29.             imageContainer.style.setProperty('--grid-cols', '4');
  30.             imageContainer.style.setProperty('--grid-rows', '1');
  31.             is2x2Layout = false;
  32.         }
  33.     }
  34.  
  35.     // Function to set the layout to 2x2
  36.     function setLayout2x2() {
  37.         const imageContainer = getGridTargetElement();
  38.         if (imageContainer) {
  39.             imageContainer.style.setProperty('--grid-cols', '2');
  40.             imageContainer.style.setProperty('--grid-rows', '2');
  41.             is2x2Layout = true;
  42.         }
  43.     }
  44.  
  45.     // Function to toggle between layouts
  46.     function toggleLayout() {
  47.         if (is2x2Layout) {
  48.             setLayout4x1();
  49.         } else {
  50.             setLayout2x2();
  51.         }
  52.     }
  53.  
  54.     // Function to set right bar width to zero
  55.     function setRightBarWidthToZero() {
  56.         const workbenchLayout = document.querySelector('#workbench-layout');
  57.         if (workbenchLayout) {
  58.             workbenchLayout.style.gridTemplateColumns = 'min-content 1fr 0px';
  59.             isRightBarCollapsed = true;
  60.         }
  61.     }
  62.  
  63.     // Function to restore the original width of the right bar
  64.     function restoreRightBarWidth() {
  65.         const workbenchLayout = document.querySelector('#workbench-layout');
  66.         if (workbenchLayout) {
  67.             workbenchLayout.style.gridTemplateColumns = 'min-content 1fr 380px';
  68.             isRightBarCollapsed = false;
  69.         }
  70.     }
  71.  
  72.     // Function to toggle the right bar's visibility
  73.     function toggleRightBar() {
  74.         if (isRightBarCollapsed) {
  75.             restoreRightBarWidth();
  76.         } else {
  77.             setRightBarWidthToZero();
  78.         }
  79.     }
  80.  
  81.     // Create button container
  82.     const buttonContainer = document.createElement('div');
  83.     buttonContainer.style.position = 'fixed';
  84.     buttonContainer.style.top = '10px';
  85.     buttonContainer.style.right = '10px';
  86.     buttonContainer.style.zIndex = '1000';
  87.     buttonContainer.style.display = 'flex';
  88.     buttonContainer.style.flexDirection = 'row';
  89.     buttonContainer.style.gap = '5px';
  90.  
  91.     // Button styles
  92.     const buttonStyle = {
  93.         display: 'flex',
  94.         justifyContent: 'center',
  95.         alignItems: 'center',
  96.         backgroundColor: 'transparent',
  97.         color: 'white',
  98.         fontFamily: 'Inter, sans-serif',
  99.         fontSize: '0.75rem',
  100.         fontWeight: '500',
  101.         textShadow: '0 1px 2px rgba(0, 0, 0, 0.5)',
  102.         padding: '0.25rem 0.5rem',
  103.         border: 'none',
  104.         borderRadius: '0.25rem',
  105.         cursor: 'pointer',
  106.         transition: 'background-color 0.3s',
  107.     };
  108.  
  109.     // Create toggle layout button
  110.     const toggleLayoutButton = document.createElement('button');
  111.     toggleLayoutButton.textContent = 'Toggle Image Layout';
  112.     Object.assign(toggleLayoutButton.style, buttonStyle);
  113.     toggleLayoutButton.onclick = toggleLayout;
  114.  
  115.     // Create toggle right bar button
  116.     const toggleRightBarButton = document.createElement('button');
  117.     toggleRightBarButton.textContent = 'Toggle Right Bar';
  118.     Object.assign(toggleRightBarButton.style, buttonStyle);
  119.     toggleRightBarButton.onclick = toggleRightBar;
  120.  
  121.     // Append buttons to container
  122.     buttonContainer.appendChild(toggleLayoutButton);
  123.     buttonContainer.appendChild(toggleRightBarButton);
  124.  
  125.     // Append button container to body
  126.     document.body.appendChild(buttonContainer);
  127.  
  128.     // Set initial layout based on current grid settings
  129.     const initialGridContainer = getGridTargetElement();
  130.     if (initialGridContainer && initialGridContainer.style.getPropertyValue('--grid-cols') === '4') {
  131.         is2x2Layout = false;
  132.     } else {
  133.         is2x2Layout = true;
  134.     }
  135.  
  136.     // Set initial state for the right bar
  137.     const workbenchLayout = document.querySelector('#workbench-layout');
  138.     if (workbenchLayout && workbenchLayout.style.gridTemplateColumns.includes('0px')) {
  139.         isRightBarCollapsed = true;
  140.     } else {
  141.         isRightBarCollapsed = false;
  142.     }
  143. })();