summaryrefslogtreecommitdiffstatshomepage
path: root/core/misc/dialog/dialog.position.js
diff options
context:
space:
mode:
authorcatch <catch@35733.no-reply.drupal.org>2022-09-09 07:26:42 +0100
committercatch <catch@35733.no-reply.drupal.org>2022-09-09 07:26:42 +0100
commit8aa8ce1ffbcca9c727f46e58c714e1d351f7ef88 (patch)
tree27be6908992c340ba0b4c0bd3f4339670aa71e90 /core/misc/dialog/dialog.position.js
parent09f8f13d8a72b8e482cc689fcd10f023df41b899 (diff)
downloaddrupal-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.js132
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);