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. })();