www.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({ autoResize: true, maxHeight: '95%' }, drupalSettings.dialog);
  15
  16   /**
  17    * Resets the current options for positioning.
  18    *
  19    * This is used as a window resize and scroll callback to reposition the
  20    * jQuery UI dialog. Although not a built-in jQuery UI option, this can
  21    * be disabled by setting autoResize: false in the options array when creating
  22    * a new {@link Drupal.dialog}.
  23    *
  24    * @function Drupal.dialog~resetSize
  25    *
  26    * @param {jQuery.Event} event
  27    *   The event triggered.
  28    *
  29    * @fires event:dialogContentResize
  30    */
  31   function resetSize(event) {
  32     const positionOptions = ['width', 'height', 'minWidth', 'minHeight', 'maxHeight', 'maxWidth', 'position'];
  33     let adjustedOptions = {};
  34     let windowHeight = $(window).height();
  35     let option;
  36     let optionValue;
  37     let adjustedValue;
  38     for (let n = 0; n < positionOptions.length; n++) {
  39       option = positionOptions[n];
  40       optionValue = event.data.settings[option];
  41       if (optionValue) {
  42         // jQuery UI does not support percentages on heights, convert to pixels.
  43         if (typeof optionValue === 'string' && /%$/.test(optionValue) && /height/i.test(option)) {
  44           // Take offsets in account.
  45           windowHeight -= displace.offsets.top + displace.offsets.bottom;
  46           adjustedValue = parseInt(0.01 * parseInt(optionValue, 10) * windowHeight, 10);
  47           // Don't force the dialog to be bigger vertically than needed.
  48           if (option === 'height' && event.data.$element.parent().outerHeight() < adjustedValue) {
  49             adjustedValue = 'auto';
  50           }
  51           adjustedOptions[option] = adjustedValue;
  52         }
  53       }
  54     }
  55     // Offset the dialog center to be at the center of Drupal.displace.offsets.
  56     if (!event.data.settings.modal) {
  57       adjustedOptions = resetPosition(adjustedOptions);
  58     }
  59     event.data.$element
  60       .dialog('option', adjustedOptions)
  61       .trigger('dialogContentResize');
  62   }
  63
  64   /**
  65    * Position the dialog's center at the center of displace.offsets boundaries.
  66    *
  67    * @function Drupal.dialog~resetPosition
  68    *
  69    * @param {object} options
  70    *   Options object.
  71    *
  72    * @return {object}
  73    *   Altered options object.
  74    */
  75   function resetPosition(options) {
  76     const offsets = displace.offsets;
  77     const left = offsets.left - offsets.right;
  78     const top = offsets.top - offsets.bottom;
  79
  80     const leftString = `${(left > 0 ? '+' : '-') + Math.abs(Math.round(left / 2))}px`;
  81     const topString = `${(top > 0 ? '+' : '-') + Math.abs(Math.round(top / 2))}px`;
  82     options.position = {
  83       my: `center${left !== 0 ? leftString : ''} center${top !== 0 ? topString : ''}`,
  84       of: window,
  85     };
  86     return options;
  87   }
  88
  89   $(window).on({
  90     'dialog:aftercreate': function (event, dialog, $element, settings) {
  91       const autoResize = debounce(resetSize, 20);
  92       const eventData = { settings, $element };
  93       if (settings.autoResize === true || settings.autoResize === 'true') {
  94         $element
  95           .dialog('option', { resizable: false, draggable: false })
  96           .dialog('widget').css('position', 'fixed');
  97         $(window)
  98           .on('resize.dialogResize scroll.dialogResize', eventData, autoResize)
  99           .trigger('resize.dialogResize');
 100         $(document).on('drupalViewportOffsetChange.dialogResize', eventData, autoResize);
 101       }
 102     },
 103     'dialog:beforeclose': function (event, dialog, $element) {
 104       $(window).off('.dialogResize');
 105       $(document).off('.dialogResize');
 106     },
 107   });
 108 }(jQuery, Drupal, drupalSettings, Drupal.debounce, Drupal.displace));