Updated Branches: refs/heads/WICKET-5297-ajax-repaint-with-animation [created] e85a8b3cd
WICKET-5297 Animate ajax DOM manipulation smoothly Project: http://git-wip-us.apache.org/repos/asf/wicket/repo Commit: http://git-wip-us.apache.org/repos/asf/wicket/commit/e85a8b3c Tree: http://git-wip-us.apache.org/repos/asf/wicket/tree/e85a8b3c Diff: http://git-wip-us.apache.org/repos/asf/wicket/diff/e85a8b3c Branch: refs/heads/WICKET-5297-ajax-repaint-with-animation Commit: e85a8b3cd1512cfee79620530c559ea307c2d4d0 Parents: 76b619d Author: Martin Tzvetanov Grigorov <mgrigo...@apache.org> Authored: Tue Oct 1 12:15:09 2013 +0200 Committer: Martin Tzvetanov Grigorov <mgrigo...@apache.org> Committed: Tue Oct 1 12:15:09 2013 +0200 ---------------------------------------------------------------------- .../ajax/effects/DisplayNoneBehavior.java | 22 ++++ .../org/apache/wicket/ajax/effects/Effect.java | 117 +++++++++++++++++++ .../org/apache/wicket/ajax/effects/Effects.java | 86 ++++++++++++++ .../wicket/ajax/res/js/wicket-ajax-jquery.js | 22 ++++ 4 files changed, 247 insertions(+) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/wicket/blob/e85a8b3c/wicket-core/src/main/java/org/apache/wicket/ajax/effects/DisplayNoneBehavior.java ---------------------------------------------------------------------- diff --git a/wicket-core/src/main/java/org/apache/wicket/ajax/effects/DisplayNoneBehavior.java b/wicket-core/src/main/java/org/apache/wicket/ajax/effects/DisplayNoneBehavior.java new file mode 100644 index 0000000..d62e8c1 --- /dev/null +++ b/wicket-core/src/main/java/org/apache/wicket/ajax/effects/DisplayNoneBehavior.java @@ -0,0 +1,22 @@ +package org.apache.wicket.ajax.effects; + +import org.apache.wicket.Component; +import org.apache.wicket.behavior.AttributeAppender; +import org.apache.wicket.model.Model; + +/** + * A behavior that hides a component by using CSS <em>display</em> rule + */ +class DisplayNoneBehavior extends AttributeAppender +{ + DisplayNoneBehavior() + { + super("style", Model.of("display: none")); + } + + @Override + public boolean isTemporary(Component component) + { + return true; + } +} http://git-wip-us.apache.org/repos/asf/wicket/blob/e85a8b3c/wicket-core/src/main/java/org/apache/wicket/ajax/effects/Effect.java ---------------------------------------------------------------------- diff --git a/wicket-core/src/main/java/org/apache/wicket/ajax/effects/Effect.java b/wicket-core/src/main/java/org/apache/wicket/ajax/effects/Effect.java new file mode 100644 index 0000000..2110631 --- /dev/null +++ b/wicket-core/src/main/java/org/apache/wicket/ajax/effects/Effect.java @@ -0,0 +1,117 @@ +package org.apache.wicket.ajax.effects; + +import org.apache.wicket.Component; +import org.apache.wicket.util.lang.Args; +import org.apache.wicket.util.time.Duration; + +/** + * An effect is responsible to render the JavaScript that should be + * used to show the animation effect. + */ +public class Effect +{ + /** + * The default duration of all effects which do not specify + * their duration explicitly via {@linkplain #setDuration(org.apache.wicket.util.time.Duration)}. + * + * <p>Non final so the application can specify</p> its own default + */ + public static Duration DEFAULT_DURATION = Duration.milliseconds(300L); + + /** + * The name of the effect. + */ + private final String name; + + /** + * The duration of the animation. In milliseconds + */ + private Duration duration; + + /** + * A flag indicating whether the animation should suspend + * the execution of other Ajax response evaluations. + * By default effects notify when they are finished and other + * evaluations can be executed. + */ + private boolean notify = true; + + /** + * Constructor. + * + * @param name + * The name of the effect + */ + protected Effect(String name) + { + this(name, DEFAULT_DURATION); + } + + /** + * Constructor. + * + * @param name + * The name of the effect + * @param duration + * The duration of the animation. + */ + protected Effect(String name, Duration duration) + { + this.name = Args.notEmpty(name, "name"); + this.duration = Args.notNull(duration, "duration"); + } + + public Effect setDuration(Duration duration) + { + this.duration = duration; + return this; + } + + public Duration getDuration() + { + return duration; + } + + public String getName() + { + return name; + } + + public boolean isNotify() + { + return notify; + } + + public Effect setNotify(boolean notify) + { + this.notify = notify; + return this; + } + + /** + * Constructs JavaScript like: Wicket.Effect['name']('componentMarkupId', duration) + * + * @param component + * @return the JavaScript used to execute the effect + */ + public CharSequence toJavaScript(Component component) + { + Args.notNull(component, "component"); + + StringBuilder js = new StringBuilder(); + if (isNotify()) + { + js.append("notify|"); + } + js.append("Wicket.Effect['").append(name).append("']"); + js.append("('").append(component.getMarkupId()).append("', ") + .append(getDuration().getMilliseconds()); + if (isNotify()) + { + js.append(", notify"); + } + js.append(");"); + + return js; + } +} http://git-wip-us.apache.org/repos/asf/wicket/blob/e85a8b3c/wicket-core/src/main/java/org/apache/wicket/ajax/effects/Effects.java ---------------------------------------------------------------------- diff --git a/wicket-core/src/main/java/org/apache/wicket/ajax/effects/Effects.java b/wicket-core/src/main/java/org/apache/wicket/ajax/effects/Effects.java new file mode 100644 index 0000000..7020332 --- /dev/null +++ b/wicket-core/src/main/java/org/apache/wicket/ajax/effects/Effects.java @@ -0,0 +1,86 @@ +package org.apache.wicket.ajax.effects; + +import org.apache.wicket.Component; +import org.apache.wicket.ajax.AjaxRequestTarget; +import org.apache.wicket.util.lang.Args; +import org.apache.wicket.util.time.Duration; + +public class Effects +{ + public static void replace(AjaxRequestTarget target, Component component) + { + replace(target, component, new SlideUp(), new SlideDown()); + } + + public static void replace(AjaxRequestTarget target, Component component, Effect in, Effect out) + { + Args.notNull(target, "target"); + Args.notNull(component, "component"); + Args.notNull(in, "in"); + Args.notNull(out, "out"); + + component.add(new DisplayNoneBehavior()); + + target.prependJavaScript(in.toJavaScript(component)); + + target.add(component); + + target.appendJavaScript(out.toJavaScript(component)); + } + + /* + * Effects provided by jQuery + */ + + public static class SlideUp extends Effect + { + public SlideUp() + { + super("slideUp"); + } + + public SlideUp(Duration duration) + { + super("slideUp", duration); + } + } + + public static class SlideDown extends Effect + { + public SlideDown() + { + super("slideDown"); + } + + public SlideDown(Duration duration) + { + super("slideDown", duration); + } + } + + public static class FadeIn extends Effect + { + public FadeIn() + { + super("fadeIn"); + } + + public FadeIn(Duration duration) + { + super("fadeIn", duration); + } + } + + public static class FadeOut extends Effect + { + public FadeOut() + { + super("fadeOut"); + } + + public FadeOut(Duration duration) + { + super("fadeOut", duration); + } + } +} http://git-wip-us.apache.org/repos/asf/wicket/blob/e85a8b3c/wicket-core/src/main/java/org/apache/wicket/ajax/res/js/wicket-ajax-jquery.js ---------------------------------------------------------------------- diff --git a/wicket-core/src/main/java/org/apache/wicket/ajax/res/js/wicket-ajax-jquery.js b/wicket-core/src/main/java/org/apache/wicket/ajax/res/js/wicket-ajax-jquery.js index d5440ee..667f8c6 100644 --- a/wicket-core/src/main/java/org/apache/wicket/ajax/res/js/wicket-ajax-jquery.js +++ b/wicket-core/src/main/java/org/apache/wicket/ajax/res/js/wicket-ajax-jquery.js @@ -2609,6 +2609,28 @@ Wicket.Focus.setFocusOnElements(document.getElementsByTagName("button")); Wicket.Focus.setFocusOnElements(document.getElementsByTagName("a")); } + }, + + Effect: { + slideUp: function(componentId, duration, notify) { + notify = notify || jQuery.noop; + jQuery('#' + componentId).slideUp(duration, notify); + }, + + slideDown: function(componentId, duration, notify) { + notify = notify || jQuery.noop; + jQuery('#' + componentId).slideDown(duration, notify); + }, + + fadeIn: function(componentId, duration, notify) { + notify = notify || jQuery.noop; + jQuery('#' + componentId).fadeIn(duration, notify); + }, + + fadeOut: function(componentId, duration, notify) { + notify = notify || jQuery.noop; + jQuery('#' + componentId).fadeOut(duration, notify); + } } });
