APIs

Show:
  1. /**
  2. Widget to display live editor of label / input
  3. Will fire LIVE_INPUT_CHANGED on data changed and also will fire a custom event
  4. if one was give via options.customEvent
  5. Powered by the awesome validator: https://github.com/chriso/validator.js
  6. @class LiveInput
  7. @constructor
  8. @return {object} instantiated LiveInput
  9. **/
  10. define(['jquery', 'backbone', 'validator'], function ($, Backbone, validator) {
  11.  
  12. var LiveInput = Backbone.View.extend({
  13.  
  14. /**
  15. Constructor
  16. @method initialize
  17. **/
  18. initialize: function (options) {
  19. var self = this;
  20. self.m_validator = validator;
  21. self.m_validationRules = {};
  22. self.LIVE_INPUT_CHANGED = 'LIVE_INPUT_CHANGED';
  23. self.LIVE_INPUT_VALID_ERROR = 'LIVE_INPUT_VALID_ERROR';
  24. self.m_options = options;
  25. self.m_prevValue = self.m_options.value;
  26. var snippet = '<div>';
  27. snippet += ' <h5 class="liveInput" data-toggle="popover" data-placement="auto right" data-trigger="manual" data-content="">' + self.m_options.value + '</h5>';
  28. snippet += ' <a class="liveInputLink"><i style="color: gray" class="fa fa-pencil"></i></a>';
  29. snippet += ' <input class="liveInputRename" type="text" data-localize="' + self.m_options.dataLocalize + '" placeholder="' + self.m_options.placeHolder + '" value="">';
  30. snippet += ' </div>';
  31.  
  32. self.$el.append(snippet);
  33. self.m_value = 0;
  34. self.m_liveRename = self.$('.liveInput');
  35. self.m_liveRenameInput = self.$('.liveInputRename');
  36. self._listenRename();
  37. self._extendValidator();
  38. },
  39.  
  40. /**
  41. Adding our own validation rules
  42. @method _extendValidator
  43. @return {Boolean} pass or fail
  44. **/
  45. _extendValidator: function () {
  46. var self = this;
  47. validator.extend('noEmpty', function (str) {
  48. return !(_.isUndefined(str) || _.isNull(str) || str.trim().length === 0)
  49. });
  50. validator.extend('isNumberInRange', function (str, opts) {
  51. str = Number(str);
  52. if (_.isNaN(str))
  53. return false;
  54. if (str < opts.min || str > opts.max)
  55. return false;
  56. return true;
  57. });
  58. },
  59.  
  60. /**
  61. Listen to up button increasing meters
  62. @method _listenUp
  63. **/
  64. _listenRename: function () {
  65. var self = this;
  66. self.m_faIcon = self.$el.find('i');
  67. self.$el.on('mousedown mouseup', function (e) {
  68. // if mouse up, just give focus to control
  69. if (e.type == "mouseup") {
  70. self.m_liveRenameInput.focus();
  71. return;
  72. }
  73. // already in edit mode, return since blur will kick next
  74. if (!self.m_faIcon.hasClass('fa-pencil'))
  75. return;
  76.  
  77. // on entering edit mode
  78. self.m_liveRenameInput.show();
  79. self.m_liveRename.hide();
  80. self.m_faIcon.removeClass('fa-pencil').addClass('fa-check');
  81. var value = self.m_liveRename.text();
  82. self.m_liveRenameInput.prop('value', value);
  83.  
  84. // on entering view mode
  85. self.m_liveRenameInput.one('blur', function (e) {
  86. var value = self.m_liveRenameInput.prop('value');
  87. self.m_faIcon.removeClass('fa-check').addClass('fa-pencil');
  88. self.m_liveRename.text(value);
  89. self.m_liveRenameInput.toggle();
  90. self.m_liveRename.toggle();
  91. self.setValue(value, true, true);
  92. });
  93. });
  94. },
  95.  
  96. /**
  97. Validate against all the given rules per instance
  98. @method _validated
  99. @param {Number} i_value
  100. @return {Array} status of array of error messages
  101. **/
  102. _validated: function (i_value) {
  103. var self = this;
  104. var errors = [];
  105. _.forEach(self.m_validationRules, function (rule, v) {
  106. var func = rule[0];
  107. var err = rule[1];
  108. var opts = rule[2];
  109. var value = i_value;
  110. if (func)
  111. if (func(value, opts) == false)
  112. errors.push(err);
  113. });
  114.  
  115. if (errors.length > 0) {
  116. self.trigger(self.LIVE_INPUT_VALID_ERROR, errors);
  117. self.m_liveRename.attr('data-content', errors[0]);
  118. //self.m_liveRename.attr('data-content', 'hello world');
  119. self.m_liveRename.popover('show');
  120. setTimeout(function () {
  121. self.m_liveRename.popover('hide');
  122. }, 3000);
  123. }
  124. return errors;
  125. },
  126.  
  127. /**
  128. Return the validator object so caller can reference the isXXX functions as validation rules
  129. @method getValidator
  130. @return {Object} validator object
  131. **/
  132. getValidator: function () {
  133. var self = this;
  134. return self.m_validator;
  135. },
  136.  
  137. /**
  138. Enable validation via config object
  139. @method rules
  140. @param {Object} the config objects uses a AND rule and so ALL rules must match for no error message to display.
  141. if any error we return it in the array of errors.
  142. **/
  143. rules: function (i_validationRules) {
  144. var self = this;
  145. self.m_validationRules = i_validationRules;
  146. },
  147.  
  148. /**
  149. Get current input value
  150. @method getValue
  151. @return {String} value
  152. **/
  153. getValue: function () {
  154. return self.m_prevValue;
  155. },
  156.  
  157. /**
  158. Set value and announce the change
  159. only announce if set to true
  160. @method _listenUp
  161. @params {String} i_value
  162. @params {Boolean} i_announce
  163. @params {Boolean} i_ignoreValidation
  164. **/
  165. setValue: function (i_value, i_announce, i_validate) {
  166. var self = this;
  167. if (i_value == self.m_prevValue)
  168. return;
  169. var edata = {
  170. value: i_value,
  171. preValue: self.m_prevValue,
  172. el: self.m_options.el
  173. };
  174.  
  175. // check for validation errors
  176. if (i_validate) {
  177. var errors = self._validated(i_value);
  178. if (errors.length > 0) {
  179. self.m_liveRename.text(self.m_prevValue);
  180. return errors;
  181. }
  182. }
  183.  
  184. self.m_prevValue = i_value;
  185. self.m_liveRename.text(i_value);
  186.  
  187. if (!i_announce)
  188. return;
  189. self.trigger(self.LIVE_INPUT_CHANGED, edata);
  190. if (self.m_options.customEvent)
  191. BB.comBroker.fire(self.m_options.customEvent, self, self, edata);
  192. }
  193. });
  194.  
  195. return LiveInput;
  196. });
  197.  
  198.