Merge pull request #71 from bakura10/my-request-close-changes

Author: keithamus

README.md

@@ -60,6 +60,15 @@ With the module imported, you can add `commandfor` and `command` attributes to y
 <dialog id="my-dialog">I'm a dialog!</dialog>
 ```
 
+## Supported commands
+
+The following built-in commands (aligned with current spec) are supported:
+
+* `toggle-popover`/`open-popover`/`close-popover`
+* `show-modal`: open a `<dialog>` element in modal mode
+* `close`: close a `<dialog>` open (either in modal or non-modal mode)
+* `request-close`: close a `<dialog>` but emit a `cancel` event first, allowing a user to eventually prevent it. `requestClose` is only available from Safari 18.4, the `requestClose` will be polyfilled on older browsers.
+
 ## Limitations
 
 This polyfill does not handle the aria (e.g. `aria-expanded`) of the command button the way browsers do. You are _strongly_ encouraged to handle this state yourself, to ensure your site is accessible.

invoker.js

@@ -205,6 +205,7 @@ export function apply() {
           const valueLower = value.toLowerCase();
           switch (valueLower) {
             case "show-modal":
+            case "request-close":
             case "close":
             case "toggle-popover":
             case "hide-popover":
@@ -338,6 +339,7 @@ export function apply() {
       source.command !== "hide-popover" &&
       source.command !== "toggle-popover" &&
       source.command !== "show-modal" &&
+      source.command !== "request-close" &&
       source.command !== "close" &&
       !source.command.startsWith("--")
     ) {
@@ -373,13 +375,25 @@ export function apply() {
       }
     } else if (invokee.localName === "dialog") {
       const canShow = !invokee.hasAttribute("open");
-      const shouldShow = canShow && command === "show-modal";
-      const shouldHide = !canShow && command === "close";
 
-      if (shouldShow) {
+      if (canShow && command == "show-modal") {
         invokee.showModal();
-      } else if (shouldHide) {
-        invokee.close();
+      } else if (!canShow && command == "close") {
+        invokee.close(source.value ? source.value : undefined);
+      } else if (!canShow && command == "request-close") {
+        // requestClose is only supported from Safari 18.4, so we polyfill it on older browsers
+        if (!HTMLDialogElement.prototype.requestClose) {
+          HTMLDialogElement.prototype.requestClose = function() {
+            const cancelEvent = new Event('cancel', { cancelable: true });
+            this.dispatchEvent(cancelEvent);
+
+            if (!cancelEvent.defaultPrevented) {
+              this.close();
+            }
+          };
+        }
+
+        invokee.requestClose(source.value ? source.value : undefined);
       }
     }
   }