diff --git a/js/builder.es6.js b/js/builder.es6.js index c0c105058ab4f1750cb284e1fd99d35f70426ef4..94815ad9820c752ca04f133313765a30355d9aad 100644 --- a/js/builder.es6.js +++ b/js/builder.es6.js @@ -22,7 +22,7 @@ } /** - * Repositions open dialogs when their height changes. + * Repositions open dialogs when their height changes to exceed viewport. * * The height of an open dialog will change based on its contents and can * cause a dialog to grow taller than the current window viewport, making @@ -31,16 +31,24 @@ * @see https://www.drupal.org/project/layout_paragraphs/issues/3252978 * @see https://stackoverflow.com/questions/5456298/refresh-jquery-ui-dialog-position * - * @param {jQuery} $dialog - * The dialog jQuery object. + * @param {Number} intervalId + * The interval id. */ - function repositionDialog($dialog) { - const height = $dialog.outerHeight(); - if ($dialog.data('lpOriginalHeight') !== height) { - const pos = $dialog.dialog('option', 'position'); - $dialog.dialog('option', 'position', pos); - $dialog.data('lpOriginalHeight', height); + function repositionDialog(intervalId) { + const $dialogs = $('.lpb-dialog'); + if ($dialogs.length === 0) { + clearInterval(intervalId); + return; } + $dialogs.each((i, dialog) => { + const bounding = dialog.getBoundingClientRect(); + const viewPortHeight = window.innerHeight || document.documentElement.clientHeight; + if (bounding.bottom > viewPortHeight) { + const $dialog = $('.ui-dialog-content', dialog); + const pos = $dialog.dialog('option', 'position'); + $dialog.dialog('option', 'position', pos); + } + }); } /** @@ -526,13 +534,11 @@ // Repositions open dialogs. // @see https://www.drupal.org/project/layout_paragraphs/issues/3252978 // @see https://stackoverflow.com/questions/5456298/refresh-jquery-ui-dialog-position + let lpDialogInterval; $(window).on('dialog:aftercreate', (event, dialog, $dialog) => { if ($dialog[0].id.indexOf('lpb-dialog-') === 0) { - $dialog.data('lpOriginalHeight', $dialog.outerHeight()); - $dialog.data('lpDialogInterval', setInterval(repositionDialog.bind(null, $dialog), 500)); + clearInterval(lpDialogInterval); + lpDialogInterval = setInterval(repositionDialog.bind(null, lpDialogInterval), 500); } }); - $(window).on('dialog:beforeclose', (event, dialog, $dialog) => { - clearInterval($dialog.data('lpDialogInterval')); - }); })(jQuery, Drupal, Drupal.debounce, dragula); diff --git a/js/builder.js b/js/builder.js index 0ed9ccf4400d55c08d2863e8237d138d718a6129..f80db4318ad516d6e37d09b3a7be09910e465a33 100644 --- a/js/builder.js +++ b/js/builder.js @@ -36,14 +36,24 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } Drupal.behaviors.AJAX.attach($container[0], drupalSettings); } - function repositionDialog($dialog) { - var height = $dialog.outerHeight(); + function repositionDialog(intervalId) { + var $dialogs = $('.lpb-dialog'); - if ($dialog.data('lpOriginalHeight') !== height) { - var pos = $dialog.dialog('option', 'position'); - $dialog.dialog('option', 'position', pos); - $dialog.data('lpOriginalHeight', height); + if ($dialogs.length === 0) { + clearInterval(intervalId); + return; } + + $dialogs.each(function (i, dialog) { + var bounding = dialog.getBoundingClientRect(); + var viewPortHeight = window.innerHeight || document.documentElement.clientHeight; + + if (bounding.bottom > viewPortHeight) { + var $dialog = $('.ui-dialog-content', dialog); + var pos = $dialog.dialog('option', 'position'); + $dialog.dialog('option', 'position', pos); + } + }); } function doReorderComponents($element) { @@ -401,13 +411,11 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } } } }); + var lpDialogInterval; $(window).on('dialog:aftercreate', function (event, dialog, $dialog) { if ($dialog[0].id.indexOf('lpb-dialog-') === 0) { - $dialog.data('lpOriginalHeight', $dialog.outerHeight()); - $dialog.data('lpDialogInterval', setInterval(repositionDialog.bind(null, $dialog), 500)); + clearInterval(lpDialogInterval); + lpDialogInterval = setInterval(repositionDialog.bind(null, lpDialogInterval), 500); } }); - $(window).on('dialog:beforeclose', function (event, dialog, $dialog) { - clearInterval($dialog.data('lpDialogInterval')); - }); })(jQuery, Drupal, Drupal.debounce, dragula); \ No newline at end of file