You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

777 lines
20 KiB

3 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. /*!
  2. * Raty - A Star Rating Plugin
  3. *
  4. * The MIT License
  5. *
  6. * author: Washington Botelho
  7. * github: wbotelhos/raty
  8. * version: 3.1.1
  9. *
  10. */
  11. (function(root, factory) {
  12. if (typeof define === 'function' && define.amd) {
  13. define(['jquery'], factory);
  14. } else if (typeof module === 'object' && module.exports) {
  15. module.exports = factory(require('jquery'));
  16. } else {
  17. factory(root.jQuery);
  18. }
  19. }(this, function($) {
  20. 'use strict';
  21. $.raty = {
  22. cancelButton: false,
  23. cancelClass: 'raty-cancel',
  24. cancelHint: 'Cancel this rating!',
  25. cancelOff: 'cancel-off.png',
  26. cancelOn: 'cancel-on.png',
  27. cancelPlace: 'left',
  28. click: undefined,
  29. half: false,
  30. halfShow: true,
  31. hints: ['bad', 'poor', 'regular', 'good', 'gorgeous'],
  32. iconRange: undefined,
  33. iconRangeSame: false,
  34. mouseout: undefined,
  35. mouseover: undefined,
  36. noRatedMsg: 'Not rated yet!',
  37. number: 5,
  38. numberMax: 20,
  39. path: undefined,
  40. precision: false,
  41. readOnly: false,
  42. round: { down: 0.25, full: 0.6, up: 0.76 },
  43. score: undefined,
  44. scoreName: 'score',
  45. single: false,
  46. space: true,
  47. starHalf: 'star-half.png',
  48. starOff: 'star-off.png',
  49. starOn: 'star-on.png',
  50. starType: 'img',
  51. target: undefined,
  52. targetFormat: '{score}',
  53. targetKeep: false,
  54. targetScore: undefined,
  55. targetText: '',
  56. targetType: 'hint'
  57. };
  58. $.fn.raty = function(options) {
  59. return this.each(function() {
  60. var instance = new $.raty.Raty(this, options);
  61. return instance._create();
  62. });
  63. };
  64. $.raty.Raty = (function() {
  65. var Raty = function(element, options) {
  66. this.element = element;
  67. this.self = $(element);
  68. this.opt = $.extend(true, {}, $.raty, options, this.self.data());
  69. };
  70. Raty.prototype = {
  71. _create: function() {
  72. this._executeCallbacks();
  73. this._adjustNumber();
  74. this._adjustHints();
  75. this.opt.score = this._adjustedScore(this.opt.score);
  76. if (this.opt.starType !== 'img') {
  77. this._adjustStarName();
  78. }
  79. this._setPath();
  80. this._createStars();
  81. if (this.opt.cancelButton) {
  82. this._createCancel();
  83. }
  84. if (this.opt.precision) {
  85. this._adjustPrecision();
  86. }
  87. this._createScore();
  88. this._apply(this.opt.score);
  89. this._setTitle(this.opt.score);
  90. this._target(this.opt.score);
  91. if (this.opt.readOnly) {
  92. this._lock();
  93. } else {
  94. this.element.style.cursor = 'pointer';
  95. this._binds();
  96. }
  97. this.self.data('raty', this);
  98. },
  99. // TODO: model spec
  100. _adjustedScore: function(score) {
  101. if (score || score === 0) {
  102. return this._between(score, 0, this.opt.number);
  103. }
  104. },
  105. _adjustHints: function() {
  106. if (!this.opt.hints) {
  107. this.opt.hints = [];
  108. }
  109. if (!this.opt.halfShow && !this.opt.half) {
  110. return;
  111. }
  112. var steps = this.opt.precision ? 10 : 2;
  113. for (var i = 0; i < this.opt.number; i++) {
  114. var group = this.opt.hints[i];
  115. if (Object.prototype.toString.call(group) !== '[object Array]') {
  116. group = [group];
  117. }
  118. this.opt.hints[i] = [];
  119. for (var j = 0; j < steps; j++) {
  120. var hint = group[j];
  121. var last = group[group.length - 1];
  122. if (last === undefined) {
  123. last = null;
  124. }
  125. this.opt.hints[i][j] = hint === undefined ? last : hint;
  126. }
  127. }
  128. },
  129. _adjustNumber: function() {
  130. this.opt.number = this._between(this.opt.number, 1, this.opt.numberMax);
  131. },
  132. _adjustPrecision: function() {
  133. this.opt.half = true;
  134. },
  135. _adjustStarName: function() {
  136. var replaces = ['cancelOff', 'cancelOn', 'starHalf', 'starOff', 'starOn'];
  137. this.opt.path = '';
  138. for (var i = 0; i < replaces.length; i++) {
  139. this.opt[replaces[i]] = this.opt[replaces[i]].replace('.', '-');
  140. }
  141. },
  142. // TODO: model spec
  143. _apply: function(score) {
  144. this._fill(score);
  145. if (score) {
  146. if (score > 0) {
  147. this.scoreField.val(score);
  148. }
  149. this._roundStars(score);
  150. }
  151. },
  152. _attributesForIndex: function(i) {
  153. var name = this._nameForIndex(i);
  154. var attributes = { alt: i, src: this.opt.path + this.opt[name] };
  155. if (this.opt.starType !== 'img') {
  156. attributes = { 'data-alt': i, 'class': this.opt[name] };
  157. }
  158. attributes.title = this._getHint(i);
  159. return attributes;
  160. },
  161. _between: function(value, min, max) {
  162. return Math.min(Math.max(parseFloat(value), min), max);
  163. },
  164. // TODO: model spec
  165. _binds: function() {
  166. if (this.cancelButton) {
  167. this._bindOverCancel();
  168. this._bindClickCancel();
  169. this._bindOutCancel();
  170. }
  171. this._bindOver();
  172. this._bindClick();
  173. this._bindOut();
  174. },
  175. // TODO: model spec
  176. _bindClick: function() {
  177. var that = this;
  178. this.stars.on('click.raty', function(evt) {
  179. if (that.self.data('readonly')) {
  180. return;
  181. }
  182. var execute = true;
  183. var score = (that.opt.half || that.opt.precision) ? that.self.data('score') : (this.alt || $(this).data('alt'));
  184. if (that.opt.half && !that.opt.precision) {
  185. score = that._roundHalfScore(score);
  186. }
  187. if (that.opt.click) {
  188. execute = that.opt.click.call(that.element, +score, evt);
  189. }
  190. if (execute || execute === undefined) {
  191. that._apply(+score);
  192. }
  193. });
  194. },
  195. // TODO: model spec
  196. _bindClickCancel: function() {
  197. this.cancelButton.on('click.raty', function(evt) {
  198. this.scoreField.removeAttr('value');
  199. if (this.opt.click) {
  200. this.opt.click.call(this.element, null, evt);
  201. }
  202. }.bind(this));
  203. },
  204. // TODO: model spec
  205. _bindOut: function() {
  206. this.self.on('mouseleave.raty', function(evt) {
  207. var score = +this.scoreField.val() || undefined;
  208. this._apply(score);
  209. this._target(score, evt);
  210. this._resetTitle();
  211. if (this.opt.mouseout) {
  212. this.opt.mouseout.call(this.element, score, evt);
  213. }
  214. }.bind(this));
  215. },
  216. // TODO: model spec
  217. _bindOutCancel: function() {
  218. var that = this;
  219. this.cancelButton.on('mouseleave.raty', function(evt) {
  220. var icon = that.opt.cancelOff;
  221. if (that.opt.starType !== 'img') {
  222. icon = that.opt.cancelClass + ' ' + icon;
  223. }
  224. that._setIcon(this, icon);
  225. if (that.opt.mouseout) {
  226. var score = +that.scoreField.val() || undefined;
  227. that.opt.mouseout.call(that.element, score, evt);
  228. }
  229. });
  230. },
  231. // TODO: model spec
  232. _bindOver: function() {
  233. var that = this;
  234. var action = that.opt.half ? 'mousemove.raty' : 'mouseover.raty';
  235. this.stars.on(action, function(evt) {
  236. var score = that._getScoreByPosition(evt, this);
  237. that._fill(score);
  238. if (that.opt.half) {
  239. that._roundStars(score, evt);
  240. that._setTitle(score, evt);
  241. that.self.data('score', score);
  242. }
  243. that._target(score, evt);
  244. if (that.opt.mouseover) {
  245. that.opt.mouseover.call(that.element, score, evt);
  246. }
  247. });
  248. },
  249. // TODO: model spec
  250. _bindOverCancel: function() {
  251. var that = this;
  252. this.cancelButton.on('mouseover.raty', function(evt) {
  253. if (that.self.data('readonly')) {
  254. return;
  255. }
  256. var starOff = that.opt.path + that.opt.starOff;
  257. var icon = that.opt.cancelOn;
  258. if (that.opt.starType === 'img') {
  259. that.stars.attr('src', starOff);
  260. } else {
  261. icon = that.opt.cancelClass + ' ' + icon;
  262. that.stars.attr('class', starOff);
  263. }
  264. that._setIcon(this, icon);
  265. that._target(null, evt);
  266. if (that.opt.mouseover) {
  267. that.opt.mouseover.call(that.element, null);
  268. }
  269. });
  270. },
  271. // TODO: model spec
  272. _buildScoreField: function() {
  273. return $('<input />', { name: this.opt.scoreName, type: 'hidden' }).appendTo(this.self);
  274. },
  275. // TODO: model spec
  276. _createCancel: function() {
  277. var icon = this.opt.path + this.opt.cancelOff;
  278. var button = $('<' + this.opt.starType + ' />', { title: this.opt.cancelHint, 'class': this.opt.cancelClass });
  279. if (this.opt.starType === 'img') {
  280. button.attr({ src: icon, alt: 'x' });
  281. } else {
  282. // TODO: use $.data
  283. button.attr('data-alt', 'x').addClass(icon);
  284. }
  285. if (this.opt.cancelPlace === 'left') {
  286. this.self.prepend('&#160;').prepend(button);
  287. } else {
  288. this.self.append('&#160;').append(button);
  289. }
  290. this.cancelButton = button;
  291. },
  292. // TODO: model spec
  293. _createScore: function() {
  294. var score = $(this.opt.targetScore);
  295. this.scoreField = score.length ? score : this._buildScoreField();
  296. },
  297. _createStars: function() {
  298. for (var i = 1; i <= this.opt.number; i++) {
  299. var attributes = this._attributesForIndex(i);
  300. $('<' + this.opt.starType + ' />', attributes).appendTo(this.element);
  301. if (this.opt.space && i < this.opt.number) {
  302. this.self.append('&#160;');
  303. }
  304. }
  305. this.stars = this.self.children(this.opt.starType);
  306. },
  307. // TODO: model spec
  308. _error: function(message) {
  309. $(this).text(message);
  310. $.error(message);
  311. },
  312. _executeCallbacks: function() {
  313. var options = ['number', 'readOnly', 'score', 'scoreName', 'target', 'path'];
  314. for (var i = 0; i < options.length; i++) {
  315. if (typeof this.opt[options[i]] === 'function') {
  316. var value = this.opt[options[i]].call(this.element);
  317. if (value) {
  318. this.opt[options[i]] = value;
  319. } else {
  320. delete this.opt[options[i]];
  321. }
  322. }
  323. }
  324. },
  325. // TODO: model spec
  326. _fill: function(score) {
  327. var hash = 0;
  328. if (this.opt.iconRangeSame && this.opt.iconRange) {
  329. while (hash < this.opt.iconRange.length && this.opt.iconRange[hash].range < score) {
  330. hash++;
  331. }
  332. }
  333. for (var i = 1; i <= this.stars.length; i++) {
  334. var icon;
  335. var star = this.stars[i - 1];
  336. var turnOn = this._turnOn(i, score);
  337. if (this.opt.iconRange && this.opt.iconRange.length > hash) {
  338. var irange = this.opt.iconRange[hash];
  339. icon = this._getRangeIcon(irange, turnOn);
  340. if (i <= irange.range) {
  341. this._setIcon(star, icon);
  342. }
  343. if (i === irange.range) {
  344. hash++;
  345. }
  346. } else {
  347. icon = this.opt[turnOn ? 'starOn' : 'starOff'];
  348. this._setIcon(star, icon);
  349. }
  350. }
  351. },
  352. _getDecimal: function(number, fractions) {
  353. var decimal = number.toString().split('.')[1];
  354. var result = 0;
  355. if (decimal) {
  356. result = parseInt(decimal.slice(0, fractions), 10);
  357. if (decimal.slice(1, 5) === '9999') {
  358. result++;
  359. }
  360. }
  361. return result;
  362. },
  363. // TODO: model spec
  364. _getRangeIcon: function(irange, turnOn) {
  365. return turnOn ? irange.on || this.opt.starOn : irange.off || this.opt.starOff;
  366. },
  367. // TODO: model spec
  368. _getScoreByPosition: function(evt, icon) {
  369. var score = parseInt(icon.alt || icon.getAttribute('data-alt'), 10);
  370. if (this.opt.half) {
  371. var size = this._getWidth();
  372. var percent = parseFloat((evt.pageX - $(icon).offset().left) / size);
  373. score = score - 1 + percent;
  374. }
  375. return score;
  376. },
  377. // TODO: model spec
  378. _getHint: function(score, evt) {
  379. if (score !== 0 && !score) {
  380. return this.opt.noRatedMsg;
  381. }
  382. var decimal = this._getDecimal(score, 1);
  383. var integer = Math.ceil(score);
  384. var group = this.opt.hints[(integer || 1) - 1];
  385. var hint = group;
  386. var set = !evt || this.isMove;
  387. if (this.opt.precision) {
  388. if (set) {
  389. decimal = decimal === 0 ? 9 : decimal - 1;
  390. }
  391. hint = group[decimal];
  392. } else if (this.opt.halfShow || this.opt.half) {
  393. decimal = set && decimal === 0 ? 1 : decimal > 5 ? 1 : 0;
  394. hint = group[decimal];
  395. }
  396. return hint === '' ? '' : hint || score;
  397. },
  398. // TODO: model spec
  399. _getWidth: function() {
  400. var width = this.stars[0].width || parseFloat(this.stars.eq(0).css('font-size'));
  401. if (!width) {
  402. this._error('Could not get the icon width!');
  403. }
  404. return width;
  405. },
  406. // TODO: model spec
  407. _lock: function() {
  408. var hint = this._getHint(this.scoreField.val());
  409. this.element.style.cursor = '';
  410. this.element.title = hint;
  411. this.scoreField.prop('readonly', true);
  412. this.stars.prop('title', hint);
  413. if (this.cancelButton) {
  414. this.cancelButton.hide();
  415. }
  416. this.self.data('readonly', true);
  417. },
  418. _nameForIndex: function(i) {
  419. return this.opt.score && this.opt.score >= i ? 'starOn' : 'starOff';
  420. },
  421. // TODO: model spec
  422. _resetTitle: function() {
  423. for (var i = 0; i < this.opt.number; i++) {
  424. this.stars[i].title = this._getHint(i + 1);
  425. }
  426. },
  427. // TODO: model spec
  428. _roundHalfScore: function(score) {
  429. var integer = parseInt(score, 10);
  430. var decimal = this._getDecimal(score, 1);
  431. if (decimal !== 0) {
  432. decimal = decimal > 5 ? 1 : 0.5;
  433. }
  434. return integer + decimal;
  435. },
  436. // TODO: model spec
  437. _roundStars: function(score, evt) {
  438. var name = this._starName(score, evt);
  439. if (name) {
  440. var icon = this.opt[name];
  441. var star = this.stars[Math.ceil(score) - 1];
  442. this._setIcon(star, icon);
  443. } // Full down: [x.00 .. x.25]
  444. },
  445. // TODO: model spec
  446. _setIcon: function(star, icon) {
  447. star[this.opt.starType === 'img' ? 'src' : 'className'] = this.opt.path + icon;
  448. },
  449. _setPath: function() {
  450. this.opt.path = this.opt.path || '';
  451. if (this.opt.path && this.opt.path.slice(-1)[0] !== '/') {
  452. this.opt.path += '/';
  453. }
  454. },
  455. // TODO: model spec
  456. _setTarget: function(target, score) {
  457. if (score) {
  458. score = this.opt.targetFormat.toString().replace('{score}', score);
  459. }
  460. if (target.is(':input')) {
  461. target.val(score);
  462. } else {
  463. target.html(score);
  464. }
  465. },
  466. // TODO: model spec
  467. _setTitle: function(score, evt) {
  468. if (score) {
  469. var integer = parseInt(Math.ceil(score), 10);
  470. var star = this.stars[integer - 1];
  471. star.title = this._getHint(score, evt);
  472. }
  473. },
  474. _starName: function(score, evt) {
  475. var decimal = +(score % 1).toFixed(2);
  476. if (evt || this.isMove) {
  477. return decimal > 0.5 ? 'starOn' : 'starHalf';
  478. }
  479. if (decimal <= this.opt.round.down) { // Down: [x.00 ... x.25]
  480. return;
  481. }
  482. if (this.opt.halfShow && decimal < this.opt.round.up) { // Half: [x.26 ... x.75]
  483. return 'starHalf';
  484. }
  485. if (decimal < this.opt.round.full) { // Off: [x.26 .. x.6]
  486. return 'starOff';
  487. }
  488. return 'starOn'; // Up: [x.26 ...] || [x.6 ...]
  489. },
  490. // TODO: model spec
  491. _target: function(score, evt) {
  492. if (this.opt.target) {
  493. var target = $(this.opt.target);
  494. if (!target.length) {
  495. this._error('Target selector invalid or missing!');
  496. }
  497. var mouseover = evt && evt.type === 'mouseover';
  498. if (score === undefined) {
  499. score = this.opt.targetText;
  500. } else if (score === null) {
  501. score = mouseover ? this.opt.cancelHint : this.opt.targetText;
  502. } else {
  503. if (this.opt.targetType === 'hint') {
  504. score = this._getHint(score, evt);
  505. } else if (this.opt.precision) {
  506. score = parseFloat(score).toFixed(1);
  507. }
  508. var mousemove = evt && evt.type === 'mousemove';
  509. if (!mouseover && !mousemove && !this.opt.targetKeep) {
  510. score = this.opt.targetText;
  511. }
  512. }
  513. this._setTarget(target, score);
  514. }
  515. },
  516. // TODO: model spec
  517. _turnOn: function(i, score) {
  518. return this.opt.single ? (i === score) : (i <= score);
  519. },
  520. // TODO: model spec
  521. _unlock: function() {
  522. this.element.style.cursor = 'pointer';
  523. this.element.removeAttribute('title');
  524. this.scoreField.removeAttr('readonly');
  525. this.self.data('readonly', false);
  526. this._resetTitle();
  527. if (this.cancelButton) {
  528. this.cancelButton.css('display', '');
  529. }
  530. },
  531. // TODO: model spec
  532. cancel: function(click) {
  533. if (this.self.data('readonly') !== true) {
  534. this[click ? 'click' : 'score'].call(this, null);
  535. this.scoreField.removeAttr('value');
  536. }
  537. },
  538. // TODO: model spec
  539. click: function(score) {
  540. if (this.self.data('readonly') !== true) {
  541. score = this._adjustedScore(score);
  542. this._apply(score);
  543. if (this.opt.click) {
  544. this.opt.click.call(this.element, score, $.Event('click'));
  545. }
  546. this._target(score);
  547. }
  548. },
  549. // TODO: model spec
  550. getScore: function() {
  551. var score = [];
  552. var value ;
  553. value = this.scoreField.val();
  554. score.push(value ? +value : undefined);
  555. return (score.length > 1) ? score : score[0];
  556. },
  557. // TODO: model spec
  558. move: function(score) {
  559. var integer = parseInt(score, 10);
  560. var decimal = this._getDecimal(score, 1);
  561. if (integer >= this.opt.number) {
  562. integer = this.opt.number - 1;
  563. decimal = 10;
  564. }
  565. var width = this._getWidth();
  566. var steps = width / 10;
  567. var star = $(this.stars[integer]);
  568. var percent = star.offset().left + steps * decimal;
  569. var evt = $.Event('mousemove', { pageX: percent });
  570. this.isMove = true;
  571. star.trigger(evt);
  572. this.isMove = false;
  573. },
  574. // TODO: model spec
  575. readOnly: function(readonly) {
  576. if (this.self.data('readonly') !== readonly) {
  577. if (readonly) {
  578. this.self.off('.raty').children(this.opt.starType).off('.raty');
  579. this._lock();
  580. } else {
  581. this._binds();
  582. this._unlock();
  583. }
  584. this.self.data('readonly', readonly);
  585. }
  586. },
  587. // TODO: model spec
  588. score: function() {
  589. return arguments.length ? this.setScore.apply(this, arguments) : this.getScore();
  590. },
  591. setScore: function(score) {
  592. if (this.self.data('readonly') !== true) {
  593. score = this._adjustedScore(score);
  594. this._apply(score);
  595. this._target(score);
  596. }
  597. }
  598. };
  599. return Raty;
  600. })();
  601. }));