Fixed issues #27 and #26

README.md

@@ -42,9 +42,15 @@ Sure! You can set min and max values adding `data-min` and `data-max`:
 
     <input class="rating" data-max="5" data-min="1" id="some_id" name="your_awesome_parameter" type="number" />
 
+### Can I set a default value?
+
+Definitely, just set an integer value in your input that makes sense:
+
+    <input type="number" name="your_awesome_parameter" id="some_id" class="rating" data-clearable="remove" value="3"/>
+
 ### Can I set a special value for empty ratings?
 
-You can add the attribute `data-empty-value` to indicate which value should send the form when it have an empty rating. This can be used, for example, to have an special value indicating the user didn't seleted anything:
+You can add the attribute `data-empty-value` to indicate which value should send the form when it have an empty rating. This can be used, for example, to have an special value indicating the user didn't select anything:
 
     <input class="rating" data-max="5" data-min="1" id="some_id" name="your_awesome_parameter" type="number" data-empty-value="0"/>
 

demo.html

@@ -5,7 +5,7 @@
     <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="src/bootstrap-rating-input.js"></script> -->
     <script src="build/bootstrap-rating-input.min.js"></script>
     <style>
       body {
@@ -26,6 +26,12 @@ <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>Using a default value:</h1>
+    <p>My rating: <input type="number" name="your_awesome_parameter" id="some_id" class="rating" data-clearable="remove" value="3"/></p>   
+
+    <h1>With a minimum value and a special empty-value:</h1>
+    <p>My rating: <input type="number" name="your_awesome_parameter" id="some_id" class="rating" data-clearable="remove" data-min="2" data-empty-value="1"/></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>

package.json

@@ -4,8 +4,8 @@
   "repository": "https://github.com/javiertoledo/bootstrap-rating-input.git",
   "main": "src/bootstrap-rating-input.js",
   "devDependencies": {
-    "uglify-js": "1.3.5",
-    "grunt": "0.4.2",
-    "grunt-contrib-uglify": "0.2.6"
+    "grunt": "^0.4.2",
+    "grunt-contrib-uglify": "0.2.6",
+    "uglify-js": "1.3.5"
   }
 }

src/bootstrap-rating-input.js

@@ -44,6 +44,7 @@
   var DEFAULTS = {
     'min': 1,
     'max': 5,
+    'empty-value': 0,
     'icon-lib': 'glyphicon',
     'active-icon': 'glyphicon-star',
     'inactive-icon': 'glyphicon-star-empty',
@@ -66,7 +67,7 @@
   Rating.prototype = {
 
     clear: function() {
-      this.setValue(this.options.min - 1);
+      this.setValue(this.options['empty-value']);
     },
 
     setValue: function(value) {
@@ -76,25 +77,27 @@
 
     highlight: function(value, skipClearable) {
       var options = this.options;
-      var normValue = value - options.min + 1;
       var $el = this.$el;
-      var $selected = $el.find(starSelector(normValue));
-      if (normValue) {
+      if (value >= this.options.min && value <= this.options.max) {
+        var $selected = $el.find(starSelector(value));
         toggleActive($selected.prevAll('i').andSelf(), true, options);
         toggleActive($selected.nextAll('i'), false, options);
       } else {
-        toggleActive($selected, false, options);
+        toggleActive($el.find(starSelector()), false, options);
       }
       if (!skipClearable) {
-        $el.find(clearSelector).toggleClass(hiddenClass, !normValue);
+        if (!value || value == this.options['empty-value']) {
+          $el.find(clearSelector).addClass(hiddenClass);
+        } else {
+          $el.find(clearSelector).removeClass(hiddenClass);
+        }
       }
     },
 
     updateInput: function(value) {
-      var normValue = value + this.options.min - 1;
       var $input = this.$input;
-      if ($input.val() != normValue) {
-        $input.val(normValue).change();
+      if ($input.val() != value) {
+        $input.val(value).change();
       }
     }