|
1 | | -(function($) { |
2 | | - |
3 | | - var clearClass = 'rating-clear'; |
4 | | - var clearSelector = '.' + clearClass; |
5 | | - var hiddenClass = 'hidden'; |
| 1 | +(function ($) { |
| 2 | + 'use strict'; |
| 3 | + |
| 4 | + var clearClass = 'rating-clear', |
| 5 | + clearSelector = '.' + clearClass, |
| 6 | + hiddenClass = 'hidden', |
| 7 | + DEFAULTS = { |
| 8 | + 'min': 1, |
| 9 | + 'max': 5, |
| 10 | + 'empty-value': 0, |
| 11 | + 'iconLib': 'glyphicon', |
| 12 | + 'activeIcon': 'glyphicon-star', |
| 13 | + 'inactiveIcon': 'glyphicon-star-empty', |
| 14 | + 'clearable': false, |
| 15 | + 'clearableIcon': 'glyphicon-remove', |
| 16 | + 'inline': false, |
| 17 | + 'readonly': false |
| 18 | + }; |
6 | 19 |
|
7 | | - var starSelector = function(value) { |
| 20 | + function starSelector(value) { |
8 | 21 | return '[data-value' + (value ? ('=' + value) : '') + ']'; |
9 | | - }; |
| 22 | + } |
10 | 23 |
|
11 | | - var toggleActive = function($el, active, options) { |
12 | | - var activeClass = options['active-icon']; |
13 | | - var inactiveClass = options['inactive-icon']; |
| 24 | + function toggleActive($el, active, options) { |
| 25 | + var activeClass = options.activeIcon, |
| 26 | + inactiveClass = options.inactiveIcon; |
14 | 27 | $el.removeClass(active ? inactiveClass : activeClass).addClass(active ? activeClass : inactiveClass); |
15 | | - }; |
| 28 | + } |
| 29 | + |
| 30 | + function parseOptions($input, options) { |
| 31 | + var data = $.extend({}, DEFAULTS, $input.data(), options); |
| 32 | + data.inline = data.inline === '' || data.inline; |
| 33 | + data.readonly = data.readonly === '' || data.readonly; |
| 34 | + if (data.clearable === false) { |
| 35 | + data.clearableLabel = ''; |
| 36 | + } else { |
| 37 | + data.clearableLabel = data.clearable; |
| 38 | + } |
| 39 | + data.clearable = data.clearable === '' || data.clearable; |
| 40 | + return data; |
| 41 | + } |
| 42 | + |
| 43 | + function createRatingEl($input, options) { |
| 44 | + // Inline option |
| 45 | + if (options.inline) { |
| 46 | + var $ratingEl = $('<span class="rating-input"></span>'); |
| 47 | + } else { |
| 48 | + var $ratingEl = $('<div class="rating-input"></div>'); |
| 49 | + } |
| 50 | + |
| 51 | + // Copy original classes but the rating class |
| 52 | + $ratingEl.addClass($input.attr('class')); |
| 53 | + $ratingEl.removeClass('rating'); |
16 | 54 |
|
17 | | - var createRatingEl = function($input, options) { |
18 | | - var min = options.min; |
19 | | - var max = options.max; |
20 | | - var clearable = options.clearable; |
21 | | - var $ratingEl = $('<div class="rating-input"></div>'); |
22 | | - for (var i = min; i <= max; i++) { |
23 | | - $ratingEl.append('<i class="' + options['icon-lib'] + '" data-value="' + i + '"></i>'); |
| 55 | + // Render rating icons |
| 56 | + for (var i = options.min; i <= options.max; i++) { |
| 57 | + $ratingEl.append('<i class="' + options.iconLib + '" data-value="' + i + '"></i>'); |
24 | 58 | } |
25 | | - if (clearable) { |
| 59 | + |
| 60 | + // Render clear link |
| 61 | + if (options.clearable && !options.readonly) { |
26 | 62 | $ratingEl.append(' ').append( |
27 | 63 | '<a class="' + clearClass + '">' + |
28 | | - '<i class="' + options['icon-lib'] + ' ' + options['clearable-icon'] + '"/>' + |
29 | | - clearable + |
| 64 | + '<i class="' + options.iconLib + ' ' + options.clearableIcon + '"/>' + |
| 65 | + options.clearableLabel + |
30 | 66 | '</a>' |
31 | 67 | ); |
32 | 68 | } |
33 | 69 | return $ratingEl; |
34 | | - }; |
35 | | - |
36 | | - var inputOptions = function($input) { |
37 | | - var options = {}; |
38 | | - for (option in DEFAULTS) { |
39 | | - options[option] = $input.data(option); |
40 | | - }; |
41 | | - return options; |
42 | | - }; |
43 | | - |
44 | | - var DEFAULTS = { |
45 | | - 'min': 1, |
46 | | - 'max': 5, |
47 | | - 'empty-value': 0, |
48 | | - 'icon-lib': 'glyphicon', |
49 | | - 'active-icon': 'glyphicon-star', |
50 | | - 'inactive-icon': 'glyphicon-star-empty', |
51 | | - 'clearable': '', |
52 | | - 'clearable-icon': 'glyphicon-remove' |
53 | | - }; |
| 70 | + } |
54 | 71 |
|
55 | 72 | var Rating = function(input, options) { |
56 | | - var $input = this.$input = $(input); |
57 | | - var ratingOptions = this.options = $.extend({}, DEFAULTS, inputOptions($input), options); |
58 | | - var $ratingEl = this.$el = createRatingEl($input, ratingOptions); |
| 73 | + var $input = this.$input = input; |
| 74 | + this.options = parseOptions($input, options); |
| 75 | + var $ratingEl = this.$el = createRatingEl($input, this.options); |
59 | 76 | $input.addClass(hiddenClass).before($ratingEl); |
| 77 | + $input.attr('type', 'hidden'); |
60 | 78 | this.highlight($input.val()); |
61 | 79 | }; |
62 | 80 |
|
63 | | - Rating.VERSION = '0.3.0'; |
| 81 | + Rating.VERSION = '0.4.0'; |
64 | 82 |
|
65 | 83 | Rating.DEFAULTS = DEFAULTS; |
66 | 84 |
|
|
103 | 121 |
|
104 | 122 | }; |
105 | 123 |
|
106 | | - var Plugin = $.fn.rating = function(option) { |
107 | | - return this.each(function() { |
| 124 | + var Plugin = $.fn.rating = function(options) { |
| 125 | + return this.filter('input[type=number]').each(function() { |
108 | 126 | var $input = $(this); |
109 | | - var dataKey = 'rating'; |
110 | | - var rating = $input.data(dataKey); |
111 | | - var options = typeof option === 'object' && option; |
112 | | - |
113 | | - if (!rating) { |
114 | | - rating = new Rating($input, options); |
| 127 | + var optionsObject = typeof options === 'object' && options || {}; |
| 128 | + var rating = new Rating($input, optionsObject); |
| 129 | + if (!rating.options.readonly) { |
115 | 130 | rating.$el |
116 | | - .on('mouseenter', starSelector(), function () { |
| 131 | + .on('mouseenter', starSelector(), function() { |
117 | 132 | rating.highlight($(this).data('value'), true); |
118 | 133 | }) |
119 | | - .on('mouseleave', starSelector(), function () { |
| 134 | + .on('mouseleave', starSelector(), function() { |
120 | 135 | rating.highlight($input.val(), true); |
121 | 136 | }) |
122 | 137 | .on('click', starSelector(), function() { |
|
125 | 140 | .on('click', clearSelector, function() { |
126 | 141 | rating.clear(); |
127 | 142 | }); |
128 | | - $input.data(dataKey, rating); |
129 | | - } |
130 | | - |
131 | | - if (option === 'clear') { |
132 | | - rating.clear(); |
133 | | - } else if (option === 'setValue') { |
134 | | - rating.setValue(arguments[1]); |
135 | 143 | } |
136 | 144 | }); |
137 | 145 | }; |
138 | 146 |
|
139 | 147 | Plugin.Constructor = Rating; |
140 | 148 |
|
141 | | - $(function () { |
| 149 | + $(function() { |
142 | 150 | $('input.rating[type=number]').each(function() { |
143 | 151 | $(this).rating(); |
144 | 152 | }); |
|
0 commit comments