Ei kuvausta

um-raty.js 17KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647
  1. /*!
  2. * jQuery Raty - A Star Rating Plugin
  3. *
  4. * The MIT License
  5. *
  6. * @author : Washington Botelho
  7. * @doc : http://wbotelhos.com/raty
  8. * @version : 2.6.0
  9. *
  10. */
  11. ;
  12. (function($) {
  13. 'use strict';
  14. var methods = {
  15. init: function(options) {
  16. return this.each(function() {
  17. this.self = $(this);
  18. methods.destroy.call(this.self);
  19. this.opt = $.extend(true, {}, $.fn.um_raty.defaults, options);
  20. methods._adjustCallback.call(this);
  21. methods._adjustNumber.call(this);
  22. if (this.opt.starType !== 'img') {
  23. methods._adjustStarType.call(this);
  24. }
  25. methods._adjustPath.call(this);
  26. methods._createStars.call(this);
  27. if (this.opt.cancel) {
  28. methods._createCancel.call(this);
  29. }
  30. if (this.opt.precision) {
  31. methods._adjustPrecision.call(this);
  32. }
  33. methods._createScore.call(this);
  34. methods._apply.call(this, this.opt.score);
  35. methods._target.call(this, this.opt.score);
  36. if (this.opt.readOnly) {
  37. methods._lock.call(this);
  38. } else {
  39. this.style.cursor = 'pointer';
  40. methods._binds.call(this);
  41. }
  42. this.self.data('options', this.opt);
  43. });
  44. },
  45. _adjustCallback: function() {
  46. var options = ['number', 'readOnly', 'score', 'scoreName', 'target'];
  47. for (var i = 0; i < options.length; i++) {
  48. if (typeof this.opt[options[i]] === 'function') {
  49. this.opt[options[i]] = this.opt[options[i]].call(this);
  50. }
  51. }
  52. },
  53. _adjustNumber: function() {
  54. this.opt.number = methods._between(this.opt.number, 1, this.opt.numberMax);
  55. },
  56. _adjustPath: function() {
  57. this.opt.path = this.opt.path || '';
  58. if (this.opt.path && this.opt.path.charAt(this.opt.path.length - 1) !== '/') {
  59. this.opt.path += '/';
  60. }
  61. },
  62. _adjustPrecision: function() {
  63. this.opt.half = true;
  64. this.opt.targetType = 'score';
  65. },
  66. _adjustStarType: function() {
  67. this.opt.path = '';
  68. var replaces = ['cancelOff', 'cancelOn', 'starHalf', 'starOff', 'starOn'];
  69. for (var i = 0; i < replaces.length; i++) {
  70. this.opt[replaces[i]] = this.opt[replaces[i]].replace('.', '-');
  71. }
  72. },
  73. _apply: function(score) {
  74. methods._fill.call(this, score);
  75. if (score) {
  76. if (score > 0) {
  77. this.score.val(methods._between(score, 0, this.opt.number));
  78. }
  79. methods._roundStars.call(this, score);
  80. }
  81. },
  82. _between: function(value, min, max) {
  83. return Math.min(Math.max(parseFloat(value), min), max);
  84. },
  85. _binds: function() {
  86. if (this.cancel) {
  87. methods._bindOverCancel.call(this);
  88. methods._bindClickCancel.call(this);
  89. methods._bindOutCancel.call(this);
  90. }
  91. methods._bindOver.call(this);
  92. methods._bindClick.call(this);
  93. methods._bindOut.call(this);
  94. },
  95. _bindClick: function() {
  96. var that = this;
  97. that.stars.on('click.um_raty', function(evt) {
  98. var star = $(this);
  99. that.score.val((that.opt.half || that.opt.precision) ? that.self.data('score') : (this.alt || star.data('alt')));
  100. if (that.opt.click) {
  101. that.opt.click.call(that, +that.score.val(), evt);
  102. }
  103. });
  104. },
  105. _bindClickCancel: function() {
  106. var that = this;
  107. that.cancel.on('click.um_raty', function(evt) {
  108. that.score.removeAttr('value');
  109. if (that.opt.click) {
  110. that.opt.click.call(that, null, evt);
  111. }
  112. });
  113. },
  114. _bindOut: function() {
  115. var that = this;
  116. that.self.on('mouseleave.um_raty', function(evt) {
  117. var score = +that.score.val() || undefined;
  118. methods._apply.call(that, score);
  119. methods._target.call(that, score, evt);
  120. if (that.opt.mouseout) {
  121. that.opt.mouseout.call(that, score, evt);
  122. }
  123. });
  124. },
  125. _bindOutCancel: function() {
  126. var that = this;
  127. that.cancel.on('mouseleave.um_raty', function(evt) {
  128. var icon = that.opt.cancelOff;
  129. if (that.opt.starType !== 'img') {
  130. icon = that.opt.cancelClass + ' ' + icon;
  131. }
  132. methods._setIcon.call(that, this, icon);
  133. if (that.opt.mouseout) {
  134. var score = +that.score.val() || undefined;
  135. that.opt.mouseout.call(that, score, evt);
  136. }
  137. });
  138. },
  139. _bindOver: function() {
  140. var that = this,
  141. action = that.opt.half ? 'mousemove.um_raty' : 'mouseover.um_raty';
  142. that.stars.on(action, function(evt) {
  143. var score = methods._getScoreByPosition.call(that, evt, this);
  144. methods._fill.call(that, score);
  145. if (that.opt.half) {
  146. methods._roundStars.call(that, score);
  147. that.self.data('score', score);
  148. }
  149. methods._target.call(that, score, evt);
  150. if (that.opt.mouseover) {
  151. that.opt.mouseover.call(that, score, evt);
  152. }
  153. });
  154. },
  155. _bindOverCancel: function() {
  156. var that = this;
  157. that.cancel.on('mouseover.um_raty', function(evt) {
  158. var
  159. starOff = that.opt.path + that.opt.starOff,
  160. icon = that.opt.cancelOn;
  161. if (that.opt.starType === 'img') {
  162. that.stars.attr('src', starOff);
  163. } else {
  164. icon = that.opt.cancelClass + ' ' + icon;
  165. that.stars.attr('class', starOff);
  166. }
  167. methods._setIcon.call(that, this, icon);
  168. methods._target.call(that, null, evt);
  169. if (that.opt.mouseover) {
  170. that.opt.mouseover.call(that, null);
  171. }
  172. });
  173. },
  174. _buildScoreField: function() {
  175. return $('<input />', { name: this.opt.scoreName, type: 'hidden' }).appendTo(this);
  176. },
  177. _createCancel: function() {
  178. var icon = this.opt.path + this.opt.cancelOff,
  179. cancel = $('<' + this.opt.starType + ' />', { title: this.opt.cancelHint, 'class': this.opt.cancelClass });
  180. if (this.opt.starType === 'img') {
  181. cancel.attr({ src: icon, alt: 'x' });
  182. } else {
  183. // TODO: use $.data
  184. cancel.attr('data-alt', 'x').addClass(icon);
  185. }
  186. if (this.opt.cancelPlace === 'left') {
  187. this.self.prepend('&#160;').prepend(cancel);
  188. } else {
  189. this.self.append('&#160;').append(cancel);
  190. }
  191. this.cancel = cancel;
  192. },
  193. _createScore: function() {
  194. var score = $(this.opt.targetScore);
  195. this.score = score.length ? score : methods._buildScoreField.call(this);
  196. },
  197. _createStars: function() {
  198. for (var i = 1; i <= this.opt.number; i++) {
  199. var
  200. name = methods._nameForIndex.call(this, i),
  201. attrs = { alt: i, src: this.opt.path + this.opt[name] };
  202. if (this.opt.starType !== 'img') {
  203. attrs = { 'data-alt': i, 'class': attrs.src }; // TODO: use $.data.
  204. }
  205. attrs.title = methods._getHint.call(this, i);
  206. $('<' + this.opt.starType + ' />', attrs).appendTo(this);
  207. if (this.opt.space) {
  208. this.self.append(i < this.opt.number ? '&#160;' : '');
  209. }
  210. }
  211. this.stars = this.self.children(this.opt.starType);
  212. },
  213. _error: function(message) {
  214. $(this).text(message);
  215. $.error(message);
  216. },
  217. _fill: function(score) {
  218. var hash = 0;
  219. for (var i = 1; i <= this.stars.length; i++) {
  220. var
  221. icon,
  222. star = this.stars[i - 1],
  223. turnOn = methods._turnOn.call(this, i, score);
  224. if (this.opt.iconRange && this.opt.iconRange.length > hash) {
  225. var irange = this.opt.iconRange[hash];
  226. icon = methods._getRangeIcon.call(this, irange, turnOn);
  227. if (i <= irange.range) {
  228. methods._setIcon.call(this, star, icon);
  229. }
  230. if (i === irange.range) {
  231. hash++;
  232. }
  233. } else {
  234. icon = this.opt[turnOn ? 'starOn' : 'starOff'];
  235. methods._setIcon.call(this, star, icon);
  236. }
  237. }
  238. },
  239. _getRangeIcon: function(irange, turnOn) {
  240. return turnOn ? irange.on || this.opt.starOn : irange.off || this.opt.starOff;
  241. },
  242. _getScoreByPosition: function(evt, icon) {
  243. var score = parseInt(icon.alt || icon.getAttribute('data-alt'), 10);
  244. if (this.opt.half) {
  245. var
  246. size = methods._getSize.call(this),
  247. percent = parseFloat((evt.pageX - $(icon).offset().left) / size);
  248. if (this.opt.precision) {
  249. score = score - 1 + percent;
  250. } else {
  251. score = score - 1 + (percent > 0.5 ? 1 : 0.5);
  252. }
  253. }
  254. return score;
  255. },
  256. _getSize: function() {
  257. var size;
  258. if (this.opt.starType === 'img') {
  259. size = this.stars[0].width;
  260. } else {
  261. size = parseFloat(this.stars.eq(0).css('font-size'));
  262. }
  263. if (!size) {
  264. methods._error.call(this, 'Could not be possible get the icon size!');
  265. }
  266. return size;
  267. },
  268. _turnOn: function(i, score) {
  269. return this.opt.single ? (i === score) : (i <= score);
  270. },
  271. _getHint: function(score) {
  272. var hint = this.opt.hints[score - 1];
  273. return hint === '' ? '' : hint || score;
  274. },
  275. _lock: function() {
  276. var score = parseInt(this.score.val(), 10), // TODO: 3.1 >> [['1'], ['2'], ['3', '.1', '.2']]
  277. hint = score ? methods._getHint.call(this, score) : this.opt.noRatedMsg;
  278. this.style.cursor = '';
  279. this.title = hint;
  280. this.score.prop('readonly', true);
  281. this.stars.prop('title', hint);
  282. if (this.cancel) {
  283. this.cancel.hide();
  284. }
  285. this.self.data('readonly', true);
  286. },
  287. _nameForIndex: function(i) {
  288. return this.opt.score && this.opt.score >= i ? 'starOn' : 'starOff';
  289. },
  290. _roundStars: function(score) {
  291. var rest = (score % 1).toFixed(2);
  292. if (rest > this.opt.round.down) { // Up: [x.76 .. x.99]
  293. var name = 'starOn';
  294. if (this.opt.halfShow && rest < this.opt.round.up) { // Half: [x.26 .. x.75]
  295. name = 'starHalf';
  296. } else if (rest < this.opt.round.full) { // Down: [x.00 .. x.5]
  297. name = 'starOff';
  298. }
  299. var
  300. icon = this.opt[name],
  301. star = this.stars[Math.ceil(score) - 1];
  302. methods._setIcon.call(this, star, icon);
  303. } // Full down: [x.00 .. x.25]
  304. },
  305. _setIcon: function(star, icon) {
  306. star[this.opt.starType === 'img' ? 'src' : 'className'] = this.opt.path + icon;
  307. },
  308. _setTarget: function(target, score) {
  309. if (score) {
  310. score = this.opt.targetFormat.toString().replace('{score}', score);
  311. }
  312. if (target.is(':input')) {
  313. target.val(score);
  314. } else {
  315. target.html(score);
  316. }
  317. },
  318. _target: function(score, evt) {
  319. if (this.opt.target) {
  320. var target = $(this.opt.target);
  321. if (!target.length) {
  322. methods._error.call(this, 'Target selector invalid or missing!');
  323. }
  324. var mouseover = evt && evt.type === 'mouseover';
  325. if (score === undefined) {
  326. score = this.opt.targetText;
  327. } else if (score === null) {
  328. score = mouseover ? this.opt.cancelHint : this.opt.targetText;
  329. } else {
  330. if (this.opt.targetType === 'hint') {
  331. score = methods._getHint.call(this, Math.ceil(score));
  332. } else if (this.opt.precision) {
  333. score = parseFloat(score).toFixed(1);
  334. }
  335. var mousemove = evt && evt.type === 'mousemove';
  336. if (!mouseover && !mousemove && !this.opt.targetKeep) {
  337. score = this.opt.targetText;
  338. }
  339. }
  340. methods._setTarget.call(this, target, score);
  341. }
  342. },
  343. _unlock: function() {
  344. this.style.cursor = 'pointer';
  345. this.removeAttribute('title');
  346. this.score.removeAttr('readonly');
  347. this.self.data('readonly', false);
  348. for (var i = 0; i < this.opt.number; i++) {
  349. this.stars[i].title = methods._getHint.call(this, i + 1);
  350. }
  351. if (this.cancel) {
  352. this.cancel.css('display', '');
  353. }
  354. },
  355. cancel: function(click) {
  356. return this.each(function() {
  357. var el = $(this);
  358. if (el.data('readonly') !== true) {
  359. methods[click ? 'click' : 'score'].call(el, null);
  360. this.score.removeAttr('value');
  361. }
  362. });
  363. },
  364. click: function(score) {
  365. return this.each(function() {
  366. if ($(this).data('readonly') !== true) {
  367. methods._apply.call(this, score);
  368. if (this.opt.click) {
  369. this.opt.click.call(this, score, $.Event('click'));
  370. }
  371. methods._target.call(this, score);
  372. }
  373. });
  374. },
  375. destroy: function() {
  376. return this.each(function() {
  377. var self = $(this),
  378. raw = self.data('raw');
  379. if (raw) {
  380. self.off('.um_raty').empty().css({ cursor: raw.style.cursor }).removeData('readonly');
  381. } else {
  382. self.data('raw', self.clone()[0]);
  383. }
  384. });
  385. },
  386. getScore: function() {
  387. var score = [],
  388. value ;
  389. this.each(function() {
  390. value = this.score.val();
  391. score.push(value ? +value : undefined);
  392. });
  393. return (score.length > 1) ? score : score[0];
  394. },
  395. move: function(score) {
  396. return this.each(function() {
  397. var
  398. integer = parseInt(score, 10),
  399. opt = $(this).data('options'),
  400. decimal = (+score).toFixed(1).split('.')[1];
  401. if (integer >= opt.number) {
  402. integer = opt.number - 1;
  403. decimal = 10;
  404. }
  405. var
  406. size = methods._getSize.call(this),
  407. point = size / 10,
  408. star = $(this.stars[integer]),
  409. percent = star.offset().left + point * parseInt(decimal, 10),
  410. evt = $.Event('mousemove', { pageX: percent });
  411. star.trigger(evt);
  412. });
  413. },
  414. readOnly: function(readonly) {
  415. return this.each(function() {
  416. var self = $(this);
  417. if (self.data('readonly') !== readonly) {
  418. if (readonly) {
  419. self.off('.um_raty').children('img').off('.um_raty');
  420. methods._lock.call(this);
  421. } else {
  422. methods._binds.call(this);
  423. methods._unlock.call(this);
  424. }
  425. self.data('readonly', readonly);
  426. }
  427. });
  428. },
  429. reload: function() {
  430. return methods.set.call(this, {});
  431. },
  432. score: function() {
  433. var self = $(this);
  434. return arguments.length ? methods.setScore.apply(self, arguments) : methods.getScore.call(self);
  435. },
  436. set: function(options) {
  437. return this.each(function() {
  438. var self = $(this),
  439. actual = self.data('options'),
  440. news = $.extend({}, actual, options);
  441. self.um_raty(news);
  442. });
  443. },
  444. setScore: function(score) {
  445. return this.each(function() {
  446. if ($(this).data('readonly') !== true) {
  447. methods._apply.call(this, score);
  448. methods._target.call(this, score);
  449. }
  450. });
  451. }
  452. };
  453. $.fn.um_raty = function(method) {
  454. if (methods[method]) {
  455. return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
  456. } else if (typeof method === 'object' || !method) {
  457. return methods.init.apply(this, arguments);
  458. } else {
  459. $.error('Method ' + method + ' does not exist!');
  460. }
  461. };
  462. $.fn.um_raty.defaults = {
  463. cancel : false,
  464. cancelClass : 'raty-cancel',
  465. cancelHint : wp.i18n.__( 'Cancel this rating!', 'ultimate-member' ),
  466. cancelOff : 'cancel-off.png',
  467. cancelOn : 'cancel-on.png',
  468. cancelPlace : 'left',
  469. click : undefined,
  470. half : false,
  471. halfShow : true,
  472. hints : ['bad', 'poor', 'regular', 'good', 'gorgeous'],
  473. iconRange : undefined,
  474. mouseout : undefined,
  475. mouseover : undefined,
  476. noRatedMsg : wp.i18n.__( 'Not rated yet!', 'ultimate-member' ),
  477. number : 5,
  478. numberMax : 20,
  479. path : undefined,
  480. precision : false,
  481. readOnly : false,
  482. round : { down: 0.25, full: 0.6, up: 0.76 },
  483. score : undefined,
  484. scoreName : 'score',
  485. single : false,
  486. space : true,
  487. starHalf : 'star-half.png',
  488. starOff : 'star-off.png',
  489. starOn : 'star-on.png',
  490. starType : 'img',
  491. target : undefined,
  492. targetFormat : '{score}',
  493. targetKeep : false,
  494. targetScore : undefined,
  495. targetText : '',
  496. targetType : 'hint'
  497. };
  498. })(jQuery);