https://pneumotox.com/assets/controllers/dialog_controller-4eZH0L0.js

1import { Controller } from '@hotwired/stimulus';
2
3export default class extends Controller {
4    static targets = ['trigger', 'dialog'];
5
6    static values = {
7        open: Boolean,
8    };
9
10    connect() {
11        if (this.openValue) {
12            this.open();
13        }
14    }
15
16    open() {
17        const dialog = this.dialogTarget;
18        // A dialog parsed with the open attribute is non-modal. showModal() then throws
19        // and Stimulus aborts connect(), so the dialog can never be opened again.
20        if (dialog.open) {
21            dialog.close();
22        }
23        dialog.showModal();
24
25        if (this.hasTriggerTarget) {
26            if (this.dialogTarget.getAnimations().length > 0) {
27                this.dialogTarget.addEventListener(
28                    'transitionend',
29                    () => {
30                        this.triggerTarget.setAttribute('aria-expanded', 'true');
31                    },
32                    { once: true }
33                );
34            } else {
35                this.triggerTarget.setAttribute('aria-expanded', 'true');
36            }
37        }
38    }
39
40    closeOnClickOutside({ target }) {
41        if (target === this.dialogTarget) {
42            this.close();
43        }
44    }
45
46    close() {
47        this.dialogTarget.close();
48
49        if (this.hasTriggerTarget) {
50            if (this.dialogTarget.getAnimations().length > 0) {
51                this.dialogTarget.addEventListener('transitionend', () => {
52                    this.triggerTarget.setAttribute('aria-expanded', 'false');
53                });
54            } else {
55                this.triggerTarget.setAttribute('aria-expanded', 'false');
56            }
57        }
58    }
59}