fbd83c5896
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
76 lines
2.3 KiB
Plaintext
Executable File
76 lines
2.3 KiB
Plaintext
Executable File
Modal Open/Close Events
|
|
Date: 2026-01-28
|
|
|
|
SUMMARY
|
|
Added global Rsx events for modal open and close. This allows any part of
|
|
your application to react to modal lifecycle without direct modal access.
|
|
Useful for pausing background processes, analytics, keyboard shortcuts, etc.
|
|
|
|
AFFECTED FILES
|
|
/rsx/lib/modal/modal.js
|
|
/rsx/lib/modal/CLAUDE.md (documentation only)
|
|
|
|
CHANGES REQUIRED
|
|
|
|
File: /rsx/lib/modal/modal.js
|
|
-------------------------------------------------------------------------
|
|
In the _process_queue() method, add the modal_open trigger after setting
|
|
this._current. Find this code:
|
|
|
|
// Create modal instance
|
|
const modal_instance = await this._create_modal();
|
|
this._current = modal_instance;
|
|
|
|
// Determine if we should animate based on:
|
|
|
|
Change it to:
|
|
|
|
// Create modal instance
|
|
const modal_instance = await this._create_modal();
|
|
this._current = modal_instance;
|
|
|
|
// Trigger modal open event
|
|
Rsx.trigger('modal_open', { modal: modal_instance, options });
|
|
|
|
// Determine if we should animate based on:
|
|
|
|
-------------------------------------------------------------------------
|
|
In the same _process_queue() method, add the modal_close trigger before
|
|
resolving the promise. Find this code:
|
|
|
|
// Record close timestamp BEFORE resolving (ensures it's set before next modal can start)
|
|
this._last_close_timestamp = Date.now();
|
|
|
|
// Resolve the promise with the result
|
|
resolve(result);
|
|
|
|
Change it to:
|
|
|
|
// Record close timestamp BEFORE resolving (ensures it's set before next modal can start)
|
|
this._last_close_timestamp = Date.now();
|
|
|
|
// Trigger modal close event before resolving
|
|
Rsx.trigger('modal_close', { modal: modal_instance, result });
|
|
|
|
// Resolve the promise with the result
|
|
resolve(result);
|
|
|
|
USAGE
|
|
|
|
// Listen for modal open
|
|
Rsx.on('modal_open', (data) => {
|
|
console.log('Modal opened:', data.modal, data.options);
|
|
});
|
|
|
|
// Listen for modal close
|
|
Rsx.on('modal_close', (data) => {
|
|
console.log('Modal closed:', data.modal, data.result);
|
|
});
|
|
|
|
VERIFICATION
|
|
|
|
1. Open any modal in your application
|
|
2. Check browser console for 'modal_open' event (if you added a listener)
|
|
3. Close the modal
|
|
4. Check browser console for 'modal_close' event
|