001package gwt.material.design.addins.client.pathanimator;
002
003/*
004 * #%L
005 * GwtMaterial
006 * %%
007 * Copyright (C) 2015 GwtMaterialDesign
008 * %%
009 * Licensed under the Apache License, Version 2.0 (the "License");
010 * you may not use this file except in compliance with the License.
011 * You may obtain a copy of the License at
012 * 
013 *      http://www.apache.org/licenses/LICENSE-2.0
014 * 
015 * Unless required by applicable law or agreed to in writing, software
016 * distributed under the License is distributed on an "AS IS" BASIS,
017 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
018 * See the License for the specific language governing permissions and
019 * limitations under the License.
020 * #L%
021 */
022
023import com.google.gwt.dom.client.Element;
024import com.google.gwt.dom.client.Style;
025import gwt.material.design.addins.client.MaterialAddins;
026import gwt.material.design.client.MaterialDesignBase;
027
028//@formatter:off
029/**
030 * Custom component that provides meaningfull transition between two elements to show visual continuity.
031 *
032 * <h3>XML Namespace Declaration</h3>
033 * <pre>
034 * {@code
035 * xmlns:ma='urn:import:gwt.material.design.addins.client'
036 * }
037 * </pre>
038 *
039 * <h3>UiBinder Usage:</h3>
040 * <pre>
041 * {@code
042 * MaterialPathAnimator.animate(Element source, Element target, Runnable callback);
043 * }
044 * </pre>
045 *
046 * @author kevzlou7979
047 * @see <a href="http://gwtmaterialdesign.github.io/gwt-material-demo/#pathAnimator">Material Path Animator</a>
048 */
049//@formatter:on
050public class MaterialPathAnimator {
051
052    static {
053        if(MaterialAddins.isDebug()) {
054            MaterialDesignBase.injectJs(MaterialPathAnimatorDebugClientBundle.INSTANCE.pathanimatorDebugJs());
055        } else {
056            MaterialDesignBase.injectJs(MaterialPathAnimatorClientBundle.INSTANCE.pathanimatorJs());
057        }
058    }
059
060    /**
061     * Default animate method using Opacity Transition.
062     */
063    public static void animate(Element source,final Element target) {
064        Runnable defaultCallback = new Runnable() {
065            @Override
066            public void run() {
067                target.getStyle().setVisibility(Style.Visibility.VISIBLE);
068                target.getStyle().setOpacity(1);
069            }
070        };
071        animate(source, target, defaultCallback);
072    }
073
074    /**
075     * Custom path animator method with callback.
076     */
077    public static native void animate(Element source, Element target, Runnable callback)/*-{
078        $wnd.jQuery(document).ready(function() {
079            $wnd.cta(source, target, function () {
080                if(callback != null) {
081                    callback.@java.lang.Runnable::run()();
082                }
083            });
084        });
085    }-*/;
086
087    /**
088     * Default Reverse animate method to return to original state of Source component.
089     */
090    public static void reverseAnimate(final Element source,final Element target) {
091        Runnable defaultCallback = new Runnable() {
092            @Override
093            public void run() {
094                target.getStyle().setVisibility(Style.Visibility.HIDDEN);
095                target.getStyle().setOpacity(0);
096            }
097        };
098        reverseAnimate(source,target, defaultCallback);
099    }
100
101    /**
102     * Reverse animation of the target component to return to original
103     * state of the source component with Custom Callback.
104     */
105    public static native void reverseAnimate(Element source, Element target, Runnable callback) /*-{
106        $wnd.jQuery(document).ready(function() {
107            callback.@java.lang.Runnable::run()();
108            $wnd.cta(target, source);
109        });
110    }-*/;
111}