From 1edfa16c3938780eddc6b0784aad441b2d469c06 Mon Sep 17 00:00:00 2001 From: Julien Dramaix Date: Tue, 18 Jan 2011 22:11:49 +0000 Subject: [PATCH] -correct implementation of toggle. -add fadeToggle methods --- .../gwt/query/client/plugins/Effects.java | 85 ++++++++++++++----- .../gwt/query/client/plugins/LazyEffects.java | 28 +++++- 2 files changed, 92 insertions(+), 21 deletions(-) diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/Effects.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/Effects.java index 62fdb0ce..25e5077e 100755 --- a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/Effects.java +++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/Effects.java @@ -44,7 +44,7 @@ public class Effects extends GQueryQueue { public static final Class Effects = Effects.class; private static final String EFFECTS_RUNNNING = "EffectsRunnning"; - + static { GQuery.registerPlugin(Effects.class, new Plugin() { public Effects init(GQuery gq) { @@ -94,6 +94,7 @@ public class Effects extends GQueryQueue { anim.cancel(); } } + public void f(Element e) { Animation anim = new PropertiesAnimation(easing, e, p, funcs); anim.run(duration); @@ -102,7 +103,7 @@ public class Effects extends GQueryQueue { }); return this; } - + /** * The animate() method allows us to create animation effects on any numeric CSS property. * The only required parameter is a map of CSS properties. @@ -153,12 +154,12 @@ public class Effects extends GQueryQueue { ClipAnimation.Direction d, Function... f) { return clip(a, c, d, Speed.DEFAULT, f); } - + /** - * Animate the set of matched elements using the clip property. - * It is possible to show or hide a set of elements, - * specify the direction of the animation and the start corner of the effect. - * Finally it executes the set of functions passed as arguments. + * Animate the set of matched elements using the clip property. It is possible + * to show or hide a set of elements, specify the direction of the animation + * and the start corner of the effect. Finally it executes the set of + * functions passed as arguments. */ public Effects clip(final ClipAnimation.Action a, final ClipAnimation.Corner c, final ClipAnimation.Direction d, final int duration, final Function... f) { @@ -169,12 +170,13 @@ public class Effects extends GQueryQueue { anim.cancel(); } } + public void f(Element e) { Animation anim = new ClipAnimation(e, a, c, d, f); anim.run(duration); data(e, EFFECTS_RUNNNING, a); } - }); + }); return this; } @@ -197,7 +199,7 @@ public class Effects extends GQueryQueue { public Effects clipAppear(Function... f) { return clipAppear(Speed.DEFAULT, f); } - + /** * Reveal all matched elements by adjusting the clip property firing an * optional callback after completion. @@ -216,7 +218,7 @@ public class Effects extends GQueryQueue { public Effects clipDisappear(Function... f) { return clipDisappear(Speed.DEFAULT, f); } - + /** * Hide all matched elements by adjusting the clip property firing an * optional callback after completion. @@ -245,7 +247,7 @@ public class Effects extends GQueryQueue { return clip(Action.SHOW, ClipAnimation.Corner.TOP_LEFT, ClipAnimation.Direction.BIDIRECTIONAL, millisecs, f); } - + /** * Toggle the visibility of all matched elements by adjusting the clip property * and firing an optional callback after completion. @@ -265,7 +267,6 @@ public class Effects extends GQueryQueue { ClipAnimation.Direction.VERTICAL, millisecs, f); } - /** * Hide all matched elements by adjusting the clip property firing an * optional callback after completion. @@ -336,7 +337,27 @@ public class Effects extends GQueryQueue { public Effects fadeTo(int millisecs, double opacity, Function... f) { return animate("opacity: " + opacity, millisecs, f); } - + + /** + * Display or hide the matched elements by animating their opacity. and firing + * an optional callback after completion. Only the opacity is adjusted for + * this animation, meaning that all of the matched elements should already + * have some form of height and width associated with them. + */ + public Effects fadeToggle(Function... f) { + return fadeToggle(Speed.DEFAULT, f); + } + + /** + * Display or hide the matched elements by animating their opacity. and firing + * an optional callback after completion. Only the opacity is adjusted for + * this animation, meaning that all of the matched elements should already + * have some form of height and width associated with them. + */ + public Effects fadeToggle(int millisecs, Function... f) { + return animate("opacity: 'toggle'", millisecs, f); + }; + /** * Reveal all matched elements by adjusting their height and firing an * optional callback after completion. @@ -390,7 +411,7 @@ public class Effects extends GQueryQueue { * firing an optional callback after completion. Only the height is adjusted * for this animation, causing all matched elements to be hidden or shown in a * "sliding" manner - */ + */ public Effects slideToggle(int millisecs, Function... f) { return animate("height: 'toggle'", millisecs, f); } @@ -414,15 +435,41 @@ public class Effects extends GQueryQueue { /** * Toggle displaying each of the set of matched elements. */ - @Override - public Effects toggle() { - return toggle(Speed.DEFAULT); - } + /* + * -> already implemented in GQuery and this is the good one + * + * @Override public Effects toggle() { return toogle(Speed.DEFAULT); } + */ /** * Toggle displaying each of the set of matched elements. + * + * @param showOrHide A Boolean indicating whether to show or hide the + * elements. + */ + // maybe move this function in GQuery class directly ? + public Effects toggle(boolean showOrHide) { + for (Element element : elements()) { + GQuery $element = $(element); + if (!showOrHide) { + $element.hide(); + } else { + $element.show(); + } + + } + return this; + } + + /** + * Toggle displaying each of the set of matched elements by animating the + * width, height, and opacity of the matched elements simultaneously. When + * these properties reach 0 after a hiding animation, the display style + * property is set to none to ensure that the element no longer affects the + * layout of the page. */ public Effects toggle(int millisecs, Function... f) { - return animate("opacity: 'toggle'", millisecs, f); + return animate("opacity: 'toggle', width : 'toggle', height : 'toggle'", + millisecs, f); } } diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/LazyEffects.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/LazyEffects.java index 8521baf0..ff16308c 100644 --- a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/LazyEffects.java +++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/LazyEffects.java @@ -15,6 +15,7 @@ */ package com.google.gwt.query.client.plugins; import com.google.gwt.animation.client.Animation; +import com.google.gwt.core.client.GWT; import com.google.gwt.dom.client.Element; import com.google.gwt.dom.client.NodeList; import com.google.gwt.query.client.Function; @@ -219,6 +220,22 @@ public interface LazyEffects extends LazyBase{ */ LazyEffects fadeTo(int millisecs, double opacity, Function... f); + /** + * Display or hide the matched elements by animating their opacity. and firing + * an optional callback after completion. Only the opacity is adjusted for + * this animation, meaning that all of the matched elements should already + * have some form of height and width associated with them. + */ + LazyEffects fadeToggle(Function... f); + + /** + * Display or hide the matched elements by animating their opacity. and firing + * an optional callback after completion. Only the opacity is adjusted for + * this animation, meaning that all of the matched elements should already + * have some form of height and width associated with them. + */ + LazyEffects fadeToggle(int millisecs, Function... f); + /** * Reveal all matched elements by adjusting their height and firing an * optional callback after completion. @@ -277,11 +294,18 @@ public interface LazyEffects extends LazyBase{ /** * Toggle displaying each of the set of matched elements. + * + * @param showOrHide + * A Boolean indicating whether to show or hide the elements. */ - LazyEffects toggle(); + LazyEffects toggle(boolean showOrHide); /** - * Toggle displaying each of the set of matched elements. + * Toggle displaying each of the set of matched elements by animating the + * width, height, and opacity of the matched elements simultaneously. When + * these properties reach 0 after a hiding animation, the display style + * property is set to none to ensure that the element no longer affects the + * layout of the page. */ LazyEffects toggle(int millisecs, Function... f); -- 2.39.5