Skip to content

Commit c100c0c

Browse files
javiertoledojaviertoledo
committed
First commit!
0 parents  commit c100c0c

File tree

4 files changed

+211
-0
lines changed

4 files changed

+211
-0
lines changed

‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2013 Javier Toledo <[email protected]>
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in
13+
all copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21+
THE SOFTWARE.

‎README.md

+75
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
# Bootstrap Rating Input in 2Kb
2+
3+
This is another plugin that eases the generation of rating stars for jQuery and Bootstrap.
4+
5+
It generates widgets like this:
6+
7+
![Rating example](http://curso-rails-mini-blog.s3.amazonaws.com/rating.png)
8+
9+
## But, why another damn rating plugin???
10+
11+
After searching for existing widgets, I found three categories of them:
12+
13+
- The ones that depends on PNG images.
14+
- The ones that adds A LOT of JavaScript and CSS code to my project.
15+
- The ones that adds A LOT of JavaScript and CSS code and depends on PNG images.
16+
17+
I don't want to add a whole multipurpose library just to put a few stars in my interface, I want my rating stars to look awesome in retina screens without worrying about image versions and dynamically replacing them, and Bootstrap already includes a set of beautifully designed vectorial icons by Glyphicons, so I thought I could create something simpler.
18+
19+
## Ok, enough talking, tell me how this thing works!
20+
21+
Download `bootstrap-rating-input.min.js` and put it wherever you usually put JavaScripts in your project. Include it on pages where you want to have forms with ratings:
22+
23+
<script src="path/to/javascripts/bootstrap-rating-input.min.js" type="text/javascript"></script>
24+
25+
Now add a input of type *number* to your forms and add the class `rating` to it:
26+
27+
<input type="number" name="your_awesome_parameter" id="some_id" class="rating" />
28+
29+
That's all! When page loads, you'll find a few stars where you'd expect to find the input. It works just like most of rating plugins, but you don't need to learn anything about options or initializations, it just works out of the box.
30+
31+
### Wait, where has my input gone?
32+
33+
The plugin replaces your number input by a hidden field with identical name and id and adds interactive stars that will catch your clicks and save the selected values into the hidden field. In this way the form can be submitted or value readed by jQuery normally.
34+
35+
### Nice, but I want to use a different number of stars
36+
37+
Sure! You can set min and max values adding `data-min` and `data-max`:
38+
39+
<input class="rating" data-max="4" data-min="0" id="some_id" name="your_awesome_parameter" type="number" />
40+
41+
### And what about clearing the stars?
42+
43+
By default once you set a value it remains set and you can only change it by another, but you can add a clear link by just defining the `data-clearable` attribute:
44+
45+
<input class="rating" data-clearable="remove" id="some_id" name="your_awesome_parameter" type="number" />
46+
47+
The content of `data-clearable` will appear as label for the link. You can set a space or a &amp;nbsp; to make it appear as a naked close icon.
48+
49+
### I don't want to be forced to add the `rating` class to the inputs
50+
51+
The `rating` class is used in combination with `input[type=number]` to let you autoload the rating plugin without coding anything, but you can apply this plugin to a input of any type by executing the method `rating` on a jQuery selection:
52+
53+
$('input.my_class').rating();
54+
55+
## Requirements
56+
57+
You know... [Twitter Bootstrap](http://twitter.github.io/bootstrap) and [jQuery](http://jquery.com)!
58+
59+
## Can I generate read-only stars for displaying?
60+
61+
If you think about it you don't want to use a plugin to generate static HTML code that is as simple as this:
62+
63+
<i class='icon-star'></i><i class='icon-star'></i><i class='icon-star'></i><i class='icon-star-empty'></i><i class='icon-star-empty'></i>
64+
65+
You can easily generate such code with your favourite template engine and a loop. With Ruby and HAML it could look like this:
66+
67+
/ Given a variable val with the value you want to represent and a variable max that contains the maximum number of stars:
68+
- max.times do |i|
69+
%i{class: "icon-star#{'-empty' if i>val}"}
70+
71+
Well, HAML is awesome, but you are a programmer, so you'll be able to addapt this to your favorite language...
72+
73+
## It looks nice, but I want to complain because it doesn't fit my favorite use case
74+
75+
I have implemented this for my project in my environment and sharing it for free. Leave me an issue with your suggestions and I'll eventually push a fix, but this is MIT licensed, so you're welcome to fork this project, do pull requests with fixes and improvements, reimplement better versions of it for your own or do whatever you want, I'll be happy if it becomes useful or inspires at least one more person.

‎bootstrap-rating-input.js

+111
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
(function ($) {
2+
3+
$.fn.rating = function () {
4+
5+
var element;
6+
7+
// A private function to highlight a star corresponding to a given value
8+
function _paintValue(ratingInput, value) {
9+
var selectedStar = $(ratingInput).find('i[data-value=' + value + ']');
10+
selectedStar.removeClass('icon-star-empty').addClass('icon-star');
11+
selectedStar.prevAll('i').removeClass('icon-star-empty').addClass('icon-star');
12+
selectedStar.nextAll('i').removeClass('icon-star').addClass('icon-star-empty');
13+
}
14+
15+
// A private function to remove the selected rating
16+
function _clearValue(ratingInput) {
17+
var self = $(ratingInput);
18+
self.find('i').removeClass('icon-star').addClass('icon-star-empty');
19+
self.find('.rating-clear').hide();
20+
self.find('input').val('');
21+
}
22+
23+
// Iterate and transform all selected inputs
24+
for (element = this.length - 1; element >= 0; element--) {
25+
26+
var el, i, ratingInputs,
27+
originalInput = $(this[element]),
28+
max = originalInput.data('max') || 5,
29+
min = originalInput.data('min') || 0,
30+
clearable = originalInput.data('clearable') || null,
31+
stars = '';
32+
33+
// HTML element construction
34+
for (i = min; i <= max; i++) {
35+
// Create <max> empty stars
36+
stars += ['<i class="icon-star-empty" data-value="', i, '"></i>'].join('');
37+
}
38+
// Add a clear link if clearable option is set
39+
if (clearable) {
40+
stars += [
41+
' <a class="rating-clear" style="display:none;" href="javascript:void"><i class="icon-remove"></i> ',
42+
clearable,
43+
'</a>'].join('');
44+
}
45+
46+
el = [
47+
// Rating widget is wrapped inside a div
48+
'<div class="rating-input">',
49+
stars,
50+
// Value will be hold in a hidden input with same name and id than original input so the form will still work
51+
'<input type="hidden" name="',
52+
originalInput.attr('name'),
53+
'" value="',
54+
originalInput.val(),
55+
'" id="',
56+
originalInput.attr('id'),
57+
'" />',
58+
'</div>'].join('');
59+
60+
// Replace original inputs HTML with the new one
61+
originalInput.replaceWith(el);
62+
63+
}
64+
65+
// Give live to the newly generated widgets
66+
$('.rating-input')
67+
// Highlight stars on hovering
68+
.on('mouseenter', 'i', function () {
69+
var self = $(this);
70+
_paintValue(self.parent(), self.data('value'));
71+
})
72+
// View current value while mouse is out
73+
.on('mouseleave', 'i', function () {
74+
var self = $(this);
75+
var val = self.siblings('input').val();
76+
if (val) {
77+
_paintValue(self.parent(), val);
78+
} else {
79+
_clearValue(self.parent());
80+
}
81+
})
82+
// Set the selected value to the hidden field
83+
.on('click', 'i', function () {
84+
var self = $(this);
85+
var val = self.data('value');
86+
self.siblings('input').val(val);
87+
self.siblings('.rating-clear').show();
88+
})
89+
// Remove value on clear
90+
.on('click', '.rating-clear', function () {
91+
_clearValue($(this).parent());
92+
})
93+
// Initialize view with default value
94+
.each(function () {
95+
var val = $(this).find('input').val();
96+
if (val) {
97+
_paintValue(this, val);
98+
$(this).find('.rating-clear').show();
99+
}
100+
});
101+
102+
};
103+
104+
// Auto apply conversion of number fields with class 'rating' into rating-fields
105+
$(function () {
106+
if ($('input.rating[type=number]').length > 0) {
107+
$('input.rating[type=number]').rating();
108+
}
109+
});
110+
111+
}(jQuery));

‎bootstrap-rating-input.min.js

+4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)