001package gwt.material.design.client.ui; 002 003/* 004 * #%L 005 * GwtMaterial 006 * %% 007 * Copyright (C) 2015 GwtMaterialDesign 008 * %% 009 * Licensed under the Apache License, Version 2.0 (the "License"); 010 * you may not use this file except in compliance with the License. 011 * You may obtain a copy of the License at 012 * 013 * http://www.apache.org/licenses/LICENSE-2.0 014 * 015 * Unless required by applicable law or agreed to in writing, software 016 * distributed under the License is distributed on an "AS IS" BASIS, 017 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 018 * See the License for the specific language governing permissions and 019 * limitations under the License. 020 * #L% 021 */ 022 023import com.google.gwt.dom.client.Element; 024import com.google.gwt.dom.client.Style; 025import com.google.gwt.user.client.ui.Widget; 026import gwt.material.design.client.base.HasActivates; 027import gwt.material.design.client.base.HasProgress; 028import gwt.material.design.client.base.HasType; 029import gwt.material.design.client.base.mixin.ActivatesMixin; 030import gwt.material.design.client.base.mixin.CssTypeMixin; 031import gwt.material.design.client.base.mixin.ProgressMixin; 032import gwt.material.design.client.constants.*; 033import gwt.material.design.client.ui.html.Div; 034import gwt.material.design.client.ui.html.Nav; 035 036//@formatter:off 037 038/** 039 * Material NavBar represents as a app tool bar, that contains NavBrand, 040 * NavSection and initialize Material Sidenav. 041 * 042 * <h3>UiBinder Usage:</h3> 043 * <pre> 044 * {@code 045 * <m:MaterialNavBar backgroundColor="blue" > 046 * <m:MaterialNavBrand href="#Test" position="LEFT">Title</m:MaterialNavBrand> 047 * <m:MaterialNavSection position="RIGHT"> 048 * <m:MaterialLink iconType="ACCOUNT_CIRCLE" iconPosition="LEFT" text="Account" textColor="white" waves="LIGHT"/> 049 * <m:MaterialLink iconType="AUTORENEW" iconPosition="LEFT" text="Refresh" textColor="white" waves="LIGHT"/> 050 * <m:MaterialLink iconType="SEARCH" tooltip="Menu" textColor="white" waves="LIGHT"/> 051 * <m:MaterialLink iconType="MORE_VERT" tooltip="Starter" textColor="white" waves="LIGHT"/> 052 * </m:MaterialNavSection> 053 * </m:MaterialNavBar> 054 * } 055 *<pre> 056 * @author kevzlou7979 057 * @author Ben Dol 058 * @see <a href="http://gwt-material-demo.herokuapp.com/#navigations">Material Nav Bar</a> 059 */ 060//@formatter:on 061public class MaterialNavBar extends Nav implements HasActivates, HasProgress, HasType<NavBarType> { 062 063 private Div div = new Div(); 064 065 private MaterialLink navMenu = new MaterialLink(IconType.MENU); 066 private MaterialProgress progress = new MaterialProgress(); 067 068 private final CssTypeMixin<NavBarType, MaterialNavBar> typeMixin = new CssTypeMixin<>(this); 069 private final ActivatesMixin<MaterialLink> activatesMixin = new ActivatesMixin<>(navMenu); 070 private final ProgressMixin<MaterialNavBar> progressMixin = new ProgressMixin<>(this); 071 072 public MaterialNavBar() { 073 div.setStyleName("nav-wrapper"); 074 div.add(navMenu); 075 super.add(div); 076 navMenu.setFontSize(2.7, Style.Unit.EM); 077 navMenu.addStyleName("button-collapse"); 078 navMenu.setHideOn(HideOn.HIDE_ON_LARGE); 079 navMenu.getElement().getStyle().clearDisplay(); 080 navMenu.setCircle(true); 081 navMenu.setWaves(WavesType.LIGHT); 082 navMenu.setWidth("64px"); 083 navMenu.setTextAlign(TextAlign.CENTER); 084 navMenu.setIconPosition(IconPosition.NONE); 085 } 086 087 @Override 088 protected void onLoad() { 089 super.onLoad(); 090 if (typeMixin.getType() != null) { 091 applyType(typeMixin.getType().getCssName(), getElement()); 092 } 093 } 094 095 @Override 096 public void add(Widget child) { 097 div.add(child); 098 } 099 100 @Override 101 public void clear() { 102 div.clear(); 103 } 104 105 @Override 106 public void setType(NavBarType type) { 107 typeMixin.setType(type); 108 } 109 110 protected native void applyType(String type, Element element) /*-{ 111 if(type === "navbar-shrink") { 112 $wnd.initShrink(element, 300) 113 }else{ 114 console.log('Default type of navbar was applied'); 115 } 116 }-*/; 117 118 @Override 119 public NavBarType getType() { 120 return typeMixin.getType(); 121 } 122 123 @Override 124 public void showProgress(ProgressType type) { 125 progressMixin.showProgress(type); 126 } 127 128 @Override 129 public void setPercent(double percent) { 130 progressMixin.setPercent(percent); 131 } 132 133 @Override 134 public void hideProgress() { 135 progressMixin.hideProgress(); 136 } 137 138 @Override 139 public void setActivates(String activates) { 140 activatesMixin.setActivates(activates); 141 } 142 143 @Override 144 public String getActivates() { 145 return activatesMixin.getActivates(); 146 } 147}