Chris@0: /**
Chris@0:  * @file
Chris@0:  * Positioning extensions for dialogs.
Chris@0:  */
Chris@0: 
Chris@0: /**
Chris@0:  * Triggers when content inside a dialog changes.
Chris@0:  *
Chris@0:  * @event dialogContentResize
Chris@0:  */
Chris@0: 
Chris@17: (function($, Drupal, drupalSettings, debounce, displace) {
Chris@0:   // autoResize option will turn off resizable and draggable.
Chris@17:   drupalSettings.dialog = $.extend(
Chris@17:     { autoResize: true, maxHeight: '95%' },
Chris@17:     drupalSettings.dialog,
Chris@17:   );
Chris@17: 
Chris@17:   /**
Chris@17:    * Position the dialog's center at the center of displace.offsets boundaries.
Chris@17:    *
Chris@17:    * @function Drupal.dialog~resetPosition
Chris@17:    *
Chris@17:    * @param {object} options
Chris@17:    *   Options object.
Chris@17:    *
Chris@17:    * @return {object}
Chris@17:    *   Altered options object.
Chris@17:    */
Chris@17:   function resetPosition(options) {
Chris@17:     const offsets = displace.offsets;
Chris@17:     const left = offsets.left - offsets.right;
Chris@17:     const top = offsets.top - offsets.bottom;
Chris@17: 
Chris@17:     const leftString = `${(left > 0 ? '+' : '-') +
Chris@17:       Math.abs(Math.round(left / 2))}px`;
Chris@17:     const topString = `${(top > 0 ? '+' : '-') +
Chris@17:       Math.abs(Math.round(top / 2))}px`;
Chris@17:     options.position = {
Chris@17:       my: `center${left !== 0 ? leftString : ''} center${
Chris@17:         top !== 0 ? topString : ''
Chris@17:       }`,
Chris@17:       of: window,
Chris@17:     };
Chris@17:     return options;
Chris@17:   }
Chris@0: 
Chris@0:   /**
Chris@0:    * Resets the current options for positioning.
Chris@0:    *
Chris@0:    * This is used as a window resize and scroll callback to reposition the
Chris@0:    * jQuery UI dialog. Although not a built-in jQuery UI option, this can
Chris@0:    * be disabled by setting autoResize: false in the options array when creating
Chris@0:    * a new {@link Drupal.dialog}.
Chris@0:    *
Chris@0:    * @function Drupal.dialog~resetSize
Chris@0:    *
Chris@0:    * @param {jQuery.Event} event
Chris@0:    *   The event triggered.
Chris@0:    *
Chris@0:    * @fires event:dialogContentResize
Chris@0:    */
Chris@0:   function resetSize(event) {
Chris@17:     const positionOptions = [
Chris@17:       'width',
Chris@17:       'height',
Chris@17:       'minWidth',
Chris@17:       'minHeight',
Chris@17:       'maxHeight',
Chris@17:       'maxWidth',
Chris@17:       'position',
Chris@17:     ];
Chris@0:     let adjustedOptions = {};
Chris@0:     let windowHeight = $(window).height();
Chris@0:     let option;
Chris@0:     let optionValue;
Chris@0:     let adjustedValue;
Chris@0:     for (let n = 0; n < positionOptions.length; n++) {
Chris@0:       option = positionOptions[n];
Chris@0:       optionValue = event.data.settings[option];
Chris@0:       if (optionValue) {
Chris@0:         // jQuery UI does not support percentages on heights, convert to pixels.
Chris@17:         if (
Chris@17:           typeof optionValue === 'string' &&
Chris@17:           /%$/.test(optionValue) &&
Chris@17:           /height/i.test(option)
Chris@17:         ) {
Chris@0:           // Take offsets in account.
Chris@0:           windowHeight -= displace.offsets.top + displace.offsets.bottom;
Chris@17:           adjustedValue = parseInt(
Chris@17:             0.01 * parseInt(optionValue, 10) * windowHeight,
Chris@17:             10,
Chris@17:           );
Chris@0:           // Don't force the dialog to be bigger vertically than needed.
Chris@17:           if (
Chris@17:             option === 'height' &&
Chris@17:             event.data.$element.parent().outerHeight() < adjustedValue
Chris@17:           ) {
Chris@0:             adjustedValue = 'auto';
Chris@0:           }
Chris@0:           adjustedOptions[option] = adjustedValue;
Chris@0:         }
Chris@0:       }
Chris@0:     }
Chris@0:     // Offset the dialog center to be at the center of Drupal.displace.offsets.
Chris@0:     if (!event.data.settings.modal) {
Chris@0:       adjustedOptions = resetPosition(adjustedOptions);
Chris@0:     }
Chris@0:     event.data.$element
Chris@0:       .dialog('option', adjustedOptions)
Chris@0:       .trigger('dialogContentResize');
Chris@0:   }
Chris@0: 
Chris@0:   $(window).on({
Chris@17:     'dialog:aftercreate': function(event, dialog, $element, settings) {
Chris@0:       const autoResize = debounce(resetSize, 20);
Chris@0:       const eventData = { settings, $element };
Chris@0:       if (settings.autoResize === true || settings.autoResize === 'true') {
Chris@0:         $element
Chris@0:           .dialog('option', { resizable: false, draggable: false })
Chris@17:           .dialog('widget')
Chris@17:           .css('position', 'fixed');
Chris@0:         $(window)
Chris@0:           .on('resize.dialogResize scroll.dialogResize', eventData, autoResize)
Chris@0:           .trigger('resize.dialogResize');
Chris@17:         $(document).on(
Chris@17:           'drupalViewportOffsetChange.dialogResize',
Chris@17:           eventData,
Chris@17:           autoResize,
Chris@17:         );
Chris@0:       }
Chris@18:       // Force the dialog & dialog-overlay to render on top.
Chris@18:       $element.dialog('widget').css('zIndex', 601);
Chris@18:       $('.ui-widget-overlay').css('zIndex', 600);
Chris@0:     },
Chris@17:     'dialog:beforeclose': function(event, dialog, $element) {
Chris@0:       $(window).off('.dialogResize');
Chris@0:       $(document).off('.dialogResize');
Chris@0:     },
Chris@0:   });
Chris@17: })(jQuery, Drupal, drupalSettings, Drupal.debounce, Drupal.displace);