ecsa

为csp的素材商店网页-我的下载页面增加“按素材类型排序”和按素材类型筛选快捷按钮 Support sorting and filtering on clip studio assets my download list

当前为 2023-10-08 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name ecsa
  3. // @namespace boni
  4. // @version 1.0
  5. // @description 为csp的素材商店网页-我的下载页面增加“按素材类型排序”和按素材类型筛选快捷按钮 Support sorting and filtering on clip studio assets my download list
  6. // @match https://assets.clip-studio.com/*/download-list*
  7. // @grant none
  8. // @license GPL-3.0-only
  9. // ==/UserScript==
  10. (function() {
  11. 'use strict';
  12. // Define liElementsByType in the global scope
  13. const liElementsByType = {};
  14. let container = document.querySelector("ul.layput__cardPanel");
  15. let sortAsset = false;
  16. let orig = container.innerHTML;
  17. console.log(container, orig)
  18. let types = []
  19. const toggleSort = (sort) => {
  20. if (sort) {
  21. // Clear the existing content on the page
  22. container.innerHTML = '';
  23. // Sort the <li> elements by type value (custom sorting logic)
  24. const sortedTypes = Object.keys(liElementsByType).sort();
  25. // Reconstruct the sorted list of <li> elements
  26. const sortedLiElements = [];
  27. sortedTypes.forEach((type) => {
  28. sortedLiElements.push(...liElementsByType[type]);
  29. });
  30. // Append the sorted <li> elements back to the container
  31. sortedLiElements.forEach((li) => {
  32. container.appendChild(li);
  33. });
  34. } else {
  35. container.innerHTML = orig;
  36. }
  37. }
  38. // Function to sort the <li> elements by type
  39. const sortAssets = () => {
  40. const liElements = document.querySelectorAll("li.materialCard");
  41. liElements.forEach((li) => {
  42. const materialTypeLink = li.querySelector("a[href*='/search?type=']");
  43. if (materialTypeLink) {
  44. const type = materialTypeLink.textContent.trim(); // Get the text content of the <a> tag
  45. if (!types.includes(type)) {
  46. types.push(type)
  47. }
  48. if (type) {
  49. if (!liElementsByType[type]) {
  50. liElementsByType[type] = [];
  51. }
  52. liElementsByType[type].push(li);
  53. }
  54. }
  55. });
  56. // Find the existing button element
  57. const existingButton = document.querySelector(".btn.btn-default.operationButton.favoriteButton");
  58. if (existingButton) {
  59. // Create a new button element
  60. const newButton = document.createElement("button");
  61. newButton.type = "button";
  62. newButton.className = "btn btn-primary "; // You can adjust the class as needed
  63. newButton.id = "sortButton";
  64. newButton.textContent = "按素材类型排序";
  65. newButton.style.marginLeft = '10px'
  66. // Add an event listener to the new button if needed
  67. newButton.addEventListener("click", function() {
  68. // Handle button click event
  69. sortAsset = !sortAsset
  70. newButton.textContent = sortAsset ? "按购买时间排序" : "按素材类型排序";
  71. toggleSort(sortAsset)
  72. });
  73. // Insert the new button after the existing button
  74. existingButton.parentNode.insertBefore(newButton, existingButton.nextSibling);
  75. // Example usage:
  76. const options = [...types];
  77. options.unshift('全部')
  78. const dropdown = createDropdown(options);
  79. existingButton.parentNode.insertBefore(dropdown, newButton.nextSibling);
  80. }
  81. };
  82. // Create a function to generate the dropdown HTML
  83. function createDropdown(types) {
  84. const dropdown = document.createElement("div");
  85. dropdown.className = "dropdown selectFilter ";
  86. dropdown.style.display = 'inline-block'
  87. dropdown.style.marginLeft = '10px'
  88. dropdown.style.marginTop = '0px'
  89. const button = document.createElement("button");
  90. button.className = "btn btn-default dropdown-toggle filterButton";
  91. button.type = "button";
  92. button.setAttribute("data-toggle", "dropdown");
  93. button.setAttribute("aria-haspopup", "true");
  94. button.setAttribute("aria-expanded", "true");
  95. button.textContent = types[0]; // Set the default text
  96. const caret = document.createElement("span");
  97. caret.className = "caret";
  98. const ul = document.createElement("ul");
  99. ul.className = "dropdown-menu";
  100. // Create options from the 'types' array
  101. types.forEach((type) => {
  102. const li = document.createElement("li");
  103. const a = document.createElement("a");
  104. a.textContent = type;
  105. li.appendChild(a);
  106. ul.appendChild(li);
  107. li.addEventListener("click", function(event) {
  108. // Prevent the default behavior of following the link (if it's an anchor)
  109. event.preventDefault();
  110. container.innerHTML = '';
  111. // Enable or disable the new button based on the selected option
  112. const sortButton = document.getElementById("sortButton");
  113. sortButton.disabled = type !== "全部";
  114. button.firstChild.textContent = type;
  115. if (sortAsset) {
  116. sortAsset = !sortAsset
  117. sortButton.textContent = sortAsset ? "按购买时间排序" : "按素材类型排序";
  118. }
  119. if (type !== '全部') {
  120. liElementsByType[type].forEach((li) => {
  121. container.appendChild(li);
  122. });
  123. } else {
  124. container.innerHTML = orig;
  125. }
  126. });
  127. });
  128. // Append elements to the dropdown
  129. button.appendChild(caret);
  130. dropdown.appendChild(button);
  131. dropdown.appendChild(ul);
  132. return dropdown;
  133. }
  134. // Wait for the page to fully load before executing the sorting function
  135. window.onload = function() {
  136. sortAssets();
  137. };
  138. })();