Drupal investigation

dialog.position.js 3.8KB

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