Merge pull request #252 from manolo/master

Support for '%' and other units in CSS3 animations, Fix broken code and tests.

6 files changed, 87 insertions, 135 deletions

diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/LazyGQuery.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/LazyGQuery.java
index 2d9ce894..da25dba4 100644
--- a/gwtquery-core/src/main/java/com/google/gwt/query/client/LazyGQuery.java
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/LazyGQuery.java
@@ -12,52 +12,23 @@
  * the License.
  */
 package com.google.gwt.query.client;
-import static com.google.gwt.query.client.plugins.QueuePlugin.*;
-import java.util.ArrayList;
-import java.util.Arrays;
 import java.util.List;
 import java.util.Map;
-import com.google.gwt.core.client.GWT;
-import com.google.gwt.core.client.JavaScriptObject;
-import com.google.gwt.core.client.JsArray;
-import com.google.gwt.core.client.JsArrayMixed;
-import com.google.gwt.core.client.JsArrayString;
-import com.google.gwt.core.client.ScriptInjector;
-import com.google.gwt.dom.client.*;
-import com.google.gwt.dom.client.Style.Display;
+
+import com.google.gwt.dom.client.Element;
+import com.google.gwt.dom.client.Node;
+import com.google.gwt.dom.client.NodeList;
 import com.google.gwt.dom.client.Style.HasCssName;
+import com.google.gwt.query.client.GQuery.Offset;
 import com.google.gwt.query.client.css.CSS;
 import com.google.gwt.query.client.css.HasCssValue;
 import com.google.gwt.query.client.css.TakesCssValue;
 import com.google.gwt.query.client.css.TakesCssValue.CssSetter;
-import com.google.gwt.query.client.impl.AttributeImpl;
-import com.google.gwt.query.client.impl.DocumentStyleImpl;
-import com.google.gwt.query.client.impl.SelectorEngine;
-import com.google.gwt.query.client.js.JsCache;
-import com.google.gwt.query.client.js.JsMap;
 import com.google.gwt.query.client.js.JsNamedArray;
 import com.google.gwt.query.client.js.JsNodeArray;
-import com.google.gwt.query.client.js.JsObjectArray;
-import com.google.gwt.query.client.js.JsUtils;
 import com.google.gwt.query.client.plugins.Effects;
-import com.google.gwt.query.client.plugins.Events;
-import com.google.gwt.query.client.plugins.Plugin;
-import com.google.gwt.query.client.plugins.Widgets;
-import com.google.gwt.query.client.plugins.ajax.Ajax;
-import com.google.gwt.query.client.plugins.ajax.Ajax.Settings;
-import com.google.gwt.query.client.plugins.deferred.Deferred;
 import com.google.gwt.query.client.plugins.effects.PropertiesAnimation.Easing;
-import com.google.gwt.query.client.plugins.effects.Transitions;
-import com.google.gwt.query.client.plugins.events.EventsListener;
-import com.google.gwt.query.client.plugins.widgets.WidgetsUtils;
-import com.google.gwt.regexp.shared.RegExp;
-import com.google.gwt.user.client.DOM;
-import com.google.gwt.user.client.Event;
-import com.google.gwt.user.client.EventListener;
-import com.google.gwt.user.client.Window;
-import com.google.gwt.user.client.ui.IsWidget;
 import com.google.gwt.user.client.ui.Widget;
-import com.google.gwt.query.client.LazyBase;
 
 public interface LazyGQuery<T> extends LazyBase<T>{
 
diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/js/JsCache.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/js/JsCache.java
index fa604fe8..c8f00a6c 100644
--- a/gwtquery-core/src/main/java/com/google/gwt/query/client/js/JsCache.java
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/js/JsCache.java
@@ -79,7 +79,7 @@ public class JsCache extends JavaScriptObject {
     }
     return (T)o;
   }
-  
+
   public final native <T> T get(Object id) /*-{
     return @com.google.gwt.query.client.js.JsCache::gwtBox(*)([ this && this[id] ]);
   }-*/;
