3 * Positioning extensions for dialogs.
7 * Triggers when content inside a dialog changes.
9 * @event dialogContentResize
12 (function ($, Drupal, drupalSettings, debounce, displace) {
16 // autoResize option will turn off resizable and draggable.
17 drupalSettings.dialog = $.extend({autoResize: true, maxHeight: '95%'}, drupalSettings.dialog);
20 * Resets the current options for positioning.
22 * This is used as a window resize and scroll callback to reposition the
23 * jQuery UI dialog. Although not a built-in jQuery UI option, this can
24 * be disabled by setting autoResize: false in the options array when creating
25 * a new {@link Drupal.dialog}.
27 * @function Drupal.dialog~resetSize
29 * @param {jQuery.Event} event
30 * The event triggered.
32 * @fires event:dialogContentResize
34 function resetSize(event) {
35 var positionOptions = ['width', 'height', 'minWidth', 'minHeight', 'maxHeight', 'maxWidth', 'position'];
36 var adjustedOptions = {};
37 var windowHeight = $(window).height();
41 for (var n = 0; n < positionOptions.length; n++) {
42 option = positionOptions[n];
43 optionValue = event.data.settings[option];
45 // jQuery UI does not support percentages on heights, convert to pixels.
46 if (typeof optionValue === 'string' && /%$/.test(optionValue) && /height/i.test(option)) {
47 // Take offsets in account.
48 windowHeight -= displace.offsets.top + displace.offsets.bottom;
49 adjustedValue = parseInt(0.01 * parseInt(optionValue, 10) * windowHeight, 10);
50 // Don't force the dialog to be bigger vertically than needed.
51 if (option === 'height' && event.data.$element.parent().outerHeight() < adjustedValue) {
52 adjustedValue = 'auto';
54 adjustedOptions[option] = adjustedValue;
58 // Offset the dialog center to be at the center of Drupal.displace.offsets.
59 if (!event.data.settings.modal) {
60 adjustedOptions = resetPosition(adjustedOptions);
63 .dialog('option', adjustedOptions)
64 .trigger('dialogContentResize');
68 * Position the dialog's center at the center of displace.offsets boundaries.
70 * @function Drupal.dialog~resetPosition
72 * @param {object} options
76 * Altered options object.
78 function resetPosition(options) {
79 var offsets = displace.offsets;
80 var left = offsets.left - offsets.right;
81 var top = offsets.top - offsets.bottom;
83 var leftString = (left > 0 ? '+' : '-') + Math.abs(Math.round(left / 2)) + 'px';
84 var topString = (top > 0 ? '+' : '-') + Math.abs(Math.round(top / 2)) + 'px';
86 my: 'center' + (left !== 0 ? leftString : '') + ' center' + (top !== 0 ? topString : ''),
93 'dialog:aftercreate': function (event, dialog, $element, settings) {
94 var autoResize = debounce(resetSize, 20);
95 var eventData = {settings: settings, $element: $element};
96 if (settings.autoResize === true || settings.autoResize === 'true') {
98 .dialog('option', {resizable: false, draggable: false})
99 .dialog('widget').css('position', 'fixed');
101 .on('resize.dialogResize scroll.dialogResize', eventData, autoResize)
102 .trigger('resize.dialogResize');
103 $(document).on('drupalViewportOffsetChange.dialogResize', eventData, autoResize);
106 'dialog:beforeclose': function (event, dialog, $element) {
107 $(window).off('.dialogResize');
108 $(document).off('.dialogResize');
112 })(jQuery, Drupal, drupalSettings, Drupal.debounce, Drupal.displace);