├── .gitignore
├── Gruntfile.coffee
├── README.md
├── bower.json
├── dist
    ├── starrr.css
    └── starrr.js
├── index.html
├── package.json
└── src
    ├── starrr.coffee
    └── starrr.scss


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .sass-cache


--------------------------------------------------------------------------------
/Gruntfile.coffee:
--------------------------------------------------------------------------------
 1 | module.exports = (grunt) ->
 2 | 
 3 |   grunt.loadNpmTasks('grunt-contrib-coffee')
 4 |   grunt.loadNpmTasks('grunt-contrib-sass')
 5 |   grunt.loadNpmTasks('grunt-contrib-watch')
 6 |   grunt.loadNpmTasks('grunt-release')
 7 | 
 8 |   grunt.initConfig
 9 |     pkg: '<json:package.json>'
10 | 
11 |     coffee:
12 |       all:
13 |         src: 'src/starrr.coffee'
14 |         dest: 'dist/starrr.js'
15 |         options:
16 |           bare: true
17 | 
18 |     sass:
19 |       all:
20 |         files:
21 |           'dist/starrr.css': 'src/starrr.scss'
22 |         options:
23 |           sourcemap: 'none'
24 | 
25 |     watch:
26 |       all:
27 |         files: ['src/starrr.coffee', 'src/starrr.scss']
28 |         tasks: 'default'
29 | 
30 |   grunt.registerTask 'default', ['coffee:all', 'sass:all']
31 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | starrr
 2 | ======
 3 | 
 4 | 1-5 (or 1-`n`) star rating in < 75 lines of code.
 5 | 
 6 | ## Requirements
 7 | 
 8 | - jQuery
 9 | 
10 | ## Usage
11 | 
12 | ### Create the stars
13 | 
14 | ```html
15 | <div class='starrr'></div>
16 | ```
17 | 
18 | ```js
19 | $('.starrr').starrr()
20 | ```
21 | 
22 | ### With an existing rating
23 | 
24 | ```js
25 | $('.starrr').starrr({
26 |   rating: 4
27 | })
28 | ```
29 | 
30 | ### With more than 5 stars
31 | 
32 | ```js
33 | $('.starrr').starrr({
34 |   max: 10
35 | })
36 | ```
37 | 
38 | ### Read-only
39 | 
40 | ```js
41 | $('.starrr').starrr({
42 |   readOnly: true
43 | })
44 | ```
45 | 
46 | ### Do something with the rating...
47 | 
48 | ```js
49 | $('.starrr').starrr({
50 |   change: function(e, value){
51 |     alert('new rating is ' + value)
52 |   }
53 | })
54 | ```
55 | 
56 | Or if you prefer events:
57 | 
58 | ```js
59 | $('.starrr').on('starrr:change', function(e, value){
60 |   alert('new rating is ' + value)
61 | })
62 | ```
63 | 
64 | ## Developing
65 | 
66 | - `npm install`
67 | - `npm install -g grunt-cli`
68 | - Make changes in `src/`
69 | - Run `grunt` to compile them
70 | 
71 | ## License
72 | 
73 | MIT
74 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "starrr",
 3 |   "authors": [
 4 |     "ajb <adam@dobt.co>"
 5 |   ],
 6 |   "description": "1-5 star rating with jQuery.",
 7 |   "license": "MIT",
 8 |   "ignore": [
 9 |     "**/.*",
10 |     "node_modules",
11 |     "bower_components"
12 |   ],
13 |   "main": [
14 |     "dist/starrr.js",
15 |     "dist/starrr.css"
16 |   ],
17 |   "dependencies": {}
18 | }
19 | 


--------------------------------------------------------------------------------
/dist/starrr.css:
--------------------------------------------------------------------------------
1 | .starrr {
2 |   display: inline-block; }
3 |   .starrr a {
4 |     font-size: 16px;
5 |     padding: 0 1px;
6 |     cursor: pointer;
7 |     color: #FFD119;
8 |     text-decoration: none; }
9 | 


