From 1499065977e47d91de225ce02601ebdbc803dd3a Mon Sep 17 00:00:00 2001
From: Justin Toupin <justin@atendesigngroup.com>
Date: Wed, 9 Mar 2022 14:41:53 -0700
Subject: [PATCH] Simplified interval callback to work with multiple dialogs

---
 js/builder.es6.js | 34 ++++++++++++++++++++--------------
 js/builder.js     | 30 +++++++++++++++++++-----------
 2 files changed, 39 insertions(+), 25 deletions(-)

diff --git a/js/builder.es6.js b/js/builder.es6.js
index c0c1050..94815ad 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 0ed9ccf..f80db43 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
-- 
GitLab