@@ -129,11 +129,11 @@ public class JsCache extends JavaScriptObject {
     for (k in this) return false;
     return true;
   }-*/;
-  
+
   public final native boolean contains(Object o)/*-{
     return this.indexOf(o) >= 0;
   }-*/;
-  
+
   public final native void remove(Object o) /*-{
     var i = this.indexOf(o);
     if (i >= 0) this.splice(i, 1);
@@ -229,8 +229,9 @@ public class JsCache extends JavaScriptObject {
 
   private final native JsArrayString keysImpl() /*-{
     var key, keys=[];
-    // Chrome in DevMode injects a property to JS objects
-    for(key in this) if (key != '__gwt_ObjectId') keys.push(String(key));
+    // Chrome in DevMode sets '__gwt_ObjectId' to JS objects
+    // GWT sets '$H' when calling getHashCode (see com/google/gwt/core/client/impl/Impl.java)
+    for(key in this) if (key != '__gwt_ObjectId' && key != '$H') keys.push(String(key));
     return keys;
   }-*/;
 
diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/js/JsMap.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/js/JsMap.java
index 6bc43077..d912a7f2 100644
--- a/gwtquery-core/src/main/java/com/google/gwt/query/client/js/JsMap.java
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/js/JsMap.java
@@ -49,9 +49,9 @@ final public class JsMap<S, T> extends JavaScriptObject {
     return old;
   }
 
