Show:
  1. /**
  2. * The Rating Utility - The Thumb Rating creates a non-obstrusive star rating
  3. * control with only two options using Thumb Up and Thumb Down icons.
  4. *
  5. * @module aui-rating
  6. */
  7. var getCN = A.getClassName,
  8. CSS_ICON = getCN('glyphicon'),
  9. CSS_ICON_THUMBS_DOWN = getCN('glyphicon', 'thumbs', 'down'),
  10. CSS_ICON_THUMBS_UP = getCN('glyphicon', 'thumbs', 'up'),
  11. CSS_RATING_OFF = getCN('rating', 'off'),
  12. CSS_RATING_ON = getCN('rating', 'on');
  13. /**
  14. * A base class for ThumbRating, providing:
  15. *
  16. * - A non-obstrusive star rating control using Thumb up and Thumb down icons
  17. * - Could be based on a set of radio input boxes
  18. *
  19. * Check the [live demo](http://alloyui.com/examples/rating/).
  20. *
  21. * @class A.ThumbRating
  22. * @extends A.Rating
  23. * @param {Object} config Object literal specifying widget configuration
  24. * properties.
  25. * @constructor
  26. */
  27. var ThumbRating = A.Component.create({
  28. /**
  29. * Static property provides a string to identify the class.
  30. *
  31. * @property NAME
  32. * @type String
  33. * @static
  34. */
  35. NAME: 'ThumbRating',
  36. /**
  37. * Static property used to define the default attribute
  38. * configuration for the ThumbRating.
  39. *
  40. * @property ATTRS
  41. * @type Object
  42. * @static
  43. */
  44. ATTRS: {
  45. /**
  46. * CSS classes applied on ThumbRating.
  47. *
  48. * @attribute cssClasses
  49. * @type Object
  50. */
  51. cssClasses: {
  52. value: {
  53. down: [CSS_ICON, CSS_ICON_THUMBS_DOWN].join(' '),
  54. element: CSS_RATING_OFF,
  55. hover: CSS_RATING_ON,
  56. off: CSS_RATING_OFF,
  57. on: CSS_RATING_ON,
  58. up: [CSS_ICON, CSS_ICON_THUMBS_UP].join(' ')
  59. }
  60. },
  61. /**
  62. * The size on ThumbRating is always 2 (i.e., thumb up and thumb down).
  63. *
  64. * @attribute size
  65. * @default 2
  66. * @readOnly
  67. * @type Number
  68. */
  69. size: {
  70. value: 2,
  71. readOnly: true
  72. }
  73. },
  74. /**
  75. * Static property used to define which component it extends.
  76. *
  77. * @property EXTENDS
  78. * @type Object
  79. * @static
  80. */
  81. EXTENDS: A.Rating,
  82. prototype: {
  83. /**
  84. * Create the DOM structure for the ThumbRating. Lifecycle.
  85. *
  86. * @method renderUI
  87. * @protected
  88. */
  89. renderUI: function() {
  90. var instance = this,
  91. cssClasses = instance.get('cssClasses');
  92. ThumbRating.superclass.renderUI.apply(this, arguments);
  93. var elements = instance.get('elements');
  94. elements.addClass(cssClasses.off);
  95. elements.item(0).addClass(cssClasses.up);
  96. elements.item(1).addClass(cssClasses.down);
  97. },
  98. /**
  99. * Add the `className` on the the `index` element
  100. * and all the previous Rating elements.
  101. *
  102. * @method fillTo
  103. * @param {Number} index Index to be selected
  104. * @param {String} className Class name to be applied when fill the
  105. * Rating elements
  106. */
  107. fillTo: function(index) {
  108. var instance = this,
  109. cssClasses = instance.get('cssClasses');
  110. this.clearSelection();
  111. if (index >= 0) {
  112. var el = this.get('elements').item(index);
  113. el.addClass(cssClasses.on);
  114. el.removeClass(cssClasses.off);
  115. }
  116. },
  117. /**
  118. * Empty method, no logic needed on this method on ThumbRating.
  119. *
  120. * @method _syncElements
  121. * @protected
  122. */
  123. _syncElements: function() {}
  124. }
  125. });
  126. A.ThumbRating = ThumbRating;