「MediaWiki:Common.js」の版間の差分

/* 全ページで読み込むJavaScript：コメント欄を下部に移動し、投稿者名入力を反映 */
mw.loader.using('mediawiki.util', function () {

    /* ===== 表示名入力欄を追加 ===== */
    function addNameField() {
        const form = document.querySelector('.comment-form');
        if (!form || form.querySelector('.comment-name-input')) return;

        const wrapper = document.createElement('div');
        wrapper.className = 'comment-name-input';

        const input = document.createElement('input');
        input.type = 'text';
        input.placeholder = '投稿者名（省略可）';
        input.style.width = '200px';

        wrapper.appendChild(input);
        form.prepend(wrapper);
    }

    /* ===== 送信時：本文に名前を埋め込む ===== */
    function hookSubmit() {
        const form = document.querySelector('.comment-form');
        if (!form) return;

        const textarea = form.querySelector('textarea');
        const input = form.querySelector('.comment-name-input input');
        const button = form.querySelector('button[type="submit"]');

        if (!textarea || !input || !button) return;

        button.addEventListener('click', function () {
            let name = input.value.trim();
            if (!name) name = '名無しさん';

            if (!textarea.value.startsWith('【')) {
                textarea.value = `【${name}】` + textarea.value;
            }
        });
    }

    /* ===== 表示時：名前を取り出して表示 ===== */
    function applyDisplayNames() {
        document.querySelectorAll('.comment').forEach(function (comment) {

            if (comment.querySelector('.comment-display-name')) return;

            const body = comment.querySelector('.comment-body, .comment-text');
            if (!body) return;

            const text = body.innerHTML;
            const match = text.match(/^【(.+?)】/);

            let name = '名無しさん';

            if (match) {
                name = match[1];
                body.innerHTML = body.innerHTML.replace(/^【.+?】/, '');
            }

            const header = comment.querySelector('.comment-header') || comment;
            const nameElem = document.createElement('div');
            nameElem.className = 'comment-display-name';
            nameElem.textContent = name;

            header.prepend(nameElem);
        });
    }

    /* ===== コメント追加後も再適用 ===== */
    document.addEventListener('click', function () {
        setTimeout(applyDisplayNames, 500);
    });

    /* ===== 初期実行 ===== */
    addNameField();
    hookSubmit();
    applyDisplayNames();
});

/* ===== コメント欄をページ下部に移動 ===== */
document.addEventListener('DOMContentLoaded', function () {
    const commentsContainer = document.querySelector('#mw-comments-container');
    if (commentsContainer) {
        document.body.appendChild(commentsContainer);
    }
});