Window zIndex issues #690

DominoKit · Dec 19, 2022 · bc12dfe · bc12dfe
1 parent ed72cf1
commit bc12dfe
Show file tree

Hide file tree

Showing 16 changed files with 377 additions and 250 deletions.
diff --git a/domino-ui/src/main/java/org/dominokit/domino/ui/datatable/DataTable.java b/domino-ui/src/main/java/org/dominokit/domino/ui/datatable/DataTable.java
@@ -15,7 +15,6 @@
  */
 package org.dominokit.domino.ui.datatable;
 
-import static java.util.Objects.isNull;
 import static java.util.Objects.nonNull;
 import static org.dominokit.domino.ui.datatable.DataTableStyles.TABLE;
 import static org.dominokit.domino.ui.datatable.DataTableStyles.TABLE_BORDERED;
@@ -30,7 +29,6 @@
 import static org.jboss.elemento.Elements.tbody;
 import static org.jboss.elemento.Elements.thead;
 
-import elemental2.dom.DomGlobal;
 import elemental2.dom.EventListener;
 import elemental2.dom.HTMLDivElement;
 import elemental2.dom.HTMLTableElement;
@@ -83,7 +81,7 @@ public class DataTable<T> extends BaseDominoElement<HTMLDivElement, DataTable<T>
 
   private final SearchContext<T> searchContext = new SearchContext<>(this);
 
