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