jquery.raty.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460
  1. /*!
  2. * jQuery Raty - A Star Rating Plugin - http://wbotelhos.com/raty
  3. * -------------------------------------------------------------------
  4. *
  5. * jQuery Raty is a plugin that generates a customizable star rating.
  6. *
  7. * Licensed under The MIT License
  8. *
  9. * @version 2.4.5
  10. * @since 2010.06.11
  11. * @author Washington Botelho
  12. * @documentation wbotelhos.com/raty
  13. * @twitter twitter.com/wbotelhos
  14. *
  15. * Usage:
  16. * -------------------------------------------------------------------
  17. * $('#star').raty();
  18. *
  19. * <div id="star"></div>
  20. *
  21. */
  22. ;(function($) {
  23. var methods = {
  24. init: function(settings) {
  25. return this.each(function() {
  26. var self = this,
  27. $this = $(self).empty();
  28. self.opt = $.extend(true, {}, $.fn.raty.defaults, settings);
  29. $this.data('settings', self.opt);
  30. self.opt.number = methods.between(self.opt.number, 0, 20);
  31. if (self.opt.path.substring(self.opt.path.length - 1, self.opt.path.length) != '/') {
  32. self.opt.path += '/';
  33. }
  34. if (typeof self.opt.score == 'function') {
  35. self.opt.score = self.opt.score.call(self);
  36. }
  37. if (self.opt.score) {
  38. self.opt.score = methods.between(self.opt.score, 0, self.opt.number);
  39. }
  40. for (var i = 1; i <= self.opt.number; i++) {
  41. $('<img />', {
  42. src : self.opt.path + ((!self.opt.score || self.opt.score < i) ? self.opt.starOff : self.opt.starOn),
  43. alt : i,
  44. title : (i <= self.opt.hints.length && self.opt.hints[i - 1] !== null) ? self.opt.hints[i - 1] : i
  45. }).appendTo(self);
  46. if (self.opt.space) {
  47. $this.append((i < self.opt.number) ? '&#160;' : '');
  48. }
  49. }
  50. self.stars = $this.children('img:not(".raty-cancel")');
  51. self.score = $('<input />', { type: 'hidden', name: self.opt.scoreName }).appendTo(self);
  52. if (self.opt.score && self.opt.score > 0) {
  53. self.score.val(self.opt.score);
  54. methods.roundStar.call(self, self.opt.score);
  55. }
  56. if (self.opt.iconRange) {
  57. methods.fill.call(self, self.opt.score);
  58. }
  59. methods.setTarget.call(self, self.opt.score, self.opt.targetKeep);
  60. var space = self.opt.space ? 4 : 0,
  61. width = self.opt.width || (self.opt.number * self.opt.size + self.opt.number * space);
  62. if (self.opt.cancel) {
  63. self.cancel = $('<img />', { src: self.opt.path + self.opt.cancelOff, alt: 'x', title: self.opt.cancelHint, 'class': 'raty-cancel' });
  64. if (self.opt.cancelPlace == 'left') {
  65. $this.prepend('&#160;').prepend(self.cancel);
  66. } else {
  67. $this.append('&#160;').append(self.cancel);
  68. }
  69. width += (self.opt.size + space);
  70. }
  71. if (self.opt.readOnly) {
  72. methods.fixHint.call(self);
  73. if (self.cancel) {
  74. self.cancel.hide();
  75. }
  76. } else {
  77. $this.css('cursor', 'pointer');
  78. methods.bindAction.call(self);
  79. }
  80. $this.css('width', width);
  81. });
  82. }, between: function(value, min, max) {
  83. return Math.min(Math.max(parseFloat(value), min), max);
  84. }, bindAction: function() {
  85. var self = this,
  86. $this = $(self);
  87. $this.mouseleave(function() {
  88. var score = self.score.val() || undefined;
  89. methods.initialize.call(self, score);
  90. methods.setTarget.call(self, score, self.opt.targetKeep);
  91. if (self.opt.mouseover) {
  92. self.opt.mouseover.call(self, score);
  93. }
  94. });
  95. var action = self.opt.half ? 'mousemove' : 'mouseover';
  96. if (self.opt.cancel) {
  97. self.cancel.mouseenter(function() {
  98. $(this).attr('src', self.opt.path + self.opt.cancelOn);
  99. self.stars.attr('src', self.opt.path + self.opt.starOff);
  100. methods.setTarget.call(self, null, true);
  101. if (self.opt.mouseover) {
  102. self.opt.mouseover.call(self, null);
  103. }
  104. }).mouseleave(function() {
  105. $(this).attr('src', self.opt.path + self.opt.cancelOff);
  106. if (self.opt.mouseover) {
  107. self.opt.mouseover.call(self, self.score.val() || null);
  108. }
  109. }).click(function(evt) {
  110. self.score.removeAttr('value');
  111. if (self.opt.click) {
  112. self.opt.click.call(self, null, evt);
  113. }
  114. });
  115. }
  116. self.stars.bind(action, function(evt) {
  117. var value = parseInt(this.alt, 10);
  118. if (self.opt.half) {
  119. var position = parseFloat((evt.pageX - $(this).offset().left) / self.opt.size),
  120. diff = (position > .5) ? 1 : .5;
  121. value = parseFloat(this.alt) - 1 + diff;
  122. methods.fill.call(self, value);
  123. if (self.opt.precision) {
  124. value = value - diff + position;
  125. }
  126. methods.showHalf.call(self, value);
  127. } else {
  128. methods.fill.call(self, value);
  129. }
  130. $this.data('score', value);
  131. methods.setTarget.call(self, value, true);
  132. if (self.opt.mouseover) {
  133. self.opt.mouseover.call(self, value, evt);
  134. }
  135. }).click(function(evt) {
  136. self.score.val((self.opt.half || self.opt.precision) ? $this.data('score') : this.alt);
  137. if (self.opt.click) {
  138. self.opt.click.call(self, self.score.val(), evt);
  139. }
  140. });
  141. }, cancel: function(isClick) {
  142. return $(this).each(function() {
  143. var self = this,
  144. $this = $(self);
  145. if ($this.data('readonly') === true) {
  146. return this;
  147. }
  148. if (isClick) {
  149. methods.click.call(self, null);
  150. } else {
  151. methods.score.call(self, null);
  152. }
  153. self.score.removeAttr('value');
  154. });
  155. }, click: function(score) {
  156. return $(this).each(function() {
  157. if ($(this).data('readonly') === true) {
  158. return this;
  159. }
  160. methods.initialize.call(this, score);
  161. if (this.opt.click) {
  162. this.opt.click.call(this, score);
  163. } else {
  164. methods.error.call(this, 'you must add the "click: function(score, evt) { }" callback.');
  165. }
  166. methods.setTarget.call(this, score, true);
  167. });
  168. }, error: function(message) {
  169. $(this).html(message);
  170. $.error(message);
  171. }, fill: function(score) {
  172. var self = this,
  173. number = self.stars.length,
  174. count = 0,
  175. $star ,
  176. star ,
  177. icon ;
  178. for (var i = 1; i <= number; i++) {
  179. $star = self.stars.eq(i - 1);
  180. if (self.opt.iconRange && self.opt.iconRange.length > count) {
  181. star = self.opt.iconRange[count];
  182. if (self.opt.single) {
  183. icon = (i == score) ? (star.on || self.opt.starOn) : (star.off || self.opt.starOff);
  184. } else {
  185. icon = (i <= score) ? (star.on || self.opt.starOn) : (star.off || self.opt.starOff);
  186. }
  187. if (i <= star.range) {
  188. $star.attr('src', self.opt.path + icon);
  189. }
  190. if (i == star.range) {
  191. count++;
  192. }
  193. } else {
  194. if (self.opt.single) {
  195. icon = (i == score) ? self.opt.starOn : self.opt.starOff;
  196. } else {
  197. icon = (i <= score) ? self.opt.starOn : self.opt.starOff;
  198. }
  199. $star.attr('src', self.opt.path + icon);
  200. }
  201. }
  202. }, fixHint: function() {
  203. var $this = $(this),
  204. score = parseInt(this.score.val(), 10),
  205. hint = this.opt.noRatedMsg;
  206. if (!isNaN(score) && score > 0) {
  207. hint = (score <= this.opt.hints.length && this.opt.hints[score - 1] !== null) ? this.opt.hints[score - 1] : score;
  208. }
  209. $this.data('readonly', true).css('cursor', 'default').attr('title', hint);
  210. this.score.attr('readonly', 'readonly');
  211. this.stars.attr('title', hint);
  212. }, getScore: function() {
  213. var score = [],
  214. value ;
  215. $(this).each(function() {
  216. value = this.score.val();
  217. score.push(value ? parseFloat(value) : undefined);
  218. });
  219. return (score.length > 1) ? score : score[0];
  220. }, readOnly: function(isReadOnly) {
  221. return this.each(function() {
  222. var $this = $(this);
  223. if ($this.data('readonly') === isReadOnly) {
  224. return this;
  225. }
  226. if (this.cancel) {
  227. if (isReadOnly) {
  228. this.cancel.hide();
  229. } else {
  230. this.cancel.show();
  231. }
  232. }
  233. if (isReadOnly) {
  234. $this.unbind();
  235. $this.children('img').unbind();
  236. methods.fixHint.call(this);
  237. } else {
  238. methods.bindAction.call(this);
  239. methods.unfixHint.call(this);
  240. }
  241. $this.data('readonly', isReadOnly);
  242. });
  243. }, reload: function() {
  244. return methods.set.call(this, {});
  245. }, roundStar: function(score) {
  246. var diff = (score - Math.floor(score)).toFixed(2);
  247. if (diff > this.opt.round.down) {
  248. var icon = this.opt.starOn; // Full up: [x.76 .. x.99]
  249. if (diff < this.opt.round.up && this.opt.halfShow) { // Half: [x.26 .. x.75]
  250. icon = this.opt.starHalf;
  251. } else if (diff < this.opt.round.full) { // Full down: [x.00 .. x.5]
  252. icon = this.opt.starOff;
  253. }
  254. this.stars.eq(Math.ceil(score) - 1).attr('src', this.opt.path + icon);
  255. } // Full down: [x.00 .. x.25]
  256. }, score: function() {
  257. return arguments.length ? methods.setScore.apply(this, arguments) : methods.getScore.call(this);
  258. }, set: function(settings) {
  259. this.each(function() {
  260. var $this = $(this),
  261. actual = $this.data('settings'),
  262. clone = $this.clone().removeAttr('style').insertBefore($this);
  263. $this.remove();
  264. clone.raty($.extend(actual, settings));
  265. });
  266. return $(this.selector);
  267. }, setScore: function(score) {
  268. return $(this).each(function() {
  269. if ($(this).data('readonly') === true) {
  270. return this;
  271. }
  272. methods.initialize.call(this, score);
  273. methods.setTarget.call(this, score, true);
  274. });
  275. }, setTarget: function(value, isKeep) {
  276. if (this.opt.target) {
  277. var $target = $(this.opt.target);
  278. if ($target.length == 0) {
  279. methods.error.call(this, 'target selector invalid or missing!');
  280. }
  281. var score = value;
  282. if (!isKeep || score === undefined) {
  283. score = this.opt.targetText;
  284. } else {
  285. if (this.opt.targetType == 'hint') {
  286. score = (score === null && this.opt.cancel)
  287. ? this.opt.cancelHint
  288. : this.opt.hints[Math.ceil(score - 1)];
  289. } else {
  290. score = this.opt.precision
  291. ? parseFloat(score).toFixed(1)
  292. : parseInt(score, 10);
  293. }
  294. }
  295. if (this.opt.targetFormat.indexOf('{score}') < 0) {
  296. methods.error.call(this, 'template "{score}" missing!');
  297. }
  298. if (value !== null) {
  299. score = this.opt.targetFormat.toString().replace('{score}', score);
  300. }
  301. if ($target.is(':input')) {
  302. $target.val(score);
  303. } else {
  304. $target.html(score);
  305. }
  306. }
  307. }, showHalf: function(score) {
  308. var diff = (score - Math.floor(score)).toFixed(1);
  309. if (diff > 0 && diff < .6) {
  310. this.stars.eq(Math.ceil(score) - 1).attr('src', this.opt.path + this.opt.starHalf);
  311. }
  312. }, initialize: function(score) {
  313. score = !score ? 0 : methods.between(score, 0, this.opt.number);
  314. methods.fill.call(this, score);
  315. if (score > 0) {
  316. if (this.opt.halfShow) {
  317. methods.roundStar.call(this, score);
  318. }
  319. this.score.val(score);
  320. }
  321. }, unfixHint: function() {
  322. for (var i = 0; i < this.opt.number; i++) {
  323. this.stars.eq(i).attr('title', (i < this.opt.hints.length && this.opt.hints[i] !== null) ? this.opt.hints[i] : i);
  324. }
  325. $(this).data('readonly', false).css('cursor', 'pointer').removeAttr('title');
  326. this.score.attr('readonly', 'readonly');
  327. }
  328. };
  329. $.fn.raty = function(method) {
  330. if (methods[method]) {
  331. return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
  332. } else if (typeof method === 'object' || !method) {
  333. return methods.init.apply(this, arguments);
  334. } else {
  335. $.error('Method ' + method + ' does not exist!');
  336. }
  337. };
  338. $.fn.raty.defaults = {
  339. cancel : false,
  340. cancelHint : 'cancel this rating!',
  341. cancelOff : 'cancel-off.png',
  342. cancelOn : 'cancel-on.png',
  343. cancelPlace : 'left',
  344. click : undefined,
  345. half : false,
  346. halfShow : true,
  347. hints : ['1', '2', '3', '4', '5' ],
  348. iconRange : undefined,
  349. mouseover : undefined,
  350. noRatedMsg : 'not rated yet',
  351. number : 5,
  352. path : 'images/',
  353. precision : false,
  354. round : { down: .25, full: .6, up: .76 },
  355. readOnly : false,
  356. score : undefined,
  357. scoreName : 'score',
  358. single : false,
  359. size : 16,
  360. space : true,
  361. starHalf : 'star-half.png',
  362. starOff : 'star-off.png',
  363. starOn : 'star-on.png',
  364. target : undefined,
  365. targetFormat : '{score}',
  366. targetKeep : false,
  367. targetText : '',
  368. targetType : 'hint',
  369. width : undefined
  370. };
  371. })(jQuery);