A script to set the right bar width to zero on PixAI's generator page with an option to restore the original width.
As of
// ==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();
})();