User:Irukaza/common.js

// <pre>
"use strict";
$(() => (async () => {
    if (mw.config.get("wgCanonicalSpecialPageName") !== "Recentchanges" || !mw.config.get("wgUserGroups").includes("autoconfirmed")) {
        return;
    }
    await mw.loader.using("mw.Api");
    const uuidv4 = () => {
        let result = "";
        while (result === "" || $(`#${result}, [name="${result}"]`).length > 0) {
            result = ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
                (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16),
            );
        }
        return result;
    };
    const api = new mw.Api();
    const container = $("<table/>");
    container.html("<td>加载中……</td>").css("border-collapse", "collapse");
    $(".tagfilterForm .mw-input").empty().append(container);
    const tags = await (async () => {
        const result = [];
        try {
            const cache = JSON.parse(localStorage.getItem("AnnTools-tags"));
            if (!$.isPlainObject(cache)
                || typeof cache.timestamp !== "number" || cache.timestamp < new Date().getTime() - 24 * 60 * 60 * 1000
                || !Array.isArray(cache.tags)) {
                throw new Error();
            } else {
                for (const tag of cache.tags) {
                    if (!("name" in tag && "displayname" in tag && "description" in tag)) {
                        throw new Error();
                    }
                }
            }
            result.push(...cache.tags);
        } catch {
            const eol = Symbol();
            let tgcontinue = undefined;
            while (tgcontinue !== eol) {
                const _result = await api.post({
                    action: "query",
                    list: "tags",
                    tglimit: "max",
                    tgprop: "displayname|description|active",
                    tgcontinue,
                });
                if (_result.continue) {
                    tgcontinue = _result.continue.tgcontinue;
                } else {
                    tgcontinue = eol;
                }
                result.push(..._result.query.tags.filter((tag) => "active" in tag).map((tag) => {
                    delete tag.active;
                    return tag;
                }));
            }
            localStorage.setItem("AnnTools-tags", JSON.stringify({
                timestamp: new Date().getTime(),
                tags: result,
            }));
        }
        return result;
    })();
    const select = $("<select/>");
    let defaultValue = uuidv4();
    while (tags.includes(defaultValue)) {
        defaultValue = uuidv4();
    }
    select.html(`<option selected value="${defaultValue}">未选择（可多选）</option>`).attr({
        autocomplete: "none",
        multiple: "multiple",
    });
    tags.forEach(({ displayname, description, name }) => {
        const option = $("<option/>");
        option.text(displayname).attr({
            value: name,
            title: `${description} (${name})`,
        });
        select.append(option);
    });
    const selectTd = $("<td/>");
    selectTd.css("vertical-align", "middle");
    selectTd.append(select);
    container.empty().append(selectTd);
    const typeCheckbox = $("<input/>");
    const typeId = uuidv4();
    typeCheckbox.attr({
        type: "checkbox",
        id: typeId,
        title: "勾选以隐藏未勾选标签",
    });
    const typeLabel = $("<label/>");
    typeLabel.text("隐藏未勾选标签").attr({
        "for": typeId,
        title: "勾选以隐藏未勾选标签",
    });
    const methodCheckbox = $("<input/>");
    const methodId = uuidv4();
    methodCheckbox.attr({
        type: "checkbox",
        id: methodId,
        title: "勾选以隐藏/显示只包含指定标签的",
    });
    const methodLabel = $("<label/>");
    methodLabel.text("隐藏/显示只包含指定标签的").attr({
        "for": methodId,
        title: "勾选以隐藏/显示只包含指定标签的",
    });
    const checkboxTd = $("<td/>");
    checkboxTd.css("vertical-align", "middle");
    checkboxTd.append(typeCheckbox);
    checkboxTd.append(typeLabel);
    checkboxTd.append(methodCheckbox);
    checkboxTd.append(methodLabel);
    checkboxTd.append('<div style="padding-left: .25em">在 Chrome 和新版 Edge 等一众 Chromium 系浏览器中，按住 Ctrl 键即可多选，<br>按住 Shift 键或按右键可以批量选择已选到当前选定之间的所有项。</div>');
    container.append(checkboxTd);
    $(".mw-changeslist-line").each((_, ele) => {
        ele.dataset.tags = Array.from(ele.classList).filter((cls) => cls.startsWith("mw-tag-")).map((cls) => cls.replace("mw-tag-", "")).join("|");
    });
    mw.loader.addStyleTag(".hidden { display: none !important; }");
    select.add(typeCheckbox).add(methodCheckbox).on("change", () => {
        const type = typeCheckbox.prop("checked");
        const method = methodCheckbox.prop("checked");
        const tags = select.val().map((tag) => tag.replace(/ /g, "_"));
        Array.from(document.getElementsByClassName("mw-changeslist-line")).forEach((ele) => {
            const eleTags = ele.dataset.tags.split("|");
            if (method) {
                if (eleTags.filter((tag) => !tags.includes(tag)).length > 0) {
                    ele.classList[type ? "add" : "remove"]("hidden");
                } else {
                    ele.classList[type ? "remove" : "add"]("hidden");
                }
            } else {
                if (eleTags.filter((tag) => tags.includes(tag)).length > 0) {
                    ele.classList[type ? "remove" : "add"]("hidden");
                } else {
                    ele.classList[type ? "add" : "remove"]("hidden");
                }
            }
        });
    });
})());
// </pre>