☰

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

  1. // ==UserScript==
  2. // @name         PixAI Right Bar Width Control
  3. // @namespace    http://yourname.tampermonkey.net/
  4. // @version      1.2
  5. // @description  A script to set the right bar width to zero on PixAI's generator page with an option to restore the original width.
  6. // @author       Yada
  7. // @match        https://pixai.art/generator/*
  8. // @icon         https://pixai.art/favicon.ico
  9. // @grant        none
  10. // @license      MIT
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     let buttonsAdded = false;
  17.  
  18.     // Function to set right bar width to zero
  19.     function setRightBarWidthToZero() {
  20.         const workbenchLayout = document.querySelector('#workbench-layout');
  21.         if (workbenchLayout) {
  22.             workbenchLayout.style.gridTemplateColumns = 'min-content 1fr 0px';
  23.         }
  24.     }
  25.  
  26.     // Function to restore the original width
  27.     function restoreRightBarWidth() {
  28.         const workbenchLayout = document.querySelector('#workbench-layout');
  29.         if (workbenchLayout) {
  30.             workbenchLayout.style.gridTemplateColumns = 'min-content 1fr 380px';
  31.         }
  32.     }
  33.  
  34.     // Function to add the buttons
  35.     function addButtons() {
  36.         if (buttonsAdded) return;
  37.  
  38.         // Create button container
  39.         const buttonContainer = document.createElement('div');
  40.         buttonContainer.style.position = 'fixed';
  41.         buttonContainer.style.top = '10px';
  42.         buttonContainer.style.right = '10px';
  43.         buttonContainer.style.zIndex = '1000';
  44.         buttonContainer.style.display = 'flex';
  45.         buttonContainer.style.flexDirection = 'row';
  46.         buttonContainer.style.gap = '5px';
  47.  
  48.         // Common button styles
  49.         const buttonStyle = {
  50.             display: 'flex',
  51.             justifyContent: 'center',
  52.             alignItems: 'center',
  53.             backgroundColor: 'transparent',
  54.             color: 'white',
  55.             fontFamily: 'Inter, sans-serif',
  56.             fontSize: '0.75rem',
  57.             fontWeight: '500',
  58.             textShadow: '0 1px 2px rgba(0, 0, 0, 0.5)',
  59.             padding: '0.25rem 0.5rem',
  60.             border: 'none',
  61.             borderRadius: '0.25rem',
  62.             cursor: 'pointer',
  63.             transition: 'background-color 0.3s',
  64.         };
  65.  
  66.         // Function to apply common styles to a button
  67.         function applyButtonStyle(button) {
  68.             for (const [key, value] of Object.entries(buttonStyle)) {
  69.                 button.style[key] = value;
  70.             }
  71.  
  72.             // Add hover effect
  73.             button.addEventListener('mouseover', () => {
  74.                 button.style.backgroundColor = 'rgba(0, 0, 0, 0.1)';
  75.             });
  76.  
  77.             button.addEventListener('mouseout', () => {
  78.                 button.style.backgroundColor = 'transparent';
  79.             });
  80.         }
  81.  
  82.         // Create button to set right bar width to zero
  83.         const zeroButton = document.createElement('button');
  84.         zeroButton.textContent = 'Collapse';
  85.         applyButtonStyle(zeroButton);
  86.         zeroButton.onclick = setRightBarWidthToZero;
  87.  
  88.         // Create button to restore original width
  89.         const restoreButton = document.createElement('button');
  90.         restoreButton.textContent = 'Restore';
  91.         applyButtonStyle(restoreButton);
  92.         restoreButton.onclick = restoreRightBarWidth;
  93.  
  94.         // Append buttons to container
  95.         buttonContainer.appendChild(zeroButton);
  96.         buttonContainer.appendChild(restoreButton);
  97.  
  98.         // Append button container to body
  99.         document.body.appendChild(buttonContainer);
  100.  
  101.         buttonsAdded = true;
  102.     }
  103.  
  104.     // Function to remove the buttons
  105.     function removeButtons() {
  106.         const buttonContainer = document.querySelector('div[style*="position: fixed"]');
  107.         if (buttonContainer) {
  108.             buttonContainer.remove();
  109.             buttonsAdded = false;
  110.         }
  111.     }
  112.  
  113.     // Function to monitor URL changes
  114.     function monitorURLChanges() {
  115.         const currentURL = window.location.href;
  116.  
  117.         if (currentURL.includes('/generator/')) {
  118.             addButtons();
  119.         } else {
  120.             removeButtons();
  121.         }
  122.     }
  123.  
  124.     // Monitor for history changes (when navigating between pages using internal links)
  125.     window.addEventListener('popstate', monitorURLChanges);
  126.  
  127.     // Monitor for pushState changes (when navigating between pages using internal links)
  128.     const originalPushState = history.pushState;
  129.     history.pushState = function() {
  130.         originalPushState.apply(this, arguments);
  131.         monitorURLChanges();
  132.     };
  133.  
  134.     // Initial check to add/remove buttons based on the current page
  135.     monitorURLChanges();
  136. })();