From 8d1d52abb942cb299c48191ca30e8e243b53484b Mon Sep 17 00:00:00 2001 From: Ray Cromwell Date: Tue, 19 May 2009 23:26:11 +0000 Subject: [PATCH] Fix up star ratings. --- .../google/gwt/query/client/Properties.java | 4 + .../gwt/query/client/plugins/Ratings.java | 202 ++++--- .../samples/client/GwtQueryBenchModule.java | 4 +- .../samples/client/GwtQuerySampleModule.java | 10 +- .../samples/public/GwtQuerySample.html | 559 +----------------- 5 files changed, 131 insertions(+), 648 deletions(-) diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/Properties.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/Properties.java index 59e2da10..225cb51c 100644 --- a/gwtquery-core/src/main/java/com/google/gwt/query/client/Properties.java +++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/Properties.java @@ -48,6 +48,10 @@ public class Properties extends JavaScriptObject { return props; }-*/; + public final native boolean defined(String name) /*-{ + return this[name] != undefined; + }-*/; + public final native String get(String name) /*-{ return this[name]; }-*/; diff --git a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/Ratings.java b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/Ratings.java index fc13d2e2..ae8aa918 100644 --- a/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/Ratings.java +++ b/gwtquery-core/src/main/java/com/google/gwt/query/client/plugins/Ratings.java @@ -7,6 +7,8 @@ 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.Plugin; +import com.google.gwt.query.client.Properties; +import com.google.gwt.query.client.Regexp; import com.google.gwt.query.client.SelectorEngine; import com.google.gwt.user.client.Event; @@ -71,6 +73,10 @@ public class Ratings extends GQuery { } else { control = new Control(); control.setSerial(raters.bumpCount()); + Properties metadata = getMetaData(input.get(0).getClassName()); + if (metadata != null && metadata.defined("split")) { + control.setSplit(metadata.getInt("split")); + } // create rating element rater = $(""); input.before(rater); @@ -214,15 +220,26 @@ public class Ratings extends GQuery { rater.data("rating", control); star.data("rating", control); context.data("rating", raters); - - // Initialize ratings (first draw) - $(".rating-to-be-drawn").as(Ratings).draw() - .removeClass("rating-to-be-drawn"); } + // Initialize ratings (first draw) + $(".rating-to-be-drawn").as(Ratings).draw() + .removeClass("rating-to-be-drawn"); return this; } + private Properties getMetaData(String className) { + if (className.indexOf("{") == -1) { + return Properties.createObject().cast(); + } + Regexp re = new Regexp("{(.*)}"); + JSArray match = re.exec(className); + if (match != null && match.size() > 1) { + return Properties.create(match.getStr(1)); + } + return Properties.createObject().cast(); + } + public Ratings blurStar() { return this; } @@ -237,122 +254,133 @@ public class Ratings extends GQuery { } public Ratings fill() { - Control control = (Control) this.data("rating"); - if (control == null) { - return this; - } - // do not execute when control is in read-only mode - if (control.isReadOnly()) { - return this; + for (Element e : elements()) { + GQuery self = $(e); + Control control = nullControlIfShouldSkipStar(self); + if (control == null) { + continue; + } + + // Reset all stars and highlight them up to this element + self.as(Ratings).drain(); + self.prevAll().andSelf().filter(".rater-" + control.getSerial()) + .addClass("star-rating-hover"); + } - // Reset all stars and highlight them up to this element - drain(); - this.prevAll().andSelf().filter(".rater-" + control.getSerial()) - .addClass("star-rating-hover"); + return this; } public Ratings draw() { - Control control = (Control) this.data("rating"); - if (control == null) { - return this; - } - // do not execute when control is in read-only mode - if (control.isReadOnly()) { - return this; - } - // Clear all stars - this.drain(); - // Set control value - if (control.getCurrent() != null) { - ((GQuery) control.current.data("rating.input")) - .attr("checked", "checked"); - control.current.prevAll().andSelf().filter(".rater-" + control.serial) - .addClass("star-rating-on"); - } else { - $(control.getInputs()).removeAttr("checked"); - } + for (Element e : elements()) { + GQuery self = $(e); + Control control = nullControlIfShouldSkipStar(self); + if (control == null) { + continue; + } - // Show/hide 'cancel' button + // Clear all stars + self.as(Ratings).drain(); + // Set control value + if (control.getCurrent() != null) { + ((GQuery) control.current.data("rating.input")) + .attr("checked", "checked"); + control.current.prevAll().andSelf().filter(".rater-" + control.serial) + .addClass("star-rating-on"); + } else { + $(control.getInputs()).removeAttr("checked"); + } + + // Show/hide 'cancel' button // control.cancel[control.readOnly || control.required?'hide':'show'](); - // Add/remove read-only classes to remove hand pointer - this.siblings().toggleClass("star-rating-readonly", control.isReadOnly()); + // Add/remove read-only classes to remove hand pointer + self.siblings().toggleClass("star-rating-readonly", control.isReadOnly()); + } + return this; } public Ratings selectStar(int value) { - Control control = (Control) this.data("rating"); - if (control == null) { - return this; - } - // do not execute when control is in read-only mode - if (control.isReadOnly()) { - return this; + for (Element e : elements()) { + GQuery self = $(e); + Control control = nullControlIfShouldSkipStar(self); + if (control == null) { + continue; + } + + control.setCurrent(null); + $(control.getStar(value)).as(Ratings).selectStar(); } - control.setCurrent(null); - return $(control.getStar(value)).as(Ratings).selectStar(); + return this; } public Ratings selectStar() { - Control control = (Control) this.data("rating"); - if (control == null) { - return this; - } - // do not execute when control is in read-only mode - if (control.isReadOnly()) { - return this; - } - - control.current = get(0).getTagName().equalsIgnoreCase("INPUT") - ? (GQuery) data("rating.star") - : is(".rater-" + control.getSerial()) ? this : null; + for (Element e : elements()) { + GQuery self = $(e); + Control control = nullControlIfShouldSkipStar(self); + if (control == null) { + continue; + } - // Update rating control state - data("rating", control); - // Update display - this.draw(); - // find data for event - GQuery input = $( - control.current != null ? (GQuery) control.current.data("rating.input") - : null); - // click callback, as requested here: http://plugins.jquery.com/node/1655 + control.current = self.get(0).getTagName().equalsIgnoreCase("INPUT") + ? (GQuery) self.data("rating.star") + : self.is(".rater-" + control.getSerial()) ? this : null; + + // Update rating control state + self.data("rating", control); + // Update display + self.as(Ratings).draw(); + // find data for event + GQuery input = $(control.current != null ? (GQuery) control.current + .data("rating.input") : null); + // click callback, as requested here: http://plugins.jquery.com/node/1655 // if(control.callback) control.callback.apply(input[0], [input.val(), $('a', control.current)[0]]);// callback event + } + return this; } - public Ratings selectStar(String value) { - Control control = (Control) this.data("rating"); + private Control nullControlIfShouldSkipStar(GQuery q) { + Control control = (Control) q.data("rating"); if (control == null) { - return this; + return null; } // do not execute when control is in read-only mode if (control.isReadOnly()) { - return this; + return null; } - control.setCurrent(null); - - NodeList stars = control.getStars(); + return control; + } - for (int i = 0; i < stars.getLength(); i++) { - String val = ((GQuery) $(stars.getItem(i)).data("rating.input")).val(); - if (val != null && val.equals(value)) { - $(stars.getItem(i)).as(Ratings).selectStar(); + public Ratings selectStar(String value) { + for (Element e : elements()) { + GQuery self = $(e); + Control control = nullControlIfShouldSkipStar(self); + if (control == null) { + continue; + } + control.setCurrent(null); + NodeList stars = control.getStars(); + for (int i = 0; i < stars.getLength(); i++) { + String val = ((GQuery) $(stars.getItem(i)).data("rating.input")).val(); + if (val != null && val.equals(value)) { + $(stars.getItem(i)).as(Ratings).selectStar(); + } } } return this; } public Ratings drain() { - Control control = (Control) this.data("rating"); - if (control == null) { - return this; - } - // do not execute when control is in read-only mode - if (control.isReadOnly()) { - return this; + for (Element e : elements()) { + GQuery self = $(e); + Control control = nullControlIfShouldSkipStar(self); + if (control == null) { + continue; + } + control.rater.children().filter(".rater-" + control.getSerial()) + .removeClass("star-rating-on").removeClass("star-rating-hover"); } - control.rater.children().filter(".rater-" + control.getSerial()) - .removeClass("star-rating-on").removeClass("star-rating-hover"); return this; } diff --git a/samples/src/main/java/gwtquery/samples/client/GwtQueryBenchModule.java b/samples/src/main/java/gwtquery/samples/client/GwtQueryBenchModule.java index fbf4512c..486de751 100644 --- a/samples/src/main/java/gwtquery/samples/client/GwtQueryBenchModule.java +++ b/samples/src/main/java/gwtquery/samples/client/GwtQueryBenchModule.java @@ -23,7 +23,7 @@ public class GwtQueryBenchModule implements EntryPoint { private static final String JQUERY = "jquery"; - private static final String GDYNAMIC = "gwtdynamic"; + private static final String GDYNAMIC = "gwt"; private static final String DOJO = "dojo"; @@ -40,7 +40,7 @@ public class GwtQueryBenchModule implements EntryPoint { h.addClickHandler(new ClickHandler() { public void onClick(ClickEvent clickEvent) { - runBenchmarks(dg, new GQueryCompiledBenchmark(), new JQueryBenchmark(), + runBenchmarks(dg, new GQueryDynamicBenchmark(), new JQueryBenchmark(), new DojoBenchmark(), new PrototypeBenchmark()); } }); diff --git a/samples/src/main/java/gwtquery/samples/client/GwtQuerySampleModule.java b/samples/src/main/java/gwtquery/samples/client/GwtQuerySampleModule.java index 9ab09fcf..7a8f20c0 100644 --- a/samples/src/main/java/gwtquery/samples/client/GwtQuerySampleModule.java +++ b/samples/src/main/java/gwtquery/samples/client/GwtQuerySampleModule.java @@ -43,7 +43,15 @@ public class GwtQuerySampleModule implements EntryPoint { }); $(".note").click(lazy().fadeOut().done()); $(".note").append(" Hello"); + $(".outer").eq(0).after(""); + $("#enhance").one(Event.ONCLICK, null, new Function() { + @Override + public boolean f(Event e) { + $(e).attr("disabled", "true"); + $("input").as(Ratings.Ratings).rating(); + return true; + } + }); - $("input").as(Ratings.Ratings).rating(); } } diff --git a/samples/src/main/java/gwtquery/samples/public/GwtQuerySample.html b/samples/src/main/java/gwtquery/samples/public/GwtQuerySample.html index db6fbc95..c0f50b1d 100644 --- a/samples/src/main/java/gwtquery/samples/public/GwtQuerySample.html +++ b/samples/src/main/java/gwtquery/samples/public/GwtQuerySample.html @@ -176,564 +176,7 @@ - -
-

Test Suite

- - - -
 
-
- Test 1 - A blank form - - - - - -
- - - - - -
-
- Rating 1: - (N/M/Y) - - - -
-
-
- Rating 2: - (10 - 50) - - - - - -
-
-
- Rating 3: - (1 - 7) - - - - - - - -
-		 -
- Rating 4: - (1 - 5) - - - - - -
-
-
- Rating 5: - (1 - 5) - - - - - -
-
-
- Rating 6 (readonly): - (1 - 5) - - - - - -
-
-		  -   - Test results:

-
- Results will be displayed here -
-
-
- -
 
 
- -
- Test 2 - With defaults ('checked') - - - - - -
- - - - - -
-
- Rating 1: - (N/M/Y, default M) -
-
- - - -
-
- Rating 2: - (10 - 50, default 30) -
-
- - - - - -
-
- Rating 3: - (1 - 7, default 4) -
-
- - - - - - - -
-		 -
- Rating 4: - (1 - 5, default 1) -
-
- - - - - -
-
- Rating 5: - (1 - 5, default 5) -
-
- - - - - -
-
- Rating 6 (readonly): - (1 - 5, default 3) -
-
- - - - - -
-
-		  -   - Test results:

-
- Results will be displayed here -
-
-
- -
 
 
- -
- - Test 3-A - With callback - - - - - -
-
- Rating 1: - (1 - 3, default 2) - - - -
-
- 
$('.auto-submit-star').rating({
-callback: function(value, link){
-  alert(value);
-}
-  });
-
-		  -   - Test results:

-
- Results will be displayed here -
-
-
- -
 
 
- - -
- Test 3-B - With hover effects - - - - - -
-
- Rating 1: - (1 - 3, default 2) -
- - - - - - Hover tips will appear in here -
-
-
- 
$('.hover-star').rating({
-focus: function(value, link){
-  var tip = $('#hover-test');
-  tip[0].data = tip[0].data || tip.html();
-  tip.html(link.title || 'value: '+value);
-},
-blur: function(value, link){
-  var tip = $('#hover-test');
-  $('#hover-test').html(tip[0].data || '');
-}
-  });
-
-		  -   - Test results:

-
- Results will be displayed here -
-
-
- -
 
 
- -
- Test 4 - Half Stars and Split Stars - - - - - -
- - - - - -
-
- Rating 1: - (N/M/Y/?) - 
<input class="star {half:true}"
- - - - -
-
-
- Rating 2: - (10 - 60) - 
<input class="star {split:3}"
- - - - - - -
-
-
- Rating 3: - (0-5.0, default 3.5) - 
<input class="star {split:2}"
- - - - - - - - - - -
-		 -
- Rating 4: - (1-6, default 5) - 
<input class="star {split:2}"
- - - - - - -
-
-
- Rating 5: - (1-20, default 11) - 
<input class="star {split:4}"
- - - - - - - - - - - - - - - - - - - - -
-
-
- Rating 6 (readonly): - (1-20, default 13) - 
<input class="star {split:4}"
- - - - - - - - - - - - - - - - - - - - -
-
-		  -   - Test results:

-
- Results will be displayed here -
-
-
-
- -
-

API

-

NEW to v3

- -

API methods can be invoked this this:

- 
$(selector).rating(
-   'method', // method name
-   [] // method arguments (not required)
-  );
- -


- -

$().rating('select', index / value)

-

- Use this method to set the value (and display) of the star rating control - via javascript. It accepts the index of the star you want to select (0 based) - or its value (which must be passed as a string. -

-

- Example: (values A/B/C/D/E) -

-
- - - - - - - -
- By index: - - - - - - eg.: $('input').rating('select',3) -
- By value: - - - - - - eg.: $('input').rating('select','C') -
- -


- -

$().rating('readOnly', true / false)

-

- Use this method to set the value (and display) of the star rating control - via javascript. It accepts the index of the star you want to select (0 based) - or its value (which must be passed as a string. -

-

- Example: (values 1,2,3...10) -

-
- - - - - - - - - - - - -
- - eg.: $('input').rating('readOnly',true) -
- - eg.: $('input').rating('readOnly',false) or simply $('input').rating('readOnly'); -
- -


- -

$().rating('disable') / $().rating('enable')

-

- These methods bahve almost exactly as the readOnly method, however - they also control whether or not the select value is submitted with - the form. -

-

- Example: (values 1,2,3...10) -

-
- - - - - - - - - - - - -
- - eg.: $('input').rating('disable') -
- - eg.: $('input').rating('enable'); -
-
+ -- 2.39.5