www.aleph1.co.uk Git - yaffs-website/blob - web/core/misc/dialog/dialog.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   'use strict';
  11
  12   /**
  13    * Default dialog options.
  14    *
  15    * @type {object}
  16    *
  17    * @prop {bool} [autoOpen=true]
  18    * @prop {string} [dialogClass='']
  19    * @prop {string} [buttonClass='button']
  20    * @prop {string} [buttonPrimaryClass='button--primary']
  21    * @prop {function} close
  22    */
  23   drupalSettings.dialog = {
  24     autoOpen: true,
  25     dialogClass: '',
  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
  32     // closing.
  33     close: function (event) {
  34       Drupal.dialog(event.target).close();
  35       Drupal.detachBehaviors(event.target, null, 'unload');
  36     }
  37   };
  38
  39   /**
  40    * @typedef {object} Drupal.dialog~dialogDefinition
  41    *
  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.
  52    */
  53
  54   /**
  55    * Polyfill HTML5 dialog element with jQueryUI.
  56    *
  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.
  61    *
  62    * @return {Drupal.dialog~dialogDefinition}
  63    *   The dialog instance.
  64    */
  65   Drupal.dialog = function (element, options) {
  66     var undef;
  67     var $element = $(element);
  68     var dialog = {
  69       open: false,
  70       returnValue: undef,
  71       show: function () {
  72         openDialog({modal: false});
  73       },
  74       showModal: function () {
  75         openDialog({modal: true});
  76       },
  77       close: closeDialog
  78     };
  79
  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);
  85       dialog.open = true;
  86       $(window).trigger('dialog:aftercreate', [dialog, $element, settings]);
  87     }
  88
  89     function closeDialog(value) {
  90       $(window).trigger('dialog:beforeclose', [dialog, $element]);
  91       $element.dialog('close');
  92       dialog.returnValue = value;
  93       dialog.open = false;
  94       $(window).trigger('dialog:afterclose', [dialog, $element]);
  95     }
  96
  97     return dialog;
  98   };
  99
 100 })(jQuery, Drupal, drupalSettings);