fix #1007 Popovers Sometimes Appear in a Weird Spot

DominoKit · Feb 17, 2025 · 8aa3ac3 · 8aa3ac3
1 parent acaad45
commit 8aa3ac3
Show file tree

Hide file tree

Showing 24 changed files with 1,039 additions and 473 deletions.
diff --git a/domino-ui/src/main/java/org/dominokit/domino/ui/layout/AppLayout.java b/domino-ui/src/main/java/org/dominokit/domino/ui/layout/AppLayout.java
@@ -113,12 +113,18 @@ public AppLayout() {
             .whenInitialized(() -> layout.addCss(dui_has_header));
     navBar = LazyChild.of(NavBar.create(), header);
     footer =
-        LazyChild.of(section().addCss(dui_footer).setZIndexLayer(ZIndexLayer.Z_LAYER_2), body)
+        LazyChild.of(
+                section()
+                    .setAttribute("dui-reserve-bottom-space", "true")
+                    .addCss(dui_footer)
+                    .setZIndexLayer(ZIndexLayer.Z_LAYER_2),
+                body)
             .whenInitialized(() -> layout.addCss(dui_has_footer));
     leftDrawerToggle = initLeftDrawerToggle(leftToggleIcon);
     leftDrawer =
         LazyChild.of(
                 section()
+                    .setAttribute("dui-reserve-left-space", "true")
                     .addCss(dui_left_drawer)
                     .setZIndexLayer(ZIndexLayer.Z_LAYER_2)
                     .addClickListener(Event::stopPropagation),
@@ -132,13 +138,21 @@ public AppLayout() {
                     if (dui_left_open.isAppliedTo(layout)) {
                       leftDrawerOpenHandlers.forEach(
                           handler -> handler.apply(this, leftDrawer.get()));
+                      leftDrawer
+                          .get()
+                          .setAttribute(
+                              "dui-reserve-left-space", dui_left_open.isAppliedTo(layout));
                     }
                   })
               .onTransitionEnd(
                   target -> {
                     if (!dui_left_open.isAppliedTo(layout)) {
                       leftDrawerCloseHandlers.forEach(
                           handler -> handler.apply(this, leftDrawer.get()));
+                      leftDrawer
+                          .get()
+                          .setAttribute(
+                              "dui-reserve-left-space", dui_left_open.isAppliedTo(layout));
                     }
                   });
         });
@@ -149,6 +163,7 @@ public AppLayout() {
     rightDrawer =
         LazyChild.of(
                 section()
+                    .setAttribute("dui-reserve-left-space", "false")
                     .addCss(dui_right_drawer)
                     .setZIndexLayer(ZIndexLayer.Z_LAYER_2)
                     .addClickListener(Event::stopPropagation),
@@ -163,13 +178,21 @@ public AppLayout() {
                     if (dui_right_open.isAppliedTo(layout)) {
                       rightDrawerOpenHandlers.forEach(
                           handler -> handler.apply(this, rightDrawer.get()));
+                      rightDrawer
+                          .get()
+                          .setAttribute(
+                              "dui-reserve-right-space", dui_right_open.isAppliedTo(layout));
                     }
                   })
               .onTransitionEnd(
                   target -> {
                     if (!dui_right_open.isAppliedTo(layout)) {
                       rightDrawerCloseHandlers.forEach(
                           handler -> handler.apply(this, rightDrawer.get()));
+                      rightDrawer
+                          .get()
+                          .setAttribute(
+                              "dui-reserve-right-space", dui_right_open.isAppliedTo(layout));
                     }
                   });
         });
