Skip to content

Commit 8150794

Browse files
author
Christopher Mitchell
committed
Adding initial rating widget with no remove functionality.
1 parent 8d09f75 commit 8150794

File tree

6 files changed

+331
-0
lines changed

6 files changed

+331
-0
lines changed

‎demos/rating/default.html

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" >
5+
<title>jQuery UI Slider - Default functionality</title>
6+
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7+
<script src="../../jquery-1.6.2.js"></script>
8+
<script src="../../ui/jquery.ui.core.js"></script>
9+
<script src="../../ui/jquery.ui.widget.js"></script>
10+
<script src="../../ui/jquery.ui.rating.js"></script>
11+
<link rel="stylesheet" href="../demos.css">
12+
<script>
13+
$(function() {
14+
$( "#rating" ).rating();
15+
});
16+
</script>
17+
</head>
18+
<body>
19+
20+
<div class="demo">
21+
22+
<form action="" method="get" accept-charset="utf-8">
23+
<p>
24+
<select name="myrating" id="rating">
25+
<option value="0">0</option>
26+
<option>1</option>
27+
<option selected="selected">2</option>
28+
<option>3</option>
29+
<option>4</option>
30+
<option>5</option>
31+
</select>
32+
</p>
33+
</form>
34+
35+
</div><!-- End demo -->
36+
37+
38+
39+
<div class="demo-description">
40+
<p>The default settings for the rating widget.</p>
41+
</div><!-- End demo-description -->
42+
43+
</body>
44+
</html>

‎demos/rating/index.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>jQuery UI Rating Demo</title>
6+
<link rel="stylesheet" href="../demos.css">
7+
</head>
8+
<body>
9+
10+
<div class="demos-nav">
11+
<h4>Examples</h4>
12+
<ul>
13+
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
14+
</ul>
15+
</div>
16+
17+
</body>
18+
</html>

‎themes/base/images/star.gif

1.65 KB
Loading

‎themes/base/jquery.ui.base.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
@import url("jquery.ui.menu.css");
1818
@import url("jquery.ui.menubar.css");
1919
@import url("jquery.ui.progressbar.css");
20+
@import url("jquery.ui.rating.css");
2021
@import url("jquery.ui.resizable.css");
2122
@import url("jquery.ui.selectable.css");
2223
@import url("jquery.ui.slider.css");

‎themes/base/jquery.ui.rating.css

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
/*
2+
* jQuery UI Rating @VERSION
3+
*
4+
* Copyright 2011, AUTHORS.txt (http: //jqueryui.com/about)
5+
* Dual licensed under the MIT or GPL Version 2 licenses.
6+
* http: //jquery.org/license
7+
*
8+
* http: //docs.jquery.com/UI/Rating#theming
9+
*/
10+
.ui-rating{
11+
height: 16px;
12+
}
13+
.ui-rating .ui-rating-star{
14+
width: 16px;
15+
height: 16px;
16+
font-size: 2px;
17+
float: left;
18+
text-decoration: none;
19+
vertical-align: bottom;
20+
background-image: url(images/star.gif);
21+
background-repeat: no-repeat;
22+
background-position: 0 -32px;
23+
}
24+
.ui-rating-current .ui-rating-full{
25+
background-position: 0 0;
26+
}
27+
.ui-rating-current .ui-rating-partial{
28+
background-position: 0 -16px;
29+
}
30+
.ui-rating .ui-rating-cancel-empty{
31+
background-position: 0 -64px;
32+
}
33+
.ui-rating .ui-rating-cancel-full{
34+
background-position: 0 -80px;
35+
}
36+
.ui-rating .ui-rating-hover{
37+
background-position: 0 -48px;
38+
}
39+
.ui-rating-cancel-empty.ui-rating-hover{
40+
background-position: 0 -80px;
41+
}

‎ui/jquery.ui.rating.js

