add adjustable autocomplete width

2024-04-30 10:21:14 -04:00 · 2024-04-30 10:21:14 -04:00 · fa767e91d6
parent c7fa0baab4
commit fa767e91d6
5 changed files with 225 additions and 37 deletions
--- a/public/index.html
+++ b/public/index.html
@ -4046,6 +4046,27 @@
                                        <div class="menu_button fa-solid fa-pen-to-square" title="Customize colors"></div>
                                    </div>
                                </div>
+                                <div title="Sets the width of the autocomplete for STscript." data-i18n="[title]Sets the width of the autocomplete for STscript.">
+                                    <label for="stscript_autocomplete_width" data-i18n="Autocomplete Width">Autocomplete Width</label>
+                                    <div class="doubleRangeContainer">
+                                        <div class="doubleRangeInputContainer">
+                                            <input type="range" id="stscript_autocomplete_width_left" min="0" max="2" step="1">
+                                            <datalist id="stscript_autocomplete_width_left_values">
+                                                <option value="0" label="input"></option>
+                                                <option value="1" label="chat"></option>
+                                                <option value="2" label="full"></option>
+                                            </datalist>
+                                        </div>
+                                        <div class="doubleRangeInputContainer">
+                                            <input type="range" id="stscript_autocomplete_width_right" min="0" max="2" step="1">
+                                            <datalist id="stscript_autocomplete_width_right_values">
+                                                <option value="0" label="input"></option>
+                                                <option value="1" label="chat"></option>
+                                                <option value="2" label="full"></option>
+                                            </datalist>
+                                        </div>
+                                    </div>
+                                </div>
                                <div title="Sets default flags for the STscript parser." data-i18n="[title]Sets default flags for the STscript parser.">
                                    <label data-i18n="Parser Flags">Parser Flags</label>
                                    <label class="checkbox_label" title="STRICT_ESCAPING." data-i18n="[title]STRICT_ESCAPING">
@ -5954,8 +5975,17 @@
                    </div>
                    <textarea id="send_textarea" name="text" data-i18n="[no_connection_text]Not connected to API!;[connected_text]Type a message, or /? for help" placeholder="Not connected to API!" no_connection_text="Not connected to API!" connected_text="Type a message, or /? for help"></textarea>
                    <div id="rightSendForm" class="alignContentCenter">
+                        <div id="stscript_continue" title="Continue script execution" class="stscript_btn stscript_continue" data-i18n="[title]Continue script execution">
+                            <i class="fa-solid fa-play"></i>
+                        </div>
+                        <div id="stscript_pause" title="Pause script execution" class="stscript_btn stscript_pause" data-i18n="[title]Pause script execution">
+                            <i class="fa-solid fa-pause"></i>
+                        </div>
+                        <div id="stscript_stop" title="Abort script execution" class="stscript_btn stscript_stop" data-i18n="[title]Abort script execution">
+                            <i class="fa-solid fa-stop"></i>
+                        </div>
                        <div id="mes_stop" title="Abort request" class="mes_stop" data-i18n="[title]Abort request">
-                            <i class="fa-solid fa-circle-stop"></i>
+                            <i class="fa-solid fa-stop"></i>
                        </div>
                        <div id="mes_continue" class="fa-fw fa-solid fa-arrow-right displayNone" title="Continue the last message" data-i18n="[title]Continue the last message"></div>
                        <div id="send_but" class="fa-solid fa-paper-plane displayNone" title="Send a message" data-i18n="[title]Send a message"></div>
@ -6106,4 +6136,4 @@
    </script>
 </body>

