You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@wicket.apache.org by mg...@apache.org on 2013/10/01 12:15:38 UTC
git commit: WICKET-5297 Animate ajax DOM manipulation smoothly
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 <mg...@apache.org>
Authored: Tue Oct 1 12:15:09 2013 +0200
Committer: Martin Tzvetanov Grigorov <mg...@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);
+ }
}
});