☰

BGA Translation TextBox Export

Add a button on the BGA translation page that allows all the text to be translated on the page to be placed in a text block for easy copying.

// ==UserScript==
// @name         BGA Translation TextBox Export
// @version      1.1.0
// @namespace    ani20168
// @description  Add a button on the BGA translation page that allows all the text to be translated on the page to be placed in a text block for easy copying.
// @author       ani20168
// @license      MIT
// @match        https://boardgamearena.com/translation*
// @icon         https://t0.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=http://boardgamearena.com&size=64
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    /*** 常數 ***/
    const SEPARATOR = '----------------------------------';  // 分隔線

    /*** 主程式 ***/
    function setup() {
        // 避免重複建立
        if (document.getElementById('textBoxExportButton')) { return; }

        /* ---------- 1. Export 按鈕 ---------- */
        const exportButton = document.createElement('input');
        exportButton.type = 'button';
        exportButton.value = 'TextBox Export';
        exportButton.id = 'textBoxExportButton';
        exportButton.className = 'bgabutton bgabutton_blue';
        exportButton.style.marginLeft = '4px';

        const exportArea = document.createElement('textarea');
        exportArea.style.cssText = 'width:100%;height:200px;display:none;';
        exportArea.readOnly = true;

        exportButton.onclick = () => {
            if (exportArea.style.display === 'block') {
                exportArea.style.display = 'none';
            } else {
                const raws = Array.from(document.getElementsByClassName('readonly_textarea'))
                    .map(t => t.value.trim());
                exportArea.value = raws.join('\n' + SEPARATOR + '\n');
                exportArea.style.display = 'block';
            }
        };

        /* ---------- 2. Import 按鈕 ---------- */
        const importButton = document.createElement('input');
        importButton.type = 'button';
        importButton.value = 'TextBox Import';
        importButton.id = 'textBoxImportButton';
        importButton.className = 'bgabutton bgabutton_blue';
        importButton.style.marginLeft = '4px';

        const importArea = document.createElement('textarea');
        importArea.style.cssText = 'width:100%;height:200px;display:none;';

        importButton.onclick = () => {
            if (importArea.style.display === 'block') {
                // 第二次點擊 → 解析並分配
                distributeTranslations(importArea.value);
                importArea.style.display = 'none';
            } else {
                importArea.style.display = 'block';
            }
        };

        /* ---------- 3. 把按鈕插入原本 UI ---------- */
        const resetFilterButton = document.querySelector('#findreset_form > span');
        resetFilterButton.appendChild(exportButton);
        resetFilterButton.appendChild(importButton);

        const btnContainer = document.getElementById('filters_buttons');
        btnContainer.appendChild(exportArea);
        btnContainer.appendChild(importArea);
    }

    /***
     * 把整段翻譯文字依 SEPARATOR 切開並分配到每個 translation_block
     * @param {string} rawText - 使用者貼上的整份翻譯結果
     */
    function distributeTranslations(rawText) {
        const pieces = rawText
            .split(new RegExp(`\\s*${SEPARATOR}\\s*`, 'g'))
            .map(t => t.trim())
            .filter(Boolean);

        const blocks = Array.from(document.getElementsByClassName('translation_block'));
        let idx = 0;

        blocks.forEach(block => {
            const readonly = block.querySelector('.readonly_textarea');
            const translated = block.querySelector('textarea[id^="translated_"]');
            if (!readonly || !translated) { return; }  // 保險檢查

            // 如果還有對應翻譯就建立 UI
            const piece = pieces[idx++];
            if (piece !== undefined) {
                addLoadUI(block, translated, piece);
            }
        });
    }

    /**
     * 在指定翻譯區塊右側新增「載入文字框」+「確認載入」按鈕
     * @param {HTMLElement} block - .translation_block
     * @param {HTMLTextAreaElement} translatedArea - 原本用來輸入翻譯的 textarea
     * @param {string} piece - 對應的翻譯文字
     */
    function addLoadUI(block, translatedArea, piece) {
        // 若已經加過就僅更新內容
        let loadDiv = block.querySelector('.loaded_translation_zone');
        if (!loadDiv) {
            loadDiv = document.createElement('div');
            loadDiv.className = 'loaded_translation_zone translation_meta';
            // textarea
            const loadTA = document.createElement('textarea');
            loadTA.className = 'loaded_textarea';
            loadTA.style.cssText = 'width:120%;height:140px;margin-top:4px;box-sizing:border-box;';
            loadDiv.appendChild(loadTA);
            // button
            const btnWrap = document.createElement('div');
            btnWrap.style.display = 'inline-block';
            const confirmBtn = document.createElement('a');
            confirmBtn.href = 'javascript:false;';
            confirmBtn.tabIndex = -1;
            confirmBtn.className = 'bgabutton bgabutton_blue';
            confirmBtn.textContent = '確認載入';
            btnWrap.appendChild(confirmBtn);
            loadDiv.appendChild(btnWrap);

            // 行為：點下"確認載入"
            confirmBtn.onclick = () => {
                // 1) 把翻譯文字塞進官方 textarea
                translatedArea.value = loadTA.value.trim();

                // 2) 觸發 input 事件，讓網站知道值變了
                translatedArea.dispatchEvent(new Event('input', { bubbles: true }));

                // 3) 模擬「點到 → 離開」以觸發自動上傳
                translatedArea.focus();
                // 用 setTimeout 保證事件順序：先 focus，再 blur
                setTimeout(() => translatedArea.blur(), 0);

                // 4) UI 標示
                confirmBtn.textContent = '已載入';
                confirmBtn.classList.add('disabled');
            };

            // 插入到右側 col-md-6 的最下方
            const rightCol = block.querySelector('.col-md-6');
            rightCol.appendChild(loadDiv);
        }
        // 更新文字
        loadDiv.querySelector('.loaded_textarea').value = piece;
    }

    /* ---------- 啟動監聽 ---------- */
    new MutationObserver(setup).observe(document, { childList: true, subtree: true });
    setup();
})();