3 * Dialog API inspired by HTML5 dialog element.
5 * @see http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#the-dialog-element
8 (function ($, Drupal, drupalSettings) {
10 * Default dialog options.
14 * @prop {bool} [autoOpen=true]
15 * @prop {string} [dialogClass='']
16 * @prop {string} [buttonClass='button']
17 * @prop {string} [buttonPrimaryClass='button--primary']
18 * @prop {function} close
20 drupalSettings.dialog = {
23 // Drupal-specific extensions: see dialog.jquery-ui.js.
24 buttonClass: 'button',
25 buttonPrimaryClass: 'button--primary',
26 // When using this API directly (when generating dialogs on the client
27 // side), you may want to override this method and do
28 // `jQuery(event.target).remove()` as well, to remove the dialog on
31 Drupal.dialog(event.target).close();
32 Drupal.detachBehaviors(event.target, null, 'unload');
37 * @typedef {object} Drupal.dialog~dialogDefinition
39 * @prop {boolean} open
40 * Is the dialog open or not.
41 * @prop {*} returnValue
42 * Return value of the dialog.
43 * @prop {function} show
44 * Method to display the dialog on the page.
45 * @prop {function} showModal
46 * Method to display the dialog as a modal on the page.
47 * @prop {function} close
48 * Method to hide the dialog from the page.
52 * Polyfill HTML5 dialog element with jQueryUI.
54 * @param {HTMLElement} element
55 * The element that holds the dialog.
56 * @param {object} options
57 * jQuery UI options to be passed to the dialog.
59 * @return {Drupal.dialog~dialogDefinition}
60 * The dialog instance.
62 Drupal.dialog = function (element, options) {
64 const $element = $(element);
69 openDialog({ modal: false });
72 openDialog({ modal: true });
77 function openDialog(settings) {
78 settings = $.extend({}, drupalSettings.dialog, options, settings);
79 // Trigger a global event to allow scripts to bind events to the dialog.
80 $(window).trigger('dialog:beforecreate', [dialog, $element, settings]);
81 $element.dialog(settings);
83 $(window).trigger('dialog:aftercreate', [dialog, $element, settings]);
86 function closeDialog(value) {
87 $(window).trigger('dialog:beforeclose', [dialog, $element]);
88 $element.dialog('close');
89 dialog.returnValue = value;
91 $(window).trigger('dialog:afterclose', [dialog, $element]);
96 }(jQuery, Drupal, drupalSettings));