Lines changed: 227 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,227 @@
1+
/*
2+
* jQuery UI Rating 1.9
3+
*
4+
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
5+
* Dual licensed under the MIT or GPL Version 2 licenses.
6+
* http://jquery.org/license
7+
*
8+
* http://docs.jquery.com/UI/Rating
9+
*
10+
* Depends:
11+
* jquery.ui.core.js
12+
* jquery.ui.widget.js
13+
*/
14+
(function( $, undefined ) {
15+
16+
$.widget("ui.rating", {
17+
version: "@VERSION",
18+
19+
options: {
20+
value: null,
21+
max: null,
22+
readOnly: false,
23+
24+
// callbacks
25+
change: null
26+
},
27+
28+
min: 0,
29+
30+
_create: function() {
31+
var self = this;
32+
33+
var ratingDiv = $( "<div class='ui-rating ui-rating-current' />");
34+
var ratingStar = $( "<a href='#' class='ui-icon ui-rating-star' />");
35+
36+
var element = self.element.wrap( ratingDiv ).parent();
37+
38+
$.extend(self, {
39+
originalElement: this.element,
40+
element: element
41+
});
42+
43+
if (isNaN(parseFloat(self.options.value)))
44+
{
45+
self.options.value = parseFloat(self.originalElement.val());
46+
}
47+
48+
if (isNaN(parseInt(self.options.max)))
49+
{
50+
self.options.max = 0;
51+
}
52+
53+
$.each( $( "option", self.originalElement ), function( index, option ) {
54+
var val = parseInt( $( option ).val(), 0 );
55+
56+
self.options.max = ( val > self.options.max ) ? val : self.options.max;
57+
});
58+
59+
for ( index = 1; index <= self.options.max; index++ ) {
60+
ratingStar.clone().attr( 'id', 'rating_star_rating_' + index ).text( "Give it a " + index ).data( "rating", index ).appendTo( self.element );
61+
}
62+
63+
self.originalElement.hide();
64+
65+
// self.oldValue = self._getValue();
66+
self._refreshValue();
67+
68+
// self.oldReadOnly = self._getReadOnly();
69+
self._setReadOnly();
70+
},
71+
72+
_destroy: function() {
73+
this.originalElement.siblings().remove().end().show().unwrap( this.element );
74+
75+
this.element = this.originalElement;
76+
77+
delete this.originalElement;
78+
delete this.oldValue;
79+
delete this.oldReadOnly;
80+
},
81+
82+
_events: {
83+
'click .ui-rating-star': function( event ) {
84+
event.preventDefault();
85+
86+
this.options.value = $( event.target ).data( "rating" );
87+
88+
this._refreshValue();
89+
},
90+
91+
mouseover: function( event ) {
92+
var $target = $( event.target );
93+
94+
if ( $target.is( ".ui-rating-star" ) ) {
95+
this.element.removeClass( "ui-rating-current" );
96+
97+
// create referece object for stars
98+
var ratingStars = $( ".ui-rating-star", this.element );
99+
100+
// add hover class to the current and preceding stars
101+
ratingStars.removeClass( "ui-rating-hover" ).filter(function( index ) {
102+
return index <= ratingStars.index( $target );
103+
}).addClass( "ui-rating-hover" );
104+
105+
this._trigger( "change", null, this.ui() );
106+
}
107+
},
108+
109+
mouseleave: function( event ) {
110+
this.element.addClass( "ui-rating-current" ).find( ".ui-rating-hover" ).removeClass( "ui-rating-hover" );
111+
112+
this._trigger( "change", null, this.ui() );
113+
}
114+
},
115+
116+
_eventsReadOnly: {
117+
'click .ui-rating-star': function( event ) {
118+
event.preventDefault();
119+
}
120+
},
121+
122+
_setOption: function( key, value ) {
123+
if ( key === "value" ) {
124+
this.options.value = value;
125+
126+
this._refreshValue();
127+
}
128+
129+
if ( key === "readOnly") {
130+
this.options.readOnly = value;
131+
132+
this._setReadOnly( value );
133+
}
134+
135+
this._super( "_setOption", key, value );
136+
},
137+
138+
_getValue: function() {
139+
var val = this.options.value;
140+
141+
// normalize invalid value
142+
if ( typeof val !== "number" ) {
143+
val = 0;
144+
}
145+
146+
return Math.min( this.options.max, Math.max( this.min, val ) );
147+
},
148+
149+
_refreshValue: function() {
150+
var value = this._getValue();
151+
152+
if ( this.oldValue !== value ) {
153+
this.oldValue = value;
154+
155+
$( ".ui-rating-star", this.element ).removeClass( "ui-rating-full ui-rating-partial" ).each( function( index ) {
156+
index++;
157+
158+
var starClass = "";
159+
160+
if ( index <= value ) {
161+
starClass = "ui-rating-full";
162+
} else if ( index - value < 1 ) {
163+
starClass = "ui-rating-partial";
164+
}
165+
166+
$( this ).addClass( starClass );
167+
});
168+
169+
this.originalElement.val( value );
170+
171+
this._trigger( "change", null, this.ui() );
172+
}
173+
},
174+
175+
_getReadOnly: function() {
176+
var val = this.options.readOnly;
177+
178+
// normalize invalid boolean
179+
if ( typeof val !== "boolean" )
180+
{
181+
val = false;
182+
}
183+
184+
return val;
185+
},
186+
187+
_setReadOnly: function() {
188+
var readOnly = this._getReadOnly();
189+
190+
if ( this.oldReadOnly !== readOnly ) {
191+
this.oldReadOnly = readOnly;
192+
193+
if (readOnly === true) {
194+
// make read only
195+
this.element.addClass( "ui-rating-readonly ui-rating-current" ).find( ".ui-rating-hover" ).removeClass( "ui-rating-hover" );
196+
197+
this.bindings.unbind( "." + this.widgetName );
198+
199+
this._bind( this.element, this._eventsReadOnly);
200+
} else {
201+
// make non-read only
202+
this.element.removeClass('ui-rating-readonly');
203+
204+
this.bindings.unbind( "." + this.widgetName );
205+
206+
this._bind( this.element, this._events );
207+
}
208+
209+
this._trigger( "change", null, this.ui() );
210+
}
211+
},
212+
213+
ui: function() {
214+
return {
215+
element: this.element,
216+
originalElement: this.originalElement,
217+
value: this.options.value,
218+
oldValue: this.oldValue,
219+
min: this.min,
220+
max: this.options.max,
221+
oldReadOnly: this.options.readOnly,
222+
readOnly: this.options.readOnly
223+
};
224+
}
225+
});
226+
227+
}( jQuery ));

0 commit comments

Comments
 (0)