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.core.client.Scheduler;
023import gwt.material.design.client.base.AbstractSideNav;
024import gwt.material.design.client.base.HasWithHeader;
025import gwt.material.design.client.constants.SideNavType;
026
027import static gwt.material.design.client.js.JsMaterialElement.$;
028
029//@formatter:off
030
031/**
032 * SideNav (Drawer) is an extension to {@link MaterialSideNav} that provides
033 * a drawer / overlay like structure. Good for Full Content view.
034 * <p>
035 * <h3>UiBinder Usage:</h3>
036 * <pre>
037 * {@code
038 * <m:MaterialSideNavDrawer ui:field="sideNav" width="280" withHeader="false" m:id="mysidebar" closeOnClick="false">
039 *     <m:MaterialLink href="#about" iconPosition="LEFT" iconType="OUTLINE" text="About" textColor="BLUE"  />
040 *     <m:MaterialLink href="#gettingStarted" iconPosition="LEFT" iconType="DOWNLOAD" text="Getting Started" textColor="BLUE"  >
041 * </m:MaterialSideNav>
042 * }
043 * </pre>
044 *
045 * @author kevzlou7979
046 * @author Ben Dol
047 * @see <a href="http://gwtmaterialdesign.github.io/gwt-material-demo/#sidenavs">Material SideNav</a>
048 * @see <a href="https://material.io/guidelines/patterns/navigation-drawer.html">Material Design Specification</a>
049 * @see <a href="https://gwtmaterialdesign.github.io/gwt-material-patterns/snapshot/#sidenav_drawer">Pattern</a>
050 * @see <a href="https://gwtmaterialdesign.github.io/gwt-material-patterns/snapshot/#sidenav_drawer_header">Pattern with Header</a>
051 */
052//@formatter:on
053public class MaterialSideNavDrawer extends AbstractSideNav implements HasWithHeader {
054
055    private boolean withHeader;
056
057    public MaterialSideNavDrawer() {
058        super(SideNavType.DRAWER);
059        setShowOnAttach(false);
060    }
061
062    @Override
063    protected void setup() {
064        if (withHeader) {
065            applyDrawerWithHeader();
066        } else {
067            appyDrawerType();
068        }
069    }
070
071    /**
072     * Provides an overlay / drawer sidenav just like when opening sidenav on mobile / tablet
073     */
074    protected void appyDrawerType() {
075        setType(SideNavType.DRAWER);
076        registerHandler(addOpeningHandler(event -> Scheduler.get().scheduleDeferred(() -> $("[id=sidenav-overlay]").css("visibility", "visible"))));
077        Scheduler.get().scheduleDeferred(() -> {
078            pushElement(getHeader(), 0);
079            pushElement(getMain(), 0);
080        });
081    }
082
083    /**
084     * Provides an overlay / drawer sidenav that will float on top of the content not the navbar without
085     * any grey overlay behind it.
086     */
087    protected void applyDrawerWithHeader() {
088        setType(SideNavType.DRAWER_WITH_HEADER);
089        applyBodyScroll();
090
091        if (isShowOnAttach()) {
092            Scheduler.get().scheduleDeferred(() -> {
093                pushElement(getHeader(), 0);
094                pushElement(getMain(), 0);
095            });
096        }
097    }
098
099    @Override
100    public void setWithHeader(boolean withHeader) {
101        this.withHeader = withHeader;
102    }
103
104    @Override
105    public boolean isWithHeader() {
106        return withHeader;
107    }
108}