Standardize Overlay style application.

Fixed Janky blur.
GwtMaterialDesign · Oct 4, 2018 · 8b73f10 · 8b73f10
1 parent 766751f
commit 8b73f10
Show file tree

Hide file tree

Showing 8 changed files with 98 additions and 21 deletions.
diff --git a/gwt-material/src/main/java/gwt/material/design/client/base/AbstractSideNav.java b/gwt-material/src/main/java/gwt/material/design/client/base/AbstractSideNav.java
@@ -68,6 +68,7 @@ public abstract class AbstractSideNav extends MaterialWidget
     protected Element activator;
     protected WidthBoundary closingBoundary;
     protected ViewPort autoHideViewport;
+    protected OverlayOption overlayOption = OverlayOption.create();
 
     private StyleMixin<MaterialSideNav> typeMixin;
     private OverlayStyleMixin<AbstractSideNav> overlayStyleMixin;
@@ -97,6 +98,11 @@ protected void onLoad() {
         setupShowOnAttach();
     }
 
+    protected void setupDefaultOverlayStyle() {
+        overlayOption.setVisibility(Style.Visibility.HIDDEN);
+        setOverlayOption(overlayOption);
+    }
+
     protected void setupShowOnAttach() {
         if (showOnAttach != null) {
             // Ensure the side nav starts closed
@@ -277,6 +283,7 @@ protected void load(boolean strict) {
         }
 
         setup();
+        setupDefaultOverlayStyle();
 
         JsSideNavOptions options = new JsSideNavOptions();
         options.menuWidth = width;
@@ -286,29 +293,35 @@ protected void load(boolean strict) {
         JsMaterialElement element = $(activator);
         element.sideNav(options);
 
-        element.off("side-nav-closing");
-        element.on("side-nav-closing", e1 -> {
+        element.off(SideNavEvents.SIDE_NAV_CLOSING);
+        element.on(SideNavEvents.SIDE_NAV_CLOSING, e1 -> {
             onClosing();
             return true;
         });
 
-        element.off("side-nav-closed");
-        element.on("side-nav-closed", e1 -> {
+        element.off(SideNavEvents.SIDE_NAV_CLOSED);
+        element.on(SideNavEvents.SIDE_NAV_CLOSED, e1 -> {
             onClosed();
             return true;
         });
 
-        element.off("side-nav-opening");
-        element.on("side-nav-opening", e1 -> {
+        element.off(SideNavEvents.SIDE_NAV_OPENING);
+        element.on(SideNavEvents.SIDE_NAV_OPENING, e1 -> {
             onOpening();
             return true;
         });
 
-        element.off("side-nav-opened");
-        element.on("side-nav-opened", e1 -> {
+        element.off(SideNavEvents.SIDE_NAV_OPENED);
+        element.on(SideNavEvents.SIDE_NAV_OPENED, e1 -> {
             onOpened();
             return true;
         });
+
+        element.off(SideNavEvents.SIDE_NAV_OVERLAY_ATTACHED);
+        element.on(SideNavEvents.SIDE_NAV_OVERLAY_ATTACHED, e1 -> {
+            onOverlayAttached();
+            return true;
+        });
     }
 
     /**
@@ -418,7 +431,12 @@ protected void onClosed() {
     protected void onOpening() {
         open = true;
 
-        $("#sidenav-overlay").each((param1, element) -> element.removeFromParent());
+        $("#sidenav-overlay").each((param1, element) -> {
+            if (element != null) {
+                element.removeFromParent();
+            }
+        });
+
         SideNavOpeningEvent.fire(this);
     }
 
@@ -430,6 +448,9 @@ protected void onOpened() {
         String overlayZIndex = $("#sidenav-overlay").css("zIndex");
         $(".drag-target").css("zIndex", (overlayZIndex != null ? Integer.parseInt(overlayZIndex) : 1) + "");
         SideNavOpenedEvent.fire(this);
+    }
+
+    protected void onOverlayAttached() {
         applyOverlayStyle(getOverlayElement());
     }
 

diff --git a/gwt-material/src/main/java/gwt/material/design/client/base/mixin/OverlayStyleMixin.java b/gwt-material/src/main/java/gwt/material/design/client/base/mixin/OverlayStyleMixin.java
@@ -19,6 +19,7 @@
  */
 package gwt.material.design.client.base.mixin;
 
+import com.google.gwt.dom.client.Style;
 import com.google.gwt.user.client.ui.UIObject;
 import gwt.material.design.client.base.HasOverlayStyle;
 import gwt.material.design.client.constants.Blur;
@@ -57,13 +58,15 @@ public void applyOverlayStyle(JQueryElement overlayElement) {
         applyBackgroundColor(overlayOption.getBackgroundColor());
         applyBlur(overlayOption.getBlur(), false);
         applyOpacity(overlayOption.getOpacity());
+        applyVisibility(overlayOption.getVisibility());
     }
 
     @Override
     public void resetOverlayStyle() {
         applyBlur(overlayOption.getBlur(), true);
         applyBackgroundColor(null);
         applyOpacity(null);
+        applyVisibility(Style.Visibility.VISIBLE);
     }
 
     /**
@@ -104,4 +107,13 @@ protected void applyOpacity(Double opacity) {
             overlayElement.css("opacity", opacity != null ? String.valueOf(opacity) : "0.5");
         }
     }
+
+    /**
+     * Will apply the visibility into the {@link #overlayElement}
+     */
+    protected void applyVisibility(Style.Visibility visibility) {
+        if (overlayElement != null) {
+            overlayElement.css("visibility", visibility.getCssName());
+        }
+    }
 }
diff --git a/gwt-material/src/main/java/gwt/material/design/client/constants/OverlayOption.java b/gwt-material/src/main/java/gwt/material/design/client/constants/OverlayOption.java
@@ -19,6 +19,8 @@
  */
 package gwt.material.design.client.constants;
 
+import com.google.gwt.dom.client.Style;
+
 /**
  * Overlay Configuration to be used by {@link gwt.material.design.client.base.mixin.OverlayStyleMixin#setOverlayOption(OverlayOption)}
  */
@@ -27,6 +29,7 @@ public class OverlayOption {
     private Blur blur;
     private Color backgroundColor;
     private Double opacity;
+    private Style.Visibility visibility;
 
     private OverlayOption() {}
 
@@ -39,6 +42,7 @@ public static OverlayOption create() {
         overlayOption.setBlur(null);
         overlayOption.setBackgroundColor(Color.BLACK);
         overlayOption.setOpacity(0.5);
+        overlayOption.setVisibility(Style.Visibility.VISIBLE);
         return overlayOption;
     }
 
@@ -94,4 +98,18 @@ public Double getOpacity() {
     public void setOpacity(Double opacity) {
         this.opacity = opacity;
     }
+
+    /**
+     * Will get the visibility of the overlay element
+     */
+    public Style.Visibility getVisibility() {
+        return visibility;
+    }
+
+    /**
+     * Will set the visibility of the overlay element
+     */
+    public void setVisibility(Style.Visibility visibility) {
+        this.visibility = visibility;
+    }
 }
diff --git a/gwt-material/src/main/java/gwt/material/design/client/constants/SideNavEvents.java b/gwt-material/src/main/java/gwt/material/design/client/constants/SideNavEvents.java
@@ -0,0 +1,10 @@
+package gwt.material.design.client.constants;
+
+public interface SideNavEvents {
+
+    String SIDE_NAV_OPENING = "side-nav-opening";
+    String SIDE_NAV_OPENED = "side-nav-opened";
+    String SIDE_NAV_CLOSING = "side-nav-closing";
+    String SIDE_NAV_CLOSED = "side-nav-closed";
+    String SIDE_NAV_OVERLAY_ATTACHED = "side-nav-overlay-attached";
+}
diff --git a/gwt-material/src/main/java/gwt/material/design/client/ui/MaterialDialog.java b/gwt-material/src/main/java/gwt/material/design/client/ui/MaterialDialog.java
@@ -80,12 +80,14 @@ public class MaterialDialog extends MaterialWidget implements HasType<DialogType
 
     private JsModalOptions options = new JsModalOptions();
 
+    private final String OVERLAY_ATTACHED = "modal-overlay-attached";
     private final String HASH_CHANGE = "hashchange";
     private CssTypeMixin<DialogType, MaterialDialog> typeMixin;
     private FullscreenMixin fullscreenMixin;
     private OverlayStyleMixin<MaterialDialog> overlayStyleMixin;
     private boolean open;
     private boolean closeOnBrowserBackNavigation = true;
+    private JQueryElement overlayElement;
 
     public MaterialDialog() {
         super(Document.get().createDivElement(), CssName.MODAL);
@@ -101,8 +103,13 @@ protected void onLoad() {
 
     protected void setupOverlayStyles() {
         if (getOverlayOption() != null) {
-            registerHandler(addOpenHandler(event -> getOverlayStyleMixin().applyOverlayStyle(getOverlayElement())));
-            registerHandler(addCloseHandler(event -> getOverlayStyleMixin().resetOverlayStyle()));
+            $(getElement()).on(OVERLAY_ATTACHED, (event, id) -> {
+                setOverlayElement($("#" + id));
+                applyOverlayStyle(overlayElement);
+                return true;
+            });
+
+            registerHandler(addCloseHandler(event -> resetOverlayStyle()));
         }
     }
 
@@ -125,6 +132,7 @@ protected void onUnload() {
         super.onUnload();
 
         window().off(HASH_CHANGE);
+        $(getElement()).off(OVERLAY_ATTACHED);
     }
 
     @Override
@@ -329,8 +337,12 @@ public boolean isOpen() {
         return open;
     }
 
+    public void setOverlayElement(JQueryElement overlayElement) {
+        this.overlayElement = overlayElement;
+    }
+
     public JQueryElement getOverlayElement() {
-        return $(getElement()).next(".lean-overlay");
+        return overlayElement;
     }
 
     @Override

diff --git a/gwt-material/src/main/java/gwt/material/design/client/ui/MaterialSideNavDrawer.java b/gwt-material/src/main/java/gwt/material/design/client/ui/MaterialSideNavDrawer.java
@@ -20,8 +20,10 @@
 package gwt.material.design.client.ui;
 
 import com.google.gwt.core.client.Scheduler;
+import com.google.gwt.dom.client.Style;
 import gwt.material.design.client.base.AbstractSideNav;
 import gwt.material.design.client.base.HasWithHeader;
+import gwt.material.design.client.constants.OverlayOption;
 import gwt.material.design.client.constants.SideNavType;
 
 import static gwt.material.design.client.js.JsMaterialElement.$;
@@ -64,20 +66,22 @@ protected void setup() {
         if (withHeader) {
             applyDrawerWithHeader();
         } else {
-            appyDrawerType();
+            applyDrawerType();
         }
     }
 
     /**
      * Provides an overlay / drawer sidenav just like when opening sidenav on mobile / tablet
      */
-    protected void appyDrawerType() {
+    protected void applyDrawerType() {
         setType(SideNavType.DRAWER);
         registerHandler(addOpeningHandler(event -> Scheduler.get().scheduleDeferred(() -> $("[id=sidenav-overlay]").css("visibility", "visible"))));
         Scheduler.get().scheduleDeferred(() -> {
             pushElement(getHeader(), 0);
             pushElement(getMain(), 0);
         });
+
+        overlayOption.setVisibility(Style.Visibility.VISIBLE);
     }
 
     /**
@@ -94,6 +98,8 @@ protected void applyDrawerWithHeader() {
                 pushElement(getMain(), 0);
             });
         }
+
+        overlayOption.setVisibility(Style.Visibility.HIDDEN);
     }
 
     @Override

diff --git a/...material/src/main/resources/gwt/material/design/client/resources/js/materialize-0.97.5.js b/...material/src/main/resources/gwt/material/design/client/resources/js/materialize-0.97.5.js
@@ -707,6 +707,7 @@ if ($) {
       $modal.data('stack-ordinal', lStack);
 
       $("body").append($overlay);
+      $modal.trigger("modal-overlay-attached", overlayID);
 
       // Override defaults
       options = $.extend(defaults, options);
@@ -2308,8 +2309,9 @@ $(document).ready(function(){
                       }
                   });
               $('body').append(overlay);
+              $this.trigger("side-nav-overlay-attached");
               if(transitions) {
-                  overlay.velocity({opacity: 1}, {
+                  overlay.velocity({display: "block"}, {
                       duration: 300, queue: false, easing: 'easeOutQuad',
                       complete: function () {
                           menuOut = true;
@@ -2318,7 +2320,7 @@ $(document).ready(function(){
                       }
                   });
               } else {
-                overlay.css("opacity", "1");
+                overlay.css("display", "block");
                 menuOut = true;
                 panning = false;
                 $this.trigger("side-nav-opened");

diff --git a/...rial/src/main/resources/gwt/material/design/client/resources/js/materialize-0.97.5.min.js b/...rial/src/main/resources/gwt/material/design/client/resources/js/materialize-0.97.5.min.js