\r
import static com.google.gwt.query.client.plugins.Effects.Effects;\r
import static com.google.gwt.query.client.plugins.Events.Events;\r
+import static com.google.gwt.query.client.plugins.SimpleNamedQueue.SimpleNamedQueue;\r
\r
import com.google.gwt.core.client.GWT;\r
import com.google.gwt.core.client.JavaScriptObject;\r
import com.google.gwt.query.client.js.JsMap;\r
import com.google.gwt.query.client.js.JsNodeArray;\r
import com.google.gwt.query.client.js.JsUtils;\r
+import com.google.gwt.query.client.plugins.Effects;\r
import com.google.gwt.query.client.plugins.Plugin;\r
+import com.google.gwt.query.client.plugins.effects.PropertiesAnimation.Easing;\r
import com.google.gwt.query.client.plugins.events.EventsListener;\r
import com.google.gwt.user.client.DOM;\r
import com.google.gwt.user.client.Event;\r
: $((Element) event.getCurrentEventTarget().cast());\r
}\r
\r
- /**\r
- * Wrap a GQuery around an existing node.\r
- */\r
- public static GQuery $(Node n) {\r
- return n == null ? $() : new GQuery(JsNodeArray.create(n));\r
- }\r
-\r
- /**\r
- * Wrap a GQuery around existing Elements.\r
- */\r
- public static GQuery $(NodeList<Element> elements) {\r
- return new GQuery(elements);\r
- }\r
-\r
/**\r
* Create a new GQuery given a list of nodes, elements or widgets\r
*/\r
return new GQuery(elements);\r
}\r
\r
+ /**\r
+ * Wrap a GQuery around an existing node.\r
+ */\r
+ public static GQuery $(Node n) {\r
+ return n == null ? $() : new GQuery(JsNodeArray.create(n));\r
+ }\r
+\r
+ /**\r
+ * Wrap a GQuery around existing Elements.\r
+ */\r
+ public static GQuery $(NodeList<Element> elements) {\r
+ return new GQuery(elements);\r
+ }\r
+\r
/**\r
* This function accepts a string containing a CSS selector which is then used\r
* to match a set of elements, or it accepts raw HTML creating a GQuery\r
return $wnd;\r
}-*/;\r
\r
- private NodeList<Element> elements = JavaScriptObject.createArray().cast();\r
-\r
private String currentSelector;\r
\r
+ private NodeList<Element> elements = JavaScriptObject.createArray().cast();\r
+\r
private GQuery previousObject;\r
\r
+ protected GQuery(GQuery gq) {\r
+ this(gq == null ? null : gq.get());\r
+ }\r
+\r
private GQuery() {\r
}\r
\r
}\r
}\r
\r
- protected GQuery(GQuery gq) {\r
- this(gq == null ? null : gq.get());\r
- }\r
-\r
private GQuery(JsNodeArray elements) {\r
if (elements != null) {\r
this.elements = elements;\r
return add(previousObject);\r
}\r
\r
+ /**\r
+ * The animate() method allows you to create animation effects on any numeric\r
+ * CSS property. All animated properties should be numeric, non-numeric cannot\r
+ * be animated using basic functionality. (For example, width, height, or left\r
+ * can be animated but background-color cannot be.) Property values are\r
+ * treated as a number of pixels unless otherwise specified. The units em and\r
+ * % can be specified where applicable.\r
+ * \r
+ * Example:\r
+ * \r
+ * <pre class="code">\r
+ * //move the element from its original position to the position top:500px and left:500px for 400ms.\r
+ * //use a swing easing function for the transition\r
+ * $("#foo").animate(Properties.create("{top:'500px',left:'500px'}"), 400, Easing.SWING);\r
+ * </pre>\r
+ * \r
+ * In addition to numeric values, each property can take the strings 'show',\r
+ * 'hide', and 'toggle'. These shortcuts allow for custom hiding and showing\r
+ * animations that take into account the display type of the element. Animated\r
+ * properties can also be relative. If a value is supplied with a leading +=\r
+ * or -= sequence of characters, then the target value is computed by adding\r
+ * or subtracting the given number from the current value of the property.\r
+ * \r
+ * Example:\r
+ * \r
+ * <pre class="code">\r
+ * //move the element from its original position to 500px to the left and 5OOpx down for 400ms.\r
+ * //use a swing easing function for the transition\r
+ * $("#foo").animate(Properties.create("{top:'+=500px',left:'+=500px'}"), 400, Easing.SWING);\r
+ * </pre>\r
+ * \r
+ * @param p a {@link Properties} object containing css properties to animate.\r
+ * @param funcs an array of {@link Function} called once the animation is\r
+ * complete\r
+ * @param duration the duration in milliseconds of the animation\r
+ * @param easing the easing function to use for the transition\r
+ */\r
+ public GQuery animate(Properties p, int duration,\r
+ Easing easing, Function... funcs){\r
+ return as(Effects).animate(p, duration, easing, funcs);\r
+ }\r
+\r
+ /**\r
+ * The animate() method allows you to create animation effects on any numeric\r
+ * CSS property. All animated properties should be numeric, non-numeric cannot\r
+ * be animated using basic functionality. (For example, width, height, or left\r
+ * can be animated but background-color cannot be.) Property values are\r
+ * treated as a number of pixels unless otherwise specified. The units em and\r
+ * % can be specified where applicable.\r
+ * \r
+ * Example:\r
+ * \r
+ * <pre class="code">\r
+ * //move the element from its original position to left:500px for 500ms\r
+ * $("#foo").animate("left:'500'");\r
+ * </pre>\r
+ * \r
+ * In addition to numeric values, each property can take the strings 'show',\r
+ * 'hide', and 'toggle'. These shortcuts allow for custom hiding and showing\r
+ * animations that take into account the display type of the element. Animated\r
+ * properties can also be relative. If a value is supplied with a leading +=\r
+ * or -= sequence of characters, then the target value is computed by adding\r
+ * or subtracting the given number from the current value of the property.\r
+ * \r
+ * Example:\r
+ * \r
+ * <pre class="code">\r
+ * //move the element from its original position to 500px to the left for 500ms and\r
+ * // change the background color of the element at the end of the animation\r
+ * $("#foo").animate("left:'+=500'", new Function(){\r
+ * \r
+ * public void f(Element e){\r
+ * $(e).css(CSS.BACKGROUND_COLOR.with(RGBColor.RED);\r
+ * }\r
+ * \r
+ * });\r
+ * </pre>\r
+ * \r
+ * The duration of the animation is 500ms.\r
+ * \r
+ * @param prop the property to animate : "cssName:'value'"\r
+ * @param funcs an array of {@link Function} called once the animation is\r
+ * complete\r
+ * @param duration the duration in milliseconds of the animation\r
+ */\r
+ public GQuery animate(String prop, Function... funcs){\r
+ return as(Effects).animate(prop, funcs);\r
+ }\r
+\r
+ /**\r
+ * The animate() method allows you to create animation effects on any numeric\r
+ * CSS property. All animated properties should be numeric, non-numeric cannot\r
+ * be animated using basic functionality. (For example, width, height, or left\r
+ * can be animated but background-color cannot be.) Property values are\r
+ * treated as a number of pixels unless otherwise specified. The units em and\r
+ * % can be specified where applicable.\r
+ *\r
+ * \r
+ * Example:\r
+ * \r
+ * <pre class="code">\r
+ * //move the element from its original position to left:500px for 2s\r
+ * $("#foo").animate("left:'500px'", 2000);\r
+ * </pre>\r
+ * \r
+ * In addition to numeric values, each property can take the strings 'show',\r
+ * 'hide', and 'toggle'. These shortcuts allow for custom hiding and showing\r
+ * animations that take into account the display type of the element. Animated\r
+ * properties can also be relative. If a value is supplied with a leading +=\r
+ * or -= sequence of characters, then the target value is computed by adding\r
+ * or subtracting the given number from the current value of the property.\r
+ * \r
+ * Example:\r
+ * \r
+ * <pre class="code">\r
+ * //move the element from its original position to 500px to the left for 1000ms and\r
+ * // change the background color of the element at the end of the animation\r
+ * $("#foo").animate("left:'+=500'", 1000, new Function(){\r
+ * \r
+ * public void f(Element e){\r
+ * $(e).css(CSS.BACKGROUND_COLOR.with(RGBColor.RED);\r
+ * }\r
+ * \r
+ * });\r
+ * </pre>\r
+ * \r
+ * \r
+ * @param prop the property to animate : "cssName:'value'"\r
+ * @param funcs an array of {@link Function} called once the animation is\r
+ * complete\r
+ * @param duration the duration in milliseconds of the animation\r
+ */\r
+ public GQuery animate(String prop, int duration, Function... funcs) {\r
+ return as(Effects).animate(prop, duration, funcs);\r
+ }\r
+\r
/**\r
* Append content to the inside of every matched element. This operation is\r
* similar to doing an appendChild to all the specified elements, adding them\r
return find(filters);\r
}\r
\r
+ /**\r
+ * Remove from the Effects queue all {@link Function} that have not yet been\r
+ * run.\r
+ */\r
+ public GQuery clearQueue() {\r
+ return as(Effects).clearQueue();\r
+ }\r
+\r
+ /**\r
+ * Remove from the queue all {@link Function} that have not yet been run.\r
+ */\r
+ public GQuery clearQueue(String queueName) {\r
+ if (queueName == null || "fx".equalsIgnoreCase(queueName)) {\r
+ return as(Effects).clearQueue();\r
+ }\r
+\r
+ return as(SimpleNamedQueue).clearQueue(queueName);\r
+ }\r
+\r
/**\r
* Bind a set of functions to the click event of each matched element. Or\r
* trigger the event if no functions are provided.\r
return this;\r
}\r
\r
+ /**\r
+ * Return a style property on the first matched element using type-safe\r
+ * enumerations.\r
+ * \r
+ * Ex : $("#myId").css(CSS.BACKGROUND_COLOR);\r
+ */\r
+ public String css(HasCssValue property) {\r
+ return css(property, false);\r
+ }\r
+\r
+ /**\r
+ * Return a style property on the first matched element using type-safe\r
+ * enumerations.\r
+ * \r
+ * The parameter force has a special meaning here: - When force is false,\r
+ * returns the value of the css property defined in the style attribute of the\r
+ * element. - Otherwise it returns the real computed value.\r
+ * \r
+ * For instance if you define 'display=none' not in the element style but in\r
+ * the css stylesheet, it returns an empty string unless you pass the\r
+ * parameter force=true.\r
+ * \r
+ * Ex : $("#myId").css(CSS.WIDTH, true);\r
+ */\r
+ public String css(HasCssValue property, boolean force) {\r
+ return css(property.getCssName(), force);\r
+ }\r
+\r
/**\r
* Set a key/value object as style properties to all matched elements. This\r
* serves as the best way to set a large number of style properties on all\r
return css(cssProperty.with(value));\r
}\r
\r
- /**\r
- * Return a style property on the first matched element using type-safe\r
- * enumerations.\r
- * \r
- * Ex : $("#myId").css(CSS.BACKGROUND_COLOR);\r
- */\r
- public String css(HasCssValue property) {\r
- return css(property, false);\r
- }\r
-\r
- /**\r
- * Return a style property on the first matched element using type-safe\r
- * enumerations.\r
- * \r
- * The parameter force has a special meaning here: - When force is false,\r
- * returns the value of the css property defined in the style attribute of the\r
- * element. - Otherwise it returns the real computed value.\r
- * \r
- * For instance if you define 'display=none' not in the element style but in\r
- * the css stylesheet, it returns an empty string unless you pass the\r
- * parameter force=true.\r
- * \r
- * Ex : $("#myId").css(CSS.WIDTH, true);\r
- */\r
- public String css(HasCssValue property, boolean force) {\r
- return css(property.getCssName(), force);\r
- }\r
-\r
/**\r
* Set CSS a single style property on every matched element using type-safe\r
* enumerations. This method allows you to set manually the value or set\r
public GQuery css(TakesCssValue<?> cssProperty, String value) {\r
return css(cssProperty.getCssName(), value);\r
}\r
-\r
+ \r
/**\r
* Returns the numeric value of a css property.\r
*/\r
public double cur(String prop) {\r
return cur(prop, false);\r
}\r
-\r
+ \r
/**\r
* Returns the numeric value of a css property.\r
* \r
public double cur(String prop, boolean force) {\r
return size() == 0 ? 0 : styleImpl.cur(get(0), prop, force);\r
}\r
-\r
+ \r
/**\r
* Returns value at named data store for the element, as set by data(name,\r
* value).\r
public Object data(String name) {\r
return data(elements.getItem(0), name, null);\r
}\r
-\r
+ \r
/**\r
* Returns value at named data store for the element, as set by data(name,\r
* value) with desired return type.\r
public <T> T data(String name, Class<T> clz) {\r
return (T) data(elements.getItem(0), name, null);\r
}\r
-\r
+ \r
/**\r
* Stores the value in the named spot with desired return type.\r
*/\r
}\r
return this;\r
}\r
-\r
+ \r
/**\r
* Bind a set of functions to the dblclick event of each matched element. Or\r
* trigger the event if no functions are provided.\r
return bindOrFire(Event.ONDBLCLICK, null, f);\r
}\r
\r
+ /**\r
+ * Insert a delay (in ms) in the Effects queue.\r
+ * \r
+ * Example:\r
+ * \r
+ * <pre class="code">\r
+ * $('#foo').slideUp(300).delay(800).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
+ * \r
+ * Please note that this methods affects only the Effects queue. So the\r
+ * following example is wrong:\r
+ * \r
+ * <pre>\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
+ */\r
+ public GQuery delay(int milliseconds) {\r
+ return as(Effects).delay(milliseconds);\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
+ * 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
+ * .delay(800, "colorQueue")\r
+ * .queue("colorQueue", lazy().css(CSS.COLOR.with(RGBColor.BLACK)).done()); \r
+ * </pre>\r
+ * \r
+ * When this statement is executed, the text color of the element changes to\r
+ * red and then wait for 800 milliseconds before changes the text color to\r
+ * black.\r
+ * \r
+ */\r
+ public GQuery delay(int milliseconds, String queueName) {\r
+ if (queueName == null || "fx".equalsIgnoreCase(queueName)) {\r
+ return as(Effects).delay(milliseconds);\r
+ }\r
+\r
+ return as(SimpleNamedQueue).delay(milliseconds, queueName);\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
+ public GQuery dequeue(){\r
+ return as(Effects).dequeue();\r
+ }\r
+ \r
+ /**\r
+ * Execute the next function on the 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
+ public GQuery dequeue(String queueName){\r
+ if (queueName == null || "fx".equalsIgnoreCase(queueName)){\r
+ return as(Effects).dequeue();\r
+ }\r
+ \r
+ return as(SimpleNamedQueue).dequeue(queueName);\r
+ }\r
+ \r
+ /**\r
+ * Detach all matched elements from the DOM. This method is the same than\r
+ * {@link #remove()} method except all data and event handlers are not remove\r
+ * from the element. This method is useful when removed elements are to be\r
+ * reinserted into the DOM at a later time.\r
+ */\r
+ public GQuery detach() {\r
+ return remove(null, false);\r
+ }\r
+ \r
+\r
+ \r
+ /**\r
+ * Detach from the DOM all matched elements filtered by the\r
+ * <code>filter</code>.. This method is the same than {@link #remove(String)}\r
+ * method except all data and event handlers are not remove from the element.\r
+ * This method is useful when removed elements are to be reinserted into the\r
+ * DOM at a later time.\r
+ */\r
+ public GQuery detach(String filter) {\r
+ return remove(filter, false);\r
+ }\r
+ \r
/**\r
* Run one or more Functions over each element of the GQuery. You have to\r
* override one of these funcions: public void f(Element e) public String\r
}\r
return this;\r
}\r
-\r
+ \r
/**\r
* Returns the working set of nodes as a Java array. <b>Do NOT</b> attempt to\r
* modify this array, e.g. assign to its elements, or call Arrays.sort()\r
}\r
return this;\r
}\r
-\r
+ \r
/**\r
* Revert the most recent 'destructive' operation, changing the set of matched\r
* elements to its previous state (right before the destructive operation).\r
}\r
\r
/**\r
- * Removes all matched elements from the DOM.\r
- */\r
- public GQuery remove() {\r
- return remove(null, true);\r
- }\r
-\r
- /**\r
- * Removes from the DOM all matched elements filtered by the\r
- * <code>filter</code>.\r
+ * Put a {@link Function} at the end of the Effects queue.\r
+ * \r
+ * Example:\r
+ * \r
+ * <pre class="code">\r
+ * $("#foo").animate("left:'+=500'", 400)\r
+ * .queue(new Function(){\r
+ * public void f(Element e){\r
+ * $(e).css(CSS.BACKGROUNG_COLOR.with(RGBColor.RED));\r
+ * $(e).dequeue(); \r
+ * }\r
+ * }).animate("left:'-=500'", 400)\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
+ * \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
*/\r
- public GQuery remove(String filter) {\r
- return remove(filter, true);\r
+ public GQuery queue(Function f) {\r
+ return as(Effects).queue(f);\r
}\r
\r
/**\r
- * Detach all matched elements from the DOM. This method is the same than\r
- * {@link #remove()} method except all data and event handlers are not remove\r
- * from the element. This method is useful when removed elements are to be\r
- * reinserted into the DOM at a later time.\r
+ * Put a {@link Function} at the end of a queue.\r
+ * \r
+ * Example:\r
+ * \r
+ * <pre class="code">\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
+ * </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
*/\r
- public GQuery detach() {\r
- return remove(null, false);\r
+ public GQuery queue(String queueName, Function f){\r
+ if (queueName == null || "fx".equalsIgnoreCase(queueName)){\r
+ return as(Effects).queue(f);\r
+ }\r
+ return as(SimpleNamedQueue).queue(queueName,f);\r
}\r
\r
/**\r
- * Detach from the DOM all matched elements filtered by the\r
- * <code>filter</code>.. This method is the same than {@link #remove(String)}\r
- * method except all data and event handlers are not remove from the element.\r
- * This method is useful when removed elements are to be reinserted into the\r
- * DOM at a later time.\r
+ * Removes all matched elements from the DOM.\r
*/\r
- public GQuery detach(String filter) {\r
- return remove(filter, false);\r
+ public GQuery remove() {\r
+ return remove(null, true);\r
}\r
\r
/**\r
- * Removes all matched elements from the DOM and cleans their data and bound\r
- * events if the value of <code>clean</code> parameter is set to true. The\r
- * <code> filter</code> parameter allows to filter the matched set to remove.\r
+ * Removes from the DOM all matched elements filtered by the\r
+ * <code>filter</code>.\r
*/\r
- protected GQuery remove(String filter, boolean clean) {\r
- \r
- for (Element e : elements()) {\r
- if (filter == null || $(e).filter(filter).length() == 1) {\r
- if (clean) {\r
- //clean data linked to the children\r
- cleanGQData($("*", e).elements());\r
- //clean data linked to the element itself\r
- cleanGQData(e);\r
- }\r
- Widget w = getAssociatedWidget(e);\r
- if (w != null) {\r
- w.removeFromParent();\r
- } else {\r
- e.removeFromParent();\r
- }\r
- }\r
- }\r
-\r
- return this;\r
+ public GQuery remove(String filter) {\r
+ return remove(filter, true);\r
}\r
\r
/**\r
* from the DOM and not the new element that has replaced it.\r
*/\r
public GQuery replaceWith(GQuery target) {\r
- return after(target).remove();\r
+ for (Element el : elements()){\r
+ Element nextSibling = el.getNextSiblingElement();\r
+ \r
+ if (nextSibling != null){\r
+ $(nextSibling).before(target);\r
+ }else{\r
+ Element parent = el.getParentElement();\r
+ $(parent).append(target);\r
+ }\r
+ $(el).remove();\r
+ }\r
+ return this;\r
\r
}\r
\r
* from the DOM and not the new element that has replaced it.\r
*/\r
public GQuery replaceWith(String html) {\r
- return after(html).remove();\r
+ for (Element el : elements()){\r
+ Element nextSibling = el.getNextSiblingElement();\r
+ \r
+ if (nextSibling != null){\r
+ $(nextSibling).before(html);\r
+ }else{\r
+ Element parent = el.getParentElement();\r
+ $(parent).append(html);\r
+ }\r
+ $(el).remove();\r
+ }\r
+ return this;\r
+\r
}\r
\r
/**\r
return new GQuery(slice);\r
}\r
\r
+ /**\r
+ * Reveal all matched elements by adjusting their height and firing an\r
+ * optional callback after completion.\r
+ */\r
+ public Effects slideDown(Function... f) {\r
+ return as(Effects).slideDown(f);\r
+ }\r
+\r
+ /**\r
+ * Reveal all matched elements by adjusting their height and firing an\r
+ * optional callback after completion.\r
+ */\r
+ public Effects slideDown(int millisecs, Function... f) {\r
+ return as(Effects).slideDown(millisecs, f);\r
+ }\r
+\r
+ /**\r
+ * Toggle the visibility of all matched elements by adjusting their height and\r
+ * firing an optional callback after completion. Only the height is adjusted\r
+ * for this animation, causing all matched elements to be hidden or shown in a\r
+ * "sliding" manner\r
+ */\r
+ public Effects slideToggle(int millisecs, Function... f) {\r
+ return as(Effects).slideToggle(millisecs, f);\r
+ }\r
+ \r
+ \r
+ /**\r
+ * Hide all matched elements by adjusting their height and firing an optional\r
+ * callback after completion.\r
+ */\r
+ public Effects slideUp(Function... f) {\r
+ return as(Effects).slideUp(f);\r
+ }\r
+\r
+ /**\r
+ * Hide all matched elements by adjusting their height and firing an optional\r
+ * callback after completion.\r
+ */\r
+ public Effects slideUp(int millisecs, Function... f) {\r
+ return as(Effects).slideUp(millisecs, f);\r
+ }\r
+ \r
+ /**\r
+ * Stop the animation currently running.\r
+ */\r
+ public GQuery stop(){\r
+ return stop(false);\r
+ }\r
+\r
+ /**\r
+ * Stop the animation currently running.\r
+ */\r
+ //TODO: implements jumpToEnd\r
+ public GQuery stop(boolean clearQueue){\r
+ return as(Effects).stop(clearQueue);\r
+ }\r
+\r
public GQuery submit() {\r
return as(Events).trigger(EventsListener.ONSUBMIT);\r
}\r
\r
+\r
+ \r
+\r
/**\r
* Return the text contained in the first matched element.\r
*/\r
return JsUtils.unique(result.<JsArray<Element>> cast()).cast();\r
}\r
\r
+ /**\r
+ * This method removes the element's parent. The matched elements replaces\r
+ * their parents within the DOM structure. It is the inverse of\r
+ * {@link GQuery#wrap(GQuery)} method\r
+ * \r
+ * @return\r
+ */\r
+ public GQuery unwrap() {\r
+\r
+ for (Element parent : parent().elements()){\r
+ if (!"body".equalsIgnoreCase(parent.getTagName())){\r
+ GQuery $parent = $(parent);\r
+ $parent.replaceWith($parent.children());\r
+ }\r
+ }\r
+ return this;\r
+ }\r
+ \r
/**\r
* Gets the content of the value attribute of the first matched element,\r
* returns only the first value even if it is a multivalued element. To get an\r
return g;\r
}\r
\r
+ /**\r
+ * Removes all matched elements from the DOM and cleans their data and bound\r
+ * events if the value of <code>clean</code> parameter is set to true. The\r
+ * <code> filter</code> parameter allows to filter the matched set to remove.\r
+ */\r
+ protected GQuery remove(String filter, boolean clean) {\r
+ \r
+ for (Element e : elements()) {\r
+ if (filter == null || $(e).filter(filter).length() == 1) {\r
+ if (clean) {\r
+ //clean data linked to the children\r
+ cleanGQData($("*", e).elements());\r
+ //clean data linked to the element itself\r
+ cleanGQData(e);\r
+ }\r
+ Widget w = getAssociatedWidget(e);\r
+ if (w != null) {\r
+ w.removeFromParent();\r
+ } else {\r
+ e.removeFromParent();\r
+ }\r
+ }\r
+ }\r
+\r
+ return this;\r
+ }\r
+\r
private void allNextSiblingElements(Element firstChildElement,\r
JsNodeArray result, Element elem) {\r
while (firstChildElement != null) {\r
}\r
}\r
\r
+ private void cleanGQData(Element... elements){\r
+ for (Element el : elements){\r
+ EventsListener.clean(el);\r
+ removeData(el, null);\r
+ }\r
+ }\r
+\r
private GQuery domManip(GQuery g, int func, Element... elms) {\r
JsNodeArray newNodes = JsNodeArray.create();\r
if (elms.length == 0) {\r
}\r
return res;\r
}\r
-\r
+ \r
private void removeData(Element item, String name) {\r
if (dataCache == null) {\r
windowData = JavaScriptObject.createObject().cast();\r
dataCache.delete(id);\r
}\r
}\r
- \r
- private void cleanGQData(Element... elements){\r
- for (Element el : elements){\r
- EventsListener.clean(el);\r
- removeData(el, null);\r
- }\r
- }\r
}\r
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;
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;
*/
LazyGQuery<T> 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:
+ *
+ * <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);
+ * </pre>
+ *
+ * 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:
+ *
+ * <pre class="code">
+ * //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);
+ * </pre>
+ *
+ * @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<T> 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:
+ *
+ * <pre class="code">
+ * //move the element from its original position to left:500px for 500ms
+ * $("#foo").animate("left:'500'");
+ * </pre>
+ *
+ * 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:
+ *
+ * <pre class="code">
+ * //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);
+ * }
+ *
+ * });
+ * </pre>
+ *
+ * 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<T> 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:
+ *
+ * <pre class="code">
+ * //move the element from its original position to left:500px for 2s
+ * $("#foo").animate("left:'500px'", 2000);
+ * </pre>
+ *
+ * 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:
+ *
+ * <pre class="code">
+ * //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);
+ * }
+ *
+ * });
+ * </pre>
+ *
+ *
+ * @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<T> 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
*/
LazyGQuery<T> children(String... filters);
+ /**
+ * Remove from the Effects queue all {@link Function} that have not yet been
+ * run.
+ */
+ LazyGQuery<T> clearQueue();
+
+ /**
+ * Remove from the queue all {@link Function} that have not yet been run.
+ */
+ LazyGQuery<T> 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.
*/
LazyGQuery<T> 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
*/
LazyGQuery<T> 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
*/
LazyGQuery<T> dblclick(Function... f);
+ /**
+ * Insert a delay (in ms) in the Effects queue.
+ *
+ * Example:
+ *
+ * <pre class="code">
+ * $('#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.
+ *
+ * Please note that this methods affects only the Effects queue. So the
+ * following example is wrong:
+ *
+ * <pre>
+ * $('#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)}
+ */
+ LazyGQuery<T> delay(int milliseconds);
+
+ /**
+ * Insert a delay (in ms) in the queue identified by the
+ * <code>queueName</code> parameter. 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())
+ * .delay(800, "colorQueue")
+ * .queue("colorQueue", lazy().css(CSS.COLOR.with(RGBColor.BLACK)).done());
+ * </pre>
+ *
+ * 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<T> 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<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 ended and so the next function in the queue can start.
+ */
+ LazyGQuery<T> 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<T> detach();
+
+ /**
+ * Detach from the DOM all matched elements filtered by the
+ * <code>filter</code>.. 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<T> 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
LazyGQuery<T> prevAll();
/**
- * Removes all matched elements from the DOM.
+ * Put a {@link Function} at the end of the Effects queue.
+ *
+ * Example:
+ *
+ * <pre class="code">
+ * $("#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)
+ * </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.
+ *
+ * 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<T> remove();
+ LazyGQuery<T> queue(Function f);
/**
- * Removes from the DOM all matched elements filtered by the
- * <code>filter</code>.
+ * Put a {@link Function} at the end of a queue.
+ *
+ * Example:
+ *
+ * <pre class="code">
+ * $("#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();
+ * }
+ * });
+ * </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()}
*/
- LazyGQuery<T> remove(String filter);
+ LazyGQuery<T> 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<T> detach();
+ LazyGQuery<T> remove();
/**
- * Detach from the DOM all matched elements filtered by the
- * <code>filter</code>.. 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
+ * <code>filter</code>.
*/
- LazyGQuery<T> detach(String filter);
+ LazyGQuery<T> remove(String filter);
/**
* Remove the named attribute from every element in the matched set.
*/
LazyGQuery<T> 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<T> stop();
+
+ /**
+ * Stop the animation currently running.
+ */
+ LazyGQuery<T> stop(boolean clearQueue);
+
LazyGQuery<T> submit();
/**
*/
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<T> 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
projects / gwtquery.git / commitdiff