<when-type-assignable class="com.google.gwt.query.client.Selectors"/>\r
</generate-with>\r
\r
-\r
- <generate-with class="com.google.gwt.query.rebind.SelectorGeneratorJS">\r
- <when-type-assignable class="com.google.gwt.query.client.Selectors"/>\r
- <any>\r
- <when-property-is name="user.agent" value="gecko"/>\r
- <when-property-is name="user.agent" value="ie6"/>\r
- </any>\r
- </generate-with>\r
-\r
<generate-with class="com.google.gwt.query.rebind.SelectorGeneratorCssToXPath">\r
<when-type-assignable class="com.google.gwt.query.client.Selectors"/>\r
<any>\r
<generate-with class="com.google.gwt.query.rebind.SelectorGeneratorNative">\r
<when-type-assignable class="com.google.gwt.query.client.Selectors"/>\r
<when-property-is name="selectorCapability" value="native"/>\r
+ <none>\r
+ <when-property-is name="user.agent" value="ie8"/>\r
+ </none>\r
</generate-with>\r
\r
-\r
<replace-with class="com.google.gwt.query.client.impl.DocumentStyleImpl">\r
<when-type-assignable\r
class="com.google.gwt.query.client.impl.DocumentStyleImpl"/>\r
<replace-with class="com.google.gwt.query.client.impl.DocumentStyleImplIE">\r
<when-type-assignable\r
class="com.google.gwt.query.client.impl.DocumentStyleImpl"/>\r
- <when-property-is name="user.agent" value="ie6"/>\r
+ <any>\r
+ <when-property-is name="user.agent" value="ie6"/>\r
+ <when-property-is name="user.agent" value="ie8"/>\r
+ </any>\r
</replace-with>\r
\r
-\r
<replace-with class="com.google.gwt.query.client.impl.SelectorEngineSizzle">\r
<when-type-assignable\r
class="com.google.gwt.query.client.impl.SelectorEngineImpl"/>\r
*/\r
package com.google.gwt.query.client;\r
\r
-\r
import static com.google.gwt.query.client.plugins.Effects.Effects;\r
import static com.google.gwt.query.client.plugins.Events.Events;\r
\r
}\r
\r
/**\r
- * Returns the numeric value of a css propery of the element.\r
+ * Returns the numeric value of an element css property\r
*/\r
public static double cur(Element elem, String prop) {\r
GQuery g = $(elem);\r
- if ("height".equals(prop)) {\r
+ String val = g.css(prop, true);\r
+ if ("height".equalsIgnoreCase(prop)) {\r
return g.clientHeight();\r
}\r
- if ("width".equals(prop)) {\r
+ if ("width".equalsIgnoreCase(prop)) {\r
return g.clientWidth();\r
}\r
- if ("absolute".equalsIgnoreCase(g.css("position"))) {\r
- if ("left".equals(prop)) {\r
+ if ("absolute".equalsIgnoreCase(g.css("position", true))) {\r
+ if ("left".equalsIgnoreCase(prop)) {\r
return g.offset().left;\r
}\r
- if ("top".equals(prop)) {\r
+ if ("top".equalsIgnoreCase(prop)) {\r
return g.offset().top;\r
}\r
}\r
- if ("opacity".equals(prop)) {\r
- return Double.parseDouble(g.css("opacity"));\r
+ if ("opacity".equalsIgnoreCase(prop)) {\r
+ return Double.parseDouble(val);\r
}\r
if (elem.getPropertyString(prop) != null\r
&& (elem.getStyle() == null || elem.getStyle().getProperty(prop) == null)) {\r
return elem.getPropertyDouble(prop);\r
}\r
- String val = g.css(prop);\r
- if (val != null) {\r
- if ("thick".equals(val)) {\r
- return (5);\r
- } else if ("medium".equals(val)) {\r
- return (3);\r
- } else if ("thin".equals(val)) {\r
- return (1);\r
- }\r
- val = "0" + val.replaceAll("[^\\d\\.]+", "");\r
- return Double.parseDouble(val);\r
+ \r
+ if ("thick".equalsIgnoreCase(val)) {\r
+ return (5);\r
+ } else if ("medium".equalsIgnoreCase(val)) {\r
+ return (3);\r
+ } else if ("thin".equalsIgnoreCase(val)) {\r
+ return (1);\r
}\r
- return 0.0;\r
+ val = "0" + val.replaceAll("[^\\d\\.]+", "");\r
+ return Double.parseDouble(val);\r
}\r
\r
/**\r
return res;\r
}\r
\r
- private static String curCSS(Element elem, String name) {\r
- return styleImpl.curCSS(elem, name);\r
- }\r
-\r
private static boolean hasClass(Element e, String clz) {\r
return ((" " + e.getClassName() + " ").matches(".*\\s" + clz + "\\s.*"));\r
}\r
* Return a style property on the first matched element.\r
*/\r
public String css(String name) {\r
- return curCSS(get(0), name);\r
+ return styleImpl.curCSS(get(0), name, false);\r
+ }\r
+ \r
+ /**\r
+ * Return a style property on the first matched element.\r
+ * \r
+ * The parameter force has a special meaning here:\r
+ * - When force is false, returns the value of the css property defined\r
+ * in the style attribute of the element. \r
+ * - Otherwise it returns the real computed value.\r
+ * \r
+ * For instance if you define 'display=none' not in the element style\r
+ * but in the css stylesheet, it returns an empty string unless you\r
+ * pass the parameter force=true. \r
+ */\r
+ public String css(String name, boolean force) {\r
+ return styleImpl.curCSS(get(0), name, force);\r
}\r
\r
/**\r
*/\r
public GQuery css(String prop, String val) {\r
for (Element e : elements()) {\r
- styleImpl.setStyleProperty(prop, val, e);\r
+ styleImpl.setStyleProperty(e, prop, val);\r
}\r
return this;\r
}\r
for (Element e : elements()) {\r
Object old = data(e, "oldDisplay", null);\r
if (old == null) {\r
- data(e, "oldDisplay", styleImpl.curCSS(e, "display"));\r
+ data(e, "oldDisplay", styleImpl.curCSS(e, "display", false));\r
}\r
e.getStyle().setDisplay(Display.NONE);\r
}\r
or(elements.getItem(0).getOffsetParent(), document.getBody());\r
while (offParent != null && !"body".equalsIgnoreCase(offParent.getTagName())\r
&& !"html".equalsIgnoreCase(offParent.getTagName()) && "static".\r
- equals(curCSS(offParent, "position"))) {\r
+ equals(styleImpl.curCSS(offParent, "position", true))) {\r
offParent = offParent.getOffsetParent();\r
}\r
return new GQuery(offParent);\r
/**\r
* Save a set of Css properties of every matched element.\r
*/\r
- public void restoreCssAttrs(String[] cssProps) {\r
+ public void restoreCssAttrs(String... cssProps) {\r
for (Element e : elements()) {\r
for (String a : cssProps) {\r
- styleImpl.setStyleProperty(a, (String) data(e, "old-" + a, null), e);\r
+ styleImpl.setStyleProperty(e, a, (String) data(e, "old-" + a, null));\r
}\r
}\r
}\r
/**\r
* Restore a set of previously saved Css properties in every matched element.\r
*/\r
- public void saveCssAttrs(String[] cssProps) {\r
+ public void saveCssAttrs(String... cssProps) {\r
for (Element e : elements()) {\r
for (String a : cssProps) {\r
- data("old-" + a, curCSS(e, a));\r
+ data("old-" + a, styleImpl.curCSS(e, a, false));\r
}\r
}\r
}\r
*/\r
public GQuery show() {\r
for (Element e : elements()) {\r
- Object old = data(e, "oldDisplay", null);\r
- styleImpl.setStyleProperty("display", old != null? old.toString() : "block", e);\r
+ styleImpl.setStyleProperty(e, "display", SelectorEngine.or((String)data(e, "oldDisplay", null), ""));\r
+ // When the display=none is in the stylesheet.\r
+ if (!styleImpl.isVisible(e)) {\r
+ styleImpl.setStyleProperty(e, "display", "block");\r
+ }\r
}\r
return this;\r
}\r
* Return true if the first element is visible.\r
*/\r
public boolean visible() {\r
- return !"none".equalsIgnoreCase(css("display"));\r
+ return styleImpl.isVisible(get(0));\r
}\r
\r
/**\r
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.
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) {
}-*/;
/**
- * 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;
}
}
/**
* 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();
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;
}-*/;
}
/**
* 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");
o = s.getProperty("opacity");
return o == null || o.length() == 0 ? "1" : o;
}
- return super.curCSS(elem, name);
+ return super.curCSS(elem, name, force);
}
/**
* 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
import com.google.gwt.animation.client.Animation;\r
import com.google.gwt.dom.client.Element;\r
import com.google.gwt.query.client.Function;\r
+import com.google.gwt.query.client.GQuery;\r
import com.google.gwt.query.client.JSArray;\r
import com.google.gwt.query.client.Properties;\r
import com.google.gwt.query.client.Regexp;\r
\r
public String attr;\r
public double end;\r
- public String old;\r
public double start;\r
public String unit;\r
public String value;\r
\r
- Effect(String attr, String value, String old, double start, double end,\r
+ Effect(String attr, String value, double start, double end,\r
String unit) {\r
this.attr = attr;\r
this.value = value;\r
- this.old = old;\r
this.start = start;\r
this.end = end;\r
this.unit = nonPx.test(attr) ? "" : unit == null ? "px" : unit;\r
}\r
\r
private static final String[] attrsToSave = new String[] { "overflow",\r
- "visivility", "white-space" };\r
+ "visibility", "white-space" };\r
private Element e;\r
private Easing easing = Easing.SWING;\r
private ArrayList<Effect> effects = new ArrayList<Effect>();\r
@Override\r
public void onComplete() {\r
super.onComplete();\r
- g.restoreCssAttrs(attrsToSave);\r
for (Effect l : effects) {\r
if ("hide".equals(l.value)) {\r
g.hide();\r
- g.css(l.attr, l.old);\r
+ g.restoreCssAttrs(l.attr);\r
} else if ("show".equals(l.value)) {\r
g.show();\r
- g.css(l.attr, l.old);\r
+ g.restoreCssAttrs(l.attr);\r
}\r
}\r
+ g.restoreCssAttrs(attrsToSave);\r
g.each(funcs);\r
g.dequeue();\r
}\r
@Override\r
public void onStart() {\r
boolean hidden = !g.visible();\r
+ boolean resize = false;\r
g.show();\r
for (String key : prps.keys()) {\r
String val = prps.get(key);\r
val = hidden ? "show" : "hide";\r
}\r
if (("top".equals(key) || "left".equals(key))\r
- && !"absolute".equalsIgnoreCase(g.css("position"))) {\r
+ && !"absolute".equalsIgnoreCase(g.css("position", true))) {\r
g.css("position", "relative");\r
}\r
\r
JSArray parts = new Regexp("^([+-]=)?([0-9+-.]+)(.*)?$").match(val);\r
String unit = parts != null ? parts.getStr(3) : "";\r
- double start = Effects.cur(e, key);\r
+ double start = GQuery.cur(e, key);\r
double end = start;\r
if (parts != null) {\r
end = Double.parseDouble(parts.getStr(2));\r
if (!hidden) {\r
return;\r
}\r
+ g.saveCssAttrs(key);\r
start = 0;\r
} else if ("hide".equals(val)) {\r
if (hidden) {\r
return;\r
}\r
+ g.saveCssAttrs(key);\r
end = 0;\r
}\r
- effects.add(new Effect(key, val, g.css(key), start, end, unit));\r
+ resize = resize || "height".equals(key) || "width".equals(key);\r
+ effects.add(new Effect(key, val, start, end, unit));\r
}\r
g.saveCssAttrs(attrsToSave);\r
- g.css("overflow", "hidden");\r
- g.css("visivility", "visible");\r
+ if (resize) {\r
+ g.css("overflow", "hidden");\r
+ }\r
+ g.css("visibility", "visible");\r
g.css("white-space", "nowrap");\r
super.onStart();\r
}\r
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();
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,
<fileset><directory>src/main/webapp/gwtquery.samples.GwtQueryPlugin</directory></fileset>
<fileset><directory>src/main/webapp/gwtquery.samples.GwtQuerySample</directory></fileset>
<fileset><directory>src/main/webapp/gwtquery.samples.GwtQueryWidgets</directory></fileset>
+ <fileset><directory>src/main/webapp/test</directory></fileset>
<fileset><directory>src/main/webapp/WEB-INF/classes</directory></fileset>
<fileset><directory>tomcat</directory></fileset>
<fileset><directory>www-test</directory></fileset>
\r
final Effects a = $(".a, .b > div:nth-child(2)").as(Effects.Effects);\r
\r
- $("#b1").toggle(new Function() {\r
+ $("#b0").width(150).css("font-size", "10px").toggle(new Function() {\r
public void f(Element e) {\r
- $("#i1").as(Effects.Effects).animate(" width: '70%', opacity: '0.4', marginLeft: '0.6in', fontSize: '3em', borderWidth: '10px'");\r
+ $("#b0").as(Effects.Effects).animate(" width: '400', opacity: '0.4', marginLeft: '0.6in', fontSize: '24px'");\r
}\r
}, new Function() {\r
public void f(Element e) {\r
- $("#i1").as(Effects.Effects).animate(" width: '0%', opacity: '1', marginLeft: '0', fontSize: '1em', borderWidth: '5px'");\r
+ $("#b0").as(Effects.Effects).animate(" width: '150', opacity: '1', marginLeft: '0', fontSize: '10px'");\r
+ }\r
+ });\r
+ \r
+ $("#b1").toggle(new Function() {\r
+ public void f(Element e) {\r
+ $(".a").toggle();\r
}\r
}, new Function() {\r
public void f(Element e) {\r
}\r
}, new Function() {\r
public void f(Element e) {\r
- a.animate("left: '+=25%', width: 'hide'");\r
+ a.animate("left: '+=300', width: 'hide'");\r
}\r
}, new Function() {\r
public void f(Element e) {\r
- a.animate("left: '-=25%', width: 'show'");\r
+ a.animate("left: '-=300', width: 'show'");\r
}\r
});\r
\r
$("#b2").toggle(new Function() {\r
+ public void f(Element e) {\r
+ $(".a").toggle();\r
+ }\r
+ }, new Function() {\r
public void f(Element e) {\r
a.as(Effects.Effects).clipUp();\r
}\r
+<!doctype html>\r
+\r
<html>\r
<head>\r
<title>GQuery</title>\r
+<!--<!doctype html>-->\r
+\r
<html>\r
<head>\r
<title>GQuery Demo</title>\r
background: pink;\r
width: 50%;\r
padding: 10px;\r
+ display: none;\r
}\r
</style>\r
</head>\r
<div>Foo <span class="note">bar</span> <span class="xyz">baz</span></div>\r
</div>\r
<br/>\r
+<button id="b0">Animate me</button><br/>\r
<button id="b1">Toggle Animate effects</button>\r
<button id="b2">Toggle Clip effects</button>\r
<br/>\r
projects / gwtquery.git / commitdiff