Merge branch 'event'

muan · muan · commit bb6b5c110d74 · 2019-04-05T17:10:28.000-04:00
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # &lt;details-dialog&gt; element
 
-A modal dialog that's opened with a &lt;details> button.
+A modal dialog that's opened with a &lt;details&gt; button.
 
 ## Installation
 
@@ -43,17 +43,18 @@ If the `preload` attribute is present, hovering over the `<details>` element wil
 
 ## 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 `<summary>` element, or when `.toggle(false)` is called on an
-open dialog.
+`details-dialog-close` event is fired from `<details-dialog>` when a request to close the dialog is made from
 
-This event can be cancelled to keep the dialog open.
+- pressing <kbd>escape</kbd>,
+- 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
@@ -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
@@ -88,15 +88,15 @@ 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)
 
       let closeRequestCount = 0
       let allowCloseToHappen = false
       dialog.addEventListener(
-        'details-dialog:will-close',
+        'details-dialog-close',
         function(event) {
           closeRequestCount++
           if (!allowCloseToHappen) {
@@ -133,15 +133,15 @@ 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)
 
         let closeRequestCount = 0
         let allowCloseToHappen = false
         dialog.addEventListener(
-          'details-dialog:will-close',
+          'details-dialog-close',
           function(event) {
             closeRequestCount++
             if (!allowCloseToHappen) {
