Completed : Material SubHeader

Author: kevzlou7979

gwt-material/src/main/java/gwt/material/design/client/ui/MaterialSubHeader.java

@@ -20,17 +20,18 @@
  * #L%
  */
 
+import com.google.gwt.dom.client.Element;
+import com.google.gwt.dom.client.Style.Unit;
+import com.google.gwt.user.client.ui.HasText;
 import gwt.material.design.client.base.HasIcon;
 import gwt.material.design.client.constants.IconPosition;
 import gwt.material.design.client.constants.IconSize;
 import gwt.material.design.client.constants.IconType;
 import gwt.material.design.client.ui.html.Div;
 import gwt.material.design.client.ui.html.Span;
 
-import com.google.gwt.dom.client.Style.Unit;
-import com.google.gwt.user.client.ui.HasText;
-
 //@formatter:off
+
 /**
  * Subheaders are special list tiles that delineate distinct sections of a list or grid
  * list and are typically related to the current filtering or sorting criteria. Subheader
@@ -48,7 +49,7 @@
  * @see <a href="http://gwt-material-demo.herokuapp.com/#subheaders">Material SubHeaders</a>
  */
 //@formatter:on
-public class MaterialSubHeader extends Div implements HasText, HasIcon{
+public class MaterialSubHeader extends Div implements HasText, HasIcon {
 
     private MaterialIcon icon = new MaterialIcon();
     private Span span = new Span();
@@ -57,6 +58,13 @@ public MaterialSubHeader() {
         setStyleName("subheader");
     }
 
+    @Override
+    protected void onLoad() {
+        super.onLoad();
+
+        initialize();
+    }
+
     @Override
     public MaterialIcon getIcon() {
         return icon;
@@ -108,4 +116,12 @@ public void setText(String text) {
         span.setText(text);
         add(span);
     }
+
+    private void initialize() {
+        initialize(getElement());
+    }
+
+    private native void initialize(Element e) /*-{
+        $wnd.stickyHeaders.load($wnd.jQuery(".subheader"));
+    }-*/;
 }

gwt-material/src/main/resources/gwt/material/design/client/resources/js/stickyheaders.js

@@ -1,58 +1,58 @@
-// Sticky Sub headers
-// TODO: Replace this script with pure GWT implementation.
-
 var stickyHeaders = (function() {
 
-  var $stickies;
+  var $window = $(window),
+      $stickies;
+
+  var load = function(stickies) {
 
-  var load = function(stickies, target) {
     if (typeof stickies === "object" && stickies instanceof jQuery && stickies.length > 0) {
 
       $stickies = stickies.each(function() {
 
-        var $thisSticky = $(this);
+        var $thisSticky = $(this).wrap('<div class="followWrap" />');
+
         $thisSticky
             .data('originalPosition', $thisSticky.offset().top)
-            .data('originalHeight', $thisSticky.outerHeight());
+            .data('originalHeight', $thisSticky.outerHeight())
+            .parent()
+            .height($thisSticky.outerHeight());
       });
 
-      $(window).off("scroll.stickies").on("scroll.stickies", function(event) {
-        _whenScrolling(event);
+      $window.off("scroll.stickies").on("scroll.stickies", function() {
+        _whenScrolling();
       });
     }
   };
 
-  var _whenScrolling = function(event) {
-
-    var $scrollTop = $(event.currentTarget).scrollTop();
+  var _whenScrolling = function() {
 
     $stickies.each(function(i) {
 
       var $thisSticky = $(this),
-          $stickyPosition = $thisSticky.data('originalPosition'),
-          $newPosition,
-          $nextSticky;
+          $stickyPosition = $thisSticky.data('originalPosition');
+
+      if ($stickyPosition <= $window.scrollTop()) {
 
-      if ($stickyPosition <= $scrollTop) {
+        var $nextSticky = $stickies.eq(i + 1),
+            $nextStickyPosition = $nextSticky.data('originalPosition') - $thisSticky.data('originalHeight');
 
-        $newPosition = Math.max(0, $scrollTop - $stickyPosition);
-        $nextSticky = $stickies.eq(i + 1);
+        $thisSticky.addClass("fixed z-depth-1");
 
-        if($nextSticky.length > 0) {
+        if ($nextSticky.length > 0 && $thisSticky.offset().top >= $nextStickyPosition) {
 
-          $newPosition = Math.min($newPosition,
-              ($nextSticky.data('originalPosition') - $stickyPosition) - $thisSticky.data('originalHeight'));
+          $thisSticky.addClass("absolute").css("top", $nextStickyPosition);
         }
-        $thisSticky.addClass('z-depth-1');
       } else {
-        $newPosition = 0;
-        $thisSticky.removeClass('z-depth-1');
-      }
 
-      $thisSticky.css('transform', 'translateY(' + $newPosition + 'px)');
+        var $prevSticky = $stickies.eq(i - 1);
 
-      //could just as easily use top instead of transform
-      //$thisSticky.css('top', $newPosition + 'px');
+        $thisSticky.removeClass("fixed z-depth-1");
+
+        if ($prevSticky.length > 0 && $window.scrollTop() <= $thisSticky.data('originalPosition') - $thisSticky.data('originalHeight')) {
+
+          $prevSticky.removeClass("absolute").removeAttr("style");
+        }
+      }
     });
   };
 
@@ -62,6 +62,5 @@ var stickyHeaders = (function() {
 })();
 
 $(function() {
-  stickyHeaders.load($(".subheader"), $(window));
-});
-
+  stickyHeaders.load($(".followMeBar"));
+});

gwt-material/src/main/resources/gwt/material/design/public/css/overridecss.css

@@ -754,13 +754,24 @@ i[class*="waves-"].material-icons {
 	float: right;
 }
 
+/** Sub Header */
 /** Sub Header */
 .subheader {
-  	padding: 10px 20px;
- 	position: relative;
-  	z-index: 1;
 	background: #fff;
-	font-weight: bold;
+	padding: 10px 20px;
+	position: relative;
+	z-index: 1;
+	color: #fff;
+}
+.subheader.fixed {
+	position: fixed;
+	top: 0;
+	width: 100%;
+	box-sizing: border-box;
+	z-index: 999;
+}
+.subheader.fixed.absolute {
+	position: absolute;
 }
 
 /** Splashscreen */