--------------------------------------------------------------------------------
/dist/starrr.js:
--------------------------------------------------------------------------------
 1 | var slice = [].slice;
 2 | 
 3 | (function($, window) {
 4 |   var Starrr;
 5 |   window.Starrr = Starrr = (function() {
 6 |     Starrr.prototype.defaults = {
 7 |       rating: void 0,
 8 |       max: 5,
 9 |       readOnly: false,
10 |       emptyClass: 'fa fa-star-o',
11 |       fullClass: 'fa fa-star',
12 |       change: function(e, value) {}
13 |     };
14 | 
15 |     function Starrr($el, options) {
16 |       this.options = $.extend({}, this.defaults, options);
17 |       this.$el = $el;
18 |       this.createStars();
19 |       this.syncRating();
20 |       if (this.options.readOnly) {
21 |         return;
22 |       }
23 |       this.$el.on('mouseover.starrr', 'a', (function(_this) {
24 |         return function(e) {
25 |           return _this.syncRating(_this.getStars().index(e.currentTarget) + 1);
26 |         };
27 |       })(this));
28 |       this.$el.on('mouseout.starrr', (function(_this) {
29 |         return function() {
30 |           return _this.syncRating();
31 |         };
32 |       })(this));
33 |       this.$el.on('click.starrr', 'a', (function(_this) {
34 |         return function(e) {
35 |           e.preventDefault();
36 |           return _this.setRating(_this.getStars().index(e.currentTarget) + 1);
37 |         };
38 |       })(this));
39 |       this.$el.on('starrr:change', this.options.change);
40 |     }
41 | 
42 |     Starrr.prototype.getStars = function() {
43 |       return this.$el.find('a');
44 |     };
45 | 
46 |     Starrr.prototype.createStars = function() {
47 |       var j, ref, results;
48 |       results = [];
49 |       for (j = 1, ref = this.options.max; 1 <= ref ? j <= ref : j >= ref; 1 <= ref ? j++ : j--) {
50 |         results.push(this.$el.append("<a href='#' />"));
51 |       }
52 |       return results;
53 |     };
54 | 
55 |     Starrr.prototype.setRating = function(rating) {
56 |       if (this.options.rating === rating) {
57 |         rating = void 0;
58 |       }
59 |       this.options.rating = rating;
60 |       this.syncRating();
61 |       return this.$el.trigger('starrr:change', rating);
62 |     };
63 | 
64 |     Starrr.prototype.getRating = function() {
65 |       return this.options.rating;
66 |     };
67 | 
68 |     Starrr.prototype.syncRating = function(rating) {
69 |       var $stars, i, j, ref, results;
70 |       rating || (rating = this.options.rating);
71 |       $stars = this.getStars();
72 |       results = [];
73 |       for (i = j = 1, ref = this.options.max; 1 <= ref ? j <= ref : j >= ref; i = 1 <= ref ? ++j : --j) {
74 |         results.push($stars.eq(i - 1).removeClass(rating >= i ? this.options.emptyClass : this.options.fullClass).addClass(rating >= i ? this.options.fullClass : this.options.emptyClass));
75 |       }
76 |       return results;
77 |     };
78 | 
79 |     return Starrr;
80 | 
81 |   })();
82 |   return $.fn.extend({
83 |     starrr: function() {
84 |       var args, option;
85 |       option = arguments[0], args = 2 <= arguments.length ? slice.call(arguments, 1) : [];
86 |       return this.each(function() {
87 |         var data;
88 |         data = $(this).data('starrr');
89 |         if (!data) {
90 |           $(this).data('starrr', (data = new Starrr($(this), option)));
91 |         }
92 |         if (typeof option === 'string') {
93 |           return data[option].apply(data, args);
94 |         }
95 |       });
96 |     }
97 |   });
98 | })(window.jQuery, window);
99 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <title>Starrr, for jQuery</title>
 4 |   <meta name="description" content="">
 5 |   <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
 6 |   <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
 7 |   <link rel="stylesheet" href="dist/starrr.css">
 8 |   <style type='text/css'>
 9 |     img.ribbon {
10 |       position: fixed;
11 |       z-index: 1;
12 |       top: 0;
13 |       right: 0;
14 |       border: 0;
15 |       cursor: pointer; }
16 | 
17 |     .container {
18 |       margin-top: 60px;
19 |       text-align: center;
20 |       max-width: 450px; }
21 | 
22 |     input {
23 |       width: 30px;
24 |       margin: 10px 0;
25 |     }
26 |   </style>
27 | </head>
28 | <body>
29 |   <a href="https://github.com/dobtco/starrr">
30 |     <img class="ribbon" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub">
31 |   </a>
32 | 
33 |   <div class="container">
34 |     <h3>Starrr</h3>
35 | 
36 |     <h5>Click to rate:</h5>
37 |     <div class='starrr' id='star1'></div>
38 |     <div>&nbsp;
39 |       <span class='your-choice-was' style='display: none;'>
40 |         Your rating was <span class='choice'></span>.
41 |       </span>
42 |     </div>
43 | 
44 |     <h5>Advanced:</h5>
45 |     <div class='starrr' id='star2'></div>
46 |     <br />
47 |     <input type='text' name='rating' value='3' id='star2_input' />
48 | 
49 |     <h5>Why?</h5>
50 |     <p>There are other libraries out there, but none that approach the level clarity and conciseness that I wanted. Starrr is less than 75 lines of code -- you can understand the entirety of its source code in about a minute.</p>
51 | 
52 |     <h5>Dependencies</h5>
53 |     <p>jQuery.</p>
54 |     <p>I'm using Bootstrap + Font Awesome to render the stars, but you're more than welcome to use something else.</p>
55 |   </div>
56 | 
57 |   <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
58 |   <script src="dist/starrr.js"></script>
59 |   <script>
60 |     $('#star1').starrr({
61 |       change: function(e, value){
62 |         if (value) {
63 |           $('.your-choice-was').show();
64 |           $('.choice').text(value);
65 |         } else {
66 |           $('.your-choice-was').hide();
67 |         }
68 |       }
69 |     });
70 | 
71 |     var $s2input = $('#star2_input');
72 |     $('#star2').starrr({
73 |       max: 10,
74 |       rating: $s2input.val(),
75 |       change: function(e, value){
76 |         $s2input.val(value).trigger('input');
77 |       }
78 |     });
79 |   </script>
80 |   <script type="text/javascript">
81 |     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
82 |     (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
83 |     m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
84 |     })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
85 | 
86 |     ga('create', 'UA-39205841-5', 'dobtco.github.io');
87 |     ga('send', 'pageview');
88 |   </script>
89 | </body>
90 | </html>
91 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "starrr",
 3 |   "version": "2.0.0",
 4 |   "main": "Gruntfile.coffee",
 5 |   "author": "ajb <adam@dobt.co>",
 6 |   "license": "MIT",
 7 |   "devDependencies": {
 8 |     "grunt-contrib-sass": "^0.9.2",
 9 |     "grunt-contrib-coffee": "^0.13.0",
10 |     "grunt-contrib-watch": "^0.6.1",
11 |     "grunt": "^0.4.5"
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/src/starrr.coffee:
--------------------------------------------------------------------------------
 1 | (($, window) ->
 2 | 
 3 |   window.Starrr = class Starrr
 4 |     defaults:
 5 |       rating: undefined
 6 |       max: 5
 7 |       readOnly: false
 8 |       emptyClass: 'fa fa-star-o'
 9 |       fullClass: 'fa fa-star'
10 |       change: (e, value) ->
11 | 
12 |     constructor: ($el, options) ->
13 |       @options = $.extend({}, @defaults, options)
14 |       @$el = $el
15 |       @createStars()
16 |       @syncRating()
17 | 
18 |       return if @options.readOnly
19 | 
20 |       @$el.on 'mouseover.starrr', 'a', (e) =>
21 |         @syncRating(@getStars().index(e.currentTarget) + 1)
22 | 
23 |       @$el.on 'mouseout.starrr', =>
24 |         @syncRating()
25 | 
26 |       @$el.on 'click.starrr', 'a', (e) =>
27 |         e.preventDefault()
28 |         @setRating(@getStars().index(e.currentTarget) + 1)
29 | 
30 |       @$el.on 'starrr:change', @options.change
31 | 
32 |     getStars: ->
33 |       @$el.find('a')
34 | 
35 |     createStars: ->
36 |       @$el.append("<a href='#' />") for [1..@options.max]
37 | 
38 |     setRating: (rating) ->
39 |       rating = undefined if @options.rating == rating
40 |       @options.rating = rating
41 |       @syncRating()
42 |       @$el.trigger('starrr:change', rating)
43 | 
44 |     getRating: ->
45 |       @options.rating
46 | 
47 |     syncRating: (rating) ->
48 |       rating ||= @options.rating
49 |       $stars = @getStars()
50 |       for i in [1..@options.max]
51 |         $stars.
52 |           eq(i - 1).
53 |           removeClass(if rating >= i then @options.emptyClass else @options.fullClass).
54 |           addClass(if rating >= i then @options.fullClass else @options.emptyClass)
55 | 
56 |   # Define the plugin
57 |   $.fn.extend starrr: (option, args...) ->
58 |     @each ->
59 |       data = $(@).data('starrr')
60 | 
61 |       if !data
62 |         $(@).data 'starrr', (data = new Starrr($(@), option))
63 |       if typeof option == 'string'
64 |         data[option].apply(data, args)
65 | 
66 | ) window.jQuery, window
67 | 


--------------------------------------------------------------------------------
/src/starrr.scss:
--------------------------------------------------------------------------------
 1 | $starrrColor: #FFD119 !default;
 2 | 
 3 | .starrr {
 4 |   display: inline-block;
 5 | 
 6 |   a {
 7 |     font-size: 16px;
 8 |     padding: 0 1px;
 9 |     cursor: pointer;
10 |     color: $starrrColor;
11 |     text-decoration: none;
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------