APIs

Show:
  1. /**
  2. Widget to display ber meter with up and down selection arrows
  3. @class BarMeterView
  4. @constructor
  5. @return {object} instantiated BarMeterView
  6. **/
  7. define(['jquery', 'backbone'], function ($, Backbone) {
  8.  
  9. var BarMeterView = Backbone.View.extend({
  10.  
  11. /**
  12. Constructor
  13. @method initialize
  14. **/
  15. initialize: function (options) {
  16. var self = this;
  17.  
  18. self.CHANGED_METER_BAR = 'CHANGED_METER_BAR';
  19.  
  20. self.m_options = options;
  21.  
  22. var snippet = '<div>';
  23. snippet += ' <i class="barMeterDown fa fa-caret-left"/>';
  24. snippet += ' <div class="barMeter"></div>';
  25. snippet += ' <div class="barMeter"></div>';
  26. snippet += ' <div class="barMeter"></div>';
  27. snippet += ' <div class="barMeter"></div>';
  28. snippet += ' <div class="barMeter"></div>';
  29. snippet += ' <i class="barMeterUp fa fa-caret-right"/>';
  30. snippet += ' </div>'
  31.  
  32. self.$el.append(snippet);
  33. self.m_value = 0;
  34. self.m_buttonUp = self.$el.find('.barMeterUp');
  35. self.m_buttonDown = self.$el.find('.barMeterDown');
  36. $(self.m_buttonUp).disableSelection();
  37. $(self.m_buttonDown).disableSelection();
  38. self._listenUp();
  39. self._listenDown();
  40. },
  41.  
  42. /**
  43. Listen to up button increasing meters
  44. @method _listenUp
  45. **/
  46. _listenUp: function () {
  47. var self = this;
  48. $(self.m_buttonUp).on('click', function (e) {
  49. self.setMeter(self.m_value == 5 ? 5 : (Number(self.m_value) + 1));
  50. self.trigger(self.CHANGED_METER_BAR, self.m_value);
  51. if (self.m_options.customEvent)
  52. BB.comBroker.fire(self.m_options.customEvent, self, self, self.m_value);
  53. return false;
  54. })
  55. },
  56.  
  57. /**
  58. Listen to down button decreasing meters
  59. @method _listenDown
  60. **/
  61. _listenDown: function () {
  62. var self = this;
  63. $(self.m_buttonDown).on('click', function (e) {
  64. self.setMeter(self.m_value == 1 ? 1 : (Number(self.m_value) - 1));
  65. self.trigger(self.CHANGED_METER_BAR, self.m_value);
  66. if (self.m_options.customEvent)
  67. BB.comBroker.fire(self.m_options.customEvent, self, self, self.m_value);
  68. })
  69. },
  70.  
  71. /**
  72. Set the meter to specified value
  73. @method setMeter
  74. **/
  75. setMeter: function (i_value) {
  76. var self = this;
  77. self.m_value = i_value;
  78.  
  79. if (self.m_value == 0) {
  80. $('.barMeter').css({'background-color': '#d8d8d8'});
  81. return;
  82. }
  83. if (self.m_value == 5) {
  84. $('.barMeter').css({'background-color': BB.lib.getThemeColor()});
  85. return;
  86. }
  87. var c = 0;
  88. $('.barMeter').css({'background-color': '#d8d8d8'});
  89. self.$el.find('.barMeter').each(function () {
  90. c++;
  91. if (c <= self.m_value)
  92. $(this).css({'background-color': BB.lib.getThemeColor()});
  93. });
  94. },
  95.  
  96. /**
  97. Get the meter specified value
  98. @method getMeter
  99. **/
  100. getMeter: function (i_value) {
  101. var self = this;
  102. return self.m_value;
  103. }
  104. });
  105.  
  106. return BarMeterView;
  107. });