您需要先安装一个扩展,例如 篡改猴、Greasemonkey 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 Userscripts ,之后才能安装此脚本。
您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。
您需要先安装用户脚本管理器扩展后才能安装此脚本。
为csp的素材商店网页-收藏及下载页面 增加“按素材类型/购买时间排序”按钮和按素材类型筛选快捷菜单 Support sorting and filtering on clip studio assets favourites/download page
当前为
- // ==UserScript==
- // @name ecsa
- // @namespace boni
- // @version 1.01
- // @description 为csp的素材商店网页-收藏及下载页面 增加“按素材类型/购买时间排序”按钮和按素材类型筛选快捷菜单 Support sorting and filtering on clip studio assets favourites/download page
- // @match https://assets.clip-studio.com/*/download-list*
- // @match https://assets.clip-studio.com/*/starred*
- // @grant none
- // @license GPL-3.0-only
- // ==/UserScript==
- (function() {
- 'use strict';
- const getAllText = ()=>{
- if (window.location.href.includes("starred")) {
- // Find the first <a> element inside the .btn-group.selectFilter
- const selectFilter = document.querySelector('.btn-group.selectFilter');
- if (selectFilter) {
- const firstOption = selectFilter.querySelector('a');
- if (firstOption) {
- const firstOptionText = firstOption.textContent.trim();
- console.log(firstOptionText);
- return firstOptionText
- }
- }
- } else {
- // Find the <ul> element inside the .dropdown.selectFilter
- const dropdown = document.querySelector('.dropdown.selectFilter');
- if (dropdown) {
- const ul = dropdown.querySelector('ul.dropdown-menu');
- if (ul) {
- const firstOption = ul.querySelector('li:first-child a');
- if (firstOption) {
- const firstOptionText = firstOption.textContent.trim();
- console.log(firstOptionText);
- return firstOptionText
- }
- }
- }
- }
- }
- // Define liElementsByType in the global scope
- const liElementsByType = {};
- let container = document.querySelector("ul.layput__cardPanel");
- let sortAsset = false;
- let orig = container.innerHTML;
- let types = []
- let allText = getAllText()
- 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'
- //fa fa-filter
- // 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(allText)
- 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
- button.style.borderRadius = '0px'
- button.style.textAlign = 'left'
- const caret = document.createElement("span");
- caret.className = "caret";
- caret.style.position = "absolute";
- if (window.location.href.includes("starred")) {
- // The URL contains "starred"
- caret.style.top = "15px"
- } else {
- // The URL does not contain "starred"
- }
- caret.style.right = "10px";
- 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 !== allText;
- button.firstChild.textContent = type;
- if (sortAsset) {
- sortAsset = !sortAsset
- sortButton.textContent = sortAsset ? "按购买时间排序" : "按素材类型排序";
- }
- if (type !== allText) {
- 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();
- };
- })();