From 462b2c58cbc0e6a9f800b8288a3201c6f547c2cb Mon Sep 17 00:00:00 2001 From: Manolo Carrasco Date: Sun, 13 Jun 2010 12:24:42 +0000 Subject: [PATCH] - Select the appropriate DocumentStyleImpl and Selectors for ie8 in .gwt.xml. - Do not change overflow when it is not a resize animation - Restore correctly attibutes in show/hide animations - Restored the parameter force in css and curCSS methods - Changed the way show sets the display property in order to use block only when it is needed - change the parameter order of the setStyleProperty method --- .../java/com/google/gwt/query/Query.gwt.xml | 19 ++--- .../com/google/gwt/query/client/GQuery.java | 84 +++++++++++-------- .../query/client/impl/DocumentStyleImpl.java | 50 ++++++----- .../client/impl/DocumentStyleImplIE.java | 26 +++--- .../client/plugins/PropertiesAnimation.java | 29 ++++--- .../gwt/query/client/GQueryCoreTest.java | 4 +- .../gwt/query/client/GQueryEffectsTest.java | 2 +- samples/pom.xml | 1 + .../samples/client/GwtQueryEffectsModule.java | 20 +++-- .../samples/public/GwtQueryBench.html | 2 + .../samples/public/GwtQueryEffects.html | 4 + 11 files changed, 142 insertions(+), 99 deletions(-) diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/Query.gwt.xml b/gwtquery-core/src/main/java/com/google/gwt/query/Query.gwt.xml index 9d0e83ff..6f3cb863 100644 --- a/gwtquery-core/src/main/java/com/google/gwt/query/Query.gwt.xml +++ b/gwtquery-core/src/main/java/com/google/gwt/query/Query.gwt.xml @@ -24,15 +24,6 @@ - - - - - - - - - @@ -48,9 +39,11 @@ + + + - @@ -59,10 +52,12 @@ - + + + + - 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 40f75577..941fd14e 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 @@ -15,7 +15,6 @@ */ 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; @@ -270,44 +269,42 @@ public class GQuery implements Lazy { } /** - * Returns the numeric value of a css propery of the element. + * Returns the numeric value of an element css property */ public static double cur(Element elem, String prop) { GQuery g = $(elem); - if ("height".equals(prop)) { + String val = g.css(prop, true); + if ("height".equalsIgnoreCase(prop)) { return g.clientHeight(); } - if ("width".equals(prop)) { + if ("width".equalsIgnoreCase(prop)) { return g.clientWidth(); } - if ("absolute".equalsIgnoreCase(g.css("position"))) { - if ("left".equals(prop)) { + if ("absolute".equalsIgnoreCase(g.css("position", true))) { + if ("left".equalsIgnoreCase(prop)) { return g.offset().left; } - if ("top".equals(prop)) { + if ("top".equalsIgnoreCase(prop)) { return g.offset().top; } } - if ("opacity".equals(prop)) { - return Double.parseDouble(g.css("opacity")); + if ("opacity".equalsIgnoreCase(prop)) { + return Double.parseDouble(val); } if (elem.getPropertyString(prop) != null && (elem.getStyle() == null || elem.getStyle().getProperty(prop) == null)) { return elem.getPropertyDouble(prop); } - String val = g.css(prop); - if (val != null) { - if ("thick".equals(val)) { - return (5); - } else if ("medium".equals(val)) { - return (3); - } else if ("thin".equals(val)) { - return (1); - } - val = "0" + val.replaceAll("[^\\d\\.]+", ""); - return Double.parseDouble(val); + + if ("thick".equalsIgnoreCase(val)) { + return (5); + } else if ("medium".equalsIgnoreCase(val)) { + return (3); + } else if ("thin".equalsIgnoreCase(val)) { + return (1); } - return 0.0; + val = "0" + val.replaceAll("[^\\d\\.]+", ""); + return Double.parseDouble(val); } /** @@ -407,10 +404,6 @@ public class GQuery implements Lazy { return res; } - private static String curCSS(Element elem, String name) { - return styleImpl.curCSS(elem, name); - } - private static boolean hasClass(Element e, String clz) { return ((" " + e.getClassName() + " ").matches(".*\\s" + clz + "\\s.*")); } @@ -798,7 +791,23 @@ public class GQuery implements Lazy { * Return a style property on the first matched element. */ public String css(String name) { - return curCSS(get(0), name); + return styleImpl.curCSS(get(0), name, false); + } + + /** + * Return a style property on the first matched element. + * + * 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. + */ + public String css(String name, boolean force) { + return styleImpl.curCSS(get(0), name, force); } /** @@ -806,7 +815,7 @@ public class GQuery implements Lazy { */ public GQuery css(String prop, String val) { for (Element e : elements()) { - styleImpl.setStyleProperty(prop, val, e); + styleImpl.setStyleProperty(e, prop, val); } return this; } @@ -1124,7 +1133,7 @@ public class GQuery implements Lazy { for (Element e : elements()) { Object old = data(e, "oldDisplay", null); if (old == null) { - data(e, "oldDisplay", styleImpl.curCSS(e, "display")); + data(e, "oldDisplay", styleImpl.curCSS(e, "display", false)); } e.getStyle().setDisplay(Display.NONE); } @@ -1455,7 +1464,7 @@ public class GQuery implements Lazy { or(elements.getItem(0).getOffsetParent(), document.getBody()); while (offParent != null && !"body".equalsIgnoreCase(offParent.getTagName()) && !"html".equalsIgnoreCase(offParent.getTagName()) && "static". - equals(curCSS(offParent, "position"))) { + equals(styleImpl.curCSS(offParent, "position", true))) { offParent = offParent.getOffsetParent(); } return new GQuery(offParent); @@ -1719,10 +1728,10 @@ public class GQuery implements Lazy { /** * Save a set of Css properties of every matched element. */ - public void restoreCssAttrs(String[] cssProps) { + public void restoreCssAttrs(String... cssProps) { for (Element e : elements()) { for (String a : cssProps) { - styleImpl.setStyleProperty(a, (String) data(e, "old-" + a, null), e); + styleImpl.setStyleProperty(e, a, (String) data(e, "old-" + a, null)); } } } @@ -1730,10 +1739,10 @@ public class GQuery implements Lazy { /** * Restore a set of previously saved Css properties in every matched element. */ - public void saveCssAttrs(String[] cssProps) { + public void saveCssAttrs(String... cssProps) { for (Element e : elements()) { for (String a : cssProps) { - data("old-" + a, curCSS(e, a)); + data("old-" + a, styleImpl.curCSS(e, a, false)); } } } @@ -1850,8 +1859,11 @@ public class GQuery implements Lazy { */ public GQuery show() { for (Element e : elements()) { - Object old = data(e, "oldDisplay", null); - styleImpl.setStyleProperty("display", old != null? old.toString() : "block", e); + styleImpl.setStyleProperty(e, "display", SelectorEngine.or((String)data(e, "oldDisplay", null), "")); + // When the display=none is in the stylesheet. + if (!styleImpl.isVisible(e)) { + styleImpl.setStyleProperty(e, "display", "block"); + } } return this; } @@ -2158,7 +2170,7 @@ public class GQuery implements Lazy { * Return true if the first element is visible. */ public boolean visible() { - return !"none".equalsIgnoreCase(css("display")); + return styleImpl.isVisible(get(0)); } /** diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/impl/DocumentStyleImpl.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/impl/DocumentStyleImpl.java index bcb81fd4..95f4e632 100644 --- a/gwtquery-core/src/main/java/com/google/gwt/query/client/impl/DocumentStyleImpl.java +++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/impl/DocumentStyleImpl.java @@ -16,8 +16,6 @@ package com.google.gwt.query.client.impl; import com.google.gwt.dom.client.Element; -import com.google.gwt.dom.client.Style; -import com.google.gwt.query.client.SelectorEngine; /** * A helper class to get computed CSS styles for elements. @@ -25,9 +23,7 @@ import com.google.gwt.query.client.SelectorEngine; public class DocumentStyleImpl { /** - * Camelize style property names. - * for instance: - * font-name -> fontName + * Camelize style property names. for instance: font-name -> fontName */ public static native String camelize(String s)/*-{ return s.replace(/\-(\w)/g, function(all, letter) { @@ -36,25 +32,30 @@ public class DocumentStyleImpl { }-*/; /** - * Hyphenize style property names. - * for instance: - * fontName -> font-name + * Hyphenize style property names. for instance: fontName -> font-name */ public static native String hyphenize(String name) /*-{ return name.replace(/([A-Z])/g, "-$1" ).toLowerCase(); }-*/; /** - * Return the string value of a css property of an element. + * Return the string value of a css property of an element. + * + * 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. */ - public String curCSS(Element elem, String name) { + public String curCSS(Element elem, String name, boolean force) { name = fixPropertyName(name); - Style s = elem.getStyle(); - if (SelectorEngine.truth(s.getProperty(name))) { - return s.getProperty(name); + if (force) { + return getComputedStyle(elem, hyphenize(name), name, null); } else { - name = hyphenize(name); - return getComputedStyle(elem, name, null); + String ret = elem.getStyle().getProperty(name); + return ret == null ? "" : ret; } } @@ -80,9 +81,9 @@ public class DocumentStyleImpl { /** * Set the value of a style property of an element. */ - public void setStyleProperty(String prop, String val, Element e) { + public void setStyleProperty(Element e, String prop, String val) { prop = fixPropertyName(prop); - // put it in lower-case only when all letters are upper-case, to avoid + // put it in lower-case only when all letters are upper-case, to avoid // modifying already camelized properties if (prop.matches("^[A-Z]+$")) { prop = prop.toLowerCase(); @@ -94,11 +95,18 @@ public class DocumentStyleImpl { e.getStyle().setProperty(prop, val); } } + + /** + * Return whether the element is visible + */ + public boolean isVisible(Element e) { + return !"none".equalsIgnoreCase(curCSS(e, "display", true)); + } - protected native String getComputedStyle(Element elem, String name, - String pseudo) /*-{ - var cStyle = $doc.defaultView.getComputedStyle( elem, pseudo ); - return cStyle ? cStyle.getPropertyValue( name ) : null; + protected native String getComputedStyle(Element elem, String hyphenName, + String camelName, String pseudo) /*-{ + var cStyle = $doc.defaultView.getComputedStyle(elem, pseudo); + return cStyle ? cStyle.getPropertyValue(hyphenName) : null; }-*/; } diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/impl/DocumentStyleImplIE.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/impl/DocumentStyleImplIE.java index e3148bc9..0b7b45e7 100644 --- a/gwtquery-core/src/main/java/com/google/gwt/query/client/impl/DocumentStyleImplIE.java +++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/impl/DocumentStyleImplIE.java @@ -26,9 +26,18 @@ public class DocumentStyleImplIE extends DocumentStyleImpl { /** * Return the string value of a css property of an element. * IE needs a special workaround to handle opacity. + * + * 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. */ @Override - public String curCSS(Element elem, String name) { + public String curCSS(Element elem, String name, boolean force) { if ("opacity".equalsIgnoreCase(name)) { Style s = elem.getStyle(); String o = s.getProperty("filter"); @@ -39,7 +48,7 @@ public class DocumentStyleImplIE extends DocumentStyleImpl { o = s.getProperty("opacity"); return o == null || o.length() == 0 ? "1" : o; } - return super.curCSS(elem, name); + return super.curCSS(elem, name, force); } /** @@ -68,25 +77,22 @@ public class DocumentStyleImplIE extends DocumentStyleImpl { * IE needs a special workaround to handle opacity */ @Override - public void setStyleProperty(String prop, String val, Element e) { + public void setStyleProperty(Element e, String prop, String val) { if ("opacity".equals(prop)) { e.getStyle().setProperty("zoom", "1"); e.getStyle().setProperty("filter", "alpha(opacity=" + (int) (Double.valueOf(val) * 100) + ")"); } else { - super.setStyleProperty(prop, val, e); + super.setStyleProperty(e, prop, val); } } @Override - protected native String getComputedStyle(Element elem, String name, - String pseudo) /*-{ + protected native String getComputedStyle(Element elem, String hyphenName, + String camelName, String pseudo) /*-{ // code lifted from jQuery var style = elem.style; - var camelCase = name.replace(/\-(\w)/g, function(all, letter){ - return letter.toUpperCase(); - }); - var ret = elem.currentStyle[ name ] || elem.currentStyle[ camelCase ]; + var ret = elem.currentStyle[hyphenName] || elem.currentStyle[camelName]; // From the awesome hack by Dean Edwards // http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291 // If we're not dealing with a regular pixel number diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/PropertiesAnimation.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/PropertiesAnimation.java index 08e048ad..b10c9cb4 100755 --- a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/PropertiesAnimation.java +++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/PropertiesAnimation.java @@ -20,6 +20,7 @@ import java.util.ArrayList; import com.google.gwt.animation.client.Animation; 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.query.client.JSArray; import com.google.gwt.query.client.Properties; import com.google.gwt.query.client.Regexp; @@ -42,16 +43,14 @@ public class PropertiesAnimation extends Animation { public String attr; public double end; - public String old; public double start; public String unit; public String value; - Effect(String attr, String value, String old, double start, double end, + Effect(String attr, String value, double start, double end, String unit) { this.attr = attr; this.value = value; - this.old = old; this.start = start; this.end = end; this.unit = nonPx.test(attr) ? "" : unit == null ? "px" : unit; @@ -64,7 +63,7 @@ public class PropertiesAnimation extends Animation { } private static final String[] attrsToSave = new String[] { "overflow", - "visivility", "white-space" }; + "visibility", "white-space" }; private Element e; private Easing easing = Easing.SWING; private ArrayList effects = new ArrayList(); @@ -90,16 +89,16 @@ public class PropertiesAnimation extends Animation { @Override public void onComplete() { super.onComplete(); - g.restoreCssAttrs(attrsToSave); for (Effect l : effects) { if ("hide".equals(l.value)) { g.hide(); - g.css(l.attr, l.old); + g.restoreCssAttrs(l.attr); } else if ("show".equals(l.value)) { g.show(); - g.css(l.attr, l.old); + g.restoreCssAttrs(l.attr); } } + g.restoreCssAttrs(attrsToSave); g.each(funcs); g.dequeue(); } @@ -107,6 +106,7 @@ public class PropertiesAnimation extends Animation { @Override public void onStart() { boolean hidden = !g.visible(); + boolean resize = false; g.show(); for (String key : prps.keys()) { String val = prps.get(key); @@ -114,13 +114,13 @@ public class PropertiesAnimation extends Animation { val = hidden ? "show" : "hide"; } if (("top".equals(key) || "left".equals(key)) - && !"absolute".equalsIgnoreCase(g.css("position"))) { + && !"absolute".equalsIgnoreCase(g.css("position", true))) { g.css("position", "relative"); } JSArray parts = new Regexp("^([+-]=)?([0-9+-.]+)(.*)?$").match(val); String unit = parts != null ? parts.getStr(3) : ""; - double start = Effects.cur(e, key); + double start = GQuery.cur(e, key); double end = start; if (parts != null) { end = Double.parseDouble(parts.getStr(2)); @@ -131,18 +131,23 @@ public class PropertiesAnimation extends Animation { if (!hidden) { return; } + g.saveCssAttrs(key); start = 0; } else if ("hide".equals(val)) { if (hidden) { return; } + g.saveCssAttrs(key); end = 0; } - effects.add(new Effect(key, val, g.css(key), start, end, unit)); + resize = resize || "height".equals(key) || "width".equals(key); + effects.add(new Effect(key, val, start, end, unit)); } g.saveCssAttrs(attrsToSave); - g.css("overflow", "hidden"); - g.css("visivility", "visible"); + if (resize) { + g.css("overflow", "hidden"); + } + g.css("visibility", "visible"); g.css("white-space", "nowrap"); super.onStart(); } diff --git a/gwtquery-core/src/test/java/com/google/gwt/query/client/GQueryCoreTest.java b/gwtquery-core/src/test/java/com/google/gwt/query/client/GQueryCoreTest.java index c133128a..c1d240b6 100644 --- a/gwtquery-core/src/test/java/com/google/gwt/query/client/GQueryCoreTest.java +++ b/gwtquery-core/src/test/java/com/google/gwt/query/client/GQueryCoreTest.java @@ -607,10 +607,10 @@ public class GQueryCoreTest extends GWTTestCase { sectA.show(); assertEquals("inline", sectA.css("display")); sectB.show(); - assertEquals("block", sectB.css("display")); + assertEquals("", sectB.css("display")); // toggle() - assertEquals("block", sectC.css("display")); + assertEquals("", sectC.css("display")); sectC.toggle(); assertEquals("none", sectC.css("display")); sectC.toggle(); diff --git a/gwtquery-core/src/test/java/com/google/gwt/query/client/GQueryEffectsTest.java b/gwtquery-core/src/test/java/com/google/gwt/query/client/GQueryEffectsTest.java index 3e095f1b..94e2bd11 100644 --- a/gwtquery-core/src/test/java/com/google/gwt/query/client/GQueryEffectsTest.java +++ b/gwtquery-core/src/test/java/com/google/gwt/query/client/GQueryEffectsTest.java @@ -84,7 +84,7 @@ public class GQueryEffectsTest extends GWTTestCase { Timer timerMidTime = new Timer() { public void run() { assertEquals("inline", sectA.css("display")); - assertEquals("block", sectB.css("display")); + assertEquals("", sectB.css("display")); double o = Double.valueOf(sectA.css("opacity")); assertTrue( "'sectA' opacity must be in the interval 0.5-1 but is: " + o, diff --git a/samples/pom.xml b/samples/pom.xml index cbaca98d..0e1b5ebc 100644 --- a/samples/pom.xml +++ b/samples/pom.xml @@ -66,6 +66,7 @@ src/main/webapp/gwtquery.samples.GwtQueryPlugin src/main/webapp/gwtquery.samples.GwtQuerySample src/main/webapp/gwtquery.samples.GwtQueryWidgets + src/main/webapp/test src/main/webapp/WEB-INF/classes tomcat www-test diff --git a/samples/src/main/java/gwtquery/samples/client/GwtQueryEffectsModule.java b/samples/src/main/java/gwtquery/samples/client/GwtQueryEffectsModule.java index ca695fdb..80ac00df 100644 --- a/samples/src/main/java/gwtquery/samples/client/GwtQueryEffectsModule.java +++ b/samples/src/main/java/gwtquery/samples/client/GwtQueryEffectsModule.java @@ -33,13 +33,19 @@ public class GwtQueryEffectsModule implements EntryPoint { final Effects a = $(".a, .b > div:nth-child(2)").as(Effects.Effects); - $("#b1").toggle(new Function() { + $("#b0").width(150).css("font-size", "10px").toggle(new Function() { public void f(Element e) { - $("#i1").as(Effects.Effects).animate(" width: '70%', opacity: '0.4', marginLeft: '0.6in', fontSize: '3em', borderWidth: '10px'"); + $("#b0").as(Effects.Effects).animate(" width: '400', opacity: '0.4', marginLeft: '0.6in', fontSize: '24px'"); } }, new Function() { public void f(Element e) { - $("#i1").as(Effects.Effects).animate(" width: '0%', opacity: '1', marginLeft: '0', fontSize: '1em', borderWidth: '5px'"); + $("#b0").as(Effects.Effects).animate(" width: '150', opacity: '1', marginLeft: '0', fontSize: '10px'"); + } + }); + + $("#b1").toggle(new Function() { + public void f(Element e) { + $(".a").toggle(); } }, new Function() { public void f(Element e) { @@ -67,15 +73,19 @@ public class GwtQueryEffectsModule implements EntryPoint { } }, new Function() { public void f(Element e) { - a.animate("left: '+=25%', width: 'hide'"); + a.animate("left: '+=300', width: 'hide'"); } }, new Function() { public void f(Element e) { - a.animate("left: '-=25%', width: 'show'"); + a.animate("left: '-=300', width: 'show'"); } }); $("#b2").toggle(new Function() { + public void f(Element e) { + $(".a").toggle(); + } + }, new Function() { public void f(Element e) { a.as(Effects.Effects).clipUp(); } diff --git a/samples/src/main/java/gwtquery/samples/public/GwtQueryBench.html b/samples/src/main/java/gwtquery/samples/public/GwtQueryBench.html index caaac70b..1f041bb6 100644 --- a/samples/src/main/java/gwtquery/samples/public/GwtQueryBench.html +++ b/samples/src/main/java/gwtquery/samples/public/GwtQueryBench.html @@ -1,3 +1,5 @@ + + GQuery diff --git a/samples/src/main/java/gwtquery/samples/public/GwtQueryEffects.html b/samples/src/main/java/gwtquery/samples/public/GwtQueryEffects.html index 90b79b28..766a3001 100644 --- a/samples/src/main/java/gwtquery/samples/public/GwtQueryEffects.html +++ b/samples/src/main/java/gwtquery/samples/public/GwtQueryEffects.html @@ -1,3 +1,5 @@ + + GQuery Demo @@ -16,6 +18,7 @@ background: pink; width: 50%; padding: 10px; + display: none; } @@ -31,6 +34,7 @@
Foo bar baz

+

-- 2.39.5