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.ui.Widget;
023import gwt.material.design.client.base.AbstractSideNav;
024import gwt.material.design.client.base.MaterialWidget;
025import gwt.material.design.client.constants.SideNavType;
026
027import static gwt.material.design.client.js.JsMaterialElement.$;
028
029//@formatter:off
030
031/**
032 * SideNav (Mini) is an extension to {@link MaterialSideNav} that provides
033 * mini variant / icon only sidenav. Also with this type, you can enable
034 * expansion feature by setExpandable(true).
035 * <p>
036 * <h3>UiBinder Usage:</h3>
037 * <pre>
038 * {@code
039 * <m:MaterialSideNavMini ui:field="sideNav" width="280" m:id="mysidebar" expandable="true" expandOnClick="true">
040 *     <m:MaterialLink href="#about" iconPosition="LEFT" iconType="OUTLINE" text="About" textColor="BLUE"  />
041 *     <m:MaterialLink href="#gettingStarted" iconPosition="LEFT" iconType="DOWNLOAD" text="Getting Started" textColor="BLUE"  >
042 * </m:MaterialSideNav>
043 * }
044 * </pre>
045 *
046 * @author kevzlou7979
047 * @author Ben Dol
048 * @see <a href="http://gwtmaterialdesign.github.io/gwt-material-demo/#sidenavs">Material SideNav</a>
049 * @see <a href="https://material.io/guidelines/patterns/navigation-drawer.html">Material Design Specification</a>
050 * @see <a href="https://gwtmaterialdesign.github.io/gwt-material-patterns/snapshot/#sidenav_mini">Pattern</a>
051 * @see <a href="https://gwtmaterialdesign.github.io/gwt-material-patterns/snapshot/#sidenav_mini_expandable">Pattern Expandable</a>
052 */
053//@formatter:on
054public class MaterialSideNavMini extends AbstractSideNav {
055
056    private boolean overlay;
057    private boolean expandable;
058    private boolean expandOnClick;
059
060    public MaterialSideNavMini() {
061        super(SideNavType.MINI);
062        setShowOnAttach(false);
063    }
064
065    @Override
066    protected void setup() {
067        applyBodyScroll();
068        if (isExpandable()) {
069            setType(SideNavType.MINI_WITH_EXPAND);
070            applyTransition(getElement());
071            int originalWidth = getWidth();
072            int miniWidth = 64;
073            pushElement(getMain(), miniWidth);
074            pushElementMargin(getFooter(), miniWidth);
075            setWidth(miniWidth);
076
077            registerHandler(addOpeningHandler(event -> expand(originalWidth)));
078            registerHandler(addClosingHandler(event -> collapse(miniWidth)));
079
080            // Add Opening when sidenav link is clicked by default
081            for (Widget w : getChildren()) {
082                if (w instanceof MaterialWidget && isExpandOnClick()) {
083                    $(w.getElement()).off("click").on("click", (e, param1) -> {
084                        if (!getElement().hasClassName("expanded")) {
085                            show();
086                        }
087                        return true;
088                    });
089                }
090            }
091        } else {
092            setType(SideNavType.MINI);
093            setWidth(64);
094        }
095    }
096
097    protected void expand(int width) {
098        addStyleName("expanded");
099        setWidth(width);
100        if (!isOverlay()) {
101            pushElement(getMain(), width);
102            pushElementMargin(getFooter(), width);
103        }
104    }
105
106    protected void collapse(int width) {
107        removeStyleName("expanded");
108        setWidth(width);
109        if (!isOverlay()) {
110            pushElement(getMain(), width);
111            pushElementMargin(getFooter(), width);
112        }
113    }
114
115    public void setExpandable(boolean expandable) {
116        this.expandable = expandable;
117    }
118
119    public boolean isExpandable() {
120        return expandable;
121    }
122
123    public boolean isExpandOnClick() {
124        return expandOnClick;
125    }
126
127    public void setExpandOnClick(boolean expandOnClick) {
128        this.expandOnClick = expandOnClick;
129    }
130
131    public boolean isOverlay() {
132        return overlay;
133    }
134
135    public void setOverlay(boolean overlay) {
136        this.overlay = overlay;
137    }
138}