Sort character lists alphabetically

The character lists are not sorted alphabetically, making finding characters in the more difficult than it should be. This script sorts them across the page.

目前為 2023-08-08 提交的版本,檢視 最新版本

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

// ==UserScript==
// @name         Sort character lists alphabetically
// @namespace    http://f-list.net/c/Grimokk
// @version      1.2
// @description  The character lists are not sorted alphabetically, making finding characters in the more difficult than it should be. This script sorts them across the page.
// @author       Grimokk
// @match        https://www.f-list.net/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=f-list.net
// @grant        none
// ==/UserScript==


(function() {
    'use strict';

    function _gmSortCharacterList(target) {

        //https://stackoverflow.com/questions/13033472/ordering-a-select-with-javascript-without-jquery
        var sorted = Array.prototype.slice.call(target.options).sort(function(a, b) {
            if(a.label < b.label) return -1;
            if(a.label > b.label) return 1;
            return 0;
        });

        for(var i = 0; i < sorted.length; i++) {
            target.add(sorted[i]);
        }

    }

    // get element used to fill in character lists on note page
    var _gmCharListNotes = document.getElementById("NoteVarCharacters");
    var _gmCharListOther = document.getElementsByName("character_id");
    var _gmCharListChatLogs = document.getElementById("character");


    // only try sorting this if the element actually exists
    if(_gmCharListNotes) {
        _gmSortCharacterList(_gmCharListNotes);
    }

    // only try sorting this if the element actually exists and is a select element
    if(_gmCharListOther && _gmCharListOther.length > 0 && _gmCharListOther[0].type === "select-one") {
        _gmSortCharacterList(_gmCharListOther[0]);
    }

    // only try sorting this if we're on the chat3 page and it is a select element
    if(window.location.href.includes("chat3") && _gmCharListChatLogs && _gmCharListChatLogs.type === "select-one") {
        _gmSortCharacterList(_gmCharListChatLogs);
    }

    // observe document title so we can ensure that character list in logs modal gets sorted again
    // https://stackoverflow.com/questions/2497200/how-to-listen-for-changes-to-the-title-element
    if(window.location.href.includes("chat3")) {
        new MutationObserver(function(mutations) {
            var _gmTitleText = mutations[0].target.innerText;
            if(!_gmTitleText.includes("(") && !_gmTitleText.includes(")")) {
                return;
            }

            // give chat a little bit of time to shuffle the character list before we attempt to sort it
            const characterSortTimeout = setTimeout(function() {
                // using the same ID multiple times is a no-no, but it happens in chat3, so...
                var characterSelects = document.querySelectorAll("[id='character']");

                for(var i = 0; i < characterSelects.length; i++) {
                    if(characterSelects[i].type === "select-one") {
                        _gmSortCharacterList(characterSelects[i]);
                    }
                }
            }, 2000);

        }).observe(
            document.querySelector('title'),
            { subtree: true, characterData: true, childList: true }
        );
    }

})();