dialog.position.es6.js 4.0 KB

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