User:Tar/common.js: Difference between revisions

Revision as of 00:19, 11 August 2026

mw.loader.using('mediawiki.api', function () {
    'use strict';
    var api = new mw.Api();
    const config = {
        minimumCharacters: 2,
        maximumResults: 5,
        searchDelay: 200,
        insertFormat: '@[[User:$1]] '
    };
    let codeMirror = null;
    let activeMention = null;
    let results = [];
    let selectedIndex = 0;
    let debounceTimer = null;
    let requestNumber = 0;
    const menu = document.createElement('div');
    menu.className = 'username-autocomplete';
    menu.hidden = true;
    document.body.appendChild(menu);
    const style = document.createElement('style');
    style.textContent = `
        .username-autocomplete {
            position: absolute;
            z-index: 999999;
            min-width: 200px;
            max-width: 350px;
            overflow-y: auto;
            background: var(--background-color-base, #ffffff);
            color: var(--color-base, #202122);
            border: 1px solid var(--border-color-base, #a2a9b1);
            border-radius: 3px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
            font-family: sans-serif;
            font-size: 14px;
        }
        .username-autocomplete-result {
            padding: 7px 10px;
            cursor: pointer;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .username-autocomplete-result:hover,
        .username-autocomplete-result.selected {
            background: var(
                --background-color-interactive-subtle,
                #eaecf0
            );
        }
        .username-autocomplete-empty {
            padding: 7px 10px;
            color: var(--color-subtle, #72777d);
            font-style: italic;
        }
    `;
    document.head.appendChild(style);
    function getCodeMirrorFromEvent(event) {
        if (!(event.target instanceof Element)) {
            return null;
        }
        const wrapper = event.target.closest('.CodeMirror');
        if (!wrapper || !wrapper.CodeMirror) {
            return null;
        }
        return wrapper.CodeMirror;
    }
    function getMention(cm) {
        const cursor = cm.getCursor();
        const lineText = cm.getLine(cursor.line);
        const textBeforeCursor = lineText.slice(0, cursor.ch);
        const match = textBeforeCursor.match(
            /(?:^|[\s([{"'])@([^@\n\r\t<>{}\[\]|#/:;,!?]*)$/
        );
        if (!match) {
            return null;
        }
        const query = match[1];
        return {
            query,
            start: {
                line: cursor.line,
                ch: cursor.ch - query.length - 1
            },
            end: {
                line: cursor.line,
                ch: cursor.ch
            }
        };
    }
    function mentionsMatch(first, second) {
        return (
            first &&
            second &&
            first.query === second.query &&
            first.start.line === second.start.line &&
            first.start.ch === second.start.ch &&
            first.end.line === second.end.line &&
            first.end.ch === second.end.ch
        );
    }
    function hideMenu() {
        menu.hidden = true;
        menu.replaceChildren();
        activeMention = null;
        results = [];
        selectedIndex = 0;
    }
    function positionMenu() {
        if (!codeMirror) {
            return;
        }
        const coordinates = codeMirror.cursorCoords(null, 'page');
        menu.style.left = `${coordinates.left}px`;
        menu.style.top = `${coordinates.bottom}px`;
    }
    function setSelectedIndex(index) {
        const items = menu.querySelectorAll(
            '.username-autocomplete-result'
        );
        if (!items.length) {
            return;
        }
        selectedIndex =
            ((index % items.length) + items.length) %
            items.length;
        items.forEach(function (item, itemIndex) {
            item.classList.toggle(
                'selected',
                itemIndex === selectedIndex
            );
        });
		if (items.item(selectedIndex)) {
		    items.item(selectedIndex).scrollIntoView({
		        block: 'nearest'
		    });
		}
    }
    function insertUsername(username) {
        if (!codeMirror || !activeMention) {
            return;
        }
        const insertion = config.insertFormat.replaceAll(
            '$1',
            username
        );
        codeMirror.replaceRange(
            insertion,
            activeMention.start,
            activeMention.end,
            '+username-autocomplete'
        );
        codeMirror.setCursor({
            line: activeMention.start.line,
            ch: activeMention.start.ch + insertion.length
        });
        codeMirror.focus();
        hideMenu();
    }
    function renderResults(usernames) {
        menu.replaceChildren();
        results = usernames;
        selectedIndex = 0;
        if (!usernames.length) {
            const empty = document.createElement('div');
            empty.className = 'username-autocomplete-empty';
            empty.textContent = 'No matching users';
            menu.appendChild(empty);
            menu.hidden = false;
            positionMenu();
            return;
        }
        usernames.forEach(function (username, index) {
            const item = document.createElement('div');
            item.className = 'username-autocomplete-result';
            item.textContent = username;
            if (index === 0) {
                item.classList.add('selected');
            }
            item.addEventListener('mouseenter', function () {
                setSelectedIndex(index);
            });
            item.addEventListener('mousedown', function (event) {
                event.preventDefault();
                insertUsername(username);
            });
            menu.appendChild(item);
        });
        menu.hidden = false;
        positionMenu();
    }
    function searchUsers(cm, mention) {
        const currentRequest = ++requestNumber;
        api.get({
            action: 'query',
            list: 'allusers',
            auprefix: mention.query,
            aulimit: config.maximumResults,
            formatversion: 2
        }).then(function (data) {
            if (currentRequest !== requestNumber) {
                return;
            }
            const currentMention = getMention(cm);
            if (!mentionsMatch(currentMention, mention)) {
                return;
            }
            codeMirror = cm;
            activeMention = currentMention;
            const usernames = (
                data.query.allusers || []
            ).map(function (user) {
                return user.name;
            });
            renderResults(usernames);
        }).catch(function (error) {
            console.error(
                'Username autocomplete API error:',
                error
            );
            hideMenu();
        });
    }
    function processEditor(cm) {
        const mention = getMention(cm);
        if (
            !mention ||
            mention.query.length < config.minimumCharacters
        ) {
            hideMenu();
            return;
        }
        codeMirror = cm;
        activeMention = mention;
        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(function () {
            searchUsers(cm, mention);
        }, config.searchDelay);
    }
    document.addEventListener(
        'keyup',
        function (event) {
            const cm = getCodeMirrorFromEvent(event);
            if (!cm) {
                return;
            }
            if (
                [
                    'ArrowUp',
                    'ArrowDown',
                    'Enter',
                    'Tab',
                    'Escape'
                ].includes(event.key)
            ) {
                return;
            }
            processEditor(cm);
        },
        true
    );
    document.addEventListener(
        'keydown',
        function (event) {
            if (menu.hidden || !codeMirror) {
                return;
            }
            const cm = getCodeMirrorFromEvent(event);
            if (cm !== codeMirror) {
                return;
            }
            switch (event.key) {
                case 'ArrowDown':
                    event.preventDefault();
                    event.stopPropagation();
                    setSelectedIndex(selectedIndex + 1);
                    break;
                case 'ArrowUp':
                    event.preventDefault();
                    event.stopPropagation();
                    setSelectedIndex(selectedIndex - 1);
                    break;
                case 'Enter':
                case 'Tab':
                    if (results.length) {
                        event.preventDefault();
                        event.stopPropagation();
                        insertUsername(results[selectedIndex]);
                    }
                    break;
                case 'Escape':
                    event.preventDefault();
                    event.stopPropagation();
                    hideMenu();
                    break;
            }
        },
        true
    );
    document.addEventListener('mousedown', function (event) {
        if (
            !menu.contains(event.target) &&
            !(
                event.target instanceof Element &&
                event.target.closest('.CodeMirror')
            )
        ) {
            hideMenu();
        }
    });
    document.addEventListener(
        'scroll',
        function () {
            if (!menu.hidden) {
                positionMenu();
            }
        },
        true
    );
    window.addEventListener('resize', function () {
        if (!menu.hidden) {
            positionMenu();
        }
    });
});