为csp的素材商店网页-我的下载页面增加“按素材类型排序”和按素材类型筛选快捷按钮 Support sorting and filtering on clip studio assets my download list
目前為
// ==UserScript==
// @name ecsa
// @namespace boni
// @version 1.0
// @description 为csp的素材商店网页-我的下载页面增加“按素材类型排序”和按素材类型筛选快捷按钮 Support sorting and filtering on clip studio assets my download list
// @match https://assets.clip-studio.com/*/download-list*
// @grant none
// @license GPL3
// ==/UserScript==
(function() {
'use strict';
// Define liElementsByType in the global scope
const liElementsByType = {};
let container = document.querySelector("ul.layput__cardPanel");
let sortAsset = false;
let orig = container.innerHTML;
console.log(container, orig)
let types = []
const toggleSort = (sort) => {
if (sort) {
// Clear the existing content on the page
container.innerHTML = '';
// Sort the <li> elements by type value (custom sorting logic)
const sortedTypes = Object.keys(liElementsByType).sort();
// Reconstruct the sorted list of <li> elements
const sortedLiElements = [];
sortedTypes.forEach((type) => {
sortedLiElements.push(...liElementsByType[type]);
});
// Append the sorted <li> elements back to the container
sortedLiElements.forEach((li) => {
container.appendChild(li);
});
} else {
container.innerHTML = orig;
}
}
// Function to sort the <li> elements by type
const sortAssets = () => {
const liElements = document.querySelectorAll("li.materialCard");
liElements.forEach((li) => {
const materialTypeLink = li.querySelector("a[href*='/search?type=']");
if (materialTypeLink) {
const type = materialTypeLink.textContent.trim(); // Get the text content of the <a> tag
if (!types.includes(type)) {
types.push(type)
}
if (type) {
if (!liElementsByType[type]) {
liElementsByType[type] = [];
}
liElementsByType[type].push(li);
}
}
});
// Find the existing button element
const existingButton = document.querySelector(".btn.btn-default.operationButton.favoriteButton");
if (existingButton) {
// Create a new button element
const newButton = document.createElement("button");
newButton.type = "button";
newButton.className = "btn btn-primary "; // You can adjust the class as needed
newButton.id = "sortButton";
newButton.textContent = "按素材类型排序";
newButton.style.marginLeft = '10px'
// Add an event listener to the new button if needed
newButton.addEventListener("click", function() {
// Handle button click event
sortAsset = !sortAsset
newButton.textContent = sortAsset ? "按购买时间排序" : "按素材类型排序";
toggleSort(sortAsset)
});
// Insert the new button after the existing button
existingButton.parentNode.insertBefore(newButton, existingButton.nextSibling);
// Example usage:
const options = [...types];
options.unshift('全部')
const dropdown = createDropdown(options);
existingButton.parentNode.insertBefore(dropdown, newButton.nextSibling);
}
};
// Create a function to generate the dropdown HTML
function createDropdown(types) {
const dropdown = document.createElement("div");
dropdown.className = "dropdown selectFilter ";
dropdown.style.display = 'inline-block'
dropdown.style.marginLeft = '10px'
dropdown.style.marginTop = '0px'
const button = document.createElement("button");
button.className = "btn btn-default dropdown-toggle filterButton";
button.type = "button";
button.setAttribute("data-toggle", "dropdown");
button.setAttribute("aria-haspopup", "true");
button.setAttribute("aria-expanded", "true");
button.textContent = types[0]; // Set the default text
const caret = document.createElement("span");
caret.className = "caret";
const ul = document.createElement("ul");
ul.className = "dropdown-menu";
// Create options from the 'types' array
types.forEach((type) => {
const li = document.createElement("li");
const a = document.createElement("a");
a.textContent = type;
li.appendChild(a);
ul.appendChild(li);
li.addEventListener("click", function(event) {
// Prevent the default behavior of following the link (if it's an anchor)
event.preventDefault();
container.innerHTML = '';
// Enable or disable the new button based on the selected option
const sortButton = document.getElementById("sortButton");
sortButton.disabled = type !== "全部";
button.firstChild.textContent = type;
if (sortAsset) {
sortAsset = !sortAsset
sortButton.textContent = sortAsset ? "按购买时间排序" : "按素材类型排序";
}
if (type !== '全部') {
liElementsByType[type].forEach((li) => {
container.appendChild(li);
});
} else {
container.innerHTML = orig;
}
});
});
// Append elements to the dropdown
button.appendChild(caret);
dropdown.appendChild(button);
dropdown.appendChild(ul);
return dropdown;
}
// Wait for the page to fully load before executing the sorting function
window.onload = function() {
sortAssets();
};
})();