ai_novelist_qa_ui.user.js

// ==UserScript==
// @name         AIのべりすと 質問UI
// @namespace    https://ai-novelist-share.geo.jp/
// @version      0.3.1
// @description  本文欄とスタイル選択の間に質問/答え入力用のインタフェースを追加します。初期状態では閉じているので「＋」ボタンで展開します。いくつかの設定を編集ページの環境設定の下に追加しています。
// @author       しらたま
// @match        https://ai-novel.com/novel.php
// @icon         https://www.google.com/s2/favicons?sz=64&domain=ai-novel.com
// @updateURL    https://gist.github.com/whiteball/a42a045732802d645c87ba70f796ede0/raw/ai_novelist_qa_ui.user.js
// @downloadURL  https://gist.github.com/whiteball/a42a045732802d645c87ba70f796ede0/raw/ai_novelist_qa_ui.user.js
// @supportURL   https://gist.github.com/whiteball/a42a045732802d645c87ba70f796ede0
// @grant        none
// ==/UserScript==

/*
2023/06/27 0.3.1
質問欄・回答欄の高さを設定できるようにした。
「【」以降をトリムするオプションを有効にしたときは、「[#」以降もトリムするように変更。
2023/06/27 0.3.0
リセットを押した時に、質問/答えのラベルが保存されるようにした。
画面の横幅が狭いときに質問/答え欄が画面外に押し出されないように調整。
本文への追加時にコメントとして追加するよう変更するチェックボックスを追加。
2023/06/25 0.2.0
デフォルト値を「【質問】」「【答え】」から「[#ユーザー]」「[#アシスタント]」に変更。
2023/06/21
「【」以降をトリムするオプションを追加。
「AIの答えを待っています」表示のまま進まなくなる不具合を修正。
2023/06/18
公開
*/
(function() {
    'use strict';

    let pref = JSON.parse(localStorage.mod_qa_ui ? localStorage.mod_qa_ui : '{}')
    if ( ! pref.hasOwnProperty('q_label')) {
        pref.q_label = '[#ユーザー]'
    }
    if ( ! pref.hasOwnProperty('a_label')) {
        pref.a_label = '[#アシスタント]'
    }
    if ( ! pref.hasOwnProperty('separator')) {
        pref.separator = ''
    }
    if ( ! pref.hasOwnProperty('script_disable')) {
        pref.script_disable = false
    }
    if ( ! pref.hasOwnProperty('always_bottom')) {
        pref.always_bottom = false
    }
    if ( ! pref.hasOwnProperty('trim_q')) {
        pref.trim_q = false
    }
    if ( ! pref.hasOwnProperty('with_comment')) {
        pref.with_comment = false
    }
    if ( ! pref.hasOwnProperty('q_height')) {
        pref.q_height = 80
    }
    if ( ! pref.hasOwnProperty('a_height')) {
        pref.a_height = 100
    }

    /*const loadPref = function () {
        const pref_temp = JSON.parse(localStorage.mod_qa_ui ? localStorage.mod_qa_ui : '{}')
    }*/
    const savePref = function () {
        if (pref) {
            localStorage.mod_qa_ui = JSON.stringify(pref)
        }
    }

    const sanitize = function (text) {
        return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g,'&quot;')
    }

    document.getElementById('writingMode').insertAdjacentHTML(`beforebegin`,
    `<div style="float: right;position:relative;right:2rem;"><button id="mod_qa_ui_open_button">+</button></div>
    <div id="mod_qa_ui_area" style="display:none;justify-content: center;margin-bottom: 2rem;"><div style="text-align:left;width:50%">
    <input type="text" id="mod_qa_ui_q_label" value="${sanitize(pref.q_label)}" placeholder="例：[#ユーザー]"><br>
    <textarea id="mod_qa_ui_q" style="width:100%;height: ${sanitize(pref.q_height.toString())}px;" placeholder="ここに質問を入力してください"></textarea><br>
    <input type="text" id="mod_qa_ui_a_label" value="${sanitize(pref.a_label)}" placeholder="例：[#アシスタント]" style="margin-top: 0.75rem;"><br>
    <textarea id="mod_qa_ui_a" style="width:100%;height: ${sanitize(pref.a_height.toString())}px;" placeholder="ここに回答が表示されます"></textarea>
    </div>
    <div style="width:20%;padding:1rem;min-width:min(250px,calc(45% - 2rem))">
    <button id="mod-qa-continuation" class="btn-square btn-getcontinuation" style="width:100%;margin-bottom: 0.75rem;">回答</button><br>
    <button id="mod-qa-retry" class="btn-square" style="width:100%">再回答</button>
    <div style="display:flex;justify-content:space-between;margin: 0.75rem 0;">
    <button id="mod-qa-undo" class="btn-square" style="width:45%">&lt;&lt; Undo</button>
    <button id="mod-qa-redo" class="btn-square" style="width:45%">Redo &gt;&gt;</button>
    </div>
    <div style="display:flex;justify-content:space-between;margin-bottom: 0.75rem">
    <button id="mod-qa-add-text" class="btn-square" style="width:45%;">本文に追加</button>
    <button id="mod-qa-add-text-a" class="btn-square" style="width:45%;">回答のみ追加</button>
    </div>
    <div style="margin-bottom: 0.75rem">
    <label><input type="checkbox" style="font-size: 12px" id="mod-qa-with-comment" ` + (pref.with_comment ? 'checked' : '') + `><span class="explanations" style="font-size:12px"> コメントとして追加</span></label>
    </div>
    <button id="mod-qa-reset" class="btn-square" style="width:100%">リセット</button>
    </div>
    </div>`)
    const mod_qa_ui_open_button = document.getElementById('mod_qa_ui_open_button')
    // スタイル選択がずれるけど、とりあえず無視する
    // mod_qa_ui_open_button.parentElement.nextSibling.style.width = 'calc(100% + ' +mod_qa_ui_open_button.parentElement.clientWidth + ')'
    mod_qa_ui_open_button.addEventListener('click', function () {
        const mod_qa_ui_area = document.getElementById('mod_qa_ui_area')
        if (mod_qa_ui_area.style.display === 'none') {
            mod_qa_ui_area.style.display = 'flex'
            this.innerText = '-'
        } else {
            mod_qa_ui_area.style.display = 'none'
            this.innerText = '+'
        }
    })
    // 表示の調整
    const VisualChange2 = function () {
        const $ = window.jQuery
        $('#mod_qa_ui_q,#mod_qa_ui_a').css('font-family', document.getElementById("vis_fontfamily").value);
        $('#mod_qa_ui_q,#mod_qa_ui_a').css('font-size', document.getElementById("vis_fontsize").value / 40 + 'rem');
        $('#mod_qa_ui_q,#mod_qa_ui_a').css('letter-spacing', document.getElementById("vis_fontkerning").value / 80 + 'rem');
        $('#mod_qa_ui_q,#mod_qa_ui_a').css('line-height', document.getElementById("vis_fontleading").value / 10 + 'rem');
		if ( document.getElementById("vis_bgcolor").value == "black" ) {
			$('#mod-qa-continuation').css('background-color', "black");
			$('#mod-qa-continuation').css('border-color', "#cd2b5a");
			$('#mod-qa-continuation').css('color', "#cd2b5a");
			$('#mod-qa-retry').css('background-color', "black");
			$('#mod-qa-retry').css('color', "white");
			$('#mod-qa-retry').css('border-color', "white");
			$('#mod-qa-undo').css('background-color', "black");
			$('#mod-qa-undo').css('color', "white");
			$('#mod-qa-undo').css('border-color', "white");
			$('#mod-qa-redo').css('background-color', "black");
			$('#mod-qa-redo').css('color', "white");
			$('#mod-qa-redo').css('border-color', "white");
			$('#mod-qa-add-text').css('background-color', "black");
			$('#mod-qa-add-text').css('color', "rgb(53, 142, 71)");
			$('#mod-qa-add-text').css('border-color', "rgb(53, 142, 71)");
			$('#mod-qa-add-text-a').css('background-color', "black");
			$('#mod-qa-add-text-a').css('color', "rgb(51, 170, 170)");
			$('#mod-qa-add-text-a').css('border-color', "rgb(51, 170, 170)");
			$('#mod-qa-reset').css('background-color', "black");
			$('#mod-qa-reset').css('color', "white");
			$('#mod-qa-reset').css('border-color', "white");
        } else {
			$('#mod-qa-continuation').css('background-color', "#cd2b5a");
			$('#mod-qa-continuation').css('border-color', "black");
			$('#mod-qa-continuation').css('color', "white");
			$('#mod-qa-retry').css('background-color', "white");
			$('#mod-qa-retry').css('color', "#777777");
			$('#mod-qa-retry').css('border-color', "#777777");
			$('#mod-qa-undo').css('background-color', "white");
			$('#mod-qa-undo').css('color', "#777777");
			$('#mod-qa-undo').css('border-color', "#777777");
			$('#mod-qa-redo').css('background-color', "white");
			$('#mod-qa-redo').css('color', "#777777");
			$('#mod-qa-redo').css('border-color', "#777777");
			$('#mod-qa-add-text').css('background-color', "white");
			$('#mod-qa-add-text').css('color', "rgb(53, 142, 71)");
			$('#mod-qa-add-text').css('border-color', "rgb(53, 142, 71)");
			$('#mod-qa-add-text-a').css('background-color', "white");
			$('#mod-qa-add-text-a').css('color', "rgb(51, 170, 170)");
			$('#mod-qa-add-text-a').css('border-color', "rgb(51, 170, 170)");
			$('#mod-qa-reset').css('background-color', "white");
			$('#mod-qa-reset').css('color', "#777777");
			$('#mod-qa-reset').css('border-color', "#777777");
        }
        const array_btnsize_continue_fontsize = new Array('20','14','16','18','20','22','24','30');
        const array_btnsize_fontsize = new Array('18','12','14','16','18','20','22','26');
        $('#mod-qa-continuation').css('font-size', array_btnsize_continue_fontsize[document.getElementById("gui_btnsize").value]);
        $('#mod-qa-continuation').css('height', array_btnsize_continue_fontsize[document.getElementById("gui_btnsize").value] * 3);
        $('#mod-qa-retry').css('font-size', array_btnsize_fontsize[document.getElementById("gui_btnsize").value]);
        $('#mod-qa-retry').css('height', array_btnsize_continue_fontsize[document.getElementById("gui_btnsize").value] * 3);
        $('#mod-qa-undo').css('font-size', array_btnsize_fontsize[document.getElementById("gui_btnsize").value]);
        $('#mod-qa-undo').css('height', array_btnsize_continue_fontsize[document.getElementById("gui_btnsize").value] * 3);
        $('#mod-qa-redo').css('font-size', array_btnsize_fontsize[document.getElementById("gui_btnsize").value]);
        $('#mod-qa-redo').css('height', array_btnsize_continue_fontsize[document.getElementById("gui_btnsize").value] * 3);
        $('#mod-qa-add-text').css('font-size', array_btnsize_fontsize[document.getElementById("gui_btnsize").value]);
        $('#mod-qa-add-text').css('height', array_btnsize_continue_fontsize[document.getElementById("gui_btnsize").value] * 3);
        $('#mod-qa-add-text-a').css('font-size', array_btnsize_fontsize[document.getElementById("gui_btnsize").value]);
        $('#mod-qa-add-text-a').css('height', array_btnsize_continue_fontsize[document.getElementById("gui_btnsize").value] * 3);
        $('#mod-qa-reset').css('font-size', array_btnsize_fontsize[document.getElementById("gui_btnsize").value]);
        $('#mod-qa-reset').css('height', array_btnsize_continue_fontsize[document.getElementById("gui_btnsize").value] * 3);
    }
    document.getElementById('vis_fontsize').addEventListener('input', VisualChange2);
    document.getElementById('vis_fontkerning').addEventListener('input', VisualChange2);
    document.getElementById('vis_fontleading').addEventListener('input', VisualChange2);
    document.getElementById('gui_selectbtnsize').addEventListener('input', VisualChange2);
    document.getElementById('gui_btnsize').addEventListener('input', VisualChange2);
    document.getElementById('gui_iconsize').addEventListener('input', VisualChange2);
    const originalFontFamily = window.FontFamily
    window.FontFamily = function (elem) {
        originalFontFamily(elem)
        VisualChange2()
    }
    const originalLoadVisConfigFromStorage = window.LoadVisConfigFromStorage
    window.LoadVisConfigFromStorage = function (id, dontclose = false) {
        originalLoadVisConfigFromStorage()
        VisualChange2()
    }
    VisualChange2()

    // ここから送信のための処理
    const updateLabel = function () {
        const data_undo = document.getElementById('data_undo')
        const mod_qa_undo = document.getElementById('mod-qa-undo')
        const mod_qa_redo = document.getElementById('mod-qa-redo')
        if ( Number(localStorage.undo_last) <= 1 || !localStorage.undo_last || !data_undo.value ) {
            mod_qa_undo.innerText = "<< Undo";
        } else {
            mod_qa_undo.innerText = "Undo ("+(Number(localStorage.undo_last) - 1)+")";
        }
        if (!!localStorage.undo_last && data_undo && data_undo.value) {
            const history_list = data_undo.value.split("<|entry|>")
            if (Number(localStorage.undo_last) >= (history_list.length - 1)) {
                mod_qa_redo.innerText = "Redo >>";
            } else {
                mod_qa_redo.innerText = "Redo (" + (history_list.length - Number(localStorage.undo_last) - 1) + ")";
            }
        }
    }
    let originalCopyContent = window.CopyContent
    let originalShowtips = window.showtips
    const showtipsEx = function () {
        const data = localStorage.textdata
        const output = pickUpOutput(data)
        if (output != '') {
            const ai = document.getElementById('ai_output')
            if (ai) {
                ai.parentElement.removeChild(ai)
                document.getElementById("mod_qa_ui_a").value = output
                window.CopyContent()
            }
        }
        if (showtipsEx !== originalShowtips) {
            window.showtips = originalShowtips
            window.showtips()
        }
    }
    const originalShowpost = window.showpost
    window.showpost = function () {
        if (pref.script_disable) {
            // 退避していたスクリプト種別を復元
            scriptTypeCache.forEach(function (value, id) {
                const script = document.getElementById(id)
                if (script) {
                    script.value = value
                }
            })
        }
        updateLabel()
        originalShowpost()
        if (originalShowtips !== showtipsEx) {
            window.showtips = originalShowtips
        }
    }

    const pickUpOutput = function (data) {
        let start = data.lastIndexOf('<span id="ai_output"'), end = data.indexOf('</span>', start)
        if (start >= 0 && end >= 0) {
            // 出力した後
            end += '</span>'.length
            const output = data.slice(start, end)
            let temp = output.replace(/<span[^>]*>/g, '').replace(/<\/span>/g, '').replace(/<br>/g, '\n')
            if (pref.trim_q) {
                const pos = temp.indexOf('【')
                if (pos >= 0) {
                    temp = temp.slice(0, pos)
                }
                const pos2 = temp.indexOf('[#')
                if (pos2 >= 0) {
                    temp = temp.slice(0, pos2)
                }
            }

            return temp
        }

        return ''
    }

    const targetType = new Set()
    for (const type of ['script_in_pin',
                        'script_in_pin_all',
                        'script_in_pin_regex',
                        'script_in_pin_all_regex',
                        'script_in_pin_user',
                        'script_in_pin_user_after',
                        'script_in_pin_user_after_all',
                        'script_in_pin_user_regex',
                        'script_in_pin_user_after_regex',
                        'script_in_pin_user_after_all_regex']) {
        targetType.add(type)
    }
    const scriptTypeCache = new Map()

    const setupQA = function () {
        originalCopyContent = window.CopyContent
        window.CopyContent = function () {
            originalCopyContent()
            const data = document.getElementById("data")
            const pos = data.value.indexOf('@endpoint')
            if (pos >= 0) {
                data.value = data.value.slice(0, pos) + '\n'
                    + (document.getElementById("mod_qa_ui_separator").value !== '' ? document.getElementById("mod_qa_ui_separator").value + '\n' : '')
                    + (document.getElementById("mod_qa_ui_q_label").value !== '' ? document.getElementById("mod_qa_ui_q_label").value + '\n' : '')
                    + (document.getElementById("mod_qa_ui_q").value !== '' ? document.getElementById("mod_qa_ui_q").value + '\n' : '')
                    + (document.getElementById("mod_qa_ui_a_label").value !== '' ? document.getElementById("mod_qa_ui_a_label").value + '\n' : '')
                    + data.value.slice(pos)
            } else {
                data.value += '\n'
                    + (document.getElementById("mod_qa_ui_separator").value !== '' ? document.getElementById("mod_qa_ui_separator").value + '\n' : '')
                    + (document.getElementById("mod_qa_ui_q_label").value !== '' ? document.getElementById("mod_qa_ui_q_label").value + '\n' : '')
                    + (document.getElementById("mod_qa_ui_q").value !== '' ? document.getElementById("mod_qa_ui_q").value + '\n' : '')
                    + (document.getElementById("mod_qa_ui_a_label").value !== '' ? document.getElementById("mod_qa_ui_a_label").value + '\n' : '')
            }
        }
        if (window.showtips !== showtipsEx) {
            originalShowtips = window.showtips
            window.showtips = showtipsEx
        }
        if (pref.script_disable) {
            // スクリプト種別を退避して無効化
            scriptTypeCache.clear()
            for (const script of document.getElementsByClassName('script_selector')) {
                if (targetType.has(script.value)) {
                    scriptTypeCache.set(script.id, script.value)
                    script.value = 'script_none'
                }
            }
        }
    }
    const teardownQA = function () {
        window.CopyContent = originalCopyContent
    }

    const mod_qa_continuaton = document.getElementById('mod-qa-continuation')
    mod_qa_continuaton.addEventListener('click', function () {
        const mod_qa_ui_q = document.getElementById('mod_qa_ui_q')
        if (!mod_qa_ui_q || mod_qa_ui_q.value === '') {
            window.alert('質問文を入力してください。')
            mod_qa_ui_q.focus()
            return
        }
        setupQA()
        document.getElementById('getcontinuation').dispatchEvent(new Event('click'))
        teardownQA()
    })
    const mod_qa_retry = document.getElementById('mod-qa-retry')
    mod_qa_retry.addEventListener('click', function () {
        const mod_qa_ui_q = document.getElementById('mod_qa_ui_q')
        if (!mod_qa_ui_q || mod_qa_ui_q.value === '') {
            window.alert('質問文を入力してください。')
            mod_qa_ui_q.focus()
            return
        }
        if ( !document.getElementById("data_undo").value ) { return false; }
        if ( document.getElementById("data_undo").value.indexOf("<|entry|>") == -1 ) { return false; }
        if ( !window.GetHistory(1) ) { return false; }

        setupQA()
        document.getElementById('retry').dispatchEvent(new Event('click'))
        teardownQA()
    })

    const mod_qa_undo = document.getElementById('mod-qa-undo')
    mod_qa_undo.addEventListener('click', function () {
        if ( document.getElementById('submitarea').style.display == "none" ) { return false; }
        if ( !document.getElementById("data_undo").value ) { return false; }
        if ( document.getElementById("data_undo").value.indexOf("<|entry|>") == -1 ) { return false; }
        if ( !localStorage.undo_last ) { localStorage.undo_last = 0; }

        if ( window.GetHistory(Number(localStorage.undo_last) - 1) ) {
            localStorage.undo_last = String(Number(localStorage.undo_last) - 1)
        } else {
            return false
        }

        const data = window.GetHistory(localStorage.undo_last)
        const output = pickUpOutput(data)
        document.getElementById("mod_qa_ui_a").value = output
        updateLabel()
        VisualChange()
    })

    const mod_qa_redo = document.getElementById('mod-qa-redo')
    mod_qa_redo.addEventListener('click', function () {
        if ( document.getElementById('submitarea').style.display == "none" ) { return false; }
        if ( !document.getElementById("data_undo").value ) { return false; }
        if ( document.getElementById("data_undo").value.indexOf("<|entry|>") == -1 ) { return false; }

        if ( window.GetHistory(Number(localStorage.undo_last) + 1) ) {
            localStorage.undo_last = String(Number(localStorage.undo_last) + 1)
        } else {
            return false
        }

        const data = window.GetHistory(localStorage.undo_last)
        const output = pickUpOutput(data)
        document.getElementById("mod_qa_ui_a").value = output
        updateLabel()
        VisualChange()
    })

    const mod_qa_add_text = document.getElementById('mod-qa-add-text')
    mod_qa_add_text.addEventListener('click', function () {
        const endpoint = endpointSearch()
        const text = (pref.with_comment ? '@/*<br>' : '') + (document.getElementById("mod_qa_ui_separator").value !== '' ? sanitize(document.getElementById("mod_qa_ui_separator").value) + '<br>' : '')
            + (document.getElementById("mod_qa_ui_q_label").value !== '' ? sanitize(document.getElementById("mod_qa_ui_q_label").value) + '<br>' : '')
            + (document.getElementById("mod_qa_ui_q").value !== '' ? sanitize(document.getElementById("mod_qa_ui_q").value) + '<br>' : '')
            + (document.getElementById("mod_qa_ui_a_label").value !== '' ? sanitize(document.getElementById("mod_qa_ui_a_label").value) + '<br>' : '')
            + (document.getElementById("mod_qa_ui_a").value !== '' ? sanitize(document.getElementById("mod_qa_ui_a").value) : '')
            + (pref.with_comment ? '<br>@*/<br>' : '')
        if (!pref.always_bottom && endpoint) {
            const temp = endpoint[0][endpoint[2]].innerHTML
            endpoint[0][endpoint[2]].innerHTML = temp.slice(0, endpoint[1]) + '<br>' + text + temp.slice(endpoint[1])
        } else {
            const all = document.getElementsByClassName('data_edit')
            const temp = all[all.length - 1].innerHTML
            all[all.length - 1].innerHTML += ((temp.slice(-4) === '<br>') ? '' : '<br>') + text
        }
        window.CopyContent()
        window.TextSharding()
    })

    const mod_qa_add_text_a = document.getElementById('mod-qa-add-text-a')
    mod_qa_add_text_a.addEventListener('click', function () {
        const endpoint = endpointSearch()
        const text = (pref.with_comment ? '@/*<br>' : '') + (document.getElementById("mod_qa_ui_a").value !== '' ? sanitize(document.getElementById("mod_qa_ui_a").value) : '') + (pref.with_comment ? '<br>@*/<br>' : '')
        if (!pref.always_bottom && endpoint) {
            const temp = endpoint[0][endpoint[2]].innerHTML
            endpoint[0][endpoint[2]].innerHTML = temp.slice(0, endpoint[1]) + '<br>' + text + temp.slice(endpoint[1])
        } else {
            const all = document.getElementsByClassName('data_edit')
            const temp = all[all.length - 1].innerHTML
            all[all.length - 1].innerHTML += ((temp.slice(-4) === '<br>') ? '' : '<br>') + text
        }
        window.CopyContent()
        window.TextSharding()
    })

    const mod_qa_reset = document.getElementById('mod-qa-reset')
    mod_qa_reset.addEventListener('click', function () {
        if (!window.confirm('質問UIの入力を全てリセットします。よろしいですか？')) {
            return
        }
        document.getElementById("mod_qa_ui_q_label").value = '[#ユーザー]'
        document.getElementById("mod_qa_ui_q").value = ''
        document.getElementById("mod_qa_ui_a_label").value = '[#アシスタント]'
        document.getElementById("mod_qa_ui_a").value = ''

        pref.q_label = '[#ユーザー]'
        pref.a_label = '[#アシスタント]'
        savePref()
    })

    // オプションメニューの挿入位置を決める
    let last_menu = document.getElementById('mod_voicevox_menu')
    if (last_menu) {
        last_menu = last_menu.parentElement
    } else {
        last_menu = document.getElementById('mod_side_menu_setting')
        if (last_menu) {
            last_menu = last_menu.parentElement
        } else {
            last_menu = document.querySelector('#options_goodies > .prefencesMenu')
        }
    }
    if ( ! last_menu) {
        return
    }

    last_menu.insertAdjacentHTML('afterend', `
<dl>
  <dt id="mod_qa_ui_setting" style="cursor: pointer">
    <div class="header3" style="padding:0px;">
      <h3 style="padding-left:15px;" id="options_head">▼　質問UI設定(ユーザースクリプト)</h3>
    </div>
  </dt>
  <dd class="dd-margin" style="margin: 0px 0px 0px 40px; display: none;">
    <h3>質問UI設定
      <span id="tooltips">
	    <span id="help_mod_qa_ui_setting" data-text="質問UIの設定です。「[#ユーザー]」の一行上に挿入する区切り文字や、質問回答時にスクリプトの各種確定置換の無効化するかを設定することができます。">
	    <img src="images/icon_popup.png" width="20" height="20" id="help_mod_qa_ui_setting_icon" class="help_popup" style="margin-left: 10px; margin-top: -5px; vertical-align:middle;" aria-describedby="tooltip_mod_qa_ui_setting" onclick="return false;"></span>
      </span>
    </h3>
    <div style="margin-bottom: 1rem;line-height: 2rem;">
        <label style="margin: 5px 0">区切り文字：<input type="text" style="font-size: 18px;width:10rem;" id="mod_qa_ui_separator" value="${sanitize(pref.separator)}" placeholder="例：***"></label><br>
        <label><input type="checkbox" style="font-size: 18px; transform:scale(1.5);" id="mod_qa_ui_script_disable" ` + (pref.script_disable ? 'checked' : '') + `><span class="explanations">　スクリプトの確定置換を無効にする</span></label><br>
        <label><input type="checkbox" style="font-size: 18px; transform:scale(1.5);" id="mod_qa_ui_always_bottom" ` + (pref.always_bottom ? 'checked' : '') + `><span class="explanations">　本文追加時に常に末尾に追加する(@endpointを考慮しない)</span></label><br>
        <label><input type="checkbox" style="font-size: 18px; transform:scale(1.5);" id="mod_qa_ui_trim_q" ` + (pref.trim_q ? 'checked' : '') + `><span class="explanations">　回答欄では出力文の「【」や「[#」以降を表示しない</span></label><br>
        <label style="margin: 5px 0">質問欄の高さ(px)：<input type="number" style="font-size: 18px;width:7rem;" id="mod_qa_ui_q_height" value="${sanitize(pref.q_height.toString())}" placeholder="例：80"></label><br>
        <label style="margin: 5px 0">回答欄の高さ(px)：<input type="number" style="font-size: 18px;width:7rem;" id="mod_qa_ui_a_height" value="${sanitize(pref.a_height.toString())}" placeholder="例：100"></label>
    </div>
  </dd>
</dl>
    `)
    // メニュー開閉
    window.jQuery('#mod_qa_ui_setting').on('click', function() {
		window.jQuery(this).next().slideToggle('fast')
	})
    // ヘルプのポップアップ
    window.jQuery("#help_mod_qa_ui_setting").on({
        'mouseenter': function () {
            const $ = window.jQuery
            var text = $(this).attr('data-text');
            $(this).append('<div class="tooltips_body">' + text + '</div>');
        },
        'mouseleave': function () {
            window.jQuery(this).find(".tooltips_body").remove();
        }
    })

    const mod_qa_ui_separator = document.getElementById('mod_qa_ui_separator')
    if (mod_qa_ui_separator) {
        mod_qa_ui_separator.addEventListener('change', function () {
            pref.separator = this.value
            savePref()
        })
    }
    const mod_qa_ui_q_label = document.getElementById('mod_qa_ui_q_label')
    if (mod_qa_ui_q_label) {
        mod_qa_ui_q_label.addEventListener('change', function () {
            pref.q_label = this.value
            savePref()
        })
    }
    const mod_qa_ui_a_label = document.getElementById('mod_qa_ui_a_label')
    if (mod_qa_ui_a_label) {
        mod_qa_ui_a_label.addEventListener('change', function () {
            pref.a_label = this.value
            savePref()
        })
    }
    const mod_qa_ui_script_disable = document.getElementById('mod_qa_ui_script_disable')
    if (mod_qa_ui_script_disable) {
        mod_qa_ui_script_disable.addEventListener('change', function () {
            pref.script_disable = this.checked
            savePref()
        })
    }
    const mod_qa_ui_always_bottom = document.getElementById('mod_qa_ui_always_bottom')
    if (mod_qa_ui_always_bottom) {
        mod_qa_ui_always_bottom.addEventListener('change', function () {
            pref.always_bottom = this.checked
            savePref()
        })
    }
    const mod_qa_ui_trim_q = document.getElementById('mod_qa_ui_trim_q')
    if (mod_qa_ui_trim_q) {
        mod_qa_ui_trim_q.addEventListener('change', function () {
            pref.trim_q = this.checked
            savePref()
        })
    }
    const mod_qa_with_comment = document.getElementById('mod-qa-with-comment')
    if (mod_qa_with_comment) {
        mod_qa_with_comment.addEventListener('change', function () {
            pref.with_comment = this.checked
            savePref()
        })
    }
    const mod_qa_ui_q_height = document.getElementById('mod_qa_ui_q_height')
    if (mod_qa_ui_q_height) {
        mod_qa_ui_q_height.addEventListener('change', function () {
            pref.q_height = Number(this.value)
            if (isNaN(pref.q_height)) {
                pref.q_height = 80
            }
            document.getElementById("mod_qa_ui_q").style.height = pref.q_height + 'px'
            savePref()
        })
    }
    const mod_qa_ui_a_height = document.getElementById('mod_qa_ui_a_height')
    if (mod_qa_ui_a_height) {
        mod_qa_ui_a_height.addEventListener('change', function () {
            pref.a_height = this.value
            if (isNaN(pref.a_height)) {
                pref.a_height = 100
            }
            document.getElementById("mod_qa_ui_a").style.height = pref.a_height + 'px'
            savePref()
        })
    }
})();