☰

Replace Dropdown Lists for Bangumi

调整页面上的下拉列表选项顺序，保留原本的默认值，并按首字母排序，并且使用懒加载功能

目前为 2024-02-17 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Replace Dropdown Lists for Bangumi
  3. // @namespace    https://github.com/Adachi-Git/ReplaceDropdownListsForBangumi
  4. // @version      0.5
  5. // @description  调整页面上的下拉列表选项顺序，保留原本的默认值，并按首字母排序，并且使用懒加载功能
  6. // @author       Adachi
  7. // @match        *://bangumi.tv/subject/*
  8. // @match        *://bgm.tv/subject/*
  9. // @match        *://chii.in/subject/*
  10. // @grant        none
  11. // @license MIT
  12. // ==/UserScript==
  13.  
  14. (function() {
  15.     'use strict';
  16.  
  17.     var delay = 2000; // 设置延迟执行时间，单位是毫秒
  18.  
  19.     // 定义一个函数来处理下拉列表的逻辑
  20.     function adjustSelectOptions(select) {
  21.         // 保存原本的默认值
  22.         var defaultValue = select.value;
  23.  
  24.         // 获取所有选项并转换为数组
  25.         var optionsArray = Array.from(select.options);
  26.  
  27.         // 移除所有选项
  28.         optionsArray.forEach(function(option) {
  29.             select.remove(option.index);
  30.         });
  31.  
  32.         // 按首字母排序选项数组
  33.         optionsArray.sort(function(a, b) {
  34.             return a.textContent.localeCompare(b.textContent);
  35.         });
  36.  
  37.         // 将重新排序后的选项重新添加到下拉列表中
  38.         optionsArray.forEach(function(option) {
  39.             select.add(option);
  40.         });
  41.  
  42.         // 保留原本的默认值
  43.         select.value = defaultValue;
  44.     }
  45.  
  46.     // 延迟执行处理函数
  47.     setTimeout(function() {
  48.         // 查找可见的下拉列表并处理它们
  49.         var selects = document.querySelectorAll('select[name^="infoArr"]:not([data-adjusted])');
  50.         selects.forEach(function(select) {
  51.             if (isElementInViewport(select)) {
  52.                 adjustSelectOptions(select);
  53.                 select.setAttribute('data-adjusted', 'true');
  54.             }
  55.         });
  56.     }, delay);
  57.  
  58.     // 添加 DOM 变化的监听器
  59.     var observer = new MutationObserver(function(mutations) {
  60.         mutations.forEach(function(mutation) {
  61.             // 查找新增的下拉列表并处理
  62.             var newSelects = mutation.target.querySelectorAll('select[name^="infoArr"]:not([data-adjusted])');
  63.             newSelects.forEach(function(newSelect) {
  64.                 if (isElementInViewport(newSelect)) {
  65.                     adjustSelectOptions(newSelect);
  66.                     newSelect.setAttribute('data-adjusted', 'true');
  67.                 }
  68.             });
  69.         });
  70.     });
  71.  
  72.     // 监听整个文档的变化
  73.     observer.observe(document.documentElement, {
  74.         childList: true,
  75.         subtree: true
  76.     });
  77.  
  78.     // 添加滚动事件监听器
  79.     window.addEventListener('scroll', function() {
  80.         // 查找尚未处理的下拉列表
  81.         var selects = document.querySelectorAll('select[name^="infoArr"]:not([data-adjusted])');
  82.         selects.forEach(function(select) {
  83.             // 如果该下拉列表在视图内，进行处理并标记为已处理
  84.             if (isElementInViewport(select)) {
  85.                 adjustSelectOptions(select);
  86.                 select.setAttribute('data-adjusted', 'true');
  87.             }
  88.         });
  89.     });
  90.  
  91.     // 检查元素是否在视图内
  92.     function isElementInViewport(element) {
  93.         var rect = element.getBoundingClientRect();
  94.         return (
  95.             rect.top >= 0 &&
  96.             rect.left >= 0 &&
  97.             rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
  98.             rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  99.         );
  100.     }
  101. })();