Patch show() and showModal() methods to emit a "show" Event and prevent page scroll; allow subclassing of the component

README.md

@@ -26,7 +26,7 @@ The enhancements are:
 2. Wrap your  `<dialog>` with `<dialog-utils>`.
 3. Add a trigger and close `<button>` with your desired markup (e.g. nested icon, attributes, translated text, etc.). The buttons need to be made identifiable with `commandfor` and `command` as per the [specification](https://html.spec.whatwg.org/multipage/form-elements.html#the-button-element), if you want to benefit from the ease-of-use polyfills. The Web Component leaves positioning and aesthetics of the buttons to the outside context.
 
-### Example
+#### Basic example
 
 ```
 <button commandfor="my-dialog" command="show-modal">Open my dialog</button>
@@ -39,3 +39,31 @@ The enhancements are:
     </dialog>
 </dialog-utils>
 ```
+
+### Events
+
+<dl>
+    <dt><code>show</code></dt>
+    <dd>The component monkey patches the <code>show()</code> and <code>showModal()</code> methods to emit a <code>show</code> event that includes information about whether the dialog is displayed as a modal via <code>(bool) event.detail.isModal</code>.</dd>
+</dl>
+
+### Extending the component
+
+The component is exported to allow subclassing and extending its methods.
+
+#### Example
+
+```
+import {DialogUtils} from '@webfactoryde/dialog-utils';
+
+class MyCustomDialogUtils extends DialogUtils {
+    onShow(event) {
+        // call the parent method
+        super.onShow?.(event);
+
+        // do your custom thing
+    }
+}
+
+customElements.define('my-custom-dialog-utils', MyCustomDialogUtils);
+```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webfactoryde/dialog-utils",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Web Component with progressive enhancements for the HTML <dialog> element",
   "main": "src/dialog-utils.js",
   "repository": {

src/dialog-utils.js

@@ -1,4 +1,4 @@
-class DialogUtils extends HTMLElement {
+export class DialogUtils extends HTMLElement {
     static get observedAttributes() {
         return ["autofocus-target", "autoopen"];
     }
@@ -28,8 +28,12 @@ class DialogUtils extends HTMLElement {
         }
 
         this.dialog = this.querySelector('dialog');
+
+        this.dialog.addEventListener('show', this.onShow.bind(this));
         this.dialog.addEventListener('close', this.onClose.bind(this));
 
+        this.monkeyPatchShowMethod();
+        this.monkeyPatchShowModalMethod();
         this.polyfillClosedByAny();
         this.polyfillInvokerCommands();
         this.handleAutofocus();
@@ -39,10 +43,52 @@ class DialogUtils extends HTMLElement {
         if (this._observer) this._observer.disconnect();
     }
 
+    onShow(e) {
+        if (e.detail.isModal) {
+            this.disablePageScroll();
+        }
+    }
+
     onClose() {
         this.resetIframes();
+        this.enablePageScroll();
+    }
+
+    /**
+     * Patch showModal() to emit a 'show' event, indicate that the dialog is modal
+     */
+    monkeyPatchShowModalMethod() {
+        const origShowModal = this.dialog.showModal.bind(this.dialog);
+        this.dialog.showModal = (...args) => {
+            const result = origShowModal(...args);
+            this.dialog.dispatchEvent(new CustomEvent('show', {
+                detail: {
+                    isModal: true,
+                },
+                bubbles: true,
+            }));
+            return result;
+        };
     }
 
+    /**
+     * Patch show() to emit a 'show' event, indicate that the dialog is non-modal
+     */
+    monkeyPatchShowMethod() {
+        const origShow = this.dialog.show.bind(this.dialog);
+        this.dialog.show = (...args) => {
+            const result = origShow(...args);
+            this.dialog.dispatchEvent(new CustomEvent('show', {
+                detail: {
+                    isModal: false,
+                },
+                bubbles: true,
+            }));
+            return result;
+        };
+    }
+
+
     /**
      * Polyfill for light dismissal via closedby="any"
      *
@@ -122,6 +168,19 @@ class DialogUtils extends HTMLElement {
         }
     }
 
+    enablePageScroll() {
+        if (this.origBodyOverflow) {
+            document.body.style.overflow = this.origBodyOverflow;
+            this.origBodyOverflow = null;
+        }
+    }
+
+    disablePageScroll() {
+        this.origBodyOverflow = document.body.style.overflow;
+
+        document.body.style.overflow = 'hidden';
+    }
+
     /**
      * Ensure that any interactive iframe content (i.e. embedded video) stops playing when the dialog is closed
      */