diff options
author | catch <catch@35733.no-reply.drupal.org> | 2022-09-09 07:26:42 +0100 |
---|---|---|
committer | catch <catch@35733.no-reply.drupal.org> | 2022-09-09 07:26:42 +0100 |
commit | 8aa8ce1ffbcca9c727f46e58c714e1d351f7ef88 (patch) | |
tree | 27be6908992c340ba0b4c0bd3f4339670aa71e90 /core/misc/dialog/dialog.position.js | |
parent | 09f8f13d8a72b8e482cc689fcd10f023df41b899 (diff) | |
download | drupal-8aa8ce1ffbcca9c727f46e58c714e1d351f7ef88.tar.gz drupal-8aa8ce1ffbcca9c727f46e58c714e1d351f7ef88.zip |
Issue #3278415 by nod_, lauriii, catch, Wim Leers, longwave, xjm, claudiu.cristea: Remove usages of the JavaScript ES6 build step, the build step itself, and associated dev dependencies
Diffstat (limited to 'core/misc/dialog/dialog.position.js')
-rw-r--r-- | core/misc/dialog/dialog.position.js | 132 |
1 files changed, 95 insertions, 37 deletions
diff --git a/core/misc/dialog/dialog.position.js b/core/misc/dialog/dialog.position.js index cbda0c294b7..d6394c471f0 100644 --- a/core/misc/dialog/dialog.position.js +++ b/core/misc/dialog/dialog.position.js @@ -1,82 +1,140 @@ /** -* DO NOT EDIT THIS FILE. -* See the following change record for more information, -* https://www.drupal.org/node/2815083 -* @preserve -**/ + * @file + * Positioning extensions for dialogs. + */ + +/** + * Triggers when content inside a dialog changes. + * + * @event dialogContentResize + */ (function ($, Drupal, drupalSettings, debounce, displace) { - drupalSettings.dialog = $.extend({ - autoResize: true, - maxHeight: '95%' - }, drupalSettings.dialog); + // autoResize option will turn off resizable and draggable. + drupalSettings.dialog = $.extend( + { autoResize: true, maxHeight: '95%' }, + drupalSettings.dialog, + ); + /** + * Position the dialog's center at the center of displace.offsets boundaries. + * + * @function Drupal.dialog~resetPosition + * + * @param {object} options + * Options object. + * + * @return {object} + * Altered options object. + */ function resetPosition(options) { const offsets = displace.offsets; const left = offsets.left - offsets.right; const top = offsets.top - offsets.bottom; - const leftString = `${(left > 0 ? '+' : '-') + Math.abs(Math.round(left / 2))}px`; - const topString = `${(top > 0 ? '+' : '-') + Math.abs(Math.round(top / 2))}px`; + + const leftString = `${ + (left > 0 ? '+' : '-') + Math.abs(Math.round(left / 2)) + }px`; + const topString = `${ + (top > 0 ? '+' : '-') + Math.abs(Math.round(top / 2)) + }px`; options.position = { - my: `center${left !== 0 ? leftString : ''} center${top !== 0 ? topString : ''}`, - of: window + my: `center${left !== 0 ? leftString : ''} center${ + top !== 0 ? topString : '' + }`, + of: window, }; return options; } + /** + * Resets the current options for positioning. + * + * This is used as a window resize and scroll callback to reposition the + * jQuery UI dialog. Although not a built-in jQuery UI option, this can + * be disabled by setting autoResize: false in the options array when creating + * a new {@link Drupal.dialog}. + * + * @function Drupal.dialog~resetSize + * + * @param {jQuery.Event} event + * The event triggered. + * + * @fires event:dialogContentResize + */ function resetSize(event) { - const positionOptions = ['width', 'height', 'minWidth', 'minHeight', 'maxHeight', 'maxWidth', 'position']; + const positionOptions = [ + 'width', + 'height', + 'minWidth', + 'minHeight', + 'maxHeight', + 'maxWidth', + 'position', + ]; let adjustedOptions = {}; let windowHeight = $(window).height(); let option; let optionValue; let adjustedValue; - for (let n = 0; n < positionOptions.length; n++) { option = positionOptions[n]; optionValue = event.data.settings[option]; - if (optionValue) { - if (typeof optionValue === 'string' && /%$/.test(optionValue) && /height/i.test(option)) { + // jQuery UI does not support percentages on heights, convert to pixels. + if ( + typeof optionValue === 'string' && + /%$/.test(optionValue) && + /height/i.test(option) + ) { + // Take offsets in account. windowHeight -= displace.offsets.top + displace.offsets.bottom; - adjustedValue = parseInt(0.01 * parseInt(optionValue, 10) * windowHeight, 10); - - if (option === 'height' && event.data.$element.parent().outerHeight() < adjustedValue) { + adjustedValue = parseInt( + 0.01 * parseInt(optionValue, 10) * windowHeight, + 10, + ); + // Don't force the dialog to be bigger vertically than needed. + if ( + option === 'height' && + event.data.$element.parent().outerHeight() < adjustedValue + ) { adjustedValue = 'auto'; } - adjustedOptions[option] = adjustedValue; } } } - + // Offset the dialog center to be at the center of Drupal.displace.offsets. if (!event.data.settings.modal) { adjustedOptions = resetPosition(adjustedOptions); } - - event.data.$element.dialog('option', adjustedOptions).trigger('dialogContentResize'); + event.data.$element + .dialog('option', adjustedOptions) + .trigger('dialogContentResize'); } $(window).on({ 'dialog:aftercreate': function (event, dialog, $element, settings) { const autoResize = debounce(resetSize, 20); - const eventData = { - settings, - $element - }; - + const eventData = { settings, $element }; if (settings.autoResize === true || settings.autoResize === 'true') { - $element.dialog('option', { - resizable: false, - draggable: false - }).dialog('widget').css('position', 'fixed'); - $(window).on('resize.dialogResize scroll.dialogResize', eventData, autoResize).trigger('resize.dialogResize'); - $(document).on('drupalViewportOffsetChange.dialogResize', eventData, autoResize); + $element + .dialog('option', { resizable: false, draggable: false }) + .dialog('widget') + .css('position', 'fixed'); + $(window) + .on('resize.dialogResize scroll.dialogResize', eventData, autoResize) + .trigger('resize.dialogResize'); + $(document).on( + 'drupalViewportOffsetChange.dialogResize', + eventData, + autoResize, + ); } }, 'dialog:beforeclose': function (event, dialog, $element) { $(window).off('.dialogResize'); $(document).off('.dialogResize'); - } + }, }); -})(jQuery, Drupal, drupalSettings, Drupal.debounce, Drupal.displace);
\ No newline at end of file +})(jQuery, Drupal, drupalSettings, Drupal.debounce, Drupal.displace); |