3 * Positioning extensions for dialogs.
7 * Triggers when content inside a dialog changes.
9 * @event dialogContentResize
12 (function($, Drupal, drupalSettings, debounce, displace) {
13 // autoResize option will turn off resizable and draggable.
14 drupalSettings.dialog = $.extend(
15 { autoResize: true, maxHeight: '95%' },
16 drupalSettings.dialog,
20 * Position the dialog's center at the center of displace.offsets boundaries.
22 * @function Drupal.dialog~resetPosition
24 * @param {object} options
28 * Altered options object.
30 function resetPosition(options) {
31 const offsets = displace.offsets;
32 const left = offsets.left - offsets.right;
33 const top = offsets.top - offsets.bottom;
35 const leftString = `${(left > 0 ? '+' : '-') +
36 Math.abs(Math.round(left / 2))}px`;
37 const topString = `${(top > 0 ? '+' : '-') +
38 Math.abs(Math.round(top / 2))}px`;
40 my: `center${left !== 0 ? leftString : ''} center${
41 top !== 0 ? topString : ''
49 * Resets the current options for positioning.
51 * This is used as a window resize and scroll callback to reposition the
52 * jQuery UI dialog. Although not a built-in jQuery UI option, this can
53 * be disabled by setting autoResize: false in the options array when creating
54 * a new {@link Drupal.dialog}.
56 * @function Drupal.dialog~resetSize
58 * @param {jQuery.Event} event
59 * The event triggered.
61 * @fires event:dialogContentResize
63 function resetSize(event) {
64 const positionOptions = [
73 let adjustedOptions = {};
74 let windowHeight = $(window).height();
78 for (let n = 0; n < positionOptions.length; n++) {
79 option = positionOptions[n];
80 optionValue = event.data.settings[option];
82 // jQuery UI does not support percentages on heights, convert to pixels.
84 typeof optionValue === 'string' &&
85 /%$/.test(optionValue) &&
86 /height/i.test(option)
88 // Take offsets in account.
89 windowHeight -= displace.offsets.top + displace.offsets.bottom;
90 adjustedValue = parseInt(
91 0.01 * parseInt(optionValue, 10) * windowHeight,
94 // Don't force the dialog to be bigger vertically than needed.
96 option === 'height' &&
97 event.data.$element.parent().outerHeight() < adjustedValue
99 adjustedValue = 'auto';
101 adjustedOptions[option] = adjustedValue;
105 // Offset the dialog center to be at the center of Drupal.displace.offsets.
106 if (!event.data.settings.modal) {
107 adjustedOptions = resetPosition(adjustedOptions);
110 .dialog('option', adjustedOptions)
111 .trigger('dialogContentResize');
115 'dialog:aftercreate': function(event, dialog, $element, settings) {
116 const autoResize = debounce(resetSize, 20);
117 const eventData = { settings, $element };
118 if (settings.autoResize === true || settings.autoResize === 'true') {
120 .dialog('option', { resizable: false, draggable: false })
122 .css('position', 'fixed');
124 .on('resize.dialogResize scroll.dialogResize', eventData, autoResize)
125 .trigger('resize.dialogResize');
127 'drupalViewportOffsetChange.dialogResize',
133 'dialog:beforeclose': function(event, dialog, $element) {
134 $(window).off('.dialogResize');
135 $(document).off('.dialogResize');
138 })(jQuery, Drupal, drupalSettings, Drupal.debounce, Drupal.displace);