aleph1.co.uk Git - yaffs-website/blob - web/core/misc/dialog/dialog.position.es6.js

   1 /**
   2  * @file
   3  * Positioning extensions for dialogs.
   4  */
   5
   6 /**
   7  * Triggers when content inside a dialog changes.
   8  *
   9  * @event dialogContentResize
  10  */
  11
  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,
  17   );
  18
  19   /**
  20    * Position the dialog's center at the center of displace.offsets boundaries.
  21    *
  22    * @function Drupal.dialog~resetPosition
  23    *
  24    * @param {object} options
  25    *   Options object.
  26    *
  27    * @return {object}
  28    *   Altered options object.
  29    */
  30   function resetPosition(options) {
  31     const offsets = displace.offsets;
  32     const left = offsets.left - offsets.right;
  33     const top = offsets.top - offsets.bottom;
  34
  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`;
  39     options.position = {
  40       my: `center${left !== 0 ? leftString : ''} center${
  41         top !== 0 ? topString : ''
  42       }`,
  43       of: window,
  44     };
  45     return options;
  46   }
  47
  48   /**
  49    * Resets the current options for positioning.
  50    *
  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}.
  55    *
  56    * @function Drupal.dialog~resetSize
  57    *
  58    * @param {jQuery.Event} event
  59    *   The event triggered.
  60    *
  61    * @fires event:dialogContentResize
  62    */
  63   function resetSize(event) {
  64     const positionOptions = [
  65       'width',
  66       'height',
  67       'minWidth',
  68       'minHeight',
  69       'maxHeight',
  70       'maxWidth',
  71       'position',
  72     ];
  73     let adjustedOptions = {};
  74     let windowHeight = $(window).height();
  75     let option;
  76     let optionValue;
  77     let adjustedValue;
  78     for (let n = 0; n < positionOptions.length; n++) {
  79       option = positionOptions[n];
  80       optionValue = event.data.settings[option];
  81       if (optionValue) {
  82         // jQuery UI does not support percentages on heights, convert to pixels.
  83         if (
  84           typeof optionValue === 'string' &&
  85           /%$/.test(optionValue) &&
  86           /height/i.test(option)
  87         ) {
  88           // Take offsets in account.
  89           windowHeight -= displace.offsets.top + displace.offsets.bottom;
  90           adjustedValue = parseInt(
  91             0.01 * parseInt(optionValue, 10) * windowHeight,
  92             10,
  93           );
  94           // Don't force the dialog to be bigger vertically than needed.
  95           if (
  96             option === 'height' &&
  97             event.data.$element.parent().outerHeight() < adjustedValue
  98           ) {
  99             adjustedValue = 'auto';
 100           }
 101           adjustedOptions[option] = adjustedValue;
 102         }
 103       }
 104     }
 105     // Offset the dialog center to be at the center of Drupal.displace.offsets.
 106     if (!event.data.settings.modal) {
 107       adjustedOptions = resetPosition(adjustedOptions);
 108     }
 109     event.data.$element
 110       .dialog('option', adjustedOptions)
 111       .trigger('dialogContentResize');
 112   }
 113
 114   $(window).on({
 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') {
 119         $element
 120           .dialog('option', { resizable: false, draggable: false })
 121           .dialog('widget')
 122           .css('position', 'fixed');
 123         $(window)
 124           .on('resize.dialogResize scroll.dialogResize', eventData, autoResize)
 125           .trigger('resize.dialogResize');
 126         $(document).on(
 127           'drupalViewportOffsetChange.dialogResize',
 128           eventData,
 129           autoResize,
 130         );
 131       }
 132     },
 133     'dialog:beforeclose': function(event, dialog, $element) {
 134       $(window).off('.dialogResize');
 135       $(document).off('.dialogResize');
 136     },
 137   });
 138 })(jQuery, Drupal, drupalSettings, Drupal.debounce, Drupal.displace);