aleph1.co.uk Git - yaffs-website/blob - web/core/misc/dialog/dialog.es6.js

   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
   8 (function($, Drupal, drupalSettings) {
   9   /**
  10    * Default dialog options.
  11    *
  12    * @type {object}
  13    *
  14    * @prop {bool} [autoOpen=true]
  15    * @prop {string} [dialogClass='']
  16    * @prop {string} [buttonClass='button']
  17    * @prop {string} [buttonPrimaryClass='button--primary']
  18    * @prop {function} close
  19    */
  20   drupalSettings.dialog = {
  21     autoOpen: true,
  22     dialogClass: '',
  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
  29     // closing.
  30     close(event) {
  31       Drupal.dialog(event.target).close();
  32       Drupal.detachBehaviors(event.target, null, 'unload');
  33     },
  34   };
  35
  36   /**
  37    * @typedef {object} Drupal.dialog~dialogDefinition
  38    *
  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.
  49    */
  50
  51   /**
  52    * Polyfill HTML5 dialog element with jQueryUI.
  53    *
  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.
  58    *
  59    * @return {Drupal.dialog~dialogDefinition}
  60    *   The dialog instance.
  61    */
  62   Drupal.dialog = function(element, options) {
  63     let undef;
  64     const $element = $(element);
  65     const dialog = {
  66       open: false,
  67       returnValue: undef,
  68     };
  69
  70     function openDialog(settings) {
  71       settings = $.extend({}, drupalSettings.dialog, options, settings);
  72       // Trigger a global event to allow scripts to bind events to the dialog.
  73       $(window).trigger('dialog:beforecreate', [dialog, $element, settings]);
  74       $element.dialog(settings);
  75       dialog.open = true;
  76       $(window).trigger('dialog:aftercreate', [dialog, $element, settings]);
  77     }
  78
  79     function closeDialog(value) {
  80       $(window).trigger('dialog:beforeclose', [dialog, $element]);
  81       $element.dialog('close');
  82       dialog.returnValue = value;
  83       dialog.open = false;
  84       $(window).trigger('dialog:afterclose', [dialog, $element]);
  85     }
  86
  87     dialog.show = () => {
  88       openDialog({ modal: false });
  89     };
  90     dialog.showModal = () => {
  91       openDialog({ modal: true });
  92     };
  93     dialog.close = closeDialog;
  94
  95     return dialog;
  96   };
  97 })(jQuery, Drupal, drupalSettings);