diff --git a/core/misc/dialog/dialog.position.js b/core/misc/dialog/dialog.position.js index 7678646..e90bef7 100644 --- a/core/misc/dialog/dialog.position.js +++ b/core/misc/dialog/dialog.position.js @@ -19,47 +19,69 @@ /** * Resets the current options for positioning. * - * This is used as a window resize and scroll callback to reposition the - * jQuery UI dialog. Although not a built-in jQuery UI option, this can - * be disabled by setting autoResize: false in the options array when creating - * a new {@link Drupal.dialog}. - * - * @function Drupal.dialog~resetSize - * - * @param {jQuery.Event} event - * The event triggered. - * - * @fires event:dialogContentResize + * @param {boolean} isModal + * Whether the dialog is a modal. */ - function resetSize(event) { - var positionOptions = ['width', 'height', 'minWidth', 'minHeight', 'maxHeight', 'maxWidth', 'position']; - var adjustedOptions = {}; - var windowHeight = $(window).height(); - var option; - var optionValue; - var adjustedValue; - for (var n = 0; n < positionOptions.length; n++) { - option = positionOptions[n]; - optionValue = event.data.settings[option]; - if (optionValue) { - // jQuery UI does not support percentages on heights, convert to pixels. - if (typeof optionValue === 'string' && /%$/.test(optionValue) && /height/i.test(option)) { - // Take offsets in account. - windowHeight -= displace.offsets.top + displace.offsets.bottom; - adjustedValue = parseInt(0.01 * parseInt(optionValue, 10) * windowHeight, 10); - // Don't force the dialog to be bigger vertically than needed. - if (option === 'height' && event.data.$element.parent().outerHeight() < adjustedValue) { - adjustedValue = 'auto'; + function resetSize(isModal) { + /** + * Resets the current options for positioning. + * + * This is used as a window resize and scroll callback to reposition the + * jQuery UI dialog. Although not a built-in jQuery UI option, this can + * be disabled by setting autoResize: false in the options array when creating + * a new {@link Drupal.dialog}. + * + * @function Drupal.dialog~resetSize + * + * @param {jQuery.Event} event + * The event triggered. + * + * @fires event:dialogContentResize + */ + return function (event) { + var positionOptions = ['width', 'height', 'minWidth', 'minHeight', 'maxHeight', 'maxWidth', 'position']; + var adjustedOptions = {}; + var windowHeight = $(window).height(); + var $element = event.data.$element; + var option; + var optionValue; + var adjustedValue; + + // Take offsets in account for non-modals + if (!isModal) { + windowHeight -= displace.offsets.top + displace.offsets.bottom; + } + + for (var n = 0; n < positionOptions.length; n++) { + option = positionOptions[n]; + optionValue = event.data.settings[option]; + if (optionValue) { + // jQuery UI does not support percentages on heights, convert to pixels. + if (typeof optionValue === 'string' && /%$/.test(optionValue) && /height/i.test(option)) { + adjustedValue = parseInt(0.01 * parseInt(optionValue, 10) * windowHeight, 10); + // Don't force the dialog to be bigger vertically than needed. + if (option === 'height' && $element.parent().outerHeight() < adjustedValue) { + adjustedValue = 'auto'; + } + adjustedOptions[option] = adjustedValue; } - adjustedOptions[option] = adjustedValue; } } + // Offset the dialog center to be at the center of Drupal.displace.offsets. + if (!isModal) { + adjustedOptions = resetPosition(adjustedOptions); + } + // Modals don't need to take offsets into account. + else { + adjustedOptions.position = { + my: 'center', + of: window + }; + } + $element + .dialog('option', adjustedOptions) + .trigger('dialogContentResize'); } - // Offset the dialog center to be at the center of Drupal.displace.offsets. - adjustedOptions = resetPosition(adjustedOptions); - event.data.$element - .dialog('option', adjustedOptions) - .trigger('dialogContentResize'); } /** @@ -89,16 +111,24 @@ $(window).on({ 'dialog:aftercreate': function (event, dialog, $element, settings) { - var autoResize = debounce(resetSize, 20); - var eventData = {settings: settings, $element: $element}; - if (settings.autoResize === true || settings.autoResize === 'true') { + var autoResize = settings.autoResize === true || settings.autoResize === 'true'; + if (autoResize) { + var autoResizeHandler = debounce(resetSize(settings.modal), 20); + var eventData = {settings: settings, $element: $element}; + $element .dialog('option', {resizable: false, draggable: false}) .dialog('widget').css('position', 'fixed'); + $(window) - .on('resize.dialogResize scroll.dialogResize', eventData, autoResize) + .on('resize.dialogResize scroll.dialogResize', eventData, autoResizeHandler) .trigger('resize.dialogResize'); - $(document).on('drupalViewportOffsetChange', eventData, autoResize); + + // Modals by nature don't need to care about displace offsets. I can + // overlap anything. + if (!settings.modal) { + $(document).on('drupalViewportOffsetChange', eventData, autoResizeHandler); + } } }, 'dialog:beforeclose': function (event, dialog, $element) {