-  public T remove(int hashCode){
-    T old = get(hashCode);
-    c().delete(hashCode());
+  public T remove(int key){
+    T old = get(key);
+    c().delete(key);
     return old;
   }
 
diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/LazyEffects.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/LazyEffects.java
index a07112df..2a921a4e 100644
--- a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/LazyEffects.java
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/LazyEffects.java
@@ -20,13 +20,10 @@ import com.google.gwt.query.client.Function;
 import com.google.gwt.query.client.GQuery;
 import com.google.gwt.query.client.Properties;
 import com.google.gwt.query.client.plugins.effects.ClipAnimation;
-import com.google.gwt.query.client.plugins.effects.ClipAnimation.Action;
 import com.google.gwt.query.client.plugins.effects.ClipAnimation.Direction;
 import com.google.gwt.query.client.plugins.effects.Fx;
-import com.google.gwt.query.client.plugins.effects.PropertiesAnimation;
 import com.google.gwt.query.client.plugins.effects.PropertiesAnimation.Easing;
 import com.google.gwt.query.client.plugins.effects.PropertiesAnimation.EasingCurve;
-import com.google.gwt.query.client.plugins.effects.TransitionsAnimation;
 import com.google.gwt.query.client.plugins.effects.TransitionsAnimation.TransitionsClipAnimation;
 import com.google.gwt.query.client.LazyBase;
 
@@ -203,94 +200,62 @@ public interface LazyEffects<T> extends LazyBase<T>{
   LazyEffects<T> animate(Object stringOrProperties, int duration, Function... funcs);
 
   /**
-   * Animate the set of matched elements using the clip property. It is possible
-   * to show or hide a set of elements, specify the direction of the animation
-   * and the start corner of the effect. Finally it executes the set of
-   * functions passed as arguments.
-   */
-  LazyEffects<T> clip(ClipAnimation.Action a, ClipAnimation.Corner c, ClipAnimation.Direction d, Function... f);
-
-  /**
-   * Animate the set of matched elements using the clip property. It is possible
-   * to show or hide a set of elements, specify the direction of the animation
-   * and the start corner of the effect. Finally it executes the set of
-   * functions passed as arguments.
-   */
-  LazyEffects<T> clip(ClipAnimation.Action a, ClipAnimation.Corner c, ClipAnimation.Direction d, int duration, Function... f);
-
-  /**
-   * Animate the set of matched elements using the clip property. It is possible
-   * to show or hide a set of elements, specify the direction of the animation
-   * and the start corner of the effect. Finally it executes the set of
-   * functions passed as arguments.
-   */
-  LazyEffects<T> clip(ClipAnimation.Action a, ClipAnimation.Corner c, Function... f);
-
-  /**
-   * Reveal all matched elements by adjusting the clip property firing an
-   * optional callback after completion. The effect goes from the center to the
-   * perimeter.
+   * Reveal all matched elements by adjusting the clip or scale property firing an optional callback
+   * after completion. The effect goes from the center to the perimeter.
    */
   LazyEffects<T> clipAppear(Function... f);
 
   /**
-   * Reveal all matched elements by adjusting the clip property firing an
-   * optional callback after completion. The effect goes from the center to the
-   * perimeter.
+   * Reveal all matched elements by adjusting the clip or scale property firing an optional callback
+   * after completion. The effect goes from the center to the perimeter.
    */
   LazyEffects<T> clipAppear(int millisecs, Function... f);
 
   /**
-   * Hide all matched elements by adjusting the clip property firing an optional
-   * callback after completion. The effect goes from the perimeter to the
-   * center.
+   * Hide all matched elements by adjusting the clip or scale property firing an optional callback
+   * after completion. The effect goes from the perimeter to the center.
    */
   LazyEffects<T> clipDisappear(Function... f);
 
   /**
-   * Hide all matched elements by adjusting the clip property firing an optional
-   * callback after completion. The effect goes from the perimeter to the
-   * center.
+   * Hide all matched elements by adjusting the clip or scale property firing an optional callback
+   * after completion. The effect goes from the perimeter to the center.
    */
   LazyEffects<T> clipDisappear(int millisecs, Function... f);
 
   /**
-   * Reveal all matched elements by adjusting the clip property firing an
-   * optional callback after completion. The effect goes from the top to the
-   * bottom.
+   * Reveal all matched elements by adjusting the clip or scale property firing an optional callback
+   * after completion. The effect goes from the top to the bottom.
    */
   LazyEffects<T> clipDown(Function... f);
 
   /**
-   * Reveal all matched elements by adjusting the clip property firing an
-   * optional callback after completion. The effect goes from the top to the
-   * bottom.
+   * Reveal all matched elements by adjusting the clip or scale property firing an optional callback
+   * after completion. The effect goes from the top to the bottom.
    */
   LazyEffects<T> clipDown(int millisecs, Function... f);
 
   /**
-   * Toggle the visibility of all matched elements by adjusting the clip
-   * property and firing an optional callback after completion. The effect goes
-   * from the bottom to the top.
+   * Toggle the visibility of all matched elements by adjusting the clip or scale property and
+   * firing an optional callback after completion. The effect goes from the bottom to the top.
    */
   LazyEffects<T> clipToggle(Function... f);
 
   /**
-   * Toggle the visibility of all matched elements by adjusting the clip
-   * property and firing an optional callback after completion. The effect goes
-   * from the bottom to the top.
+   * Toggle the visibility of all matched elements by adjusting the clip or scale or scale property
+   * and firing an optional callback after completion. The effect goes from the bottom to the top.
    */
   LazyEffects<T> clipToggle(int millisecs, Function... f);
 
   /**
-   * Hide all matched elements by adjusting the clip property firing an optional
-   * callback after completion. The effect goes from the bottom to the top.
+   * Hide all matched elements by adjusting the clip or scale property firing an optional callback
+   * after completion. The effect goes from the bottom to the top.
    */
   LazyEffects<T> clipUp(Function... f);
 
   /**
-   * Hide all matched elements by adjusting the clip property firing an optional
-   * callback after completion. The effect goes from the bottom to the top.
+   * Hide all matched elements by adjusting the clip or scale property firing an optional callback
+   * after completion. The effect goes from the bottom to the top.
    */
   LazyEffects<T> clipUp(int millisecs, Function... f);
 
diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/effects/Transitions.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/effects/Transitions.java
index e1479ad1..57403501 100644
--- a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/effects/Transitions.java
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/effects/Transitions.java
@@ -19,6 +19,7 @@ import java.util.HashMap;
 import java.util.List;
 import java.util.Map.Entry;
 
+import com.google.gwt.core.client.Duration;
 import com.google.gwt.dom.client.Element;
 import com.google.gwt.dom.client.Style;
 import com.google.gwt.query.client.Function;
@@ -31,6 +32,7 @@ import com.google.gwt.query.client.plugins.effects.PropertiesAnimation.EasingCur
 import com.google.gwt.regexp.shared.MatchResult;
 import com.google.gwt.regexp.shared.RegExp;
 import com.google.gwt.user.client.DOM;
+import com.google.gwt.user.client.Timer;
 
 /**
  * Transitions and transformation plugin for gQuery.
@@ -167,7 +169,7 @@ public class Transitions extends GQuery {
   protected static final String transition = getVendorPropertyName("transition");
 
   // passing an invalid transition property in chrome, makes disable all transitions in the element
-  private static final RegExp invalidTransitionNamesRegex = RegExp.compile("^(.*transform.*|duration|easing|clip-.*)$");
+  private static final RegExp invalidTransitionNamesRegex = RegExp.compile("^(.*transform.*|duration|easing|delay|clip-.*)$");
 
   private static final String transitionDelay = getVendorPropertyName("transitionDelay");
   private static final String transitionEnd = browser.mozilla || browser.msie ? "transitionend" : (prefix + "transitionEnd");
@@ -251,7 +253,7 @@ public class Transitions extends GQuery {
         t.setFromString(prop, value);
         getStyleImpl().setStyleProperty(e, transform, t.toString());
       }
-    } else {
+    } else if (!invalidTransitionNamesRegex.test(prop)){
       super.css(prop, value);
     }
     return this;
@@ -303,46 +305,48 @@ public class Transitions extends GQuery {
        .transition("{x: +100, width: +40px}", 2000, EasingCurve.easeOut);
    * </pre>
    */
-  public Transitions transition(Object stringOrProperties, int duration, Easing easing, int delay, final Function... funcs) {
+  public Transitions transition(Object stringOrProperties, final int duration, final Easing easing, final int delay, final Function... funcs) {
     if (isEmpty()) {
       return this;
     }
 
-    final Properties p = (stringOrProperties instanceof String) ? $$((String) stringOrProperties) : (Properties) stringOrProperties;
-
-    final String oldTransitions = css(transition);
+    final Properties cssProps = (stringOrProperties instanceof String)
+      ? $$((String) stringOrProperties)
+      : (Properties) stringOrProperties;
 
-    if (easing == null) {
-      easing = EasingCurve.ease;
-    }
-
-    String attribs = duration + "ms" + " "  + easing.toString() + " " + delay + "ms";
-    List<String> props = filterTransitionPropertyNames(p);
-    String value  = "";
-    for (String s : props) {
-      value += (value.isEmpty() ? "" : ", ") + s + " " + attribs;
-    }
-
-    final String transitionValue = value;
+    final String ease = easing == null ? "ease" : easing.toString();
+    final List<String> transProps = filterTransitionPropertyNames(cssProps);
+    final double queuedAt = delay > 0 ? Duration.currentTimeMillis() : 0;
 
     // Use gQuery queue, so as we can chain transitions, animations etc.
-    delay(0, new Function(){public void f() {
-      // This is called once per element
-      $(this)
+    queue(new Function(){
+      public void f() {
+        // This is called once per element
+        final String oldTransitionValue = $(this).css(transition);
+        // Recompute delay based on the time spent in the queue
+        int d = Math.max(0, delay - (int)(Duration.currentTimeMillis() - queuedAt));
+        // Generate transition value
+        String attribs = duration + "ms" + " "  + ease + " " + d + "ms";
+        String newTransitionValue  = "";
+        for (String s : transProps) {
+          newTransitionValue += (newTransitionValue.isEmpty() ? "" : ", ") + s + " " + attribs;
+        }
+
+        final Transitions thisTrans = $(this).as(Transitions);
         // Configure animation using transition property
-        .css(transition, transitionValue)
+        thisTrans.css(transition, newTransitionValue);
         // Set all css properties for this transition using the css method in this class
-        .as(Transitions).css(p);
-    }});
-
-    // restore oldTransitions in the element, and use the queue to prevent more effects being run.
-    // TODO: Use transitionEnd events once GQuery supports non-bit events
-    delay(duration + delay, new Function(){public void f() {
-      // This is called once per element
-      $(this).as(Transitions)
-        .css(transition, oldTransitions)
-        .each(funcs);
-    }});
+        thisTrans.css(cssProps);
+
+        // TODO: Use transitionEnd events once GQuery supports non-bit events
+        // last time I tried, setting  'transitionEnd' made custom events fail (slideEnter)
+        new Timer() {
+          public void run() {
+            thisTrans.css(transition, oldTransitionValue).each(funcs).dequeue();
+          }
+        }.schedule(d + duration);
+      }
+    });
 
     return this;
   }
diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/effects/TransitionsAnimation.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/effects/TransitionsAnimation.java
index 0bb7e1e3..74353323 100755
--- a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/effects/TransitionsAnimation.java
+++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/effects/TransitionsAnimation.java
@@ -148,16 +148,14 @@ public class TransitionsAnimation extends PropertiesAnimation {
     } else {
       MatchResult parts = REGEX_SYMBOL_NUMBER_UNIT.exec(val);
       if (parts != null) {
-        unit = REGEX_NON_PIXEL_ATTRS.test(key) || Transitions.transformRegex.test(key) ? "" : "px";
 
         String part1 = parts.getGroup(1);
         String part2 = parts.getGroup(2);
         String part3 = parts.getGroup(3);
         trsEnd = "" + Double.parseDouble(part2);
 
-        if (unit.isEmpty() && part3 != null) {
-          unit = part3;
-        }
+        unit = REGEX_NON_PIXEL_ATTRS.test(key) ? "" :  part3 == null || part3.isEmpty() ? "px" : part3;
+
         if (trsStart.isEmpty()) {
           trsStart = key.matches("scale") ? "1" : "0";
         }
@@ -168,6 +166,17 @@ public class TransitionsAnimation extends PropertiesAnimation {
           double en = Double.parseDouble(trsEnd);
           trsEnd = "" + (st + (n*en));
         }
+
+        // Deal with non px units like "%"
+        if (!unit.isEmpty() && !"px".equals(unit) && trsStart.matches("\\d+")) {
+          double start = Double.parseDouble(trsStart);
+          double to = Double.parseDouble(trsEnd);
+          g.css(key, to + unit);
+          start = to * start / g.cur(key, true);
+          trsStart = start + unit;
+          g.css(key, start + unit);
+        }
+
       } else {
         trsStart = "";
         trsEnd = val;
@@ -177,6 +186,7 @@ public class TransitionsAnimation extends PropertiesAnimation {
   }
 
   protected Transitions g;
+  protected int delay = 0;
 
   public TransitionsAnimation(Element elem, Properties p, Function... funcs) {
     this(null, elem, p, funcs);
@@ -184,6 +194,7 @@ public class TransitionsAnimation extends PropertiesAnimation {
 
   public TransitionsAnimation(Easing easing, Element elem, Properties p, Function... funcs) {
     super(easing, elem, p, funcs);
+    delay = p.getInt("delay");
     g = $(e).as(Transitions.Transitions);
   }
 
@@ -235,7 +246,7 @@ public class TransitionsAnimation extends PropertiesAnimation {
     // TODO: Reflow, it seems it is not needed in chrome and FF, check other browsers
     // g.css("offsetHeight");
     p = getFxProperties(false);
-    g.transition(p, duration, easing, 0, new Function(){public void f() {
+    g.transition(p, duration, easing, delay, new Function(){public void f() {
       onComplete();
     }});
   }