-</html>
+</html>
--- a/public/scripts/extensions/expressions/index.js
+++ b/public/scripts/extensions/expressions/index.js
@ -908,8 +908,10 @@ async function setSpriteSetCommand(_, folder) {

    $('#expression_override').val(folder.trim());
    onClickExpressionOverrideButton();
-    removeExpression();
-    moduleWorker();
+    // removeExpression();
+    // moduleWorker();
+    const vnMode = isVisualNovelMode();
+    await sendExpressionCall(folder, lastExpression, true, vnMode);
 }

 async function classifyCommand(_, text) {
--- a/public/scripts/power-user.js
+++ b/public/scripts/power-user.js
@ -34,7 +34,6 @@ import {
    selectInstructPreset,
 } from './instruct-mode.js';

-import { registerSlashCommand } from './slash-commands.js';
 import { tag_map, tags } from './tags.js';
 import { tokenizers } from './tokenizers.js';
 import { BIAS_CACHE } from './logit-bias.js';
@ -44,6 +43,7 @@ import { countOccurrences, debounce, delay, download, getFileText, isOdd, resetS
 import { PARSER_FLAG, SlashCommandParser } from './slash-commands/SlashCommandParser.js';
 import { SlashCommand } from './slash-commands/SlashCommand.js';
 import { ARGUMENT_TYPE, SlashCommandArgument } from './slash-commands/SlashCommandArgument.js';
+import { AUTOCOMPLETE_WIDTH } from './slash-commands/SlashCommandAutoComplete.js';

 export {
    loadPowerUserSettings,
@ -256,7 +256,13 @@ let power_user = {
    aux_field: 'character_version',
    stscript: {
        matching: 'fuzzy',
-        autocomplete_style: 'theme',
+        autocomplete: {
+            style: 'theme',
+            width: {
+                left: AUTOCOMPLETE_WIDTH.CHAT,
+                right: AUTOCOMPLETE_WIDTH.CHAT,
+            },
+        },
        parser: {
            /**@type {Object.<PARSER_FLAG,boolean>} */
            flags: {},
@ -1447,10 +1453,17 @@ function loadPowerUserSettings(settings, data) {

    if (power_user.stscript === undefined) {
        power_user.stscript = defaultStscript;
-    } else if (power_user.stscript.parser === undefined) {
-        power_user.stscript.parser = defaultStscript.parser;
-    } else if (power_user.stscript.parser.flags === undefined) {
-        power_user.stscript.parser.flags = defaultStscript.parser.flags;
+    } else {
+        if (power_user.stscript.autocomplete === undefined) {
+            power_user.stscript.autocomplete = defaultStscript.autocomplete;
+        } else if (power_user.stscript.autocomplete.width === undefined) {
+            power_user.stscript.autocomplete.width = defaultStscript.autocomplete.width;
+        }
+        if (power_user.stscript.parser === undefined) {
+            power_user.stscript.parser = defaultStscript.parser;
+        } else if (power_user.stscript.parser.flags === undefined) {
+            power_user.stscript.parser.flags = defaultStscript.parser.flags;
+        }
    }

    if (data.themes !== undefined) {
@ -1600,6 +1613,10 @@ function loadPowerUserSettings(settings, data) {
    document.body.setAttribute('data-stscript-style', power_user.stscript.autocomplete_style);
    $('#stscript_parser_flag_strict_escaping').prop('checked', power_user.stscript.parser.flags[PARSER_FLAG.STRICT_ESCAPING] ?? false);
    $('#stscript_parser_flag_replace_getvar').prop('checked', power_user.stscript.parser.flags[PARSER_FLAG.REPLACE_GETVAR] ?? false);
+    $('#stscript_autocomplete_width_left').val(power_user.stscript.autocomplete.width.left ?? AUTOCOMPLETE_WIDTH.CHAT);
+    document.querySelector('#stscript_autocomplete_width_left').dispatchEvent(new Event('input', { bubbles:true }));
+    $('#stscript_autocomplete_width_right').val(power_user.stscript.autocomplete.width.right ?? AUTOCOMPLETE_WIDTH.CHAT);
+    document.querySelector('#stscript_autocomplete_width_right').dispatchEvent(new Event('input', { bubbles:true }));

    $('#restore_user_input').prop('checked', power_user.restore_user_input);

@ -3570,6 +3587,20 @@ $(document).ready(() => {
        saveSettingsDebounced();
    });

+    $('#stscript_autocomplete_width_left').on('input', function () {
+        const value = $(this).val();
+        power_user.stscript.autocomplete.width.left = String(value);
+        this.closest('.doubleRangeInputContainer').style.setProperty('--value', value);
+        saveSettingsDebounced();
+    });
+
+    $('#stscript_autocomplete_width_right').on('input', function () {
+        const value = $(this).val();
+        power_user.stscript.autocomplete.width.right = String(value);
+        this.closest('.doubleRangeInputContainer').style.setProperty('--value', value);
+        saveSettingsDebounced();
+    });
+
    $('#stscript_parser_flag_strict_escaping').on('click', function () {
        const value = $(this).prop('checked');
        power_user.stscript.parser.flags[PARSER_FLAG.STRICT_ESCAPING] = value;
--- a/public/scripts/slash-commands/SlashCommandAutoComplete.js
+++ b/public/scripts/slash-commands/SlashCommandAutoComplete.js
@ -5,6 +5,14 @@ import { SlashCommandBlankAutoCompleteOption } from './SlashCommandBlankAutoComp
 // eslint-disable-next-line no-unused-vars
 import { SlashCommandParserNameResult } from './SlashCommandParserNameResult.js';

+/**@readonly*/
+/**@enum {Number}*/
+export const AUTOCOMPLETE_WIDTH = {
+    'INPUT': 0,
+    'CHAT': 1,
+    'FULL': 2,
+};
+
 export class SlashCommandAutoComplete {
    /**@type {HTMLTextAreaElement}*/ textarea;
    /**@type {boolean}*/ isFloating = false;
@ -92,7 +100,7 @@ export class SlashCommandAutoComplete {
        textarea.addEventListener('keydown', (evt)=>this.handleKeyDown(evt));
        textarea.addEventListener('click', ()=>this.isActive ? this.show() : null);
        textarea.addEventListener('selectionchange', ()=>this.show());
-        textarea.addEventListener('blur', ()=>this.hide());
+        // textarea.addEventListener('blur', ()=>this.hide());
        if (isFloating) {
            textarea.addEventListener('scroll', ()=>this.updateFloatingPositionDebounced());
        }
@ -389,16 +397,21 @@ export class SlashCommandAutoComplete {
        if (this.isFloating) {
            this.updateFloatingPosition();
        } else {
-            const rect = this.textarea.getBoundingClientRect();
-            this.domWrap.style.setProperty('--bottom', `${window.innerHeight - rect.top}px`);
-            this.dom.style.setProperty('--bottom', `${window.innerHeight - rect.top}px`);
-            this.domWrap.style.bottom = `${window.innerHeight - rect.top}px`;
+            const rect = {};
+            rect[AUTOCOMPLETE_WIDTH.INPUT] = this.textarea.getBoundingClientRect();
+            rect[AUTOCOMPLETE_WIDTH.CHAT] = document.querySelector('#sheld').getBoundingClientRect();
+            rect[AUTOCOMPLETE_WIDTH.FULL] = document.body.getBoundingClientRect();
+            this.domWrap.style.setProperty('--bottom', `${window.innerHeight - rect[AUTOCOMPLETE_WIDTH.INPUT].top}px`);
+            this.dom.style.setProperty('--bottom', `${window.innerHeight - rect[AUTOCOMPLETE_WIDTH.INPUT].top}px`);
+            this.domWrap.style.bottom = `${window.innerHeight - rect[AUTOCOMPLETE_WIDTH.INPUT].top}px`;
            if (this.isShowingDetails) {
                this.domWrap.style.setProperty('--leftOffset', '1vw');
+                this.domWrap.style.setProperty('--leftOffset', `max(1vw, ${rect[power_user.stscript.autocomplete.width.left].left}px)`);
+                this.domWrap.style.setProperty('--rightOffset', `calc(100vw - min(${rect[power_user.stscript.autocomplete.width.right].right}px, ${this.isShowingDetails ? 74 : 0}vw)`);
            } else {
-                this.domWrap.style.setProperty('--leftOffset', `${rect.left}px`);
+                this.domWrap.style.setProperty('--leftOffset', `max(1vw, ${rect[power_user.stscript.autocomplete.width.left].left}px)`);
+                this.domWrap.style.setProperty('--rightOffset', `calc(100vw - min(99vw, ${rect[power_user.stscript.autocomplete.width.right].right}px)`);
            }
-            this.domWrap.style.setProperty('--rightOffset', `calc(1vw + ${this.isShowingDetails ? 25 : 0}vw)`);
            this.updateDetailsPosition();
        }
    }
@ -411,19 +424,24 @@ export class SlashCommandAutoComplete {
            if (this.isFloating) {
                this.updateFloatingDetailsPosition();
            } else {
-                const rect = this.textarea.getBoundingClientRect();
+                const rect = {};
+                rect[AUTOCOMPLETE_WIDTH.INPUT] = this.textarea.getBoundingClientRect();
+                rect[AUTOCOMPLETE_WIDTH.CHAT] = document.querySelector('#sheld').getBoundingClientRect();
+                rect[AUTOCOMPLETE_WIDTH.FULL] = document.body.getBoundingClientRect();
                if (this.isReplaceable) {
+                    this.detailsWrap.classList.remove('full');
                    const selRect = this.selectedItem.dom.children[0].getBoundingClientRect();
                    this.detailsWrap.style.setProperty('--targetOffset', `${selRect.top}`);
-                    this.detailsWrap.style.bottom = `${window.innerHeight - rect.top}px`;
-                    this.detailsWrap.style.left = `calc(100vw - calc(1vw + ${this.isShowingDetails ? 25 : 0}vw))`;
+                    this.detailsWrap.style.bottom = `calc(100vh - ${rect[AUTOCOMPLETE_WIDTH.INPUT]}px)`;
+                    this.detailsWrap.style.left = `calc(100vw - ${this.domWrap.style.getPropertyValue('--rightOffset')}`;
                    this.detailsWrap.style.right = '1vw';
                    this.detailsWrap.style.top = '5vh';
                } else {
-                    this.detailsWrap.style.setProperty('--targetOffset', `${rect.top}`);
-                    this.detailsWrap.style.bottom = `${window.innerHeight - rect.top}px`;
-                    this.detailsWrap.style.left = `${rect.left}px`;
-                    this.detailsWrap.style.right = `calc(100vw - ${rect.right}px)`;
+                    this.detailsWrap.classList.add('full');
+                    this.detailsWrap.style.setProperty('--targetOffset', `${rect[AUTOCOMPLETE_WIDTH.INPUT].top}`);
+                    this.detailsWrap.style.bottom = `calc(100vh - ${rect[AUTOCOMPLETE_WIDTH.INPUT].top}px)`;
+                    this.detailsWrap.style.left = `${rect[power_user.stscript.autocomplete.width.left].left}px`;
+                    this.detailsWrap.style.right = `calc(100vw - ${rect[power_user.stscript.autocomplete.width.right].right}px)`;
                    this.detailsWrap.style.top = '5vh';
                }
            }
--- a/public/style.css
+++ b/public/style.css
@ -623,7 +623,6 @@ body .panelControlBar {
    flex-direction: row;
    column-gap: 5px;
    font-size: var(--bottomFormIconSize);
-    overflow: hidden;
    order: 25;
    width: 100%;
 }
@ -675,6 +674,20 @@ body .panelControlBar {
    order: 1;
 }

+@keyframes mes_stop_pulse {
+    0%, 100% {
+        border-width: 0em;
+        box-shadow:
+            0 0 0 var(--progColor),
+            0 0 0 var(--progColor)
+    }
+    50% {
+        border-width: 1em;
+        box-shadow:
+            0 0 1em var(--progColor),
+            0 0 1em var(--progColor)
+    }
+}
 #send_form .mes_stop {
    display: none;
    order: 2;
@ -683,6 +696,31 @@ body .panelControlBar {
    cursor: pointer;
    transition: 0.3s;
    opacity: 0.7;
+    > .fa-solid {
+        --toastInfoColor: #2F96B4;
+        --progColor: rgba(0, 128, 0, 0.839);
+        border-radius: 50%;
+        border: 0 solid var(--progColor);
+        aspect-ratio: 1 / 1;
+        display: flex;
+        background: var(--SmartThemeBodyColor);
+        font-size: 0.5em;
+        height: var(--bottomFormIconSize);
+        justify-content: center;
+        align-items: center;
+        color: black;
+        box-shadow:
+            0 0 0 var(--progColor),
+            0 0 0 var(--progColor)
+        ;
+        body & {
+            animation-name: mes_stop_pulse;
+            animation-duration: 1500ms;
+            animation-timing-function: ease-in-out;
+            animation-delay: 0s;
+            animation-iteration-count: infinite;
+        }
+    }
 }


@ -1415,12 +1453,11 @@ body[data-stscript-style] .hljs.language-stscript {

 .slashCommandAutoComplete {
    padding-bottom: 1px;
-    /* position: absolute; */
    display: grid;
    grid-template-columns: 0fr auto minmax(50%, 1fr);
    align-items: center;
    max-height: calc(95vh - var(--bottom));
-    /* gap: 0.5em; */
+    container-type: inline-size;
    > .item {
        cursor: pointer;
        padding: 3px;
@ -1429,6 +1466,16 @@ body[data-stscript-style] .hljs.language-stscript {
        gap: 0.5em;
        font-size: 0.8em;
        display: contents;
+        @container (max-width: 1000px) {
+            .specs {
+                grid-column: 2 / 4;
+            }
+            .help {
+                grid-column: 2 / 4;
+                padding-left: 1em;
+                opacity: 0.75;
+            }
+        }
        &.blank {
            display: block;
            grid-column: 1 / 4;
@ -1698,16 +1745,10 @@ body[data-stscript-style] .hljs.language-stscript {
@media screen and (max-width: 1000px) {
    .slashCommandAutoComplete-wrap {
        left: 1vw;
-        > .slashCommandAutoComplete {
-            .specs {
-                grid-column: 2 / 4;
-            }
-            .help {
-                grid-column: 2 / 4;
-                padding-left: 1em;
-                opacity: 0.75;
-            }
-        }
+        right: 1vw;
+    }
+    .slashCommandAutoComplete-detailsWrap:not(.full) {
+        display: none;
    }
 }
 .slashCommandBrowser {
@ -3315,6 +3356,72 @@ input[type="range"]::-webkit-slider-thumb {
    background: var(--white100);
 }

+.doubleRangeContainer {
+    display: flex;
+    --markerWidth: 15px;
+    > .doubleRangeInputContainer {
+        flex: 0 0 50%;
+        overflow: hidden;
+        position: relative;
+        > datalist {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            font-size: x-small;
+            > option {
+                flex: 0 0 0;
+                width: 0;
+                display: flex;
+                justify-content: center;
+            }
+        }
+        > input::-webkit-slider-thumb {
+            z-index: 2;
+        }
+        &:after {
+            content: '';
+            position: absolute;
+            top: 11px;
+            width: calc(var(--value) * (100% - 1em - max(20px, 20%)) / 2 + max(20px, 20%));
+            height: 5px;
+            background-color: var(--SmartThemeQuoteColor);
+            box-shadow: inset 0 0 2px black;
+        }
+        &:nth-child(1) {
+            --value: 0;
+            padding-left: 1em;
+            > input {
+                direction: rtl;
+                position: relative;
+                padding-right: max(20px, 20%);
+            }
+            > datalist {
+                direction: rtl;
+                padding-right: calc(var(--markerWidth)/2 + max(20px, 20%));
+                padding-left: calc(var(--markerWidth)/2 - 2px);
+            }
+            &:after {
+                right: -2px;
+            }
+        }
+        &:nth-child(2) {
+            --value: 0;
+            padding-right: 1em;
+            > input {
+                position: relative;
+                padding-left: max(20px, 20%);
+            }
+            > datalist {
+                padding-left: calc(var(--markerWidth)/2 + max(20px, 20%));
+                padding-right: calc(var(--markerWidth)/2 - 2px);
+            }
+            &:after {
+                left: -2px;
+            }
+        }
+    }
+}
+
 /*Notes '?' links*/

 .note-link-span {