Implements CTK.StarRating, a brand new widget for ratings. It's been

written from scratch. So far it seems to work fine, but further
testing is definitely required.

git-svn-id: svn://cherokee-project.com/CTK/trunk@5413 5dc97367-97f1-0310-9951-d761b3857238

CTK/Makefile.am

@@ -52,7 +52,8 @@ XMLRPCProxy.py \
 AjaxUpload.py \
 i18n.py \
 Init.py \
-Paginator.py
+Paginator.py \
+StarRating.py
 
 EXTRA_DIST = \
 $(ctk_DATA)

CTK/StarRating.py

@@ -0,0 +1,58 @@
+# -*- coding: utf-8 -*-
+#
+# CTK: Cherokee Toolkit
+#
+# Authors:
+#      Alvaro Lopez Ortega <alvaro@alobbs.com>
+#
+# Copyright (C) 2010 Alvaro Lopez Ortega
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of version 2 of the GNU General Public
+# License as published by the Free Software Foundation.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with this program; if not, write to the Free Software
+# Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA
+# 02110-1301, USA.
+#
+
+from Box import Box
+from Combobox import Combobox
+
+HEADERS = [
+    '<script type="text/javascript" src="/CTK/js/jquery-ui-1.7.2.custom.min.js"></script>',
+    '<script type="text/javascript" src="/CTK/js/StarRating.js"></script>'
+]
+
+RATING_OPTIONS = [
+    ('1', "Very poor"),
+    ('2', "Not that bad"),
+    ('3', "Average"),
+    ('4', "Good"),
+    ('5', "Excellent")
+]
+
+JS_INIT = """
+$("#%(id)s").StarRating (%(selected)s);
+"""
+
+class StarRating (Box):
+    def __init__ (self, props={}):
+        Box.__init__ (self, {'class': 'star-rating'})
+        self.selected = props.get('selected')
+        combo = Combobox (props.copy(), RATING_OPTIONS)
+        self += combo
+
+    def Render (self):
+        render = Box.Render(self)
+
+        render.headers += HEADERS
+        render.js      += JS_INIT %({'id':       self.id,
+                                     'selected': self.selected or "-1"})
+        return render

CTK/__init__.py

@@ -68,6 +68,7 @@
 from XMLRPCProxy import XMLRPCProxy
 from AjaxUpload import AjaxUpload
 from Paginator import Paginator
+from StarRating import StarRating
 
 # Comodity
 from cgi import escape as escape_html

static/css/CTK.css

