Adds a responsive button inside and to the right of GitHub project filter input to format text as title:*XX*.
// ==UserScript==
// @name GitHub Project Filter Formatter (Responsive Button Inside)
// @namespace http://tampermonkey.net/
// @version 1.6
// @description Adds a responsive button inside and to the right of GitHub project filter input to format text as title:*XX*.
// @author xiaohaoxing
// @match https://github.com/orgs/.*/projects/.*
// @match https://github.com/*/*/projects/*
// @grant none
// @icon https://github.githubassets.com/favicons/favicon.svg
// @license MIT
// ==/UserScript==
(function() {
'use strict';
const INPUT_ID = 'filter-bar-component-input';
const BUTTON_ID = 'tampermonkey-format-title-button';
const BUTTON_TEXT = '模糊';
const WRAPPER_CLASS = 'tampermonkey-input-wrapper';
const MIN_INPUT_TEXT_AREA_WIDTH = 50; // Minimum pixels for text before button (if button shown)
let filterInput = null;
let formatButton = null;
let inputWrapper = null;
let resizeObserver = null; // To observe wrapper/input size changes
function createFormatButton() {
const existingButton = document.getElementById(BUTTON_ID);
if (existingButton) {
return existingButton;
}
const button = document.createElement('button');
button.id = BUTTON_ID;
button.textContent = BUTTON_TEXT;
button.type = 'button';
button.style.position = 'absolute';
button.style.top = '50%';
button.style.right = '25px'; // Gap from the right edge of the wrapper
button.style.transform = 'translateY(-50%)';
button.style.zIndex = '10';
button.style.padding = '2px 8px';
button.style.fontSize = '12px';
button.style.height = 'calc(100% - 8px)'; // Fit nicely, allowing 4px top/bottom margin in wrapper
button.style.maxHeight = '26px'; // Max height
button.style.lineHeight = '1';
button.style.display = 'inline-flex';
button.style.alignItems = 'center';
button.style.justifyContent = 'center';
button.style.border = '1px solid var(--color-btn-border, #606771)';
button.style.borderRadius = '4px';
button.style.backgroundColor = 'var(--color-btn-bg, #f6f8fa)';
button.style.color = 'var(--color-btn-text, #24292f)';
button.style.cursor = 'pointer';
button.style.fontWeight = '500';
button.style.whiteSpace = 'nowrap'; // Prevent text wrapping in button
button.addEventListener('mouseenter', () => {
button.style.backgroundColor = 'var(--color-btn-hover-bg, #f3f4f6)';
button.style.borderColor = 'var(--color-btn-hover-border, #505761)';
});
button.addEventListener('mouseleave', () => {
button.style.backgroundColor = 'var(--color-btn-bg, #f6f8fa)';
button.style.borderColor = 'var(--color-btn-border, #606771)';
});
button.addEventListener('click', (event) => {
event.preventDefault();
event.stopPropagation();
const currentDomInput = document.getElementById(INPUT_ID);
if (!currentDomInput) return;
filterInput = currentDomInput;
if (filterInput.value.trim() !== '') {
const originalValue = filterInput.value;
const newValue = `title:*${originalValue}*`;
const valueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')?.set ||
Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, 'value')?.set;
if (valueSetter) {
valueSetter.call(filterInput, newValue);
} else {
filterInput.value = newValue;
}
const inputEvent = new Event('input', { bubbles: true, cancelable: true });
filterInput.dispatchEvent(inputEvent);
filterInput.focus();
}
});
return button;
}
function adjustLayout() {
if (!filterInput || !inputWrapper || !formatButton) return;
// Ensure input fills the wrapper and has box-sizing: border-box
filterInput.style.width = '100%';
filterInput.style.boxSizing = 'border-box';
// Temporarily show button to measure its width if it was hidden
const wasButtonHidden = formatButton.style.display === 'none';
if (wasButtonHidden) {
formatButton.style.visibility = 'hidden'; // Keep it hidden but allow measurement
formatButton.style.display = 'inline-flex';
}
const buttonActualWidth = formatButton.offsetWidth;
if (wasButtonHidden) { // Restore original hidden state if needed
formatButton.style.display = 'none';
formatButton.style.visibility = 'visible';
}
const wrapperInnerWidth = inputWrapper.clientWidth -
(parseFloat(getComputedStyle(inputWrapper).paddingLeft) || 0) -
(parseFloat(getComputedStyle(inputWrapper).paddingRight) || 0);
const spaceForButtonAndGap = buttonActualWidth + 10; // 5px on each side of button within input padding
// Check if there's enough space for the button AND a minimum text area
if (buttonActualWidth > 0 && (wrapperInnerWidth - spaceForButtonAndGap) >= MIN_INPUT_TEXT_AREA_WIDTH) {
filterInput.style.paddingRight = `${spaceForButtonAndGap}px`;
formatButton.style.display = 'inline-flex'; // Show button
} else {
// Not enough space, hide button and reset padding
filterInput.style.paddingRight = '8px'; // Or original padding if you stored it
formatButton.style.display = 'none'; // Hide button
}
}
function setupInputAndButton() {
const currentDomInput = document.getElementById(INPUT_ID);
if (!currentDomInput) { // Input disappeared, cleanup
if (resizeObserver && inputWrapper) {
resizeObserver.unobserve(inputWrapper);
}
if (formatButton && formatButton.parentNode) formatButton.parentNode.removeChild(formatButton);
if (inputWrapper && inputWrapper.parentNode && inputWrapper.classList.contains(WRAPPER_CLASS)) {
const originalParent = inputWrapper.parentNode;
if (filterInput && document.body.contains(filterInput) && filterInput.parentElement !== originalParent) {
originalParent.insertBefore(filterInput, inputWrapper); // Restore original input
filterInput.style.paddingRight = ''; // Reset padding
filterInput.style.width = ''; // Reset width
}
originalParent.removeChild(inputWrapper);
}
filterInput = null; inputWrapper = null; formatButton = null;
return;
}
filterInput = currentDomInput;
if (filterInput.parentElement && filterInput.parentElement.classList.contains(WRAPPER_CLASS)) {
inputWrapper = filterInput.parentElement;
} else {
inputWrapper = document.createElement('div');
inputWrapper.classList.add(WRAPPER_CLASS);
inputWrapper.style.position = 'relative'; // For absolute positioned button
// Mimic original input's display and allow it to take available space
const originalInputComputedStyle = getComputedStyle(filterInput);
inputWrapper.style.display = originalInputComputedStyle.display;
// If the input was block or flex, it likely took full width of its context
if (originalInputComputedStyle.display === 'block' || originalInputComputedStyle.display === 'flex') {
inputWrapper.style.width = '100%'; // Or copy originalInputComputedStyle.width if it was specific
} else if (originalInputComputedStyle.display === 'inline-block') {
// For inline-block, width might be content-based or explicitly set.
// We let it be content-based unless original input had a specific width.
if (originalInputComputedStyle.width !== 'auto' && !originalInputComputedStyle.width.includes('%')) {
inputWrapper.style.width = originalInputComputedStyle.width;
}
}
// Handle case where input might be directly in a flex container
if (filterInput.parentElement && getComputedStyle(filterInput.parentElement).display.includes('flex')) {
inputWrapper.style.flexGrow = originalInputComputedStyle.flexGrow;
inputWrapper.style.flexShrink = originalInputComputedStyle.flexShrink;
inputWrapper.style.flexBasis = originalInputComputedStyle.flexBasis;
}
if (filterInput.parentNode) {
filterInput.parentNode.insertBefore(inputWrapper, filterInput);
inputWrapper.appendChild(filterInput);
} else {
console.warn("[Tampermonkey] Filter input has no parent, cannot wrap.");
return;
}
}
if (!formatButton || !inputWrapper.contains(formatButton)) {
formatButton = createFormatButton();
inputWrapper.appendChild(formatButton);
}
// Initial layout adjustment
adjustLayout();
// Observe wrapper for size changes to re-adjust layout
if (typeof ResizeObserver !== 'undefined') {
if (resizeObserver) { // Disconnect from old wrapper if any
resizeObserver.disconnect();
}
resizeObserver = new ResizeObserver(entries => {
// We are observing the wrapper, so direct call to adjustLayout
requestAnimationFrame(adjustLayout); // Debounce with requestAnimationFrame
});
if (inputWrapper) {
resizeObserver.observe(inputWrapper);
}
} else {
// Fallback for browsers without ResizeObserver (less ideal)
// window.addEventListener('resize', adjustLayout); // This is too broad
// console.warn("[Tampermonkey] ResizeObserver not supported. Layout might not be perfectly responsive to container changes.");
}
}
const mutationObserver = new MutationObserver(() => {
const currentInput = document.getElementById(INPUT_ID);
if (currentInput) {
if (!inputWrapper || !inputWrapper.contains(currentInput) || !formatButton || !inputWrapper.contains(formatButton)) {
setupInputAndButton();
}
} else if (filterInput) { // Input was there but now it's gone
setupInputAndButton(); // This will trigger the cleanup logic
}
});
mutationObserver.observe(document.body, { childList: true, subtree: true });
setTimeout(setupInputAndButton, 1000);
})();