rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2024-12-12 09:26:33 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix popup custom buttons

Browse Source
This commit is contained in:
Wolfsblvt 2024-05-25 01:02:13 +02:00
parent d9582062d2
commit 4f2543f7ae
3 changed files with 13 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
public/script.js
View File

@ -7003,10 +7003,10 @@ function onScenarioOverrideRemoveClick() {
* @param {string} type * @param {string} type
* @param {string} inputValue - Value to set the input to. * @param {string} inputValue - Value to set the input to.
* @param {PopupOptions} options - Options for the popup. * @param {PopupOptions} options - Options for the popup.
* @typedef {{okButton?: string, rows?: number, wide?: boolean, large?: boolean, allowHorizontalScrolling?: boolean, allowVerticalScrolling?: boolean, cropAspect?: number }} PopupOptions - Options for the popup. * @typedef {{okButton?: string, rows?: number, wide?: boolean, wider?: boolean, large?: boolean, allowHorizontalScrolling?: boolean, allowVerticalScrolling?: boolean, cropAspect?: number }} PopupOptions - Options for the popup.
* @returns * @returns
*/ */
export function callPopup(text, type, inputValue = '', { okButton, rows, wide, large, allowHorizontalScrolling, allowVerticalScrolling, cropAspect } = {}) { export function callPopup(text, type, inputValue = '', { okButton, rows, wide, wider, large, allowHorizontalScrolling, allowVerticalScrolling, cropAspect } = {}) {
function getOkButtonText() { function getOkButtonText() {
if (['avatarToCrop'].includes(popup_type)) { if (['avatarToCrop'].includes(popup_type)) {
return okButton ?? 'Accept'; return okButton ?? 'Accept';
@ -7036,6 +7036,7 @@ export function callPopup(text, type, inputValue = '', { okButton, rows, wide, l
const $shadowPopup = $('#shadow_popup'); const $shadowPopup = $('#shadow_popup');
$dialoguePopup.toggleClass('wide_dialogue_popup', !!wide) $dialoguePopup.toggleClass('wide_dialogue_popup', !!wide)
.toggleClass('wider_dialogue_popup', !!wider)
.toggleClass('large_dialogue_popup', !!large) .toggleClass('large_dialogue_popup', !!large)
.toggleClass('horizontal_scrolling_dialogue_popup', !!allowHorizontalScrolling) .toggleClass('horizontal_scrolling_dialogue_popup', !!allowHorizontalScrolling)
.toggleClass('vertical_scrolling_dialogue_popup', !!allowVerticalScrolling); .toggleClass('vertical_scrolling_dialogue_popup', !!allowVerticalScrolling);

10
public/scripts/popup.js
View File

@ -25,8 +25,9 @@ let currentPopupZIndex = POPUP_START_Z_INDEX;
* @property {string|boolean?} [okButton] - Custom text for the OK button, or `true` to use the default (If set, the button will always be displayed, no matter the type of popup) * @property {string|boolean?} [okButton] - Custom text for the OK button, or `true` to use the default (If set, the button will always be displayed, no matter the type of popup)
* @property {string|boolean?} [cancelButton] - Custom text for the Cancel button, or `true` to use the default (If set, the button will always be displayed, no matter the type of popup) * @property {string|boolean?} [cancelButton] - Custom text for the Cancel button, or `true` to use the default (If set, the button will always be displayed, no matter the type of popup)
* @property {number?} [rows] - The number of rows for the input field * @property {number?} [rows] - The number of rows for the input field
* @property {boolean?} [wide] - Whether to display the popup in wide mode * @property {boolean?} [wide] - Whether to display the popup in wide mode (wide screen, 1/1 aspect ratio)
* @property {boolean?} [large] - Whether to display the popup in large mode * @property {boolean?} [wider] - Whether to display the popup in wider mode (just wider, no height scaling)
* @property {boolean?} [large] - Whether to display the popup in large mode (90% of screen)
* @property {boolean?} [allowHorizontalScrolling] - Whether to allow horizontal scrolling in the popup * @property {boolean?} [allowHorizontalScrolling] - Whether to allow horizontal scrolling in the popup
* @property {boolean?} [allowVerticalScrolling] - Whether to allow vertical scrolling in the popup * @property {boolean?} [allowVerticalScrolling] - Whether to allow vertical scrolling in the popup
* @property {POPUP_RESULT|number?} [defaultResult] - The default result of this popup when Enter is pressed. Can be changed from `POPUP_RESULT.AFFIRMATIVE`. * @property {POPUP_RESULT|number?} [defaultResult] - The default result of this popup when Enter is pressed. Can be changed from `POPUP_RESULT.AFFIRMATIVE`.
@ -68,7 +69,7 @@ export class Popup {
* @param {string} [inputValue=''] - The initial value of the input field * @param {string} [inputValue=''] - The initial value of the input field
* @param {PopupOptions} [options={}] - Additional options for the popup * @param {PopupOptions} [options={}] - Additional options for the popup
*/ */
constructor(text, type, inputValue = '', { okButton = null, cancelButton = null, rows = 1, wide = false, large = false, allowHorizontalScrolling = false, allowVerticalScrolling = false, defaultResult = POPUP_RESULT.AFFIRMATIVE, customButtons = null } = {}) { constructor(text, type, inputValue = '', { okButton = null, cancelButton = null, rows = 1, wide = false, wider = false, large = false, allowHorizontalScrolling = false, allowVerticalScrolling = false, defaultResult = POPUP_RESULT.AFFIRMATIVE, customButtons = null } = {}) {
this.type = type; this.type = type;
/**@type {HTMLTemplateElement}*/ /**@type {HTMLTemplateElement}*/
@ -85,6 +86,7 @@ export class Popup {
this.cancel = this.dom.querySelector('.dialogue_popup_cancel'); this.cancel = this.dom.querySelector('.dialogue_popup_cancel');
if (wide) dlg.classList.add('wide_dialogue_popup'); if (wide) dlg.classList.add('wide_dialogue_popup');
if (wider) dlg.classList.add('wider_dialogue_popup');
if (large) dlg.classList.add('large_dialogue_popup'); if (large) dlg.classList.add('large_dialogue_popup');
if (allowHorizontalScrolling) dlg.classList.add('horizontal_scrolling_dialogue_popup'); if (allowHorizontalScrolling) dlg.classList.add('horizontal_scrolling_dialogue_popup');
if (allowVerticalScrolling) dlg.classList.add('vertical_scrolling_dialogue_popup'); if (allowVerticalScrolling) dlg.classList.add('vertical_scrolling_dialogue_popup');
@ -98,7 +100,7 @@ export class Popup {
this.customButtonElements = this.customButtons?.map((x, index) => { this.customButtonElements = this.customButtons?.map((x, index) => {
/** @type {CustomPopupButton} */ /** @type {CustomPopupButton} */
const button = typeof x === 'string' ? { text: x, result: index + 2 } : x; const button = typeof x === 'string' ? { text: x, result: index + 2 } : x;
const buttonElement = document.createElement('button'); const buttonElement = document.createElement('div');
buttonElement.classList.add('menu_button', 'menu_button_custom'); buttonElement.classList.add('menu_button', 'menu_button_custom');
buttonElement.classList.add(...(button.classes ?? [])); buttonElement.classList.add(...(button.classes ?? []));

4
public/style.css
View File

@ -3065,6 +3065,10 @@ grammarly-extension {
min-width: var(--sheldWidth); min-width: var(--sheldWidth);
} }
.wider_dialogue_popup {
min-width: 750px;
}
.horizontal_scrolling_dialogue_popup { .horizontal_scrolling_dialogue_popup {
overflow-x: unset !important; overflow-x: unset !important;
} }