diff --git a/README.md b/README.md index f931244..8f51e03 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # <details-dialog> element -A modal dialog that's opened with a <details> button. +A modal dialog that's opened with a <details> button. ## Installation @@ -26,17 +26,18 @@ import 'details-dialog-element' ## Events -### `details-dialog:will-close` +### `details-dialog-close` -A `details-dialog:will-close` event is fired when a request to close the dialog -is made either by pressing escape, clicking a `data-close-dialog` element, -clicking on the `` element, or when `.toggle(false)` is called on an -open dialog. +`details-dialog-close` event is fired from `` when a request to close the dialog is made from -This event can be cancelled to keep the dialog open. +- pressing escape, +- clicking on `summary, [data-close-dialog]`, or +- `dialog.toggle(false)` + +This event bubbles, and can be canceled to keep the dialog open. ```js -document.addEventListener('details-dialog:will-close', function(event) { +document.addEventListener('details-dialog-close', function(event) { if (!confirm('Are you sure?')) { event.preventDefault() } diff --git a/index.js b/index.js index 267bcd4..08ef88c 100644 --- a/index.js +++ b/index.js @@ -65,7 +65,7 @@ function allowClosingDialog(details: Element): boolean { if (!(dialog instanceof DetailsDialogElement)) return true return dialog.dispatchEvent( - new CustomEvent('details-dialog:will-close', { + new CustomEvent('details-dialog-close', { bubbles: true, cancelable: true }) @@ -77,7 +77,7 @@ function onSummaryClick(event: Event): void { const details = event.currentTarget.closest('details[open]') if (!details) return - // Prevent summary click events if details-dialog:will-close was cancelled + // Prevent summary click events if details-dialog-close was cancelled if (!allowClosingDialog(details)) { event.preventDefault() event.stopPropagation() diff --git a/test/test.js b/test/test.js index 0206566..6d6e4ce 100644 --- a/test/test.js +++ b/test/test.js @@ -88,7 +88,7 @@ describe('details-dialog-element', function() { assert.equal(document.activeElement, document.querySelector(`[${CLOSE_ATTR}]`)) }) - it('supports a cancellable details-dialog:will-close event when a summary element is present', async function() { + it('supports a cancellable details-dialog-close event when a summary element is present', async function() { dialog.toggle(true) await waitForToggleEvent(details) assert(details.open) @@ -96,7 +96,7 @@ describe('details-dialog-element', function() { let closeRequestCount = 0 let allowCloseToHappen = false dialog.addEventListener( - 'details-dialog:will-close', + 'details-dialog-close', function(event) { closeRequestCount++ if (!allowCloseToHappen) { @@ -133,7 +133,7 @@ describe('details-dialog-element', function() { summary.remove() }) - it('supports a cancellable details-dialog:will-close event', async function() { + it('supports a cancellable details-dialog-close event', async function() { dialog.toggle(true) await waitForToggleEvent(details) assert(details.open) @@ -141,7 +141,7 @@ describe('details-dialog-element', function() { let closeRequestCount = 0 let allowCloseToHappen = false dialog.addEventListener( - 'details-dialog:will-close', + 'details-dialog-close', function(event) { closeRequestCount++ if (!allowCloseToHappen) {