From 16c3908b0071d4a1605b7d3f5dd7a4dd63e60732 Mon Sep 17 00:00:00 2001 From: Julien Dramaix Date: Thu, 31 Mar 2011 21:22:49 +0000 Subject: [PATCH] - add unwrap() method - correct bug in replaceWith method : order of replacing element was not kept - add animations method : delay, queue, dequeue, clearQueue, animate, stop and slide* --- .../com/google/gwt/query/client/GQuery.java | 622 ++++++++++++++---- .../google/gwt/query/client/LazyGQuery.java | 385 +++++++++-- .../gwt/query/client/plugins/QueuePlugin.java | 76 ++- .../client/plugins/SimpleNamedQueue.java | 52 ++ 4 files changed, 966 insertions(+), 169 deletions(-) create mode 100644 gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/SimpleNamedQueue.java diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/GQuery.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/GQuery.java index 80d1122f..f26e70e3 100644 --- a/gwtquery-core/src/main/java/com/google/gwt/query/client/GQuery.java +++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/GQuery.java @@ -17,6 +17,7 @@ package com.google.gwt.query.client; import static com.google.gwt.query.client.plugins.Effects.Effects; import static com.google.gwt.query.client.plugins.Events.Events; +import static com.google.gwt.query.client.plugins.SimpleNamedQueue.SimpleNamedQueue; import com.google.gwt.core.client.GWT; import com.google.gwt.core.client.JavaScriptObject; @@ -44,7 +45,9 @@ import com.google.gwt.query.client.js.JsCache; import com.google.gwt.query.client.js.JsMap; import com.google.gwt.query.client.js.JsNodeArray; import com.google.gwt.query.client.js.JsUtils; +import com.google.gwt.query.client.plugins.Effects; import com.google.gwt.query.client.plugins.Plugin; +import com.google.gwt.query.client.plugins.effects.PropertiesAnimation.Easing; import com.google.gwt.query.client.plugins.events.EventsListener; import com.google.gwt.user.client.DOM; import com.google.gwt.user.client.Event; @@ -141,20 +144,6 @@ public class GQuery implements Lazy { : $((Element) event.getCurrentEventTarget().cast()); } - /** - * Wrap a GQuery around an existing node. - */ - public static GQuery $(Node n) { - return n == null ? $() : new GQuery(JsNodeArray.create(n)); - } - - /** - * Wrap a GQuery around existing Elements. - */ - public static GQuery $(NodeList elements) { - return new GQuery(elements); - } - /** * Create a new GQuery given a list of nodes, elements or widgets */ @@ -172,6 +161,20 @@ public class GQuery implements Lazy { return new GQuery(elements); } + /** + * Wrap a GQuery around an existing node. + */ + public static GQuery $(Node n) { + return n == null ? $() : new GQuery(JsNodeArray.create(n)); + } + + /** + * Wrap a GQuery around existing Elements. + */ + public static GQuery $(NodeList elements) { + return new GQuery(elements); + } + /** * This function accepts a string containing a CSS selector which is then used * to match a set of elements, or it accepts raw HTML creating a GQuery @@ -460,12 +463,16 @@ public class GQuery implements Lazy { return $wnd; }-*/; - private NodeList elements = JavaScriptObject.createArray().cast(); - private String currentSelector; + private NodeList elements = JavaScriptObject.createArray().cast(); + private GQuery previousObject; + protected GQuery(GQuery gq) { + this(gq == null ? null : gq.get()); + } + private GQuery() { } @@ -475,10 +482,6 @@ public class GQuery implements Lazy { } } - protected GQuery(GQuery gq) { - this(gq == null ? null : gq.get()); - } - private GQuery(JsNodeArray elements) { if (elements != null) { this.elements = elements; @@ -556,6 +559,142 @@ public class GQuery implements Lazy { return add(previousObject); } + /** + * The animate() method allows you to create animation effects on any numeric + * CSS property. All animated properties should be numeric, non-numeric cannot + * be animated using basic functionality. (For example, width, height, or left + * can be animated but background-color cannot be.) Property values are + * treated as a number of pixels unless otherwise specified. The units em and + * % can be specified where applicable. + * + * Example: + * + * 
+   *  //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);
+   *
+ * + * In addition to numeric values, each property can take the strings 'show', + * 'hide', and 'toggle'. These shortcuts allow for custom hiding and showing + * animations that take into account the display type of the element. Animated + * properties can also be relative. If a value is supplied with a leading += + * or -= sequence of characters, then the target value is computed by adding + * or subtracting the given number from the current value of the property. + * + * Example: + * + * 
+   *  //move the element from its original position to 500px to the left and 5OOpx down for 400ms.
+   *  //use a swing easing function for the transition
+   *  $("#foo").animate(Properties.create("{top:'+=500px',left:'+=500px'}"), 400, Easing.SWING);
+   *
+ * + * @param p 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 + */ + public GQuery animate(Properties p, int duration, + Easing easing, Function... funcs){ + return as(Effects).animate(p, duration, easing, funcs); + } + + /** + * The animate() method allows you to create animation effects on any numeric + * CSS property. All animated properties should be numeric, non-numeric cannot + * be animated using basic functionality. (For example, width, height, or left + * can be animated but background-color cannot be.) Property values are + * treated as a number of pixels unless otherwise specified. The units em and + * % can be specified where applicable. + * + * Example: + * + * 
+   *  //move the element from its original position to left:500px for 500ms
+   *  $("#foo").animate("left:'500'");
+   *
+ * + * In addition to numeric values, each property can take the strings 'show', + * 'hide', and 'toggle'. These shortcuts allow for custom hiding and showing + * animations that take into account the display type of the element. Animated + * properties can also be relative. If a value is supplied with a leading += + * or -= sequence of characters, then the target value is computed by adding + * or subtracting the given number from the current value of the property. + * + * Example: + * + * 
+   *  //move the element from its original position to 500px to the left for 500ms and
+   *  // change the background color of the element at the end of the animation
+   *  $("#foo").animate("left:'+=500'", new Function(){
+   *                  
+   *                 public void f(Element e){
+   *                   $(e).css(CSS.BACKGROUND_COLOR.with(RGBColor.RED);
+   *                 }
+   *                 
+   *              });
+   *
+ * + * The duration of the animation is 500ms. + * + * @param prop the property to animate : "cssName:'value'" + * @param funcs an array of {@link Function} called once the animation is + * complete + * @param duration the duration in milliseconds of the animation + */ + public GQuery animate(String prop, Function... funcs){ + return as(Effects).animate(prop, funcs); + } + + /** + * The animate() method allows you to create animation effects on any numeric + * CSS property. All animated properties should be numeric, non-numeric cannot + * be animated using basic functionality. (For example, width, height, or left + * can be animated but background-color cannot be.) Property values are + * treated as a number of pixels unless otherwise specified. The units em and + * % can be specified where applicable. + * + * + * Example: + * + * 
+   *  //move the element from its original position to left:500px for 2s
+   *  $("#foo").animate("left:'500px'", 2000);
+   *
+ * + * In addition to numeric values, each property can take the strings 'show', + * 'hide', and 'toggle'. These shortcuts allow for custom hiding and showing + * animations that take into account the display type of the element. Animated + * properties can also be relative. If a value is supplied with a leading += + * or -= sequence of characters, then the target value is computed by adding + * or subtracting the given number from the current value of the property. + * + * Example: + * + * 
+   *  //move the element from its original position to 500px to the left for 1000ms and
+   *  // change the background color of the element at the end of the animation
+   *  $("#foo").animate("left:'+=500'", 1000, new Function(){
+   *                  
+   *                 public void f(Element e){
+   *                   $(e).css(CSS.BACKGROUND_COLOR.with(RGBColor.RED);
+   *                 }
+   *                 
+   *              });
+   *
+ * + * + * @param prop the property to animate : "cssName:'value'" + * @param funcs an array of {@link Function} called once the animation is + * complete + * @param duration the duration in milliseconds of the animation + */ + public GQuery animate(String prop, int duration, Function... funcs) { + return as(Effects).animate(prop, duration, funcs); + } + /** * Append content to the inside of every matched element. This operation is * similar to doing an appendChild to all the specified elements, adding them @@ -766,6 +905,25 @@ public class GQuery implements Lazy { return find(filters); } + /** + * Remove from the Effects queue all {@link Function} that have not yet been + * run. + */ + public GQuery clearQueue() { + return as(Effects).clearQueue(); + } + + /** + * Remove from the queue all {@link Function} that have not yet been run. + */ + public GQuery clearQueue(String queueName) { + if (queueName == null || "fx".equalsIgnoreCase(queueName)) { + return as(Effects).clearQueue(); + } + + return as(SimpleNamedQueue).clearQueue(queueName); + } + /** * Bind a set of functions to the click event of each matched element. Or * trigger the event if no functions are provided. @@ -868,6 +1026,34 @@ public class GQuery implements Lazy { return this; } + /** + * Return a style property on the first matched element using type-safe + * enumerations. + * + * Ex : $("#myId").css(CSS.BACKGROUND_COLOR); + */ + public String css(HasCssValue property) { + return css(property, false); + } + + /** + * Return a style property on the first matched element using type-safe + * enumerations. + * + * The parameter force has a special meaning here: - When force is false, + * returns the value of the css property defined in the style attribute of the + * element. - Otherwise it returns the real computed value. + * + * For instance if you define 'display=none' not in the element style but in + * the css stylesheet, it returns an empty string unless you pass the + * parameter force=true. + * + * Ex : $("#myId").css(CSS.WIDTH, true); + */ + public String css(HasCssValue property, boolean force) { + return css(property.getCssName(), force); + } + /** * Set a key/value object as style properties to all matched elements. This * serves as the best way to set a large number of style properties on all @@ -930,34 +1116,6 @@ public class GQuery implements Lazy { return css(cssProperty.with(value)); } - /** - * Return a style property on the first matched element using type-safe - * enumerations. - * - * Ex : $("#myId").css(CSS.BACKGROUND_COLOR); - */ - public String css(HasCssValue property) { - return css(property, false); - } - - /** - * Return a style property on the first matched element using type-safe - * enumerations. - * - * The parameter force has a special meaning here: - When force is false, - * returns the value of the css property defined in the style attribute of the - * element. - Otherwise it returns the real computed value. - * - * For instance if you define 'display=none' not in the element style but in - * the css stylesheet, it returns an empty string unless you pass the - * parameter force=true. - * - * Ex : $("#myId").css(CSS.WIDTH, true); - */ - public String css(HasCssValue property, boolean force) { - return css(property.getCssName(), force); - } - /** * Set CSS a single style property on every matched element using type-safe * enumerations. This method allows you to set manually the value or set @@ -972,14 +1130,14 @@ public class GQuery implements Lazy { public GQuery css(TakesCssValue cssProperty, String value) { return css(cssProperty.getCssName(), value); } - + /** * Returns the numeric value of a css property. */ public double cur(String prop) { return cur(prop, false); } - + /** * Returns the numeric value of a css property. * @@ -990,7 +1148,7 @@ public class GQuery implements Lazy { public double cur(String prop, boolean force) { return size() == 0 ? 0 : styleImpl.cur(get(0), prop, force); } - + /** * Returns value at named data store for the element, as set by data(name, * value). @@ -998,7 +1156,7 @@ public class GQuery implements Lazy { public Object data(String name) { return data(elements.getItem(0), name, null); } - + /** * Returns value at named data store for the element, as set by data(name, * value) with desired return type. @@ -1009,7 +1167,7 @@ public class GQuery implements Lazy { public T data(String name, Class clz) { return (T) data(elements.getItem(0), name, null); } - + /** * Stores the value in the named spot with desired return type. */ @@ -1019,7 +1177,7 @@ public class GQuery implements Lazy { } return this; } - + /** * Bind a set of functions to the dblclick event of each matched element. Or * trigger the event if no functions are provided. @@ -1028,6 +1186,103 @@ public class GQuery implements Lazy { return bindOrFire(Event.ONDBLCLICK, null, f); } + /** + * Insert a delay (in ms) in the Effects queue. + * + * Example: + * + * 
+   * $('#foo').slideUp(300).delay(800).fadeIn(400); 
+   *
+ * + * When this statement is executed, the element slides up for 300 milliseconds + * and then pauses for 800 milliseconds before fading in for 400 milliseconds. + * + * Please note that this methods affects only the Effects queue. So the + * following example is wrong: + * + * 
+   * $('#foo').css(CSS.COLOR.with(RGBColor.RED)).delay(800).css(CSS.COLOR.with(RGBColor.BLACK)); 
+   *
+ * + * 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)} + */ + public GQuery delay(int milliseconds) { + return as(Effects).delay(milliseconds); + } + + /** + * Insert a delay (in ms) in the queue identified by the + * queueName parameter. if queueName is null or + * equats to 'fx', the delay will be inserted to the Effects queue. + * + * Example : + * + * 
+   * $('#foo').queue("colorQueue", lazy().css(CSS.COLOR.with(RGBColor.RED)).done())
+   *          .delay(800, "colorQueue")
+   *          .queue("colorQueue", lazy().css(CSS.COLOR.with(RGBColor.BLACK)).done()); 
+   *
+ * + * When this statement is executed, the text color of the element changes to + * red and then wait for 800 milliseconds before changes the text color to + * black. + * + */ + public GQuery delay(int milliseconds, String queueName) { + if (queueName == null || "fx".equalsIgnoreCase(queueName)) { + return as(Effects).delay(milliseconds); + } + + return as(SimpleNamedQueue).delay(milliseconds, queueName); + } + + /** + * 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. + */ + public GQuery dequeue(){ + return as(Effects).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 ended and so the next function in the queue can start. + */ + public GQuery dequeue(String queueName){ + if (queueName == null || "fx".equalsIgnoreCase(queueName)){ + return as(Effects).dequeue(); + } + + return as(SimpleNamedQueue).dequeue(queueName); + } + + /** + * Detach all matched elements from the DOM. This method is the same than + * {@link #remove()} method except all data and event handlers are not remove + * from the element. This method is useful when removed elements are to be + * reinserted into the DOM at a later time. + */ + public GQuery detach() { + return remove(null, false); + } + + + + /** + * Detach from the DOM all matched elements filtered by the + * filter.. This method is the same than {@link #remove(String)} + * method except all data and event handlers are not remove from the element. + * This method is useful when removed elements are to be reinserted into the + * DOM at a later time. + */ + public GQuery detach(String filter) { + return remove(filter, false); + } + /** * Run one or more Functions over each element of the GQuery. You have to * override one of these funcions: public void f(Element e) public String @@ -1043,7 +1298,7 @@ public class GQuery implements Lazy { } return this; } - + /** * Returns the working set of nodes as a Java array. Do NOT attempt to * modify this array, e.g. assign to its elements, or call Arrays.sort() @@ -1074,7 +1329,7 @@ public class GQuery implements Lazy { } return this; } - + /** * Revert the most recent 'destructive' operation, changing the set of matched * elements to its previous state (right before the destructive operation). @@ -1983,66 +2238,78 @@ public class GQuery implements Lazy { } /** - * Removes all matched elements from the DOM. - */ - public GQuery remove() { - return remove(null, true); - } - - /** - * Removes from the DOM all matched elements filtered by the - * filter. + * Put a {@link Function} at the end of the Effects queue. + * + * Example: + * + * 
+   * $("#foo").animate("left:'+=500'", 400)
+   *      .queue(new Function(){
+   *          public void f(Element e){
+   *             $(e).css(CSS.BACKGROUNG_COLOR.with(RGBColor.RED));
+   *             $(e).dequeue();     
+   *          }
+   *        }).animate("left:'-=500'", 400)
+   *
+ * + * 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. + * + * Please note that {@link #dequeue()} function is needed at the end of your + * function to start the next function in the queue. {@see #dequeue()} */ - public GQuery remove(String filter) { - return remove(filter, true); + public GQuery queue(Function f) { + return as(Effects).queue(f); } /** - * Detach all matched elements from the DOM. This method is the same than - * {@link #remove()} method except all data and event handlers are not remove - * from the element. This method is useful when removed elements are to be - * reinserted into the DOM at a later time. + * Put a {@link Function} at the end of a queue. + * + * Example: + * + * 
+   * $("#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();     
+   *          }
+   *         });
+   *
+ * + * 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()} */ - public GQuery detach() { - return remove(null, false); + public GQuery queue(String queueName, Function f){ + if (queueName == null || "fx".equalsIgnoreCase(queueName)){ + return as(Effects).queue(f); + } + return as(SimpleNamedQueue).queue(queueName,f); } /** - * Detach from the DOM all matched elements filtered by the - * filter.. This method is the same than {@link #remove(String)} - * method except all data and event handlers are not remove from the element. - * This method is useful when removed elements are to be reinserted into the - * DOM at a later time. + * Removes all matched elements from the DOM. */ - public GQuery detach(String filter) { - return remove(filter, false); + public GQuery remove() { + return remove(null, true); } /** - * Removes all matched elements from the DOM and cleans their data and bound - * events if the value of clean parameter is set to true. The - * filter parameter allows to filter the matched set to remove. + * Removes from the DOM all matched elements filtered by the + * filter. */ - protected GQuery remove(String filter, boolean clean) { - - for (Element e : elements()) { - if (filter == null || $(e).filter(filter).length() == 1) { - if (clean) { - //clean data linked to the children - cleanGQData($("*", e).elements()); - //clean data linked to the element itself - cleanGQData(e); - } - Widget w = getAssociatedWidget(e); - if (w != null) { - w.removeFromParent(); - } else { - e.removeFromParent(); - } - } - } - - return this; + public GQuery remove(String filter) { + return remove(filter, true); } /** @@ -2142,7 +2409,18 @@ public class GQuery implements Lazy { * from the DOM and not the new element that has replaced it. */ public GQuery replaceWith(GQuery target) { - return after(target).remove(); + for (Element el : elements()){ + Element nextSibling = el.getNextSiblingElement(); + + if (nextSibling != null){ + $(nextSibling).before(target); + }else{ + Element parent = el.getParentElement(); + $(parent).append(target); + } + $(el).remove(); + } + return this; } @@ -2153,7 +2431,19 @@ public class GQuery implements Lazy { * from the DOM and not the new element that has replaced it. */ public GQuery replaceWith(String html) { - return after(html).remove(); + for (Element el : elements()){ + Element nextSibling = el.getNextSiblingElement(); + + if (nextSibling != null){ + $(nextSibling).before(html); + }else{ + Element parent = el.getParentElement(); + $(parent).append(html); + } + $(el).remove(); + } + return this; + } /** @@ -2365,10 +2655,71 @@ public class GQuery implements Lazy { return new GQuery(slice); } + /** + * Reveal all matched elements by adjusting their height and firing an + * optional callback after completion. + */ + public Effects slideDown(Function... f) { + return as(Effects).slideDown(f); + } + + /** + * Reveal all matched elements by adjusting their height and firing an + * optional callback after completion. + */ + public Effects slideDown(int millisecs, Function... f) { + return as(Effects).slideDown(millisecs, f); + } + + /** + * Toggle the visibility of all matched elements by adjusting their height and + * 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 as(Effects).slideToggle(millisecs, f); + } + + + /** + * Hide all matched elements by adjusting their height and firing an optional + * callback after completion. + */ + public Effects slideUp(Function... f) { + return as(Effects).slideUp(f); + } + + /** + * Hide all matched elements by adjusting their height and firing an optional + * callback after completion. + */ + public Effects slideUp(int millisecs, Function... f) { + return as(Effects).slideUp(millisecs, f); + } + + /** + * Stop the animation currently running. + */ + public GQuery stop(){ + return stop(false); + } + + /** + * Stop the animation currently running. + */ + //TODO: implements jumpToEnd + public GQuery stop(boolean clearQueue){ + return as(Effects).stop(clearQueue); + } + public GQuery submit() { return as(Events).trigger(EventsListener.ONSUBMIT); } + + + /** * Return the text contained in the first matched element. */ @@ -2511,6 +2862,24 @@ public class GQuery implements Lazy { return JsUtils.unique(result.> cast()).cast(); } + /** + * This method removes the element's parent. The matched elements replaces + * their parents within the DOM structure. It is the inverse of + * {@link GQuery#wrap(GQuery)} method + * + * @return + */ + public GQuery unwrap() { + + for (Element parent : parent().elements()){ + if (!"body".equalsIgnoreCase(parent.getTagName())){ + GQuery $parent = $(parent); + $parent.replaceWith($parent.children()); + } + } + return this; + } + /** * Gets the content of the value attribute of the first matched element, * returns only the first value even if it is a multivalued element. To get an @@ -2874,6 +3243,33 @@ public class GQuery implements Lazy { return g; } + /** + * Removes all matched elements from the DOM and cleans their data and bound + * events if the value of clean parameter is set to true. The + * filter parameter allows to filter the matched set to remove. + */ + protected GQuery remove(String filter, boolean clean) { + + for (Element e : elements()) { + if (filter == null || $(e).filter(filter).length() == 1) { + if (clean) { + //clean data linked to the children + cleanGQData($("*", e).elements()); + //clean data linked to the element itself + cleanGQData(e); + } + Widget w = getAssociatedWidget(e); + if (w != null) { + w.removeFromParent(); + } else { + e.removeFromParent(); + } + } + } + + return this; + } + private void allNextSiblingElements(Element firstChildElement, JsNodeArray result, Element elem) { while (firstChildElement != null) { @@ -2904,6 +3300,13 @@ public class GQuery implements Lazy { } } + private void cleanGQData(Element... elements){ + for (Element el : elements){ + EventsListener.clean(el); + removeData(el, null); + } + } + private GQuery domManip(GQuery g, int func, Element... elms) { JsNodeArray newNodes = JsNodeArray.create(); if (elms.length == 0) { @@ -2976,7 +3379,7 @@ public class GQuery implements Lazy { } return res; } - + private void removeData(Element item, String name) { if (dataCache == null) { windowData = JavaScriptObject.createObject().cast(); @@ -2995,11 +3398,4 @@ public class GQuery implements Lazy { dataCache.delete(id); } } - - private void cleanGQData(Element... elements){ - for (Element el : elements){ - EventsListener.clean(el); - removeData(el, null); - } - } } 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 ef43e69d..b9417e28 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 @@ -16,6 +16,7 @@ package com.google.gwt.query.client; import static com.google.gwt.query.client.plugins.Effects.Effects; import static com.google.gwt.query.client.plugins.Events.Events; +import static com.google.gwt.query.client.plugins.SimpleNamedQueue.SimpleNamedQueue; import com.google.gwt.core.client.GWT; import com.google.gwt.core.client.JavaScriptObject; import com.google.gwt.core.client.JsArray; @@ -42,7 +43,9 @@ import com.google.gwt.query.client.js.JsCache; import com.google.gwt.query.client.js.JsMap; import com.google.gwt.query.client.js.JsNodeArray; import com.google.gwt.query.client.js.JsUtils; +import com.google.gwt.query.client.plugins.Effects; import com.google.gwt.query.client.plugins.Plugin; +import com.google.gwt.query.client.plugins.effects.PropertiesAnimation.Easing; import com.google.gwt.query.client.plugins.events.EventsListener; import com.google.gwt.user.client.DOM; import com.google.gwt.user.client.Event; @@ -102,6 +105,135 @@ public interface LazyGQuery extends LazyBase{ */ LazyGQuery andSelf(); + /** + * The animate() method allows you to create animation effects on any numeric + * CSS property. All animated properties should be numeric, non-numeric cannot + * be animated using basic functionality. (For example, width, height, or left + * can be animated but background-color cannot be.) Property values are + * treated as a number of pixels unless otherwise specified. The units em and + * % can be specified where applicable. + * + * Example: + * + * 
+   *  //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);
+   *
+ * + * In addition to numeric values, each property can take the strings 'show', + * 'hide', and 'toggle'. These shortcuts allow for custom hiding and showing + * animations that take into account the display type of the element. Animated + * properties can also be relative. If a value is supplied with a leading += + * or -= sequence of characters, then the target value is computed by adding + * or subtracting the given number from the current value of the property. + * + * Example: + * + * 
+   *  //move the element from its original position to 500px to the left and 5OOpx down for 400ms.
+   *  //use a swing easing function for the transition
+   *  $("#foo").animate(Properties.create("{top:'+=500px',left:'+=500px'}"), 400, Easing.SWING);
+   *
+ * + * @param p 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 animate(Properties p, int duration, Easing easing, Function... funcs); + + /** + * The animate() method allows you to create animation effects on any numeric + * CSS property. All animated properties should be numeric, non-numeric cannot + * be animated using basic functionality. (For example, width, height, or left + * can be animated but background-color cannot be.) Property values are + * treated as a number of pixels unless otherwise specified. The units em and + * % can be specified where applicable. + * + * Example: + * + * 
+   *  //move the element from its original position to left:500px for 500ms
+   *  $("#foo").animate("left:'500'");
+   *
+ * + * In addition to numeric values, each property can take the strings 'show', + * 'hide', and 'toggle'. These shortcuts allow for custom hiding and showing + * animations that take into account the display type of the element. Animated + * properties can also be relative. If a value is supplied with a leading += + * or -= sequence of characters, then the target value is computed by adding + * or subtracting the given number from the current value of the property. + * + * Example: + * + * 
+   *  //move the element from its original position to 500px to the left for 500ms and
+   *  // change the background color of the element at the end of the animation
+   *  $("#foo").animate("left:'+=500'", new Function(){
+   *                  
+   *                 public void f(Element e){
+   *                   $(e).css(CSS.BACKGROUND_COLOR.with(RGBColor.RED);
+   *                 }
+   *                 
+   *              });
+   *
+ * + * The duration of the animation is 500ms. + * + * @param prop the property to animate : "cssName:'value'" + * @param funcs an array of {@link Function} called once the animation is + * complete + * @param duration the duration in milliseconds of the animation + */ + LazyGQuery animate(String prop, Function... funcs); + + /** + * The animate() method allows you to create animation effects on any numeric + * CSS property. All animated properties should be numeric, non-numeric cannot + * be animated using basic functionality. (For example, width, height, or left + * can be animated but background-color cannot be.) Property values are + * treated as a number of pixels unless otherwise specified. The units em and + * % can be specified where applicable. + * + * + * Example: + * + * 
+   *  //move the element from its original position to left:500px for 2s
+   *  $("#foo").animate("left:'500px'", 2000);
+   *
+ * + * In addition to numeric values, each property can take the strings 'show', + * 'hide', and 'toggle'. These shortcuts allow for custom hiding and showing + * animations that take into account the display type of the element. Animated + * properties can also be relative. If a value is supplied with a leading += + * or -= sequence of characters, then the target value is computed by adding + * or subtracting the given number from the current value of the property. + * + * Example: + * + * 
+   *  //move the element from its original position to 500px to the left for 1000ms and
+   *  // change the background color of the element at the end of the animation
+   *  $("#foo").animate("left:'+=500'", 1000, new Function(){
+   *                  
+   *                 public void f(Element e){
+   *                   $(e).css(CSS.BACKGROUND_COLOR.with(RGBColor.RED);
+   *                 }
+   *                 
+   *              });
+   *
+ * + * + * @param prop the property to animate : "cssName:'value'" + * @param funcs an array of {@link Function} called once the animation is + * complete + * @param duration the duration in milliseconds of the animation + */ + LazyGQuery animate(String prop, int duration, Function... funcs); + /** * Append content to the inside of every matched element. This operation is * similar to doing an appendChild to all the specified elements, adding them @@ -244,6 +376,17 @@ public interface LazyGQuery extends LazyBase{ */ LazyGQuery children(String... filters); + /** + * Remove from the Effects queue all {@link Function} that have not yet been + * run. + */ + LazyGQuery clearQueue(); + + /** + * Remove from the queue all {@link Function} that have not yet been run. + */ + LazyGQuery clearQueue(String queueName); + /** * Bind a set of functions to the click event of each matched element. Or * trigger the event if no functions are provided. @@ -290,6 +433,30 @@ public interface LazyGQuery extends LazyBase{ */ LazyGQuery css(CssSetter... cssSetter); + /** + * Return a style property on the first matched element using type-safe + * enumerations. + * + * Ex : $("#myId").css(CSS.BACKGROUND_COLOR); + */ + String css(HasCssValue property); + + /** + * Return a style property on the first matched element using type-safe + * enumerations. + * + * The parameter force has a special meaning here: - When force is false, + * returns the value of the css property defined in the style attribute of the + * element. - Otherwise it returns the real computed value. + * + * For instance if you define 'display=none' not in the element style but in + * the css stylesheet, it returns an empty string unless you pass the + * parameter force=true. + * + * Ex : $("#myId").css(CSS.WIDTH, true); + */ + String css(HasCssValue property, boolean force); + /** * Set a key/value object as style properties to all matched elements. This * serves as the best way to set a large number of style properties on all @@ -327,30 +494,6 @@ public interface LazyGQuery extends LazyBase{ */ LazyGQuery css(String prop, String val); - /** - * Return a style property on the first matched element using type-safe - * enumerations. - * - * Ex : $("#myId").css(CSS.BACKGROUND_COLOR); - */ - String css(HasCssValue property); - - /** - * Return a style property on the first matched element using type-safe - * enumerations. - * - * The parameter force has a special meaning here: - When force is false, - * returns the value of the css property defined in the style attribute of the - * element. - Otherwise it returns the real computed value. - * - * For instance if you define 'display=none' not in the element style but in - * the css stylesheet, it returns an empty string unless you pass the - * parameter force=true. - * - * Ex : $("#myId").css(CSS.WIDTH, true); - */ - String css(HasCssValue property, boolean force); - /** * Set CSS a single style property on every matched element using type-safe * enumerations. This method allows you to set manually the value or set @@ -403,6 +546,81 @@ public interface LazyGQuery extends LazyBase{ */ LazyGQuery dblclick(Function... f); + /** + * Insert a delay (in ms) in the Effects queue. + * + * Example: + * + * 
+   * $('#foo').slideUp(300).delay(800).fadeIn(400); 
+   *
+ * + * When this statement is executed, the element slides up for 300 milliseconds + * and then pauses for 800 milliseconds before fading in for 400 milliseconds. + * + * Please note that this methods affects only the Effects queue. So the + * following example is wrong: + * + * 
+   * $('#foo').css(CSS.COLOR.with(RGBColor.RED)).delay(800).css(CSS.COLOR.with(RGBColor.BLACK)); 
+   *
+ * + * 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)} + */ + LazyGQuery delay(int milliseconds); + + /** + * Insert a delay (in ms) in the queue identified by the + * queueName parameter. if queueName is null or + * equats to 'fx', the delay will be inserted to the Effects queue. + * + * Example : + * + * 
+   * $('#foo').queue("colorQueue", lazy().css(CSS.COLOR.with(RGBColor.RED)).done())
+   *          .delay(800, "colorQueue")
+   *          .queue("colorQueue", lazy().css(CSS.COLOR.with(RGBColor.BLACK)).done()); 
+   *
+ * + * When this statement is executed, the text color of the element changes to + * red and then wait for 800 milliseconds before changes the text color to + * black. + * + */ + LazyGQuery delay(int milliseconds, String queueName); + + /** + * 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. + */ + LazyGQuery 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 ended and so the next function in the queue can start. + */ + LazyGQuery dequeue(String queueName); + + /** + * Detach all matched elements from the DOM. This method is the same than + * {@link #remove()} method except all data and event handlers are not remove + * from the element. This method is useful when removed elements are to be + * reinserted into the DOM at a later time. + */ + LazyGQuery detach(); + + /** + * Detach from the DOM all matched elements filtered by the + * filter.. This method is the same than {@link #remove(String)} + * method except all data and event handlers are not remove from the element. + * This method is useful when removed elements are to be reinserted into the + * DOM at a later time. + */ + LazyGQuery detach(String filter); + /** * Run one or more Functions over each element of the GQuery. You have to * override one of these funcions: public void f(Element e) public String @@ -962,32 +1180,68 @@ public interface LazyGQuery extends LazyBase{ LazyGQuery prevAll(); /** - * Removes all matched elements from the DOM. + * Put a {@link Function} at the end of the Effects queue. + * + * Example: + * + * 
+   * $("#foo").animate("left:'+=500'", 400)
+   *      .queue(new Function(){
+   *          public void f(Element e){
+   *             $(e).css(CSS.BACKGROUNG_COLOR.with(RGBColor.RED));
+   *             $(e).dequeue();     
+   *          }
+   *        }).animate("left:'-=500'", 400)
+   *
+ * + * 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. + * + * Please note that {@link #dequeue()} function is needed at the end of your + * function to start the next function in the queue. {@see #dequeue()} */ - LazyGQuery remove(); + LazyGQuery queue(Function f); /** - * Removes from the DOM all matched elements filtered by the - * filter. + * Put a {@link Function} at the end of a queue. + * + * Example: + * + * 
+   * $("#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();     
+   *          }
+   *         });
+   *
+ * + * 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()} */ - LazyGQuery remove(String filter); + LazyGQuery queue(String queueName, Function f); /** - * Detach all matched elements from the DOM. This method is the same than - * {@link #remove()} method except all data and event handlers are not remove - * from the element. This method is useful when removed elements are to be - * reinserted into the DOM at a later time. + * Removes all matched elements from the DOM. */ - LazyGQuery detach(); + LazyGQuery remove(); /** - * Detach from the DOM all matched elements filtered by the - * filter.. This method is the same than {@link #remove(String)} - * method except all data and event handlers are not remove from the element. - * This method is useful when removed elements are to be reinserted into the - * DOM at a later time. + * Removes from the DOM all matched elements filtered by the + * filter. */ - LazyGQuery detach(String filter); + LazyGQuery remove(String filter); /** * Remove the named attribute from every element in the matched set. @@ -1162,6 +1416,48 @@ public interface LazyGQuery extends LazyBase{ */ LazyGQuery slice(int start, int end); + /** + * Reveal all matched elements by adjusting their height and firing an + * optional callback after completion. + */ + Effects slideDown(Function... f); + + /** + * Reveal all matched elements by adjusting their height and firing an + * optional callback after completion. + */ + Effects slideDown(int millisecs, Function... f); + + /** + * Toggle the visibility of all matched elements by adjusting their height and + * 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 + */ + Effects slideToggle(int millisecs, Function... f); + + /** + * Hide all matched elements by adjusting their height and firing an optional + * callback after completion. + */ + Effects slideUp(Function... f); + + /** + * Hide all matched elements by adjusting their height and firing an optional + * callback after completion. + */ + Effects slideUp(int millisecs, Function... f); + + /** + * Stop the animation currently running. + */ + LazyGQuery stop(); + + /** + * Stop the animation currently running. + */ + LazyGQuery stop(boolean clearQueue); + LazyGQuery submit(); /** @@ -1236,6 +1532,15 @@ public interface LazyGQuery extends LazyBase{ */ JsNodeArray unique(JsNodeArray result); + /** + * This method removes the element's parent. The matched elements replaces + * their parents within the DOM structure. It is the inverse of + * {@link GQuery#wrap(GQuery)} method + * + * @return + */ + LazyGQuery unwrap(); + /** * Gets the content of the value attribute of the first matched element, * returns only the first value even if it is a multivalued element. To get an diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/QueuePlugin.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/QueuePlugin.java index b56fbb70..d78d5e99 100644 --- a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/QueuePlugin.java +++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/QueuePlugin.java @@ -18,6 +18,7 @@ package com.google.gwt.query.client.plugins; import com.google.gwt.dom.client.Element; import com.google.gwt.query.client.Function; import com.google.gwt.query.client.GQuery; +import com.google.gwt.user.client.Timer; import java.util.LinkedList; import java.util.Queue; @@ -26,12 +27,56 @@ import java.util.Queue; * Class used in plugins which need a queue system. */ public abstract class QueuePlugin> extends GQuery { - + + protected class DelayFunction extends Function { + + private class SimpleTimer extends Timer { + @Override + public void run() { + dequeue(); + } + + } + + private int delay; + + public DelayFunction(int delayInMilliseconds) { + this.delay = delayInMilliseconds; + } + + @Override + public void f() { + new SimpleTimer().schedule(delay); + + } + } + private static final String QUEUE_DATA_PREFIX = "GQueryQueue_"; protected QueuePlugin(GQuery gq) { super(gq); } + + /** + * + */ + @SuppressWarnings("unchecked") + public T clearQueue() { + for (Element e : elements()) { + queue(e, null).clear(); + } + return (T) this; + } + + + /** + * Add a delay in the queue + */ + @SuppressWarnings("unchecked") + public T delay(int milliseconds) { + queue(new DelayFunction(milliseconds)); + return (T) this; + } /** * Removes a queued function from the front of the queue and executes it. @@ -41,7 +86,7 @@ public abstract class QueuePlugin> extends GQuery { for (Element e : elements()) { dequeueCurrentAndRunNext(e); } - return (T)this; + return (T) this; } /** @@ -53,7 +98,7 @@ public abstract class QueuePlugin> extends GQuery { for (Element e : elements()) { queue(e, func); } - return (T)this; + return (T) this; } /** @@ -64,33 +109,32 @@ public abstract class QueuePlugin> extends GQuery { for (Element e : elements()) { replacequeue(e, queue); } - return (T)this; + return (T) this; } - + /** - * Stop the function which is currently in execution, remove it - * from the queue and start the next one. + * Stop the function which is currently in execution, remove it from the queue + * and start the next one. */ public T stop() { return stop(false); } - + /** - * Stop the function which is currently in execution and depending - * on the value of the parameter: - * - remove it from the queue and start the next one. - * - or remove all functions in the queue. + * Stop the function which is currently in execution and depending on the + * value of the parameter: - remove it from the queue and start the next one. + * - or remove all functions in the queue. */ @SuppressWarnings("unchecked") public T stop(boolean clearQueue) { for (Element e : elements()) { stop(e, clearQueue); } - return (T)this; + return (T) this; } protected String getQueueType() { - return QUEUE_DATA_PREFIX + this.getClass().getName(); + return QUEUE_DATA_PREFIX + this.getClass().getName(); } private void dequeueCurrentAndRunNext(Element elem) { @@ -107,7 +151,7 @@ public abstract class QueuePlugin> extends GQuery { } } } - + @SuppressWarnings("unchecked") private Queue queue(Element elem, S func) { if (elem != null) { @@ -133,7 +177,7 @@ public abstract class QueuePlugin> extends GQuery { data(elem, getQueueType(), queue); } } - + private void stop(Element elem, boolean clear) { Queue q = queue(elem, null); if (q != null) { diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/SimpleNamedQueue.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/SimpleNamedQueue.java new file mode 100644 index 00000000..c7d56a9f --- /dev/null +++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/SimpleNamedQueue.java @@ -0,0 +1,52 @@ +package com.google.gwt.query.client.plugins; + +import com.google.gwt.query.client.Function; +import com.google.gwt.query.client.GQuery; + +public class SimpleNamedQueue extends QueuePlugin{ + + public static final Class SimpleNamedQueue = SimpleNamedQueue.class; + protected SimpleNamedQueue(GQuery gq) { + super(gq); + } + + static { + GQuery.registerPlugin(SimpleNamedQueue.class, new Plugin() { + public SimpleNamedQueue init(GQuery gq) { + return new SimpleNamedQueue(gq); + } + }); + } + + private String queueName; + + @Override + public SimpleNamedQueue delay(int milliseconds, String queueName) { + this.queueName = queueName; + return delay(milliseconds); + } + + @Override + public SimpleNamedQueue queue(String queueName, Function func) { + this.queueName = queueName; + return queue(func); + } + + @Override + public GQuery dequeue(String queueName) { + this.queueName = queueName; + return dequeue(); + } + + @Override + public GQuery clearQueue(String queueName) { + this.queueName = queueName; + return clearQueue(); + } + + @Override + protected String getQueueType() { + return super.getQueueType() + (queueName != null ? queueName : ""); + } + +} -- 2.39.5