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.addins.client.sideprofile;
021
022import com.google.gwt.dom.client.Document;
023import com.google.gwt.resources.client.ImageResource;
024import gwt.material.design.addins.client.MaterialAddins;
025import gwt.material.design.client.MaterialDesignBase;
026import gwt.material.design.client.base.AbstractValueWidget;
027import gwt.material.design.client.base.HasImage;
028import gwt.material.design.client.base.HasNoSideNavSelection;
029import gwt.material.design.client.constants.CssName;
030
031//@formatter:off
032
033/**
034 * SideProfile is a component that is attached on SideNav Component. Consists of
035 * Image , Label and link components.
036 * <p>
037 * <h3>XML Namespace Declaration</h3>
038 * <pre>
039 * {@code
040 * xmlns:ma='urn:import:gwt.material.design.addins.client'
041 * }
042 * </pre>
043 * <p>
044 * <h3>UiBinder Usage:</h3>
045 * <pre>
046 * {@code
047 * <m:MaterialSideNav type="OPEN" m:id="sideNav" closeOnClick="false" width="280">
048 *    <ma:sideprofile.MaterialSideProfile url="http://static1.squarespace.com/static/51609147e4b0715db61d32b6/521b97cee4b05f031fd12dde/5519e33de4b06a1002802805/1431718693701/?format=1500w">
049 *        <m:MaterialImage url="http://b.vimeocdn.com/ps/339/488/3394886_300.jpg" />
050 *        <m:MaterialLabel text="GWT Material" textColor="white"/>
051 *        <m:MaterialLink text="gwt-material@gmail.com" activates="dropProfile" iconType="ARROW_DROP_DOWN" iconPosition="RIGHT" textColor="white"/>
052 *    </ma:sideprofile.MaterialSideProfile>
053 * </m:MaterialSideNav>
054 * }
055 * </pre>
056 *
057 * @author kevzlou7979
058 * @author Ben Dol
059 * @see <a href="http://gwtmaterialdesign.github.io/gwt-material-demo/#!sidenavs">Material Side Profile</a>
060 * @see <a href="https://material.io/guidelines/patterns/navigation-drawer.html">Material Design Specification</a>
061 */
062//@formatter:on
063public class MaterialSideProfile extends AbstractValueWidget<String> implements HasImage, HasNoSideNavSelection {
064
065    static {
066        if (MaterialAddins.isDebug()) {
067            MaterialDesignBase.injectCss(MaterialSideProfileDebugClientBundle.INSTANCE.sideprofileCssDebug());
068        } else {
069            MaterialDesignBase.injectCss(MaterialSideProfileClientBundle.INSTANCE.sideprofileCss());
070        }
071    }
072
073    private String url;
074    private ImageResource resource;
075
076    public MaterialSideProfile() {
077        super(Document.get().createDivElement(), CssName.SIDE_PROFILE);
078    }
079
080    @Override
081    public String getValue() {
082        return url;
083    }
084
085    @Override
086    public void setValue(String value, boolean fireEvents) {
087        this.url = value;
088        applyBackground(url);
089        super.setValue(value, fireEvents);
090    }
091
092    @Override
093    public void setUrl(String url) {
094        setValue(url, true);
095    }
096
097    @Override
098    public String getUrl() {
099        return getValue();
100    }
101
102    @Override
103    public void setResource(ImageResource resource) {
104        this.resource = resource;
105        setUrl(resource.getSafeUri().asString());
106    }
107
108    @Override
109    public ImageResource getResource() {
110        return resource;
111    }
112
113    protected void applyBackground(String url) {
114        getElement().setAttribute("style", "background-image: url(" + url + "); background-size: cover;");
115    }
116}