dialog.es6.js 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  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. (function ($, Drupal, drupalSettings) {
  8. /**
  9. * Default dialog options.
  10. *
  11. * @type {object}
  12. *
  13. * @prop {bool} [autoOpen=true]
  14. * @prop {string} [dialogClass='']
  15. * @prop {string} [buttonClass='button']
  16. * @prop {string} [buttonPrimaryClass='button--primary']
  17. * @prop {function} close
  18. */
  19. drupalSettings.dialog = {
  20. autoOpen: true,
  21. dialogClass: '',
  22. // Drupal-specific extensions: see dialog.jquery-ui.js.
  23. buttonClass: 'button',
  24. buttonPrimaryClass: 'button--primary',
  25. // When using this API directly (when generating dialogs on the client
  26. // side), you may want to override this method and do
  27. // `jQuery(event.target).remove()` as well, to remove the dialog on
  28. // closing.
  29. close(event) {
  30. Drupal.dialog(event.target).close();
  31. Drupal.detachBehaviors(event.target, null, 'unload');
  32. },
  33. };
  34. /**
  35. * @typedef {object} Drupal.dialog~dialogDefinition
  36. *
  37. * @prop {boolean} open
  38. * Is the dialog open or not.
  39. * @prop {*} returnValue
  40. * Return value of the dialog.
  41. * @prop {function} show
  42. * Method to display the dialog on the page.
  43. * @prop {function} showModal
  44. * Method to display the dialog as a modal on the page.
  45. * @prop {function} close
  46. * Method to hide the dialog from the page.
  47. */
  48. /**
  49. * Polyfill HTML5 dialog element with jQueryUI.
  50. *
  51. * @param {HTMLElement} element
  52. * The element that holds the dialog.
  53. * @param {object} options
  54. * jQuery UI options to be passed to the dialog.
  55. *
  56. * @return {Drupal.dialog~dialogDefinition}
  57. * The dialog instance.
  58. */
  59. Drupal.dialog = function (element, options) {
  60. let undef;
  61. const $element = $(element);
  62. const dialog = {
  63. open: false,
  64. returnValue: undef,
  65. show() {
  66. openDialog({ modal: false });
  67. },
  68. showModal() {
  69. openDialog({ modal: true });
  70. },
  71. close: closeDialog,
  72. };
  73. function openDialog(settings) {
  74. settings = $.extend({}, drupalSettings.dialog, options, settings);
  75. // Trigger a global event to allow scripts to bind events to the dialog.
  76. $(window).trigger('dialog:beforecreate', [dialog, $element, settings]);
  77. $element.dialog(settings);
  78. dialog.open = true;
  79. $(window).trigger('dialog:aftercreate', [dialog, $element, settings]);
  80. }
  81. function closeDialog(value) {
  82. $(window).trigger('dialog:beforeclose', [dialog, $element]);
  83. $element.dialog('close');
  84. dialog.returnValue = value;
  85. dialog.open = false;
  86. $(window).trigger('dialog:afterclose', [dialog, $element]);
  87. }
  88. return dialog;
  89. };
  90. }(jQuery, Drupal, drupalSettings));