@@ -820,3 +820,10 @@ tr.panel-selected td div.row_content .sel-actions {
 
 .ui-corner-all { -moz-border-radius: 4px; -webkit-border-radius: 4px; }
 .ui-corner-left { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; }
+
+.ui-stars-star {float:left; display:block; overflow:hidden; text-indent:-999em; cursor:pointer; }
+.ui-stars-star a {width:16px; height:15px; display:block; background:url(/CTK/images/jquery.ui.stars.gif) no-repeat 0 0;}
+.ui-stars-star a {background-position:0 -32px;}
+.ui-stars-star-on a {background-position:0 -48px;}
+.ui-stars-star-hover a {background-position:0 -64px;}
+.ui-stars-star-disabled,.ui-stars-star-disabled a {cursor:default!important;}

static/images/Makefile.am

@@ -37,7 +37,8 @@ ui-icons_2e83ff_256x240.png \
 ui-icons_454545_256x240.png \
 ui-icons_888888_256x240.png \
 ui-icons_cd0a0a_256x240.png \
-uploadify.cancel.png
+uploadify.cancel.png \
+jquery.ui.stars.gif
 
 EXTRA_DIST = \
 $(images_DATA)

static/js/Makefile.am

@@ -4,6 +4,7 @@ jsdir = "$(datadir)/cherokee/admin/CTK/static/js"
 js_DATA = \
 Help.js \
 Submitter.js \
+StarRating.js \
 common.js \
 jquery-1.3.2.min.js \
 jquery-ui-1.7.2.custom.min.js \

static/js/StarRating.js

@@ -0,0 +1,106 @@
+/* CTK: Cherokee Toolkit
+ *
+ * Authors:
+ *      Alvaro Lopez Ortega <alvaro@alobbs.com>
+ *
+ * Copyright (C) 2010 Alvaro Lopez Ortega
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of version 2 of the GNU General Public
+ * License as published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA
+ * 02110-1301, USA.
+ */
+
+(function($) {
+    var StarRating = function (element) {
+	   var obj  = this;       // Object {}
+	   var self = $(element); // $(<div>)
+
+	   // PRIVATE
+	   //
+	   function get_star_number (star) {
+		  return $(star).find("a").text();
+	   }
+
+	   function fill_to (idx, hover) {
+		  if (idx == -1) {
+			 for (var i=1; i<=5; i++) {
+				var $star = obj.$parent.find('.star'+i);
+				$star.addClass('ui-stars-star-disabled').removeClass('ui-stars-star-hover').removeClass('ui-stars-star-on');
+			 }
+			 return;
+		  }
+
+		  var addClass = hover ? 'ui-stars-star-hover' : 'ui-stars-star-on';
+		  var remClass = hover ? 'ui-stars-star-on' : 'ui-stars-star-hover';
+
+		  for (var i=1; i<=5; i++) {
+			 var $star = obj.$parent.find('.star'+i);
+			 if (idx >= i) {
+				$star.removeClass(remClass).addClass(addClass);
+			 } else {
+				$star.removeClass(addClass).addClass(remClass);
+			 }
+		  }
+	   }
+
+	   // PUBLIC
+	   //
+	   this.init = function (self, selected) {
+		  obj.$select = self.find('select');  // <select>
+		  obj.$parent = obj.$select.parent(); // <div>
+		  obj.score   = selected;
+
+		  /* Hide the <select> */
+		  obj.$select.hide();
+
+		  /* Add the stars */
+		  var stars_html = '';
+		  for (var i=1; i<=5; i++) {
+			 stars_html += '<div class="star'+i +' ui-stars-star"><a>'+ i +'</a></div>';
+            }
+		  obj.$parent.append (stars_html);
+
+		  /* Initial value */
+		  fill_to (obj.score, true);
+
+		  /* Events */
+		  obj.$parent.find ('.ui-stars-star')
+		  .bind('mouseover', function() {
+			 var idx = get_star_number (this);
+			 fill_to (idx, true);
+		  })
+		  .bind('mouseout', function() {
+			 fill_to (obj.score, true);
+		  })
+		  .bind('click', function() {
+			 var idx = get_star_number (this);
+			 obj.score = parseInt(idx);
+			 fill_to (idx, true);
+			 obj.$select.val(idx);
+			 obj.$select.trigger ({type: 'change', value: idx})
+		  });
+	   };
+    };
+
+    $.fn.StarRating = function (selected) {
+	   var self = this;
+	   return this.each (function() {
+		  if ($(this).data('starts')) return;
+
+		  var stars = new StarRating (this);
+		  $(this).data('stars', stars);
+		  stars.init (self, selected);
+	   });
+
+    };
+})(jQuery);

tests/test14.py

@@ -0,0 +1,24 @@
+# -*- coding: utf-8 -*-
+
+import CTK
+
+def commit():
+    print CTK.post
+    return {'ret': 'ok'}
+
+def default():
+    submit = CTK.Submitter('/commit')
+    submit += CTK.RawHTML ("<h2>3rd selected</h2>")
+    submit += CTK.StarRating ({'name': 'test_rate1', 'selected': '3'})
+    submit += CTK.RawHTML ("<h2>None selected</h2>")
+    submit += CTK.StarRating ({'name': 'test_rate2'})
+
+    page = CTK.Page()
+    page += CTK.RawHTML('<h1>Demo StarRating</h1>')
+    page += submit
+    return page.Render()
+
+
+CTK.publish ('', default)
+CTK.publish ('/commit', commit, method="POST")
+CTK.run (port=8000)