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.iconmorph;
021
022import com.google.gwt.dom.client.Document;
023import gwt.material.design.addins.client.MaterialAddins;
024import gwt.material.design.addins.client.base.constants.AddinsCssName;
025import gwt.material.design.client.MaterialDesignBase;
026import gwt.material.design.client.base.HasDurationTransition;
027import gwt.material.design.client.base.MaterialWidget;
028import gwt.material.design.client.base.TransitionConfig;
029import gwt.material.design.client.base.mixin.CssNameMixin;
030import gwt.material.design.client.constants.IconSize;
031import gwt.material.design.client.ui.MaterialIcon;
032
033//@formatter:off
034
035/**
036 * Provides visual continuity by morphing two material icons.
037 * <p>
038 * <h3>XML Namespace Declaration</h3>
039 * <pre>
040 * {@code
041 * xmlns:ma='urn:import:gwt.material.design.addins.client'
042 * }
043 * </pre>
044 * <p>
045 * <h3>UiBinder Usage:</h3>
046 * <pre>
047 * {@code
048 * <ma:iconmorph.MaterialIconMorph iconSize="SMALL">
049 *    <m:MaterialIcon iconType="POLYMER"/>
050 *    <m:MaterialIcon iconType="DONE"/>
051 * </ma:iconmorph.MaterialIconMorph>
052 * }
053 * </pre>
054 *
055 * @author kevzlou7979
056 * @see <a href="http://gwtmaterialdesign.github.io/gwt-material-demo/snapshot/#morphingIcons">Material Icon Morph</a>
057 * @see <a href="https://material.io/guidelines/motion/creative-customization.html#creative-customization-icons">Material Design Specification</a>
058 */
059//@formatter:on
060public class MaterialIconMorph extends MaterialWidget implements HasDurationTransition {
061
062    static {
063        if (MaterialAddins.isDebug()) {
064            MaterialDesignBase.injectCss(MaterialIconMorphDebugClientBundle.INSTANCE.morphCssDebug());
065        } else {
066            MaterialDesignBase.injectCss(MaterialIconMorphClientBundle.INSTANCE.morphCss());
067        }
068    }
069
070    private CssNameMixin<MaterialIconMorph, IconSize> sizeMixin;
071    private MaterialIcon source, target;
072
073    public MaterialIconMorph() {
074        super(Document.get().createDivElement(), AddinsCssName.ANIM_CONTAINER);
075        getElement().setAttribute("onclick", "this.classList.toggle('morphed')");
076    }
077
078    @Override
079    protected void onLoad() {
080        super.onLoad();
081
082        if (getWidgetCount() >= 2) {
083            source = (MaterialIcon) getWidget(0);
084            source.addStyleName(AddinsCssName.ICONS + " " + AddinsCssName.SOURCE);
085            target = (MaterialIcon) getWidget(1);
086            target.addStyleName(AddinsCssName.ICONS + " " + AddinsCssName.TARGET);
087        }
088    }
089
090    public void setIconSize(IconSize size) {
091        getSizeMixin().setCssName(size);
092    }
093
094    @Override
095    public void setDuration(int duration) {
096        setTransition(new TransitionConfig(duration, "all"));
097    }
098
099    @Override
100    public int getDuration() {
101        return 0;
102    }
103
104    public MaterialIcon getSource() {
105        return source;
106    }
107
108    public MaterialIcon getTarget() {
109        return target;
110    }
111
112    public CssNameMixin<MaterialIconMorph, IconSize> getSizeMixin() {
113        if (sizeMixin == null) {
114            sizeMixin = new CssNameMixin<>(this);
115        }
116        return sizeMixin;
117    }
118}