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 8class DrupalDialogEvent extends Event { 9 constructor(type, dialog, settings = null) { 10 super(`dialog:${type}`, { bubbles: true }); 11 this.dialog = dialog; 12 this.settings = settings; 13 } 14} 15 16(function ($, Drupal, drupalSettings, bodyScrollLock) { 17 /** 18 * Default dialog options. 19 * 20 * @type {object} 21 * 22 * @prop {boolean} [autoOpen=true] 23 * @prop {string} [dialogClass=''] 24 * @prop {string} [buttonClass='button'] 25 * @prop {string} [buttonPrimaryClass='button--primary'] 26 * @prop {function} close 27 */ 28 drupalSettings.dialog = { 29 autoOpen: true, 30 dialogClass: '', 31 // Drupal-specific extensions: see dialog.jquery-ui.js. 32 buttonClass: 'button', 33 buttonPrimaryClass: 'button--primary', 34 // When using this API directly (when generating dialogs on the client 35 // side), you may want to override this method and do 36 // `jQuery(event.target).remove()` as well, to remove the dialog on 37 // closing. 38 close(event) { 39 Drupal.dialog(event.target).close(); 40 Drupal.detachBehaviors(event.target, null, 'unload'); 41 }, 42 }; 43 44 /** 45 * @typedef {object} Drupal.dialog~dialogDefinition 46 * 47 * @prop {boolean} open 48 * Is the dialog open or not. 49 * @prop {*} returnValue 50 * Return value of the dialog. 51 * @prop {function} show 52 * Method to display the dialog on the page. 53 * @prop {function} showModal 54 * Method to display the dialog as a modal on the page. 55 * @prop {function} close 56 * Method to hide the dialog from the page. 57 */ 58 59 /** 60 * Polyfill HTML5 dialog element with jQueryUI. 61 * 62 * @param {HTMLElement} element 63 * The element that holds the dialog. 64 * @param {object} options 65 * jQuery UI options to be passed to the dialog. 66 * 67 * @return {Drupal.dialog~dialogDefinition} 68 * The dialog instance. 69 */ 70 Drupal.dialog = function (element, options) { 71 let undef; 72 73 const $element = $(element); 74 const domElement = $element.get(0); 75 76 const dialog = { 77 open: false, 78 returnValue: undef, 79 }; 80 81 function openDialog(settings) { 82 settings = $.extend({}, drupalSettings.dialog, options, settings); 83 // Trigger a global event to allow scripts to bind events to the dialog. 84 const event = new DrupalDialogEvent('beforecreate', dialog, settings); 85 domElement.dispatchEvent(event); 86 $element.dialog(event.settings); 87 dialog.open = true; 88 89 // Locks the body scroll only when it opens in modal. 90 if (event.settings.modal) { 91 // Locks the body when the dialog opens. 92 bodyScrollLock.lock(domElement); 93 } 94 95 domElement.dispatchEvent( 96 new DrupalDialogEvent('aftercreate', dialog, event.settings), 97 ); 98 } 99 100 function closeDialog(value) { 101 domElement.dispatchEvent(new DrupalDialogEvent('beforeclose', dialog)); 102 103 // Unlocks the body when the dialog closes. 104 bodyScrollLock.clearBodyLocks(); 105 106 $element.dialog('close'); 107 dialog.returnValue = value; 108 dialog.open = false; 109 110 domElement.dispatchEvent(new DrupalDialogEvent('afterclose', dialog)); 111 } 112 113 dialog.show = () => { 114 openDialog({ modal: false }); 115 }; 116 dialog.showModal = () => { 117 openDialog({ modal: true }); 118 }; 119 dialog.close = closeDialog; 120 121 return dialog; 122 }; 123})(jQuery, Drupal, drupalSettings, bodyScrollLock);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.