001/* 002 * #%L 003 * GwtMaterial 004 * %% 005 * Copyright (C) 2015 - 2017 GwtMaterialDesign 006 * %% 007 * Licensed under the Apache License, Version 2.0 (the "License"); 008 * you may not use this file except in compliance with the License. 009 * You may obtain a copy of the License at 010 * 011 * http://www.apache.org/licenses/LICENSE-2.0 012 * 013 * Unless required by applicable law or agreed to in writing, software 014 * distributed under the License is distributed on an "AS IS" BASIS, 015 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 016 * See the License for the specific language governing permissions and 017 * limitations under the License. 018 * #L% 019 */ 020package gwt.material.design.client.ui; 021 022import com.google.gwt.user.client.Window; 023import com.google.web.bindery.event.shared.HandlerRegistration; 024import gwt.material.design.client.base.HasShrinkableNavBarHandlers; 025import gwt.material.design.client.constants.NavBarType; 026import gwt.material.design.client.events.NavBarExpandEvent; 027import gwt.material.design.client.events.NavBarShrinkEvent; 028 029import static gwt.material.design.jquery.client.api.JQuery.$; 030 031//@formatter:off 032 033/** 034 * It's an extension to {@link MaterialNavBar} that provides 035 * a delightful shrink capabilities when scrolling the page content. 036 * <p> 037 * <h3>UiBinder Usage:</h3> 038 * <pre> 039 * {@code 040 * <m:MaterialNavBarShrink backgroundColor="BLUE" > 041 * <m:MaterialNavBrand href="#Test" position="LEFT" text="Title" /> 042 * <m:MaterialNavSection position="RIGHT"> 043 * <m:MaterialLink iconType="ACCOUNT_CIRCLE" iconPosition="LEFT" text="Account" textColor="WHITE" waves="LIGHT"/> 044 * <m:MaterialLink iconType="AUTORENEW" iconPosition="LEFT" text="Refresh" textColor="WHITE" waves="LIGHT"/> 045 * <m:MaterialLink iconType="SEARCH" tooltip="Menu" textColor="WHITE" waves="LIGHT"/> 046 * <m:MaterialLink iconType="MORE_VERT" tooltip="Starter" textColor="WHITE" waves="LIGHT"/> 047 * </m:MaterialNavSection> 048 * </m:MaterialNavBar> 049 * } 050 * <pre> 051 * @author kevzlou7979 052 * @author Ben Dol 053 * @see <a href="http://gwtmaterialdesign.github.io/gwt-material-demo/#navbar">Material Nav Bar</a> 054 * @see <a href="https://material.io/guidelines/components/toolbars.html#">Material Design Specification</a> 055 * @see <a href="https://gwtmaterialdesign.github.io/gwt-material-patterns/snapshot/#navbar_shrink">Pattern Shrink</a> 056 */ 057//@formatter:on 058public class MaterialNavBarShrink extends MaterialNavBar implements HasShrinkableNavBarHandlers { 059 060 private int offset = 300; 061 062 public MaterialNavBarShrink() { 063 super(); 064 setInitialClasses(NavBarType.SHRINK.getCssName()); 065 } 066 067 @Override 068 protected void onLoad() { 069 super.onLoad(); 070 071 $("header").css("position", "fixed"); 072 $("header").css("width", "100%"); 073 final boolean[] fired = {false}; 074 registerHandler(Window.addWindowScrollHandler(scrollEvent -> { 075 int distanceY = window().scrollTop(); 076 077 if (distanceY > offset) { 078 $(getElement()).addClass("smaller"); 079 if (!fired[0]) { 080 NavBarShrinkEvent.fire(this); 081 fired[0] = true; 082 } 083 } else { 084 if ($(getElement()).hasClass("smaller")) { 085 $(getElement()).removeClass("smaller"); 086 NavBarExpandEvent.fire(this); 087 fired[0] = false; 088 } 089 } 090 })); 091 } 092 093 public int getOffset() { 094 return offset; 095 } 096 097 public void setOffset(int offset) { 098 this.offset = offset; 099 } 100 101 @Override 102 public HandlerRegistration addExpandHandler(NavBarExpandEvent.NavBarExpandHandler handler) { 103 return addHandler(handler, NavBarExpandEvent.TYPE); 104 } 105 106 @Override 107 public HandlerRegistration addShrinkHandler(NavBarShrinkEvent.NavBarShrinkHandler handler) { 108 return addHandler(handler, NavBarShrinkEvent.TYPE); 109 } 110}