@@ -896,9 +919,9 @@ public AppLayout removeRightDrawerCloseListener(ChildHandler<AppLayout, SectionE
   }
 
   /**
+   * @return The HTMLDivElement representing the layout.
    * @dominokit-site-ignore {@inheritDoc}
    *     <p>Gets the HTMLDivElement representing the layout.
-   * @return The HTMLDivElement representing the layout.
    */
   @Override
   public HTMLDivElement element() {

diff --git a/domino-ui/src/main/java/org/dominokit/domino/ui/menu/direction/BestFitSideDropDirection.java b/domino-ui/src/main/java/org/dominokit/domino/ui/menu/direction/BestFitSideDropDirection.java
@@ -15,62 +15,45 @@
  */
 package org.dominokit.domino.ui.menu.direction;
 
-import static elemental2.dom.DomGlobal.window;
 import static org.dominokit.domino.ui.style.SpacingCss.dui_flex_col_reverse;
-import static org.dominokit.domino.ui.utils.Domino.*;
 
-import elemental2.dom.DOMRect;
 import elemental2.dom.Element;
 
 /** BestFitSideDropDirection class. */
 public class BestFitSideDropDirection implements DropDirection {
 
   /** {@inheritDoc} */
   @Override
-  public void position(Element source, Element target) {
+  public DropDirection position(Element source, Element target) {
     cleanup(source);
     dui_flex_col_reverse.remove(source);
-    DOMRect targetRect = target.getBoundingClientRect();
-    DOMRect sourceRect = source.getBoundingClientRect();
-    int innerWidth = window.innerWidth;
-    int innerHeight = window.innerHeight;
 
-    double sourceWidth = sourceRect.width;
-    double sourceHeight = sourceRect.height;
-    double rightSpace = innerWidth - targetRect.right - window.pageXOffset;
-    double downSpace = innerHeight - targetRect.height;
-    DropDirection currentPosition;
+    SpaceChecker spaceChecker = SpaceChecker.of(source, target);
 
-    if (hasSpaceOnRightSide(sourceWidth, rightSpace)) {
-      if (hasSpaceBelow(sourceHeight, downSpace)) {
-        currentPosition = DropDirection.RIGHT_DOWN;
-      } else {
-        currentPosition = DropDirection.RIGHT_UP;
+    if (spaceChecker.hasSpaceOnRight()) {
+      if (spaceChecker.hasSpaceBelow()) {
+        return RIGHT_DOWN.position(source, target);
+      } else if (spaceChecker.hasSpaceAbove()) {
+        return RIGHT_UP.position(source, target);
       }
-    } else {
-      if (hasSpaceBelow(sourceHeight, downSpace)) {
-        currentPosition = DropDirection.LEFT_DOWN;
-      } else {
-        currentPosition = DropDirection.LEFT_UP;
+    } else if (spaceChecker.hasSpaceOnLeft()) {
+      if (spaceChecker.hasSpaceBelow()) {
+        return LEFT_DOWN.position(source, target);
+      } else if (spaceChecker.hasSpaceAbove()) {
+        return LEFT_UP.position(source, target);
       }
     }
-    currentPosition.position(source, target);
+
+    return MIDDLE_SCREEN.position(source, target);
   }
 
   /** {@inheritDoc} */
   @Override
   public void cleanup(Element source) {
-    DropDirection.RIGHT_DOWN.cleanup(source);
-    DropDirection.RIGHT_UP.cleanup(source);
-    DropDirection.LEFT_DOWN.cleanup(source);
-    DropDirection.LEFT_UP.cleanup(source);
-  }
-
-  private boolean hasSpaceBelow(double sourceHeight, double downSpace) {
-    return downSpace > sourceHeight;
-  }
-
-  private boolean hasSpaceOnRightSide(double sourceWidth, double rightSpace) {
-    return rightSpace > sourceWidth;
+    RIGHT_DOWN.cleanSelf(source);
+    RIGHT_UP.cleanSelf(source);
+    LEFT_DOWN.cleanSelf(source);
+    LEFT_UP.cleanSelf(source);
+    MIDDLE_SCREEN.cleanSelf(source);
   }
 }
diff --git a/...i/src/main/java/org/dominokit/domino/ui/menu/direction/BestMiddleDownUpDropDirection.java b/...i/src/main/java/org/dominokit/domino/ui/menu/direction/BestMiddleDownUpDropDirection.java
@@ -15,51 +15,36 @@
  */
 package org.dominokit.domino.ui.menu.direction;
 
-import static elemental2.dom.DomGlobal.window;
 import static org.dominokit.domino.ui.style.SpacingCss.dui_flex_col_reverse;
-import static org.dominokit.domino.ui.utils.Domino.*;
 
-import elemental2.dom.DOMRect;
 import elemental2.dom.Element;
 
 /** BestMiddleDownUpDropDirection class. */
 public class BestMiddleDownUpDropDirection implements DropDirection {
 
   /** {@inheritDoc} */
   @Override
-  public void position(Element source, Element target) {
+  public DropDirection position(Element source, Element target) {
+    cleanup(source);
     dui_flex_col_reverse.remove(source);
     cleanup(source);
-    DOMRect targetRect = target.getBoundingClientRect();
-    DOMRect sourceRect = source.getBoundingClientRect();
-    int innerHeight = window.innerHeight;
-
-    double sourceHeight = sourceRect.height;
-    double downSpace = innerHeight - targetRect.bottom;
 
-    DropDirection currentPosition;
+    SpaceChecker spaceChecker = SpaceChecker.of(source, target);
 
-    if (hasSpaceBelow(sourceHeight, downSpace)) {
-      currentPosition = DropDirection.BOTTOM_MIDDLE;
+    if (spaceChecker.hasSpaceBelow()) {
+      return BOTTOM_MIDDLE.position(source, target);
+    } else if (spaceChecker.hasSpaceAbove()) {
+      return TOP_MIDDLE.position(source, target);
     } else {
-      currentPosition = DropDirection.TOP_MIDDLE;
+      return MIDDLE_SCREEN.position(source, target);
     }
-
-    currentPosition.position(source, target);
   }
 
   /** {@inheritDoc} */
   @Override
   public void cleanup(Element source) {
-    DropDirection.BOTTOM_MIDDLE.cleanup(source);
-    DropDirection.TOP_MIDDLE.cleanup(source);
-  }
-
-  private boolean hasSpaceBelow(double sourceHeight, double downSpace) {
-    return downSpace > sourceHeight;
-  }
-
-  private boolean hasSpaceOnRightSide(double sourceWidth, double rightSpace) {
-    return rightSpace > sourceWidth;
+    BOTTOM_MIDDLE.cleanSelf(source);
+    TOP_MIDDLE.cleanSelf(source);
+    MIDDLE_SCREEN.cleanSelf(source);
   }
 }
diff --git a/...-ui/src/main/java/org/dominokit/domino/ui/menu/direction/BestMiddleSideDropDirection.java b/...-ui/src/main/java/org/dominokit/domino/ui/menu/direction/BestMiddleSideDropDirection.java
@@ -15,45 +15,34 @@
  */
 package org.dominokit.domino.ui.menu.direction;
 
-import static elemental2.dom.DomGlobal.window;
 import static org.dominokit.domino.ui.style.SpacingCss.dui_flex_col_reverse;
-import static org.dominokit.domino.ui.utils.Domino.*;
 
-import elemental2.dom.DOMRect;
 import elemental2.dom.Element;
 
 /** BestMiddleSideDropDirection class. */
 public class BestMiddleSideDropDirection implements DropDirection {
 
   /** {@inheritDoc} */
   @Override
-  public void position(Element source, Element target) {
+  public DropDirection position(Element source, Element target) {
     dui_flex_col_reverse.remove(source);
     cleanup(source);
-    DOMRect targetRect = target.getBoundingClientRect();
-    DOMRect sourceRect = source.getBoundingClientRect();
-    int innerWidth = window.innerWidth;
+    SpaceChecker spaceChecker = SpaceChecker.of(source, target);
 
-    double sourceWidth = sourceRect.width;
-    double rightSpace = innerWidth - targetRect.right - window.pageXOffset;
-    DropDirection currentPosition;
-
-    if (hasSpaceOnRightSide(sourceWidth, rightSpace)) {
-      currentPosition = DropDirection.RIGHT_MIDDLE;
+    if (spaceChecker.hasSpaceOnRight()) {
+      return RIGHT_MIDDLE.position(source, target);
+    } else if (spaceChecker.hasSpaceOnLeft()) {
+      return LEFT_MIDDLE.position(source, target);
     } else {
-      currentPosition = DropDirection.LEFT_MIDDLE;
+      return MIDDLE_SCREEN.position(source, target);
     }
-    currentPosition.position(source, target);
   }
 
   /** {@inheritDoc} */
   @Override
   public void cleanup(Element source) {
-    DropDirection.RIGHT_MIDDLE.cleanup(source);
-    DropDirection.LEFT_MIDDLE.cleanup(source);
-  }
-
-  private boolean hasSpaceOnRightSide(double sourceWidth, double rightSpace) {
-    return rightSpace > sourceWidth;
+    RIGHT_MIDDLE.cleanSelf(source);
+    LEFT_MIDDLE.cleanSelf(source);
+    MIDDLE_SCREEN.cleanSelf(source);
   }
 }
diff --git a/...i/src/main/java/org/dominokit/domino/ui/menu/direction/BestMiddleUpDownDropDirection.java b/...i/src/main/java/org/dominokit/domino/ui/menu/direction/BestMiddleUpDownDropDirection.java
@@ -15,52 +15,35 @@
  */
 package org.dominokit.domino.ui.menu.direction;
 
-import static elemental2.dom.DomGlobal.window;
 import static org.dominokit.domino.ui.style.SpacingCss.dui_flex_col_reverse;
-import static org.dominokit.domino.ui.utils.Domino.*;
 
-import elemental2.dom.DOMRect;
 import elemental2.dom.Element;
 
 /** BestMiddleUpDownDropDirection class. */
 public class BestMiddleUpDownDropDirection implements DropDirection {
 
   /** {@inheritDoc} */
   @Override
-  public void position(Element source, Element target) {
+  public DropDirection position(Element source, Element target) {
     dui_flex_col_reverse.remove(source);
     cleanup(source);
-    DOMRect targetRect = target.getBoundingClientRect();
-    DOMRect sourceRect = source.getBoundingClientRect();
-    int innerHeight = window.innerHeight;
 
-    double sourceHeight = sourceRect.height;
-    double downSpace = innerHeight - targetRect.bottom;
-    double spaceUp = downSpace - targetRect.height;
+    SpaceChecker spaceChecker = SpaceChecker.of(source, target);
 
-    DropDirection currentPosition;
-
-    if (hasSpaceUp(sourceHeight, spaceUp)) {
-      currentPosition = DropDirection.TOP_MIDDLE;
+    if (spaceChecker.hasSpaceAbove()) {
+      return TOP_MIDDLE.position(source, target);
+    } else if (spaceChecker.hasSpaceBelow()) {
+      return BOTTOM_MIDDLE.position(source, target);
     } else {
-      currentPosition = DropDirection.BOTTOM_MIDDLE;
+      return MIDDLE_SCREEN.position(source, target);
     }
-
-    currentPosition.position(source, target);
   }
 
   /** {@inheritDoc} */
   @Override
   public void cleanup(Element source) {
-    DropDirection.BOTTOM_MIDDLE.cleanup(source);
-    DropDirection.TOP_MIDDLE.cleanup(source);
-  }
-
-  private boolean hasSpaceUp(double sourceHeight, double spaceUp) {
-    return spaceUp > sourceHeight;
-  }
-
-  private boolean hasSpaceOnRightSide(double sourceWidth, double rightSpace) {
-    return rightSpace > sourceWidth;
+    BOTTOM_MIDDLE.cleanSelf(source);
+    TOP_MIDDLE.cleanSelf(source);
+    MIDDLE_SCREEN.cleanSelf(source);
   }
 }