.gif)
(function() {
if (window.scriptRan) {
return; // Exit if the script has already run
}
window.scriptRan = true; // Mark the script as run
const styleId = "fx-category-style"; // Unique ID for the style tag
// Remove existing style tag if it exists
const existingStyle = document.getElementById(styleId);
if (existingStyle) {
existingStyle.remove();
}
// Create and append new style tag
const style = document.createElement("style");
style.id = styleId;
style.textContent = `
/* Category Title Styling */
[class*="sfx_category-title"] {
font: bold 18px 'Roboto';
color: #caca;
display: block;
cursor: pointer;
position: relative;
padding: 10px;
}
/* Add expandable arrow using ::after use same class for the collapseAllButton */
[class*="sfx_category-title"]::after, .collapseAllButton {
content: " ▲"; /* Up arrow */
position: absolute;
right: 20px;
font-size: 14px;
color: #caca;
transition: transform 0.3s ease-in-out;
}
/* Rotates arrow when collapsed */
[class*="sfx_category-title"].collapsed::after {
transform: rotate(180deg);
}
/* Hide results with the hidden class */
.hidden {
display: none !important;
}
`;
document.body.appendChild(style);
// Function to toggle individual category results
function addCollapseOnCategoryResults() {
const categoryTitles = document.querySelectorAll('[class*="sfx_category-title"]');
categoryTitles.forEach(title => {
title.onclick = function () {
this.classList.toggle('collapsed');
let current = this.nextElementSibling;
while (current && !current.className.includes('sfx_category-title')) {
if (current.className.includes('sfx_result-container')) {
current.classList.toggle('hidden');
}
current = current.nextElementSibling;
}
};
});
}
// Function to toggle all categories
let allCollapsed = false; // Track state
function toggleAllCategories() {
const categoryTitles = document.querySelectorAll('[class*="sfx_category-title"]');
allCollapsed = !allCollapsed; // Toggle state
categoryTitles.forEach(title => {
if (allCollapsed) {
title.classList.add('collapsed'); // Collapse all
} else {
title.classList.remove('collapsed'); // Expand all
}
let current = title.nextElementSibling;
while (current && !current.className.includes('sfx_category-title')) {
if (current.className.includes('sfx_result-container')) {
if (allCollapsed) {
current.classList.add('hidden'); // Hide all
} else {
current.classList.remove('hidden'); // Show all
}
}
current = current.nextElementSibling;
}
});
// Update collapse button symbol
collapseAllButton.innerHTML = allCollapsed ? "▼" : "▲";
}
// Adds a collapse/expand button
let collapseAllButton = null;
function addCollapseButton() {
const targetElement = document.querySelector('[class*="sfx_searchBoxClass"] [class*="sfx_searching"]');
if (targetElement && !collapseAllButton) { // Ensure we don't add multiple buttons
collapseAllButton = document.createElement("div");
collapseAllButton.classList.add('collapseAllButton');
collapseAllButton.style.position = "absolute";
//collapseButton.style.right = "20px";
collapseAllButton.innerHTML = "▲"; // Default to expanded state
collapseAllButton.onclick = toggleAllCategories; // Set toggle function
targetElement.appendChild(collapseAllButton);
setTimeout(addCollapseOnCategoryResults, 1000);
}
}
function removeCollapseButton() {
if (collapseAllButton && collapseAllButton.parentNode) {
collapseAllButton.parentNode.removeChild(collapseAllButton);
collapseAllButton = null; // Clear reference
}
}
// Detects when to add collapser button
const rootElement = document.querySelector('[class*="sfx_sf-stacking-root"]');
if (rootElement) {
const observer = new MutationObserver(() => {
const targetChild = rootElement.querySelector('[class*="sfx_result-content"]');
if (targetChild) {
addCollapseButton();
} else {
removeCollapseButton();
}
});
observer.observe(rootElement, { childList: true, subtree: true });
}
console.log("done", rootElement);
})();
No comments:
Post a Comment