diff options
| -rw-r--r-- | gwtquery-core/src/main/java/com/google/gwt/query/client/LazyGQuery.java | 81 | ||||
| -rw-r--r-- | gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/LazyEffects.java | 11 |
2 files changed, 76 insertions, 16 deletions
diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/LazyGQuery.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/LazyGQuery.java index d34b503a..14cd6b44 100644 --- a/gwtquery-core/src/main/java/com/google/gwt/query/client/LazyGQuery.java +++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/LazyGQuery.java @@ -12,23 +12,51 @@ * the License. */ package com.google.gwt.query.client; +import static com.google.gwt.query.client.plugins.QueuePlugin.*; +import java.util.ArrayList; +import java.util.Arrays; import java.util.List; import java.util.Map; - -import com.google.gwt.dom.client.Element; -import com.google.gwt.dom.client.Node; -import com.google.gwt.dom.client.NodeList; +import com.google.gwt.core.client.GWT; +import com.google.gwt.core.client.JavaScriptObject; +import com.google.gwt.core.client.JsArray; +import com.google.gwt.core.client.JsArrayMixed; +import com.google.gwt.core.client.JsArrayString; +import com.google.gwt.dom.client.*; +import com.google.gwt.dom.client.Style.Display; import com.google.gwt.dom.client.Style.HasCssName; -import com.google.gwt.query.client.GQuery.Offset; import com.google.gwt.query.client.css.CSS; import com.google.gwt.query.client.css.HasCssValue; import com.google.gwt.query.client.css.TakesCssValue; import com.google.gwt.query.client.css.TakesCssValue.CssSetter; +import com.google.gwt.query.client.impl.AttributeImpl; +import com.google.gwt.query.client.impl.DocumentStyleImpl; +import com.google.gwt.query.client.impl.SelectorEngine; +import com.google.gwt.query.client.js.JsCache; +import com.google.gwt.query.client.js.JsMap; import com.google.gwt.query.client.js.JsNamedArray; import com.google.gwt.query.client.js.JsNodeArray; +import com.google.gwt.query.client.js.JsObjectArray; +import com.google.gwt.query.client.js.JsUtils; import com.google.gwt.query.client.plugins.Effects; +import com.google.gwt.query.client.plugins.Events; +import com.google.gwt.query.client.plugins.Plugin; +import com.google.gwt.query.client.plugins.Widgets; +import com.google.gwt.query.client.plugins.ajax.Ajax; +import com.google.gwt.query.client.plugins.ajax.Ajax.Settings; +import com.google.gwt.query.client.plugins.deferred.Deferred; import com.google.gwt.query.client.plugins.effects.PropertiesAnimation.Easing; +import com.google.gwt.query.client.plugins.effects.Transitions; +import com.google.gwt.query.client.plugins.events.EventsListener; +import com.google.gwt.query.client.plugins.widgets.WidgetsUtils; +import com.google.gwt.regexp.shared.RegExp; +import com.google.gwt.user.client.DOM; +import com.google.gwt.user.client.Event; +import com.google.gwt.user.client.EventListener; +import com.google.gwt.user.client.Window; +import com.google.gwt.user.client.ui.IsWidget; import com.google.gwt.user.client.ui.Widget; +import com.google.gwt.query.client.LazyBase; public interface LazyGQuery<T> extends LazyBase<T>{ @@ -47,6 +75,12 @@ public interface LazyGQuery<T> extends LazyBase<T>{ LazyGQuery<T> add(String selector); /** + * Add the previous selection to the current selection. Useful for traversing elements, and then + * adding something that was matched before the last traversal. + */ + LazyGQuery<T> addBack(); + + /** * Adds the specified classes to each matched element. */ LazyGQuery<T> addClass(String... classes); @@ -70,12 +104,6 @@ public interface LazyGQuery<T> extends LazyBase<T>{ LazyGQuery<T> after(String html); /** - * Add the previous selection to the current selection. Useful for traversing elements, and then - * adding something that was matched before the last traversal. - */ - LazyGQuery<T> andSelf(); - - /** * * The animate() method allows you to create animation effects on any numeric HTML Attribute, * CSS property, or color CSS property. @@ -2190,6 +2218,37 @@ public interface LazyGQuery<T> extends LazyBase<T>{ String toString(); /** + * The transition() method allows you to create animation effects on any numeric HTML Attribute, + * CSS property, or color using CSS3 transformations and transitions. + * + * It works similar to animate(), and support chainning and queueing. + * + * Example: + * $("#foo").transition("{ opacity: 0.1, scale: 2, x: 50, y: 50 }", 5000, EasingCurve.easeInBack); + * + * $("#bar") + * .transition("{ opacity: 0.1, scale: 2, x: 50, y: 50 }", 5000, EasingCurve.easeInBack) + * .transition("{x: +100, width: +40px}", 2000, EasingCurve.easeOut); + * + */ + LazyGQuery<T> transition(Object stringOrProperties, int duration, Easing easing, Function... funcs); + + /** + * The transition() method allows you to create animation effects on any numeric HTML Attribute, + * CSS property, or color using CSS3 transformations and transitions. + * + * It works similar to animate() but has an extra parameter for delaying the animation, so as + * we dont have to use GQuery queue system for delaying executions, nor callbacks for firing more + * animations + * + * Example animate an element within 2 seconds: + * $("#foo") + * .transition("{ opacity: 0.1, scale: 2, x: 50, y: 50 }", 5000, 2000, EasingCurve.easeInBack); + * + */ + LazyGQuery<T> transition(Object stringOrProperties, int duration, int delay, Easing easing, Function... funcs); + + /** * Produces a string representation of the matched elements. */ String toString(boolean pretty); 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 b7686302..cdcc61d2 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 @@ -25,6 +25,7 @@ import com.google.gwt.query.client.plugins.effects.ClipAnimation.Direction; import com.google.gwt.query.client.plugins.effects.Fx; import com.google.gwt.query.client.plugins.effects.PropertiesAnimation; import com.google.gwt.query.client.plugins.effects.PropertiesAnimation.Easing; +import com.google.gwt.query.client.plugins.effects.PropertiesAnimation.EasingCurve; import com.google.gwt.query.client.LazyBase; public interface LazyEffects<T> extends LazyBase<T>{ @@ -45,9 +46,9 @@ public interface LazyEffects<T> extends LazyBase<T>{ * <pre class="code"> * //move the element from its original position to the position top:500px and left:500px for 400ms. * //use a swing easing function for the transition - * $("#foo").animate(Properties.create("{top:'500px',left:'500px'}"), 400, Easing.SWING); + * $("#foo").animate(Properties.create("{top:'500px',left:'500px'}"), 400, EasingCurve.swing); * // Change the width and border attributes of a table - * $("table").animate(Properties.create("{$width: '500', $border: '10'}"), 400, Easing.LINEAR); + * $("table").animate(Properties.create("{$width: '500', $border: '10'}"), 400, EasingCurve.linear); * </pre> * * In addition to numeric values, each property can take the strings 'show', @@ -71,8 +72,8 @@ public interface LazyEffects<T> extends LazyBase<T>{ * Example: * * <pre class="code"> - * $("#foo").animate("backgroundColor:'red', color:'#ffffff', borderColor:'rgb(129, 0, 70)'", 400, Easing.SWING); - * $("#foo").animate($$("{backgroundColor:'red', color:'#ffffff', borderColor:'rgb(129, 0, 70)'}"), 400, Easing.SWING); + * $("#foo").animate("backgroundColor:'red', color:'#ffffff', borderColor:'rgb(129, 0, 70)'", 400, EasingCurve.swing); + * $("#foo").animate($$("{backgroundColor:'red', color:'#ffffff', borderColor:'rgb(129, 0, 70)'}"), 400, EasingCurve.swing); * </pre> * * @param p a {@link Properties} object containing css properties to animate. @@ -101,7 +102,7 @@ public interface LazyEffects<T> extends LazyBase<T>{ * //move the element from its original position to left:500px for 500ms * $("#foo").animate("left:'500'"); * // Change the width attribute of a table - * $("table").animate("$width:'500'"), 400, Easing.LINEAR); + * $("table").animate("$width:'500'"), 400, EasingCurve.swing); * </pre> * * In addition to numeric values, each property can take the strings 'show', |