-  private double scrollBarWidth = -1;
+  private RemoveRowsHandler<T> removeRecordsHandler = table -> table.bodyElement().clearElement();
 
   private EventListener disableKeyboardListener =
       evt -> {
@@ -156,30 +154,8 @@ private DataTable<T> init() {
 
     if (tableConfig.isFixed()) {
       tableElement.setMaxHeight(tableConfig.getFixedBodyHeight());
-      tableElement.addEventListener(EventType.scroll, e -> updateTableWidth());
-      EventListener resizeListener =
-          e -> {
-            this.scrollBarWidth = -1;
-            updateTableWidth();
-          };
-      DomGlobal.window.addEventListener(EventType.resize.getName(), resizeListener);
-
-      onDetached(
-          mutationRecord ->
-              DomGlobal.window.removeEventListener(EventType.resize.getName(), resizeListener));
     }
 
-    onResize(
-        (target, observer, entries) -> {
-          DomGlobal.requestAnimationFrame(
-              timestamp -> {
-                if (isNull(entries) || entries.length <= 0) {
-                  return;
-                }
-                updateTableWidth();
-              });
-        });
-
     if (tableConfig.isFixed()) {
       tableElement.removeCss("table-width-full");
       root.addCss("table-fixed");
@@ -219,55 +195,10 @@ public void load() {
   public void setData(List<T> data) {
     this.data = data;
     tableRows.clear();
-    tbody.clearElement();
+    removeRecordsHandler.removeRows(this);
     if (nonNull(data) && !data.isEmpty()) {
       addRows(data, 0);
     }
-
-    updateHeadWidth(true);
-  }
-
-  private void updateHeadWidth(boolean scrollTop) {
-    DomGlobal.requestAnimationFrame(
-        timestamp -> {
-          DomGlobal.setTimeout(
-              p0 -> {
-                if (hasVScrollBar()) {
-                  if (scrollTop) {
-                    tbody.element().scrollTop = 0.0;
-                  }
-                }
-              });
-        });
-  }
-
-  private boolean hasVScrollBar() {
-    return tbody.element().scrollHeight > tbody.element().clientHeight;
-  }
-
-  private double getScrollWidth() {
-    if (scrollBarWidth == -1) {
-      DominoElement<HTMLDivElement> outer =
-          DominoElement.div()
-              .setTop("-1000px")
-              .setLeft("-1000px")
-              .setWidth("100px")
-              .setHeight("50px")
-              .setOverFlow("hidden")
-              .setCssProperty("-ms-overflow-style", "hidden");
-
-      DominoElement<HTMLDivElement> inner = DominoElement.div().setHeight("200px");
-
-      outer.appendChild(inner);
-      DominoElement.body().appendChild(outer);
-      double noScrollWidth = inner.element().offsetWidth;
-      outer.setOverFlow("auto").setCssProperty("-ms-overflow-style", "scrollbar");
-      double widthWithScroll = inner.element().clientWidth;
-      outer.remove();
-      scrollBarWidth = noScrollWidth - widthWithScroll;
-    }
-
-    return scrollBarWidth;
   }
 
   /**
@@ -665,6 +596,13 @@ public SearchContext<T> getSearchContext() {
     return searchContext;
   }
 
+  public DataTable<T> setRemoveRecordsHandler(RemoveRowsHandler<T> removeRecordsHandler) {
+    if (nonNull(removeRecordsHandler)) {
+      this.removeRecordsHandler = removeRecordsHandler;
+    }
+    return this;
+  }
+
   /**
    * Listens to changes in the table rows selection
    *
@@ -691,4 +629,8 @@ public interface LocalRowFilter<T> {
      */
     boolean filter(TableRow<T> tableRow);
   }
+
+  public interface RemoveRowsHandler<T> {
+    void removeRows(DataTable<T> table);
+  }
 }
diff --git a/domino-ui/src/main/java/org/dominokit/domino/ui/dropdown/DropDownMenu.java b/domino-ui/src/main/java/org/dominokit/domino/ui/dropdown/DropDownMenu.java
@@ -40,15 +40,8 @@
 import org.dominokit.domino.ui.icons.Icons;
 import org.dominokit.domino.ui.icons.MdiIcon;
 import org.dominokit.domino.ui.keyboard.KeyboardEvents;
-import org.dominokit.domino.ui.modals.ModalBackDrop;
 import org.dominokit.domino.ui.style.Color;
-import org.dominokit.domino.ui.utils.AppendStrategy;
-import org.dominokit.domino.ui.utils.BaseDominoElement;
-import org.dominokit.domino.ui.utils.DominoElement;
-import org.dominokit.domino.ui.utils.HasBackground;
-import org.dominokit.domino.ui.utils.IsCollapsible;
-import org.dominokit.domino.ui.utils.KeyboardNavigation;
-import org.dominokit.domino.ui.utils.LazyInitializer;
+import org.dominokit.domino.ui.utils.*;
 import org.jboss.elemento.EventType;
 import org.jboss.elemento.IsElement;
 
@@ -71,7 +64,7 @@
  * @see HasBackground
  */
 public class DropDownMenu extends BaseDominoElement<HTMLDivElement, DropDownMenu>
-    implements HasBackground<DropDownMenu> {
+    implements HasBackground<DropDownMenu>, IsPopup<DropDownMenu> {
 
   private KeyboardNavigation<DropdownAction<?>> keyboardNavigation;
   private final DominoElement<HTMLDivElement> element =
@@ -389,24 +382,25 @@ public DropDownMenu appendChild(Node child) {
   }
 
   /** Closes the menu */
-  public void close() {
+  public DropDownMenu close() {
     if (isOpened()) {
       element.remove();
       closeHandlers.forEach(CloseHandler::onClose);
     }
+    return this;
   }
 
   /** Opens the menu */
-  public void open() {
-    open(true);
+  public DropDownMenu open() {
+    return open(true);
   }
 
   /**
    * Opens the menu with a boolean to indicate if the first element should be focused
    *
    * @param focus true to focus the first element
    */
-  public void open(boolean focus) {
+  public DropDownMenu open(boolean focus) {
     dropDownMenuInitializer.apply();
     if (hasActions() || creatable) {
       onAttached(
@@ -419,7 +413,7 @@ public void open(boolean focus) {
               focus();
             }
 
-            element.setCssProperty("z-index", ModalBackDrop.getNextZIndex() + 10 + "");
+            config().getZindexManager().onPopupOpen(this);
             openHandlers.forEach(OpenHandler::onOpen);
 
             DominoElement.of(targetElement).onDetached(targetDetach -> close());
@@ -434,6 +428,17 @@ public void open(boolean focus) {
         appendStrategy.onAppend(appendTarget, element.element());
       }
     }
+    return this;
+  }
+
+  @Override
+  public boolean isModal() {
+    return false;
+  }
+
+  @Override
+  public boolean isAutoClose() {
+    return true;
   }
 
   /** Clears the current search */

diff --git a/domino-ui/src/main/java/org/dominokit/domino/ui/layout/Layout.java b/domino-ui/src/main/java/org/dominokit/domino/ui/layout/Layout.java
@@ -22,6 +22,7 @@
 import elemental2.dom.*;
 import java.util.ArrayList;
 import java.util.List;
+import java.util.Optional;
 import java.util.function.Consumer;
 import org.dominokit.domino.ui.icons.BaseIcon;
 import org.dominokit.domino.ui.mediaquery.MediaQuery;
@@ -134,6 +135,36 @@ && isFooterVisible()) {
     if (nonNull(onShowHandler)) {
       onShowHandler.handleLayout(this);
     }
+
+    config()
+        .getZindexManager()
+        .addZIndexListener(
+            (assignedValues, modalOpen) -> {
+              Optional<Integer> minZIndex = assignedValues.stream().min(Integer::compare);
+              if (modalOpen) {
+                minZIndex.ifPresent(
+                    minIndex -> {
+                      Integer sidePanelsIndex = minIndex - (config().getzIndexIncrement() * 3);
+                      getRightPanel().setZIndex(sidePanelsIndex);
+                      getNavigationBar().setZIndex(minIndex - (config().getzIndexIncrement() * 2));
+                      if (DominoElement.body().containsCss("l-panel-span-up")) {
+                        getLeftPanel().setZIndex(minIndex - config().getzIndexIncrement());
+                      } else {
+                        getLeftPanel().setZIndex(sidePanelsIndex);
+                      }
+                    });
+              } else {
+
+                Integer sidePanelsIndex = config().getZindexManager().getNextZIndex();
+                getRightPanel().setZIndex(sidePanelsIndex);
+                getNavigationBar().setZIndex(config().getZindexManager().getNextZIndex());
+                if (DominoElement.body().containsCss("l-panel-span-up")) {
+                  getLeftPanel().setZIndex(config().getZindexManager().getNextZIndex());
+                } else {
+                  getLeftPanel().setZIndex(sidePanelsIndex);
+                }
+              }
+            });
   }
 
   /** @return new Layout instance without a title in the header */
@@ -181,7 +212,7 @@ public Layout show(ColorScheme theme) {
    * Reveal the layout and append it to the page body and apply the specified theme color
    *
    * @param theme {@link ColorScheme}
-   * @param autoFixLeftPanel boolean, if true left panel will be fixed and and the user wont be able
+   * @param autoFixLeftPanel boolean, if true left panel will be fixed and the user will not be able
    *     to hide it using the hamburger menu icon while we open the application on large device
    *     screen, while it will be collapsible when opened on small screens
    * @return same Layout instance

diff --git a/domino-ui/src/main/java/org/dominokit/domino/ui/menu/AbstractMenu.java b/domino-ui/src/main/java/org/dominokit/domino/ui/menu/AbstractMenu.java
@@ -44,14 +44,9 @@
 import org.dominokit.domino.ui.menu.direction.DropDirection;
 import org.dominokit.domino.ui.menu.direction.MiddleOfScreenDropDirection;
 import org.dominokit.domino.ui.menu.direction.MouseBestFitDirection;
-import org.dominokit.domino.ui.modals.ModalBackDrop;
 import org.dominokit.domino.ui.search.SearchBox;
 import org.dominokit.domino.ui.style.Elevation;
-import org.dominokit.domino.ui.utils.AppendStrategy;
-import org.dominokit.domino.ui.utils.BaseDominoElement;
-import org.dominokit.domino.ui.utils.DominoElement;
-import org.dominokit.domino.ui.utils.KeyboardNavigation;
-import org.dominokit.domino.ui.utils.PopupsCloser;
+import org.dominokit.domino.ui.utils.*;
 import org.jboss.elemento.EventType;
 import org.jboss.elemento.IsElement;
 
@@ -62,7 +57,7 @@
  * @param <T> The type of the class extending from this base class
  */
 public abstract class AbstractMenu<V, T extends AbstractMenu<V, T>>
-    extends BaseDominoElement<HTMLDivElement, T> {
+    extends BaseDominoElement<HTMLDivElement, T> implements IsPopup<T> {
 
   protected final SearchBox searchBox;
   protected FlexLayout menuElement = FlexLayout.create();
@@ -819,7 +814,7 @@ public void open(boolean focus) {
               if (focus) {
                 focus();
               }
-              element.setCssProperty("z-index", ModalBackDrop.getNextZIndex() + 10 + "");
+              config().getZindexManager().onPopupOpen(this);
               openHandlers.forEach(OpenHandler::onOpen);
               DominoElement.of(getTargetElement()).onDetached(targetDetach -> close());
               DominoElement.of(getAppendTarget()).onDetached(targetDetach -> close());
@@ -1125,6 +1120,16 @@ private void setDropDown(boolean dropdown) {
     this.dropDown = dropdown;
   }
 
+  @Override
+  public boolean isModal() {
+    return false;
+  }
+
+  @Override
+  public boolean isAutoClose() {
+    return true;
+  }
+
   /** A handler that will be called when closing the menu */
   @FunctionalInterface
   public interface CloseHandler {