https://www.ready.gov/core/misc/dialog/dialog.js?v=11.4.5

1/**
2 * @file
3 * Dialog API inspired by HTML5 dialog element.
4 *
5 * @see http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#the-dialog-element
6 */
7
8class DrupalDialogEvent extends Event {
9  constructor(type, dialog, settings = null) {
10    super(`dialog:${type}`, { bubbles: true });
11    this.dialog = dialog;
12    this.settings = settings;
13  }
14}
15
16(function ($, Drupal, drupalSettings, bodyScrollLock) {
17  /**
18   * Default dialog options.
19   *
20   * @type {object}
21   *
22   * @prop {boolean} [autoOpen=true]
23   * @prop {string} [buttonClass='button']
24   * @prop {string} [buttonPrimaryClass='button--primary']
25   * @prop {function} close
26   */
27  drupalSettings.dialog = {
28    autoOpen: true,
29    // Drupal-specific extensions: see dialog.jquery-ui.js.
30    buttonClass: 'button',
31    buttonPrimaryClass: 'button--primary',
32    // When using this API directly (when generating dialogs on the client
33    // side), you may want to override this method and do
34    // `jQuery(event.target).remove()` as well, to remove the dialog on
35    // closing.
36    close(event) {
37      Drupal.dialog(event.target).close();
38      Drupal.detachBehaviors(event.target, null, 'unload');
39    },
40  };
41
42  /**
43   * @typedef {object} Drupal.dialog~dialogDefinition
44   *
45   * @prop {boolean} open
46   *   Is the dialog open or not.
47   * @prop {*} returnValue
48   *   Return value of the dialog.
49   * @prop {function} show
50   *   Method to display the dialog on the page.
51   * @prop {function} showModal
52   *   Method to display the dialog as a modal on the page.
53   * @prop {function} close
54   *   Method to hide the dialog from the page.
55   */
56
57  /**
58   * Polyfill HTML5 dialog element with jQueryUI.
59   *
60   * @param {HTMLElement} element
61   *   The element that holds the dialog.
62   * @param {object} options
63   *   jQuery UI options to be passed to the dialog.
64   *
65   * @return {Drupal.dialog~dialogDefinition}
66   *   The dialog instance.
67   */
68  Drupal.dialog = function (element, options) {
69    let undef;
70
71    const $element = $(element);
72    const domElement = $element.get(0);
73
74    const dialog = {
75      open: false,
76      returnValue: undef,
77    };
78
79    function openDialog(settings) {
80      settings = $.extend({}, drupalSettings.dialog, options, settings);
81      if (settings.dialogClass) {
82        Drupal.deprecationError({
83          message:
84            'dialogClass is deprecated in drupal:10.4.x and will be removed from drupal:12.0.0.',
85        });
86      }
87
88      // Trigger a global event to allow scripts to bind events to the dialog.
89      const event = new DrupalDialogEvent('beforecreate', dialog, settings);
90      domElement.dispatchEvent(event);
91      $element.dialog(event.settings);
92      dialog.open = true;
93
94      // Locks the body scroll only when it opens in modal.
95      if (event.settings.modal) {
96        // Locks the body when the dialog opens.
97        bodyScrollLock.lock(domElement);
98      }
99
100      domElement.dispatchEvent(
101        new DrupalDialogEvent('aftercreate', dialog, event.settings),
102      );
103    }
104
105    function closeDialog(value) {
106      domElement.dispatchEvent(new DrupalDialogEvent('beforeclose', dialog));
107
108      // Unlocks the body when the dialog closes.
109      bodyScrollLock.clearBodyLocks();
110
111      $element.dialog('close');
112      dialog.returnValue = value;
113      dialog.open = false;
114
115      domElement.dispatchEvent(new DrupalDialogEvent('afterclose', dialog));
116    }
117
118    dialog.show = () => {
119      openDialog({ modal: false, uiDialogTitleHeadingLevel: 2 });
120    };
121    dialog.showModal = () => {
122      openDialog({ modal: true, uiDialogTitleHeadingLevel: 1 });
123    };
124    dialog.close = closeDialog;
125
126    return dialog;
127  };
128})(jQuery, Drupal, drupalSettings, bodyScrollLock);