Chris@0: /**
Chris@0:  * @file
Chris@0:  * Dialog API inspired by HTML5 dialog element.
Chris@0:  *
Chris@0:  * @see http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#the-dialog-element
Chris@0:  */
Chris@0: 
Chris@17: (function($, Drupal, drupalSettings) {
Chris@0:   /**
Chris@0:    * Default dialog options.
Chris@0:    *
Chris@0:    * @type {object}
Chris@0:    *
Chris@0:    * @prop {bool} [autoOpen=true]
Chris@0:    * @prop {string} [dialogClass='']
Chris@0:    * @prop {string} [buttonClass='button']
Chris@0:    * @prop {string} [buttonPrimaryClass='button--primary']
Chris@0:    * @prop {function} close
Chris@0:    */
Chris@0:   drupalSettings.dialog = {
Chris@0:     autoOpen: true,
Chris@0:     dialogClass: '',
Chris@0:     // Drupal-specific extensions: see dialog.jquery-ui.js.
Chris@0:     buttonClass: 'button',
Chris@0:     buttonPrimaryClass: 'button--primary',
Chris@0:     // When using this API directly (when generating dialogs on the client
Chris@0:     // side), you may want to override this method and do
Chris@0:     // `jQuery(event.target).remove()` as well, to remove the dialog on
Chris@0:     // closing.
Chris@0:     close(event) {
Chris@0:       Drupal.dialog(event.target).close();
Chris@0:       Drupal.detachBehaviors(event.target, null, 'unload');
Chris@0:     },
Chris@0:   };
Chris@0: 
Chris@0:   /**
Chris@0:    * @typedef {object} Drupal.dialog~dialogDefinition
Chris@0:    *
Chris@0:    * @prop {boolean} open
Chris@0:    *   Is the dialog open or not.
Chris@0:    * @prop {*} returnValue
Chris@0:    *   Return value of the dialog.
Chris@0:    * @prop {function} show
Chris@0:    *   Method to display the dialog on the page.
Chris@0:    * @prop {function} showModal
Chris@0:    *   Method to display the dialog as a modal on the page.
Chris@0:    * @prop {function} close
Chris@0:    *   Method to hide the dialog from the page.
Chris@0:    */
Chris@0: 
Chris@0:   /**
Chris@0:    * Polyfill HTML5 dialog element with jQueryUI.
Chris@0:    *
Chris@0:    * @param {HTMLElement} element
Chris@0:    *   The element that holds the dialog.
Chris@0:    * @param {object} options
Chris@0:    *   jQuery UI options to be passed to the dialog.
Chris@0:    *
Chris@0:    * @return {Drupal.dialog~dialogDefinition}
Chris@0:    *   The dialog instance.
Chris@0:    */
Chris@17:   Drupal.dialog = function(element, options) {
Chris@0:     let undef;
Chris@0:     const $element = $(element);
Chris@0:     const dialog = {
Chris@0:       open: false,
Chris@0:       returnValue: undef,
Chris@0:     };
Chris@0: 
Chris@0:     function openDialog(settings) {
Chris@0:       settings = $.extend({}, drupalSettings.dialog, options, settings);
Chris@0:       // Trigger a global event to allow scripts to bind events to the dialog.
Chris@0:       $(window).trigger('dialog:beforecreate', [dialog, $element, settings]);
Chris@0:       $element.dialog(settings);
Chris@0:       dialog.open = true;
Chris@0:       $(window).trigger('dialog:aftercreate', [dialog, $element, settings]);
Chris@0:     }
Chris@0: 
Chris@0:     function closeDialog(value) {
Chris@0:       $(window).trigger('dialog:beforeclose', [dialog, $element]);
Chris@0:       $element.dialog('close');
Chris@0:       dialog.returnValue = value;
Chris@0:       dialog.open = false;
Chris@0:       $(window).trigger('dialog:afterclose', [dialog, $element]);
Chris@0:     }
Chris@0: 
Chris@17:     dialog.show = () => {
Chris@17:       openDialog({ modal: false });
Chris@17:     };
Chris@17:     dialog.showModal = () => {
Chris@17:       openDialog({ modal: true });
Chris@17:     };
Chris@17:     dialog.close = closeDialog;
Chris@17: 
Chris@0:     return dialog;
Chris@0:   };
Chris@17: })(jQuery, Drupal, drupalSettings);