--- /dev/null
+/**
+ * @file
+ * Positioning extensions for dialogs.
+ */
+
+/**
+ * Triggers when content inside a dialog changes.
+ *
+ * @event dialogContentResize
+ */
+
+(function ($, Drupal, drupalSettings, debounce, displace) {
+ // autoResize option will turn off resizable and draggable.
+ drupalSettings.dialog = $.extend({ autoResize: true, maxHeight: '95%' }, drupalSettings.dialog);
+
+ /**
+ * 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
+ */
+ function resetSize(event) {
+ const positionOptions = ['width', 'height', 'minWidth', 'minHeight', 'maxHeight', 'maxWidth', 'position'];
+ let adjustedOptions = {};
+ let windowHeight = $(window).height();
+ let option;
+ let optionValue;
+ let adjustedValue;
+ for (let 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';
+ }
+ adjustedOptions[option] = adjustedValue;
+ }
+ }
+ }
+ // Offset the dialog center to be at the center of Drupal.displace.offsets.
+ if (!event.data.settings.modal) {
+ adjustedOptions = resetPosition(adjustedOptions);
+ }
+ event.data.$element
+ .dialog('option', adjustedOptions)
+ .trigger('dialogContentResize');
+ }
+
+ /**
+ * Position the dialog's center at the center of displace.offsets boundaries.
+ *
+ * @function Drupal.dialog~resetPosition
+ *
+ * @param {object} options
+ * Options object.
+ *
+ * @return {object}
+ * Altered options object.
+ */
+ function resetPosition(options) {
+ const offsets = displace.offsets;
+ const left = offsets.left - offsets.right;
+ const top = offsets.top - offsets.bottom;
+
+ const leftString = `${(left > 0 ? '+' : '-') + Math.abs(Math.round(left / 2))}px`;
+ const topString = `${(top > 0 ? '+' : '-') + Math.abs(Math.round(top / 2))}px`;
+ options.position = {
+ my: `center${left !== 0 ? leftString : ''} center${top !== 0 ? topString : ''}`,
+ of: window,
+ };
+ return options;
+ }
+
+ $(window).on({
+ 'dialog:aftercreate': function (event, dialog, $element, settings) {
+ const autoResize = debounce(resetSize, 20);
+ const eventData = { settings, $element };
+ if (settings.autoResize === true || settings.autoResize === 'true') {
+ $element
+ .dialog('option', { resizable: false, draggable: false })
+ .dialog('widget').css('position', 'fixed');
+ $(window)
+ .on('resize.dialogResize scroll.dialogResize', eventData, autoResize)
+ .trigger('resize.dialogResize');
+ $(document).on('drupalViewportOffsetChange.dialogResize', eventData, autoResize);
+ }
+ },
+ 'dialog:beforeclose': function (event, dialog, $element) {
+ $(window).off('.dialogResize');
+ $(document).off('.dialogResize');
+ },
+ });
+}(jQuery, Drupal, drupalSettings, Drupal.debounce, Drupal.displace));