Merge pull request #1206 from RobAndrewHurst/modal_adjustment

Modal Target Adjustment 🎯
GEOLYTIX · Apr 12, 2024 · fa327ab · fa327ab
2 parents c33d1e6 + d0517d3
commit fa327ab
Showing 1 changed file with 27 additions and 8 deletions.
diff --git a/lib/ui/elements/modal.mjs b/lib/ui/elements/modal.mjs
@@ -26,17 +26,18 @@ export default (modal) => {
     // Calc left from right and offSetWidth
     modal.left = modal.target.offsetWidth - modal.node.offsetWidth - parseInt(modal.right)
   }
-  
+
   modal.node.style.top = `${modal.top || 0}px`
   modal.node.style.left = `${modal.left || 0}px`
 
   modal.node.addEventListener('mousedown', handleStartEvent);
-  modal.node.addEventListener('touchstart', handleStartEvent);      
+  modal.node.addEventListener('touchstart', handleStartEvent);
 
   // Function to handle the modal closure
   function closeModal(e) {
     e.target.closest('.modal').remove();
     modal?.close?.(e);
+    resizeObserver.disconnect();
   }
 
   // Function to handle the start of a drag event, setting up the necessary event listeners for moving and ending the drag
@@ -64,6 +65,24 @@ export default (modal) => {
     window.addEventListener(endEvent, stopShift);
   }
 
+  // Create a ResizeObserver to observe changes in the map's dimensions
+  const resizeObserver = new ResizeObserver(adjustModalPosition);
+  resizeObserver.observe(modal.target);
+
+  function adjustModalPosition() {
+
+    const { offsetWidth: mapWidth, offsetHeight: mapHeight } = modal.target;
+    const { offsetWidth: modalWidth, offsetHeight: modalHeight } = modal.node;
+
+    // Calculate the maximum allowed positions for the modal
+    const maxLeft = mapWidth - modalWidth;
+    const maxTop = mapHeight - modalHeight;
+
+    // Adjust the modal's position if it exceeds the map boundaries
+    modal.node.style.left = `${Math.min(Math.max(modal.node.offsetLeft, 0), maxLeft)}px`;
+    modal.node.style.top = `${Math.min(Math.max(modal.node.offsetTop, 0), maxTop)}px`;
+  }
+
   // Function to end the drag event, resetting cursor style and removing the move and end event listeners
   function stopShift() {
     delete modal.x
@@ -119,13 +138,13 @@ function shiftContained(modal, leftShift, topShift) {
   if ((modal.node.offsetLeft + leftShift) < 0) {
 
     modal.node.style.left = 0
-  
-  // Shifts left
+
+    // Shifts left
   } else if (leftShift < 0) {
 
     modal.node.style.left = `${modal.node.offsetLeft + leftShift}px`
 
-  // Does NOT exceed right offset
+    // Does NOT exceed right offset
   } else if ((modal.target.offsetWidth - modal.node.offsetWidth - modal.node.offsetLeft) > 0) {
 
     // Shifts right
@@ -137,13 +156,13 @@ function shiftContained(modal, leftShift, topShift) {
   if ((modal.node.offsetTop + topShift) < 0) {
 
     modal.node.style.top = 0
-  
-  // Shift top
+
+    // Shift top
   } else if (topShift < 0) {
 
     modal.node.style.top = `${modal.node.offsetTop + topShift}px`
 
-  // Does NOT exceed bottom offset
+    // Does NOT exceed bottom offset
   } else if ((modal.target.offsetHeight - modal.node.offsetHeight - modal.node.offsetTop) > 0) {
 
     // Shift bottom