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;
026import gwt.material.design.client.events.SideNavPushEvent;
027import gwt.material.design.jquery.client.api.JQuery;
028
029import static gwt.material.design.client.js.JsMaterialElement.$;
030
031//@formatter:off
032
033/**
034 * SideNav (Push) is an extension to {@link MaterialSideNav} that pushes
035 * the {@link MaterialContainer}, {@link MaterialHeader}, and {@link MaterialFooter} when
036 * opening and closing the sidenav.
037 * <p>
038 * <h3>UiBinder Usage:</h3>
039 * <pre>
040 * {@code
041 * <m:MaterialSideNavPush ui:field="sideNav" width="280" withHeader="false" m:id="mysidebar" closeOnClick="false">
042 *     <m:MaterialLink href="#about" iconPosition="LEFT" iconType="OUTLINE" text="About" textColor="BLUE"  />
043 *     <m:MaterialLink href="#gettingStarted" iconPosition="LEFT" iconType="DOWNLOAD" text="Getting Started" textColor="BLUE"  >
044 * </m:MaterialSideNav>
045 * }
046 * </pre>
047 *
048 * @author kevzlou7979
049 * @author Ben Dol
050 * @see <a href="http://gwtmaterialdesign.github.io/gwt-material-demo/#sidenavs">Material SideNav</a>
051 * @see <a href="https://material.io/guidelines/patterns/navigation-drawer.html">Material Design Specification</a>
052 * @see <a href="https://gwtmaterialdesign.github.io/gwt-material-patterns/snapshot/#sidenav_push">Pattern</a>
053 */
054//@formatter:on
055public class MaterialSideNavPush extends AbstractSideNav implements HasWithHeader {
056
057    private boolean withHeader;
058
059    public MaterialSideNavPush() {
060        super(SideNavType.PUSH);
061        setShowOnAttach(true);
062    }
063
064    @Override
065    protected void setup() {
066        if (withHeader) {
067            applyPushWithHeader();
068        } else {
069            applyPushType();
070        }
071    }
072
073    /**
074     * Push the header, footer, and main to the right part when Close type is applied.
075     */
076    protected void applyPushType() {
077        applyBodyScroll();
078        setType(SideNavType.PUSH);
079        $(JQuery.window()).off("resize").resize((e, param1) -> {
080            if (!isAlwaysShowActivator() && !isOpen() && gwt.material.design.client.js.Window.matchMedia("all and (min-width: 992px)")) {
081                show();
082            }
083            pushElements(isOpen(), getWidth());
084            return true;
085        });
086    }
087
088    protected void applyPushWithHeader() {
089        setType(SideNavType.PUSH_WITH_HEADER);
090        super.applyBodyScroll();
091        if (isShowOnAttach()) {
092            Scheduler.get().scheduleDeferred(() -> {
093                pushElement(getHeader(), 0);
094                pushElement(getMain(), getWidth());
095                pushElementMargin(getFooter(), getWidth());
096            });
097        }
098
099        registerHandler(addOpeningHandler(event -> {
100            pushElement(getMain(), getWidth());
101            pushElementMargin(getFooter(), getWidth());
102        }));
103
104        registerHandler(addClosingHandler(event -> {
105            pushElement(getMain(), 0);
106            pushElementMargin(getFooter(), 0);
107        }));
108    }
109
110    @Override
111    protected void applyBodyScroll() {
112        $("header").css("width", "100%");
113        $("header").css("position", "fixed");
114        $("header").css("zIndex", "997");
115        $("header").css("top", "0");
116        registerHandler(addOpeningHandler(event -> $("header").css("width", "calc(100% - " + getWidth() + "px)")));
117        registerHandler(addClosingHandler(event -> $("header").css("width", "calc(100%)")));
118    }
119
120    @Override
121    protected void onClosing() {
122        super.onClosing();
123        if (!withHeader) {
124            pushElements(false, getWidth());
125        }
126    }
127
128    @Override
129    protected void onOpening() {
130        super.onOpening();
131        if (!withHeader) {
132            pushElements(true, getWidth());
133        }
134    }
135
136    protected void pushElements(boolean toggle, int width) {
137        int w = 0;
138        if (!gwt.material.design.client.js.Window.matchMedia("all and (max-width: 992px)")) {
139            if (toggle) {
140                w = width;
141            }
142
143            applyTransition(getHeader());
144            pushElementMargin(getHeader(), w);
145
146            applyTransition(getMain());
147            pushElementMargin(getMain(), w);
148
149            applyTransition(getFooter());
150            pushElementMargin(getFooter(), w);
151        }
152        onPush(toggle, w);
153    }
154
155    protected void onPush(boolean toggle, int width) {
156        SideNavPushEvent.fire(this, getElement(), getActivator(), toggle, width);
157    }
158
159    @Override
160    public void setWithHeader(boolean withHeader) {
161        this.withHeader = withHeader;
162    }
163
164    @Override
165    public boolean isWithHeader() {
166        return withHeader;
167    }
168}