User:Peterxy12/js/Usergroup.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

    function makeBadge(groups) {
        if (!groups?.length) return null;
        const container = document.createElement('sup');
        container.style.cssText = 'font-size:85%;vertical-align:super;margin-left:2px;line-height:1;';
        groups.sort((a, b) => GROUP_ORDER.indexOf(a) - GROUP_ORDER.indexOf(b))
            .forEach((g, i) => {
                const cfg = USER_GROUPS[g];
                if (!cfg) return;
                const span = document.createElement('span');
                span.textContent = cfg.label;
                span.title = cfg.name;
                span.style.cssText = `color:${cfg.color};cursor:help;${i ? 'margin-left:1px;' : ''}`;
                container.appendChild(span);
            });
        return container;
    }

    function processUserLinks() {
        const links = document.querySelectorAll('.mw-userlink, .plainlinks .userlink');
        if (!links.length) return;

        const map = new Map();
        links.forEach(link => {
            if (link.dataset.groupProcessed) return;
            const name = link.classList.contains('mw-userlink')
                ? extractUsername(link.href)
                : link.textContent.trim();
            if (!name) return;
            link.dataset.groupProcessed = 'true';
            if (!map.has(name)) map.set(name, []);
            map.get(name).push(link);
        });

        const names = [...map.keys()];
        if (!names.length) return;

        getUserGroups(names, data => {
            for (const [name, groups] of Object.entries(data)) {
                if (!groups?.length) continue;
                const badge = makeBadge(groups);
                if (!badge) continue;
                for (const link of map.get(name) || []) {
                    if (link.nextElementSibling?.tagName === 'SUP') continue;
                    link.parentNode.insertBefore(badge.cloneNode(true), link.nextSibling);
                }
            }
        });
    }

    function init() {
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', processUserLinks);
        } else processUserLinks();

        new MutationObserver(muts => {
            for (const m of muts) {
                if ([...m.addedNodes].some(n =>
                    n.nodeType === 1 && n.querySelector?.('.mw-userlink, .plainlinks .userlink')
                )) {
                    setTimeout(processUserLinks, 100);
                    break;
                }
            }
        }).observe(document.body, { childList: true, subtree: true });
    }

    if (typeof mw !== 'undefined') {
        (mw.Api ? Promise.resolve() : mw.loader.using('mediawiki.api')).then(init);
    }
})();
// </nowiki>