Add `allowEscapeClose` option to popup class for Escape key behavior override (#5340) * feat(popup): add allowEscapeClose option to override default escape key behavior Add `allowEscapeClose` parameter to PopupOptions to explicitly control whether Escape key closes the popup, overriding the default logic that checks for visible cancel/close buttons. When null (default), uses existing behavior; when true, allows escape even without buttons; when false, prevents escape even with buttons present. * feat(popup): enable Escape key closing for informational popups Add `allowEscapeClose: true` option to TEXT-type popups in export preset, persona lore, sampler select, stats, and world info assignment dialogs to allow users to dismiss these informational popups with the Escape key. * Improve Escape key interaction in popups * Adjust jsdoc for allowEscapeClose * Always return CANCELLED on Escape * fix(popup): correct jsdoc for allowEscapeClose property description --------- Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com>

e52c035fcd63e737b9086e7dca89283312232d2b

Wolfsblvt <wolfsblvt@gmail.com>

Signed

Parents: d306194c5171a6885ec1cb615ab266c89d054f56

public/scripts/action-loader.js+7 -1 Viewed

     const content = getOverlayContent(customContent);
     loaderPopup = new Popup(content, POPUP_TYPE.DISPLAY, null, { transparent: true, animation: 'none', wide: true, large: true });
 +        allowEscapeClose: false,
 +        transparent: true,
 +        animation: 'none',
 +        wide: true,
 +        large: true,
 +    });
     // No close button, loaders are not closable
     loaderPopup.closeButton.style.display = 'none';

public/scripts/popup.js+31 -5 Viewed

  * @property {POPUP_RESULT|number?} [defaultResult=POPUP_RESULT.AFFIRMATIVE] - The default result of this popup when Enter is pressed. Can be changed from `POPUP_RESULT.AFFIRMATIVE`.
  * @property {CustomPopupButton[]|string[]?} [customButtons=null] - Custom buttons to add to the popup. If only strings are provided, the buttons will be added with default options, and their result will be in order from `2` onward.
  * @property {CustomPopupInput[]?} [customInputs=null] - Custom inputs to add to the popup. The display below the content and the input box, one by one.
 + * @property {boolean} [allowEscapeClose=true] - If true, allows closing the popup with the Escape key, returning `POPUP_RESULT.CANCELLED`. If false, requires double-escape to force close with a confirmation to prevent accidental closure.
  * @property {(popup: Popup) => Promise<boolean?>|boolean?} [onClosing=null] - Handler called before the popup closes, return `false` to cancel the close
  * @property {(popup: Popup) => Promise<void?>|void?} [onClose=null] - Handler called after the popup closes, but before the DOM is cleaned up
  * @property {(popup: Popup) => Promise<void?>|void?} [onOpen=null] - Handler called after the popup opens

     /** @type {Promise<any>} */ #promise;
     /** @type {(result: any) => any} */ #resolver;
++
 +    /** @type {boolean} */ #allowEscapeClose;
     /** @type {boolean} */ #isClosingPrevented;
     /** @type {number} */ #lastEscapePress = 0;
     /** @type {boolean} */ #isShowingForceCloseConfirm = false;

      * @param {string} [inputValue=''] - The initial value of the input field
      * @param {PopupOptions} [options={}] - Additional options for the popup
      */
 -    constructor(content, type, inputValue = '', { okButton = null, cancelButton = null, rows = 1, placeholder = null, tooltip = null, wide = false, wider = false, large = false, transparent = false, allowHorizontalScrolling = false, allowVerticalScrolling = false, leftAlign = false, animation = 'fast', defaultResult = POPUP_RESULT.AFFIRMATIVE, customButtons = null, customInputs = null, onClosing = null, onClose = null, onOpen = null, cropAspect = null, cropImage = null } = {}) {
 +    constructor(content, type, inputValue = '', {
 +        okButton = null,
 +        cancelButton = null,
 +        rows = 1,
 +        placeholder = null,
 +        tooltip = null,
 +        wide = false,
 +        wider = false,
 +        large = false,
 +        transparent = false,
 +        allowHorizontalScrolling = false,
 +        allowVerticalScrolling = false,
 +        leftAlign = false,
 +        animation = 'fast',
 +        defaultResult = POPUP_RESULT.AFFIRMATIVE,
 +        customButtons = null,
 +        customInputs = null,
 +        allowEscapeClose = true,
 +        onClosing = null,
 +        onClose = null,
 +        onOpen = null,
 +        cropAspect = null,
 +        cropImage = null,
 +    } = {}) {
         Popup.util.popups.push(this);
         // Make this popup uniquely identifiable
         this.id = uuidv4();
         this.type = type;
 +        // Setup some args being passed in as private properties
 +        this.#allowEscapeClose = allowEscapeClose;
++
         // Utilize event handlers being passed in
         this.onClosing = onClosing;
         this.onClose = onClose;

         // Bind dialog listeners manually, so we can be sure context is preserved
         const cancelListener = async (evt) => {
 -            // If neither cancel button nor close button is visible or present, don't allow escape to close the popup
 +            if (!this.#allowEscapeClose) {
 -            const hasCancelButton = this.cancelButton?.offsetParent !== null && this.buttonControls?.offsetParent !== null;
 -            const hasCloseButton = this.closeButton?.offsetParent !== null;
 -            if (!hasCancelButton && !hasCloseButton) {
                 evt.preventDefault();
                 evt.stopPropagation();
                 // Set flag so closeListener also blocks the close event (browser may fire it after multiple Escape presses)