}\r
\r
/**\r
- * Insert a delay (in ms) in the Effects queue.\r
+ * Insert a delay (in ms) in the GQuery queue, and optionally execute one o\r
+ * more functions if provided when the delay finishes.\r
+ * It uses the effects queue namespace, so you can stack any of the methods in the effects\r
+ * plugin.\r
* \r
* Example:\r
* \r
* <pre class="code">\r
- * $('#foo').slideUp(300).delay(800).fadeIn(400); \r
+ * $("#foo").slideUp(300)\r
+ * .delay(800)\r
+ * .fadeIn(400); \r
* </pre>\r
* \r
* When this statement is executed, the element slides up for 300 milliseconds\r
* and then pauses for 800 milliseconds before fading in for 400 milliseconds.\r
+ * Aditionally after those 800 milliseconds the element color is set to red.\r
* \r
- * Please note that this methods affects only the Effects queue. So the\r
- * following example is wrong:\r
+ * NOTE that this methods affects only methods which uses the queue like effects.\r
+ * So the following example is wrong:\r
* \r
* <pre>\r
- * $('#foo').css(CSS.COLOR.with(RGBColor.RED)).delay(800).css(CSS.COLOR.with(RGBColor.BLACK)); \r
+ * $("#foo").css(CSS.COLOR.with(RGBColor.RED)).delay(800).css(CSS.COLOR.with(RGBColor.BLACK)); \r
* </pre>\r
* \r
* The code above will not insert a delay of 800 ms between the css() calls !\r
- * For this kind of behavior, please check {@link #delay(int, String)}\r
+ * For this kind of behavior, you should execute these methods puting them in inline \r
+ * functions passed as argument to the delay() method, or adding them to the queue.\r
+ * \r
+ * <pre>\r
+ * $("#foo").css(CSS.COLOR.with(RGBColor.RED)).delay(800, lazy().css(CSS.COLOR.with(RGBColor.BLACK)).done()); \r
+ * $("#foo").css(CSS.COLOR.with(RGBColor.RED)).delay(800).queue(lazy().css(CSS.COLOR.with(RGBColor.BLACK)).dequeue().done()); \r
+ * </pre>\r
*/\r
- public GQuery delay(int milliseconds) {\r
- return as(Effects).delay(milliseconds);\r
+ public GQuery delay(int milliseconds, Function... f) {\r
+ return as(Effects).delay(milliseconds, f);\r
}\r
\r
/**\r
* Insert a delay (in ms) in the queue identified by the\r
- * <code>queueName</code> parameter. if <code>queueName</code> is null or\r
+ * <code>queueName</code> parameter, and optionally execute one o\r
+ * more functions if provided when the delay finishes.\r
+ * \r
+ * If <code>queueName</code> is null or\r
* equats to 'fx', the delay will be inserted to the Effects queue.\r
* \r
* Example :\r
* \r
* <pre class="code">\r
- * $('#foo').queue("colorQueue", lazy().css(CSS.COLOR.with(RGBColor.RED)).done())\r
+ * $("#foo").queue("colorQueue", lazy().css(CSS.COLOR.with(RGBColor.RED)).dequeue("colorQueue").done())\r
* .delay(800, "colorQueue")\r
* .queue("colorQueue", lazy().css(CSS.COLOR.with(RGBColor.BLACK)).done()); \r
* </pre>\r
* black.\r
* \r
*/\r
- public GQuery delay(int milliseconds, String queueName) {\r
+ public GQuery delay(int milliseconds, String queueName, Function... f) {\r
if (queueName == null || "fx".equalsIgnoreCase(queueName)) {\r
- return as(Effects).delay(milliseconds);\r
+ return as(Effects).delay(milliseconds, f);\r
}\r
\r
- return as(SimpleNamedQueue).delay(milliseconds, queueName);\r
+ return as(SimpleNamedQueue).delay(milliseconds, queueName, f);\r
}\r
\r
/**\r
* Execute the next function on the Effects queue for the matched elements.\r
* This method is usefull to tell when a function you add in the Effects queue\r
* is ended and so the next function in the queue can start.\r
+ * \r
+ * Note: you should be sure to call dequeue() in all functions of a queue chain,\r
+ * otherwise the queue execution will be stopped.\r
*/\r
public GQuery dequeue() {\r
return as(Effects).dequeue();\r
}\r
\r
/**\r
- * Execute the next function on the queue for the matched elements. This\r
- * method is usefull to tell when a function you add in the Effects queue is\r
+ * Execute the next function on the queue named as queueName for the matched elements. \r
+ * This method is usefull to tell when a function you add in the Effects queue is\r
* ended and so the next function in the queue can start.\r
+ * \r
+ * If you are queuing functions in a named queue (not the Effects one), \r
+ * you do not need to call dequeue(queueName) since it is preformed automatically. \r
+ * \r
*/\r
public GQuery dequeue(String queueName) {\r
if (queueName == null || "fx".equalsIgnoreCase(queueName)) {\r
* $(e).css(CSS.BACKGROUNG_COLOR.with(RGBColor.RED));\r
* $(e).dequeue(); \r
* }\r
- * }).animate("left:'-=500'", 400)\r
+ * })\r
+ * .animate("left:'-=500'", 400)\r
+ * .queue(lazy().css("color", "yellow");\r
+ * \r
* </pre>\r
* \r
* When this statement is executed, the element move to 500 px to left for 400\r
* ms, then its background color is changed to red and then move to 500px to\r
- * right for 400ms.\r
+ * right for 400ms, and finally its color is set to yellow.\r
* \r
* Please note that {@link #dequeue()} function is needed at the end of your\r
- * function to start the next function in the queue. {@see #dequeue()}\r
+ * function to start the next function in the queue. In lazy() methods you should\r
+ * call dequeue() just before the done() call.\r
+ * {@see #dequeue()}\r
*/\r
public GQuery queue(Function f) {\r
return as(Effects).queue(f);\r
* $("#foo").queue("myQueue", new Function(){\r
* public void f(Element e){\r
* $(e).css(CSS.BACKGROUNG_COLOR.with(RGBColor.RED));\r
- * $(e).dequeue(); \r
- * }\r
- * }).delay(500, "myQueue")\r
- * .queue("myQueue", new Function(){\r
- * public void f(Element e){\r
- * $(e).css(CSS.COLOR.with(RGBColor.YELLOW));\r
- * $(e).dequeue(); \r
* }\r
- * });\r
+ * })\r
+ * .delay(500, "myQueue")\r
+ * .queue("myQueue", lazy().css(CSS.COLOR.with(RGBColor.YELLOW)).done());\r
* </pre>\r
* \r
* When this statement is executed, the background color of the element is set\r
* to red, then wait 500ms before to set the text color of the element to\r
* yellow. right for 400ms.\r
* \r
- * Please note that {@link #dequeue()} function is needed at the end of your\r
- * function to start the next function in the queue. {@see #dequeue()}\r
+ * NOTE: {@link #dequeue()} function is not needed at the end of your\r
+ * function unless you use the Effects ('fx') namespace.\r
+ * {@see #dequeue()}\r
*/\r
public GQuery queue(String queueName, Function f) {\r
if (queueName == null || "fx".equalsIgnoreCase(queueName)) {\r
* Example:
*
* <pre class="code">
- * $("#foo").animate(Properties.create("{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);
* </pre>
*
- * @param p a {@link Properties} object containing css properties to animate.
+ * @param stringOrProperties a String or a {@link Properties} object containing css properties to animate.
* @param funcs an array of {@link Function} called once the animation is
* complete
* @param duration the duration in milliseconds of the animation
* @param easing the easing function to use for the transition
*/
- LazyGQuery<T> animate(Properties p, int duration, Easing easing, Function... funcs);
+ LazyGQuery<T> animate(Object stringOrProperties, int duration, Easing easing, Function... funcs);
/**
*
LazyGQuery<T> dblclick(Function... f);
/**
- * Insert a delay (in ms) in the Effects queue.
+ * Insert a delay (in ms) in the GQuery queue, and optionally execute one o
+ * more functions if provided when the delay finishes.
+ * It uses the effects queue namespace, so you can stack any of the methods in the effects
+ * plugin.
*
* Example:
*
* <pre class="code">
- * $('#foo').slideUp(300).delay(800).fadeIn(400);
+ * $("#foo").slideUp(300)
+ * .delay(800)
+ * .fadeIn(400);
* </pre>
*
* When this statement is executed, the element slides up for 300 milliseconds
* and then pauses for 800 milliseconds before fading in for 400 milliseconds.
+ * Aditionally after those 800 milliseconds the element color is set to red.
*
- * Please note that this methods affects only the Effects queue. So the
- * following example is wrong:
+ * NOTE that this methods affects only methods which uses the queue like effects.
+ * So the following example is wrong:
*
* <pre>
- * $('#foo').css(CSS.COLOR.with(RGBColor.RED)).delay(800).css(CSS.COLOR.with(RGBColor.BLACK));
+ * $("#foo").css(CSS.COLOR.with(RGBColor.RED)).delay(800).css(CSS.COLOR.with(RGBColor.BLACK));
* </pre>
*
* The code above will not insert a delay of 800 ms between the css() calls !
- * For this kind of behavior, please check {@link #delay(int, String)}
+ * For this kind of behavior, you should execute these methods puting them in inline
+ * functions passed as argument to the delay() method, or adding them to the queue.
+ *
+ * <pre>
+ * $("#foo").css(CSS.COLOR.with(RGBColor.RED)).delay(800, lazy().css(CSS.COLOR.with(RGBColor.BLACK)).done());
+ * $("#foo").css(CSS.COLOR.with(RGBColor.RED)).delay(800).queue(lazy().css(CSS.COLOR.with(RGBColor.BLACK)).dequeue().done());
+ * </pre>
*/
- LazyGQuery<T> delay(int milliseconds);
+ LazyGQuery<T> delay(int milliseconds, Function... f);
/**
* Insert a delay (in ms) in the queue identified by the
- * <code>queueName</code> parameter. if <code>queueName</code> is null or
+ * <code>queueName</code> parameter, and optionally execute one o
+ * more functions if provided when the delay finishes.
+ *
+ * If <code>queueName</code> is null or
* equats to 'fx', the delay will be inserted to the Effects queue.
*
* Example :
*
* <pre class="code">
- * $('#foo').queue("colorQueue", lazy().css(CSS.COLOR.with(RGBColor.RED)).done())
+ * $("#foo").queue("colorQueue", lazy().css(CSS.COLOR.with(RGBColor.RED)).dequeue("colorQueue").done())
* .delay(800, "colorQueue")
* .queue("colorQueue", lazy().css(CSS.COLOR.with(RGBColor.BLACK)).done());
* </pre>
* black.
*
*/
- LazyGQuery<T> delay(int milliseconds, String queueName);
+ LazyGQuery<T> delay(int milliseconds, String queueName, Function... f);
/**
* Attach <code>handlers</code> to one or more events for all elements that
* Execute the next function on the Effects queue for the matched elements.
* This method is usefull to tell when a function you add in the Effects queue
* is ended and so the next function in the queue can start.
+ *
+ * Note: you should be sure to call dequeue() in all functions of a queue chain,
+ * otherwise the queue execution will be stopped.
*/
LazyGQuery<T> dequeue();
/**
- * Execute the next function on the queue for the matched elements. This
- * method is usefull to tell when a function you add in the Effects queue is
+ * Execute the next function on the queue named as queueName for the matched elements.
+ * This method is usefull to tell when a function you add in the Effects queue is
* ended and so the next function in the queue can start.
+ *
+ * If you are queuing functions in a named queue (not the Effects one),
+ * you do not need to call dequeue(queueName) since it is preformed automatically.
+ *
*/
LazyGQuery<T> dequeue(String queueName);
* $(e).css(CSS.BACKGROUNG_COLOR.with(RGBColor.RED));
* $(e).dequeue();
* }
- * }).animate("left:'-=500'", 400)
+ * })
+ * .animate("left:'-=500'", 400)
+ * .queue(lazy().css("color", "yellow");
+ *
* </pre>
*
* When this statement is executed, the element move to 500 px to left for 400
* ms, then its background color is changed to red and then move to 500px to
- * right for 400ms.
+ * right for 400ms, and finally its color is set to yellow.
*
* Please note that {@link #dequeue()} function is needed at the end of your
- * function to start the next function in the queue. {@see #dequeue()}
+ * function to start the next function in the queue. In lazy() methods you should
+ * call dequeue() just before the done() call.
+ * {@see #dequeue()}
*/
LazyGQuery<T> queue(Function f);
* $("#foo").queue("myQueue", new Function(){
* public void f(Element e){
* $(e).css(CSS.BACKGROUNG_COLOR.with(RGBColor.RED));
- * $(e).dequeue();
- * }
- * }).delay(500, "myQueue")
- * .queue("myQueue", new Function(){
- * public void f(Element e){
- * $(e).css(CSS.COLOR.with(RGBColor.YELLOW));
- * $(e).dequeue();
* }
- * });
+ * })
+ * .delay(500, "myQueue")
+ * .queue("myQueue", lazy().css(CSS.COLOR.with(RGBColor.YELLOW)).done());
* </pre>
*
* When this statement is executed, the background color of the element is set
* to red, then wait 500ms before to set the text color of the element to
* yellow. right for 400ms.
*
- * Please note that {@link #dequeue()} function is needed at the end of your
- * function to start the next function in the queue. {@see #dequeue()}
+ * NOTE: {@link #dequeue()} function is not needed at the end of your
+ * function unless you use the Effects ('fx') namespace.
+ * {@see #dequeue()}
*/
LazyGQuery<T> queue(String queueName, Function f);
* Example:
*
* <pre class="code">
- * $("#foo").animate(Properties.create("{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, Easing.SWING);
* </pre>
*
* @param p a {@link Properties} object containing css properties to animate.
* @param duration the duration in milliseconds of the animation
* @param easing the easing function to use for the transition
*/
- LazyEffects<T> animate(Properties p, int duration, Easing easing, Function... funcs);
+ LazyEffects<T> animate(Object stringOrProperties, int duration, Easing easing, Function... funcs);
/**
*
package com.google.gwt.query.client.plugins;
import com.google.gwt.dom.client.Element;
import com.google.gwt.dom.client.NativeEvent;
+import com.google.gwt.dom.client.Node;
import com.google.gwt.query.client.Function;
import com.google.gwt.query.client.GQuery;
import com.google.gwt.query.client.plugins.events.EventsListener;
@Override
public void run() {
dequeue();
+ g.each(funcs);
}
}
private int delay;
+ Function[] funcs;
+ GQuery g;
- public DelayFunction(int delayInMilliseconds) {
+ public DelayFunction(GQuery gquery, int delayInMilliseconds, Function... f) {
+ this.g = gquery;
this.delay = delayInMilliseconds;
+ this.funcs = f;
}
@Override
* Add a delay in the queue
*/
@SuppressWarnings("unchecked")
- public T delay(int milliseconds) {
- queue(new DelayFunction(milliseconds));
+ public T delay(int milliseconds, Function... funcs) {
+ queue(new DelayFunction(this, milliseconds));
return (T) this;
}
}
return null;
}
+
+ public void dequeueIfNotDoneYet(Element elem, Object o) {
+ if (o.equals(queue(elem, null).peek())) {
+ dequeue();
+ }
+ }
private void replacequeue(Element elem, Queue<?> queue) {
if (elem != null) {
import com.google.gwt.query.client.Function;
import com.google.gwt.query.client.GQuery;
+import com.google.gwt.user.client.Element;
public class SimpleNamedQueue extends QueuePlugin<SimpleNamedQueue>{
private String queueName;
@Override
- public SimpleNamedQueue delay(int milliseconds, String queueName) {
+ public SimpleNamedQueue delay(int milliseconds, String queueName, Function... f) {
this.queueName = queueName;
- return delay(milliseconds);
+ return delay(milliseconds, f);
}
@Override
- public SimpleNamedQueue queue(String queueName, Function func) {
+ public SimpleNamedQueue queue(final String queueName, final Function func) {
this.queueName = queueName;
- return queue(func);
+ return queue(new Function(){
+ @Override
+ public void f(Element e) {
+ func.f(e.<com.google.gwt.dom.client.Element>cast());
+ dequeueIfNotDoneYet(e, this);
+ }
+ });
}
@Override
projects / gwtquery.git / commitdiff