ai_novelist_adjust_side_menu.user.js

// ==UserScript==
// @name         AIのべりすと サイドメニュー幅変更
// @namespace    https://ai-novelist-share.geo.jp/
// @version      0.2.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/ebe1f6f9b036d412e11f09cecbde9a80/raw/ai_novelist_adjust_side_menu.user.js
// @downloadURL  https://gist.github.com/whiteball/ebe1f6f9b036d412e11f09cecbde9a80/raw/ai_novelist_adjust_side_menu.user.js
// @supportURL   https://gist.github.com/whiteball/ebe1f6f9b036d412e11f09cecbde9a80
// @grant        none
// ==/UserScript==

/*
更新履歴
2023/12/01  0.2.1
ボタンの固定がアイコンサイズ変更に追従できなかったのを修正。
2023/12/01  0.2.0
メニュー切り替えボタン(丸いアイコンで表示されているボタン)をサイドメニューの上部に固定するオプションを追加。
*/
(function() {
    'use strict';
    let pref = JSON.parse(localStorage.mod_side_menu ? localStorage.mod_side_menu : '{}')
    if ( ! pref.hasOwnProperty('enabled')) {
        pref.enabled = true
    }
    if ( ! pref.hasOwnProperty('button_position')) {
        pref.button_position = 1
    }
    if ( ! pref.hasOwnProperty('side_menu_width')) {
        pref.side_menu_width = 600
    }
    if ( ! pref.hasOwnProperty('side_menu_width_max')) {
        pref.side_menu_width_max = 50
    }
    if ( ! pref.hasOwnProperty('side_menu_offset_height')) {
        pref.side_menu_offset_height = 5
    }
    if ( ! pref.hasOwnProperty('offset')) {
        pref.offset = false
    }
    if ( ! pref.hasOwnProperty('fixed_balloon')) {
        pref.fixed_balloon = false
    }

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

    document.head.insertAdjacentHTML('beforeend',`<style>
    :root {
        --side-menu-tooltips-width: 600px
    }
    #mod-side-menu-inner .tooltips_body {
        width: var(--side-menu-tooltips-width, 600px);
        bottom: initial;
        border: #999999 1px solid;
    }
</style>`)
    const menu = document.getElementById('side_menu_options')

    // オプションメニューの挿入位置を決める
    let last_menu = document.getElementById('mod_voicevox_menu')
    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_side_menu_setting" style="cursor: pointer">
    <div class="header3" style="padding:0px;">
      <h3 style="padding-left:15px;" id="options_head">▼　サイドメニュー表示設定(ユーザースクリプト)</h3>
    </div>
  </dt>
  <dd class="dd-margin" style="margin: 0px 0px 0px 40px; display: none;">
    <h3>メニュー表示設定
      <span id="tooltips">
	    <span id="help_mod_side_menu_setting" data-text="サイドメニューを表示する際の設定です。サイズを調整することができます。">
	    <img src="images/icon_popup.png" width="20" height="20" id="help_mod_side_menu_setting_icon" class="help_popup" style="margin-left: 10px; margin-top: -5px; vertical-align:middle;" aria-describedby="tooltip_mod_side_menu_setting" onclick="return false;"></span>
      </span>
    </h3>
    <div style="margin-bottom: 1rem;line-height: 2rem;">
        <label><input type="checkbox" style="font-size: 18px; transform:scale(1.5);" id="mod_side_menu_fixed_balloon" ` + (pref.fixed_balloon ? 'checked' : '') + `><span class="explanations">　メニュー切り替えボタンを上部に固定する</span></label><br>
        <label style="margin: 5px 0">メニュー幅(px)：<input type="number" style="font-size: 18px;width:4rem;" id="mod_side_menu_width" value="${pref.side_menu_width}" min="1" max="9999" placeholder="例：600"></label><br>
        <label style="margin: 5px 0">メニュー幅の上限(画面幅に対する%)：<input type="number" style="font-size: 18px;width:4rem;" id="mod_side_menu_width_max" value="${pref.side_menu_width_max}" min="1" max="100" placeholder="例：50"></label><br>
    </div>
  </dd>
</dl>
    `)
    // メニュー開閉
    window.jQuery('#mod_side_menu_setting').on('click', function() {
		window.jQuery(this).next().slideToggle('fast')
	})
    // ヘルプのポップアップ
    window.jQuery("#help_mod_side_menu_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_side_menu_fixed_balloon = document.getElementById('mod_side_menu_fixed_balloon')
    const adjustFixedBalloonHeight = function () {
        if (pref.fixed_balloon) {
            const inner = document.getElementById('mod-side-menu-inner')
            if (inner.previousElementSibling) {
                const jBaloon = window.jQuery(inner.previousElementSibling)
                const offset = 15 + jBaloon.height()
                inner.style.height = `calc(100% - ${offset}px)`;
            }
        }
    }
    const changeBalloonMenuFixed = function () {
        const inner = document.getElementById('mod-side-menu-inner')
        if (!inner) {
            return
        }

        if (pref.fixed_balloon) {
            const jBaloon = window.jQuery(inner.children[0])
            const offset = 15 + jBaloon.height()
            inner.insertAdjacentElement('beforebegin', inner.children[0])
            inner.style.width = `${pref.side_menu_width - 3}px`;
            inner.style.overflow = `hidden scroll`;
            inner.style.position = `fixed`;
            inner.style.height = `calc(100% - ${offset}px)`;
            inner.parentNode.style['overflow-y'] = 'hidden'
        } else {
            if (inner.previousElementSibling) {
                inner.insertAdjacentElement('afterbegin', inner.previousElementSibling)
                inner.style.width = `${pref.side_menu_width - 20}px`;
                inner.style.overflow = ``;
                inner.style.position = ``;
                inner.style.height = ``;
                inner.parentNode.style['overflow-y'] = ''
            }
        }
    }
    if (mod_side_menu_fixed_balloon) {
        mod_side_menu_fixed_balloon.addEventListener('change', function () {
            pref.fixed_balloon = this.checked
            changeBalloonMenuFixed()
            savePref()
        })
        // アイコンサイズ変更に引っかけたい
        const originalToggleFontSets = window.ToggleFontSets
        window.ToggleFontSets = function (num, bgcolor) {
            originalToggleFontSets(num, bgcolor)
            adjustFixedBalloonHeight()
            // アイコンサイズが変わった後の高さを確実に取得するタイミングが無いので
            // 苦肉の策でsetTimeoutで遅延実行する
            setTimeout(adjustFixedBalloonHeight, 100)
        }
        changeBalloonMenuFixed(pref.fixed_balloon)
    }

    // メニュー幅変更
    const mod_side_menu_width = document.getElementById('mod_side_menu_width'),
          mod_side_menu_width_max = document.getElementById('mod_side_menu_width_max'),
          changeWidth = function () {
              let width = Number(mod_side_menu_width.value),
                  max = Number(mod_side_menu_width_max.value)
              if (! width) {
                  width = 600
              }
              if (! max) {
                  max = 50
              }
              menu.style.width = `${max}%`
              menu.style['max-width'] = `${width}px`
              document.getElementById('mainbody').style.width = `calc( 100% - ${width}px )`;
              menu.style['max-width'] = `${width}px`;
              if (pref.fixed_balloon) {
                  adjustFixedBalloonHeight()
                  document.getElementById('mod-side-menu-inner').style.width = `${width - 3}px`;
              } else {
                  document.getElementById('mod-side-menu-inner').style.width = `${width - 20}px`;
              }
              const tooltip_width = Math.trunc(window.jQuery(menu).width() * 0.85)
              const root = document.querySelector(':root');
              root.style.setProperty("--side-menu-tooltips-width", '' + tooltip_width + 'px');
              pref.side_menu_width = width
              pref.side_menu_width_max = max
              savePref()
          }
    if (mod_side_menu_width && mod_side_menu_width_max) {
        mod_side_menu_width.addEventListener('change', function () {
            changeWidth()
        })
        window.addEventListener('resize', function () {
            const state = document.getElementById('window_state').value
            if (state === "0") {
                const window_w = window.innerWidth;
                const side_menu_size = window_w / 2
                if(side_menu_size > 600){
                    changeWidth()
                }
            }
        })
        //changeWidth()
    }
    const originalToggleWindowOption = window.ToggleWindowOption
    window.ToggleWindowOption = function (id, force_close = false) {
        const state = document.getElementById('window_state').value
        originalToggleWindowOption(id, force_close)
        if (id == 0 && state !== "0" && !force_close) {
            const window_w = window.innerWidth;
            const side_menu_size = window_w / 2
            if(side_menu_size > 600){
                changeWidth()
            }
        }
    }
})();