Skip to content

Commit

Permalink
Merge pull request #23
Browse files Browse the repository at this point in the history 
Conflicts:
	build/bootstrap-rating-input.min.js
  • Loading branch information
@javiertoledo
javiertoledo committed Aug 12, 2014
2 parents a0682a5 + ee21124 commit 856a179
Show file tree
Hide file tree
Showing 4 changed files with 59 additions and 21 deletions.
14 changes: 14 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,20 @@ By default once you set a value it remains set and you can only change it by ano

The content of `data-clearable` will appear as label for the link. You can set a space or a   to make it appear as a naked close icon.

### Can I use custom icon classes?

Now you can use custom icons thanks to the awesome contribution by [johncadigan](https://github.com/johncadigan). You can set different icon classes from gliphicons or even load icons from other libraries you're using. For instance here is how you generate a heart rating input with font awesome (You can see it working in the `demo.html` file):

<input type="number" name="your_awesome_parameter" id="some_id" class="rating" data-clearable="remove" data-icon-lib="fa" data-active-icon="fa-heart" data-inactive-icon="fa-heart-o" data-clearable-icon="fa-trash-o"/>

If you want to use [FontAwesome](http://fontawesome.io/), remember to include the library in your header:

<header>
...
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
...
</header>

### I don't want to be forced to add the `rating` class to the inputs

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:
Expand Down
2 changes: 1 addition & 1 deletion build/bootstrap-rating-input.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

9 changes: 7 additions & 2 deletions demo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@
<head>
<title>Bootstrap Rating Input Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<!--script src="src/bootstrap-rating-input.js"></script-->
<script src="build/bootstrap-rating-input.min.js"></script>
Expand All @@ -21,8 +22,12 @@
</script>
</head>
<body>
<h1>The Bootstrap Rating Input <small>in action...</small></h1>
<h1>The Original Bootstrap Rating Input <small>in action...</small></h1>

<p>My rating: <input type="number" name="your_awesome_parameter" id="some_id" class="rating" data-clearable="remove"/></p>

<h1>The Bootstrap Rating input with custom icon classes <small>by <a href="https://github.com/johncadigan">johncadigan</a></small></h1>

<p>My rating: <input type="number" name="your_awesome_parameter" id="some_id" class="rating" data-clearable="remove" data-icon-lib="fa" data-active-icon="fa-heart" data-inactive-icon="fa-heart-o" data-clearable-icon="fa-trash-o"/></p>
</body>
</html>
55 changes: 37 additions & 18 deletions src/bootstrap-rating-input.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,17 @@
var element;

// A private function to highlight a star corresponding to a given value
function _paintValue(ratingInput, value) {
function _paintValue(ratingInput, value, active_icon, inactive_icon) {
var selectedStar = $(ratingInput).find('[data-value=' + value + ']');
selectedStar.removeClass('glyphicon-star-empty').addClass('glyphicon-star');
selectedStar.prevAll('[data-value]').removeClass('glyphicon-star-empty').addClass('glyphicon-star');
selectedStar.nextAll('[data-value]').removeClass('glyphicon-star').addClass('glyphicon-star-empty');
selectedStar.removeClass(inactive_icon).addClass(active_icon);
selectedStar.prevAll('[data-value]').removeClass(inactive_icon).addClass(active_icon);
selectedStar.nextAll('[data-value]').removeClass(active_icon).addClass(inactive_icon);
}

// A private function to remove the highlight for a selected rating
function _clearValue(ratingInput) {
function _clearValue(ratingInput, active_icon, inactive_icon) {
var self = $(ratingInput);
self.find('[data-value]').removeClass('glyphicon-star').addClass('glyphicon-star-empty');
self.find('[data-value]').removeClass(active_icon).addClass(inactive_icon);
}

// A private function to change the actual value to the hidden field
Expand All @@ -28,26 +28,37 @@
}
}


// Iterate and transform all selected inputs
for (element = this.length - 1; element >= 0; element--) {

var el, i,
originalInput = $(this[element]),
max = originalInput.data('max') || 5,
min = originalInput.data('min') || 0,
def_val = originalInput.val() || 0,
lib = originalInput.data('icon-lib') || 'glyphicon'
active = originalInput.data('active-icon') || 'glyphicon-star',
inactive = originalInput.data('inactive-icon') || 'glyphicon-star-empty',
clearable = originalInput.data('clearable') || null,
clearable_i = originalInput.data('clearable-icon') || 'glyphicon-remove',
stars = '';

// HTML element construction
for (i = min; i <= max; i++) {
// Create <max> empty stars
stars += ['<span class="glyphicon glyphicon-star-empty" data-value="', i, '"></span>'].join('');
if(i <= def_val){
stars += ['<i class="',lib, ' ', active, '" data-value="', i, '"></i>'].join('');
}
else{
stars += ['<i class="',lib, ' ', inactive, '" data-value="', i, '"></i>'].join('')
}
}
// Add a clear link if clearable option is set
if (clearable) {
stars += [
stars += [
' <a class="rating-clear" style="display:none;" href="javascript:void">',
'<span class="glyphicon glyphicon-remove"></span> ',
'<span class="',lib,' ',clearable_i,'"></span> ',
clearable,
'</a>'].join('');
}
Expand All @@ -56,8 +67,11 @@
var newInput = originalInput.clone(true)
.addClass('hidden')
.data('max', max)
.data('min', min);

.data('min', min)
.data('icon-lib', lib)
.data('active-icon', active)
.data('inactive-icon', inactive);

// Rating widget is wrapped inside a div
el = [
'<div class="rating-input">',
Expand All @@ -76,19 +90,22 @@
// Highlight stars on hovering
.on('mouseenter', '[data-value]', function () {
var self = $(this);
_paintValue(self.closest('.rating-input'), self.data('value'));
input = self.siblings('input');
_paintValue(self.closest('.rating-input'), self.data('value'), input.data('active-icon'), input.data('inactive-icon'));
})
// View current value while mouse is out
.on('mouseleave', '[data-value]', function () {
var self = $(this),
input = self.siblings('input'),
val = input.val(),
min = input.data('min'),
max = input.data('max');
max = input.data('max'),
active = input.data('active-icon'),
inactive = input.data('inactive-icon');
if (val >= min && val <= max) {
_paintValue(self.closest('.rating-input'), val);
_paintValue(self.closest('.rating-input'), val, active, inactive);
} else {
_clearValue(self.closest('.rating-input'));
_clearValue(self.closest('.rating-input'), active, inactive);
}
})
// Set the selected value to the hidden field
Expand All @@ -103,9 +120,11 @@
// Remove value on clear
.on('click', '.rating-clear', function (e) {
var self = $(this),
input = self.siblings('input');
input = self.siblings('input'),
active = input.data('active-icon'),
inactive = input.data('inactive-icon');
_updateValue(input, input.data('empty-value'));
_clearValue(self.closest('.rating-input'));
_clearValue(self.closest('.rating-input'), active, inactive);
e.preventDefault();
return false;
})
Expand Down

0 comments on commit 856a179

Please sign in to comment.