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) {
13 * Default dialog options.
17 * @prop {bool} [autoOpen=true]
18 * @prop {string} [dialogClass='']
19 * @prop {string} [buttonClass='button']
20 * @prop {string} [buttonPrimaryClass='button--primary']
21 * @prop {function} close
23 drupalSettings.dialog = {
26 // Drupal-specific extensions: see dialog.jquery-ui.js.
27 buttonClass: 'button',
28 buttonPrimaryClass: 'button--primary',
29 // When using this API directly (when generating dialogs on the client
30 // side), you may want to override this method and do
31 // `jQuery(event.target).remove()` as well, to remove the dialog on
33 close: function (event) {
34 Drupal.dialog(event.target).close();
35 Drupal.detachBehaviors(event.target, null, 'unload');
40 * @typedef {object} Drupal.dialog~dialogDefinition
42 * @prop {boolean} open
43 * Is the dialog open or not.
44 * @prop {*} returnValue
45 * Return value of the dialog.
46 * @prop {function} show
47 * Method to display the dialog on the page.
48 * @prop {function} showModal
49 * Method to display the dialog as a modal on the page.
50 * @prop {function} close
51 * Method to hide the dialog from the page.
55 * Polyfill HTML5 dialog element with jQueryUI.
57 * @param {HTMLElement} element
58 * The element that holds the dialog.
59 * @param {object} options
60 * jQuery UI options to be passed to the dialog.
62 * @return {Drupal.dialog~dialogDefinition}
63 * The dialog instance.
65 Drupal.dialog = function (element, options) {
67 var $element = $(element);
72 openDialog({modal: false});
74 showModal: function () {
75 openDialog({modal: true});
80 function openDialog(settings) {
81 settings = $.extend({}, drupalSettings.dialog, options, settings);
82 // Trigger a global event to allow scripts to bind events to the dialog.
83 $(window).trigger('dialog:beforecreate', [dialog, $element, settings]);
84 $element.dialog(settings);
86 $(window).trigger('dialog:aftercreate', [dialog, $element, settings]);
89 function closeDialog(value) {
90 $(window).trigger('dialog:beforeclose', [dialog, $element]);
91 $element.dialog('close');
92 dialog.returnValue = value;
94 $(window).trigger('dialog:afterclose', [dialog, $element]);
100 })(jQuery, Drupal, drupalSettings);