remote/datasette
1
0
Fork 0
mirror of https://github.com/simonw/datasette.git synced 2026-07-15 03:54:43 +02:00
Code Issues Projects Releases Packages Wiki Activity

Add declarative data-modal-cancel attribute to datasette-modal

Browse source 
Clicking any element inside a <datasette-modal> that carries a
data-modal-cancel attribute now calls requestClose("cancel"), so
Cancel buttons no longer need JavaScript wiring. Like other
dismissals this respects the busy property and the closeGuard hook.

The set-column-type, row-delete and create-table dialogs now use the
attribute instead of their own click listeners, and the plugin
documentation example is simplified to match (the regenerated docs
screenshot is unchanged).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TShiUYVMmmF4zyJR6GMw34
This commit is contained in:
Claude 2026-07-02 17:25:19 +00:00
commit 32be92fa24
No known key found for this signature in database
6 changed files with 27 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

10
docs/javascript_plugins.rst
View file

@ -90,7 +90,7 @@ The simplest way to create a modal from a plugin is ``datasetteManager.createMod
<p style="padding: 16px 24px">Hello from a plugin!</p>
<div class="modal-footer">
<span class="footer-info"></span>
<button type="button" class="btn btn-ghost my-plugin-cancel">Cancel</button>
<button type="button" class="btn btn-ghost" data-modal-cancel>Cancel</button>
<button type="button" class="btn btn-primary my-plugin-save">Save</button>
</div>
`,
@ -98,13 +98,12 @@ The simplest way to create a modal from a plugin is ``datasetteManager.createMod
if (!modal) {
return; // Browser does not support <dialog>
}
modal.dialog
.querySelector(".my-plugin-cancel")
.addEventListener("click", () => modal.requestClose("cancel"));
// Open it later, for example from a button click:
// modal.showModal({trigger: button});
});
The ``data-modal-cancel`` attribute on the Cancel button is a declarative shortcut: clicking any element inside the modal that carries this attribute calls ``modal.requestClose("cancel")``, so Cancel buttons need no JavaScript wiring. Like other dismissals it is blocked while the modal is ``busy`` and consults ``closeGuard``, both described below.
Calling ``modal.showModal()`` then displays the dialog:
.. Regenerate this screenshot with docs/generate-datasette-modal-example.sh
@ -146,6 +145,7 @@ The element can also be used declaratively in a template - light DOM children be
<datasette-modal dialog-id="my-dialog" modal-title="My dialog">
<p>Dialog content</p>
<div class="modal-footer">
<button type="button" class="btn btn-ghost" data-modal-cancel>Cancel</button>
<button type="button" class="btn btn-primary">OK</button>
</div>
</datasette-modal>
@ -171,7 +171,7 @@ Properties, methods and events
Closes the modal unconditionally, skipping ``busy`` and ``closeGuard``. Pass ``{restoreFocus: false}`` to leave focus where it is, for example when the page is about to navigate.
``modal.requestClose(reason)``
Asks the modal to close on the user's behalf, respecting ``busy`` and ``closeGuard``. Returns true if the modal closed. Backdrop clicks and the ``Escape`` key call this internally with reasons ``"backdrop"`` and ``"escape"``. Wire Cancel buttons to this method.
Asks the modal to close on the user's behalf, respecting ``busy`` and ``closeGuard``. Returns true if the modal closed. Backdrop clicks and the ``Escape`` key call this internally with reasons ``"backdrop"`` and ``"escape"``, and clicking an element with a ``data-modal-cancel`` attribute calls it with ``"cancel"``. Cancel buttons can either carry that attribute or call this method directly.
``modal.busy`` - boolean
While true, ``Escape``, backdrop clicks and ``requestClose()`` will not close the modal. Set this while an operation is in flight. A ``busy`` attribute is reflected on the element for CSS.