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.dom.client.Element;
023import com.google.gwt.dom.client.Style;
024import com.google.gwt.user.client.ui.Widget;
025import gwt.material.design.client.base.HasActivates;
026import gwt.material.design.client.base.HasProgress;
027import gwt.material.design.client.base.mixin.ActivatesMixin;
028import gwt.material.design.client.base.mixin.ProgressMixin;
029import gwt.material.design.client.constants.*;
030import gwt.material.design.client.ui.html.Div;
031import gwt.material.design.client.ui.html.Nav;
032
033import static gwt.material.design.jquery.client.api.JQuery.$;
034
035//@formatter:off
036
037/**
038 * Material NavBar represents as a app tool bar, that contains NavBrand,
039 * NavSection and initialize Material SideNav.
040 * <p>
041 * <h3>UiBinder Usage:</h3>
042 * <pre>
043 * {@code
044 * <m:MaterialNavBar backgroundColor="BLUE" >
045 *     <m:MaterialNavBrand href="#Test" position="LEFT"  text="Title" />
046 *     <m:MaterialNavSection position="RIGHT">
047 *         <m:MaterialLink  iconType="ACCOUNT_CIRCLE" iconPosition="LEFT" text="Account"  textColor="WHITE" waves="LIGHT"/>
048 *         <m:MaterialLink  iconType="AUTORENEW" iconPosition="LEFT" text="Refresh" textColor="WHITE" waves="LIGHT"/>
049 *         <m:MaterialLink  iconType="SEARCH" tooltip="Menu" textColor="WHITE" waves="LIGHT"/>
050 *          <m:MaterialLink  iconType="MORE_VERT" tooltip="Starter" textColor="WHITE" waves="LIGHT"/>
051 *     </m:MaterialNavSection>
052 * </m:MaterialNavBar>
053 * }
054 * <pre>
055 * @author kevzlou7979
056 * @author Ben Dol
057 * @see <a href="http://gwtmaterialdesign.github.io/gwt-material-demo/#navbar">Material Nav Bar</a>
058 * @see <a href="https://material.io/guidelines/components/toolbars.html#">Material Design Specification</a>
059 * @see <a href="https://gwtmaterialdesign.github.io/gwt-material-patterns/snapshot/#navbar_default">Pattern Default</a>
060 * @see <a href="https://gwtmaterialdesign.github.io/gwt-material-patterns/snapshot/#navbar_fixed">Pattern Fixed</a>
061 * @see <a href="https://gwtmaterialdesign.github.io/gwt-material-patterns/snapshot/#navbar_tall">Pattern Tall</a>
062 * @see <a href="https://gwtmaterialdesign.github.io/gwt-material-patterns/snapshot/#navbar_extend">Pattern Extend</a>
063 * @see <a href="https://gwtmaterialdesign.github.io/gwt-material-patterns/snapshot/#navbar_tab">Pattern Tabs</a>
064 */
065//@formatter:on
066public class MaterialNavBar extends Nav implements HasActivates, HasProgress {
067
068    private Div navWrapper = new Div();
069    private MaterialLink navMenu = new MaterialLink(IconType.MENU);
070
071    private ActivatesMixin<MaterialLink> activatesMixin;
072    private ProgressMixin<MaterialNavBar> progressMixin;
073
074    @Override
075    protected void onLoad() {
076        super.onLoad();
077
078        navWrapper.setStyleName(CssName.NAV_WRAPPER);
079        navWrapper.insert(navMenu,0);
080        super.add(navWrapper);
081        navMenu.setFontSize(2.7, Style.Unit.EM);
082        navMenu.addStyleName(CssName.BUTTON_COLLAPSE);
083        navMenu.getElement().getStyle().clearDisplay();
084        navMenu.setCircle(true);
085        navMenu.setWaves(WavesType.LIGHT);
086        navMenu.setWidth("64px");
087        navMenu.setTextAlign(TextAlign.CENTER);
088        navMenu.setIconPosition(IconPosition.NONE);
089
090        // Check whether the SideNav is attached or not. If not attached Hide the NavMenu
091        Element sideNavElement = $("#" + getActivatesMixin().getActivates()).asElement();
092
093        if (sideNavElement == null) {
094            navMenu.setVisibility(Style.Visibility.HIDDEN);
095        } else {
096            navMenu.setVisibility(Style.Visibility.VISIBLE);
097        }
098    }
099
100    @Override
101    public void add(Widget child) {
102        navWrapper.add(child);
103    }
104
105    @Override
106    public void clear() {
107        navWrapper.clear();
108    }
109
110    @Override
111    public void showProgress(ProgressType type) {
112        getProgressMixin().showProgress(type);
113    }
114
115    @Override
116    public void setPercent(double percent) {
117        getProgressMixin().setPercent(percent);
118    }
119
120    @Override
121    public void hideProgress() {
122        getProgressMixin().hideProgress();
123    }
124
125    @Override
126    public MaterialProgress getProgress() {
127        return getProgressMixin().getProgress();
128    }
129
130    @Override
131    public void setActivates(String activates) {
132        getActivatesMixin().setActivates(activates);
133    }
134
135    @Override
136    public String getActivates() {
137        return getActivatesMixin().getActivates();
138    }
139
140    public MaterialLink getNavMenu() {
141        return navMenu;
142    }
143
144    public Div getNavWrapper() {
145        return navWrapper;
146    }
147
148    protected ActivatesMixin<MaterialLink> getActivatesMixin() {
149        if (activatesMixin == null) {
150            activatesMixin = new ActivatesMixin<>(navMenu);
151        }
152        return activatesMixin;
153    }
154
155    protected ProgressMixin<MaterialNavBar> getProgressMixin() {
156        if (progressMixin == null) {
157            progressMixin = new ProgressMixin<>(this);
158        }
159        return progressMixin;
160    }
161}