PageRenderTime 55ms CodeModel.GetById 27ms RepoModel.GetById 0ms app.codeStats 0ms

/test/Mtest/frameworks/The-M-Project/modules/ui/slider.js

https://bitbucket.org/factoryEquipment/roshambo
JavaScript | 208 lines | 76 code | 26 blank | 106 comment | 11 complexity | f3a35a56f5685b211f72b75c614d1224 MD5 | raw file
  1. // ==========================================================================
  2. // Project: The M-Project - Mobile HTML5 Application Framework
  3. // Copyright: (c) 2011 panacoda GmbH. All rights reserved.
  4. // Creator: Dominik
  5. // Date: 17.11.2011
  6. // License: Dual licensed under the MIT or GPL Version 2 licenses.
  7. // http://github.com/mwaylabs/The-M-Project/blob/master/MIT-LICENSE
  8. // http://github.com/mwaylabs/The-M-Project/blob/master/GPL-LICENSE
  9. // ==========================================================================
  10. /**
  11. * @class
  12. *
  13. * This defines the prototype for a slider view. It renders a touch-optimized slider
  14. * that can be used to set a number within a specified range.
  15. *
  16. * @extends M.View
  17. */
  18. M.SliderView = M.View.extend(
  19. /** @scope M.ButtonView.prototype */ {
  20. /**
  21. * The type of this object.
  22. *
  23. * @type String
  24. */
  25. type: 'M.SliderView',
  26. /**
  27. * This property contains the slider's value.
  28. */
  29. value: 0,
  30. /**
  31. * This property contains the slider's initial value.
  32. *
  33. * @private
  34. */
  35. initialValue: 0,
  36. /**
  37. * This property specifies the min value of the slider.
  38. *
  39. * @type Number
  40. */
  41. min: 0,
  42. /**
  43. * This property specifies the max value of the slider.
  44. *
  45. * @type Number
  46. */
  47. max: 100,
  48. /**
  49. * This property specifies the step value of the slider.
  50. *
  51. * @type Number
  52. */
  53. step: 1,
  54. /**
  55. * This property determines whether or not to display the corresponding input of the slider.
  56. *
  57. * @type Boolean
  58. */
  59. isSliderOnly: NO,
  60. /**
  61. * This property specifies the recommended events for this type of view.
  62. *
  63. * @type Array
  64. */
  65. recommendedEvents: ['change'],
  66. /**
  67. * Renders a slider.
  68. *
  69. * @private
  70. * @returns {String} The slider view's html representation.
  71. */
  72. render: function() {
  73. if(this.label) {
  74. this.html += '<label for="' + this.id + '">' + this.label + '</label>';
  75. }
  76. this.html += '<div id="' + this.id + '_container" class="tmp-slider-container' + (this.isSliderOnly ? ' tmp-slider-is-slider-only' : '') + '">';
  77. this.html += '<input id="' + this.id + '" type="range" min="' + this.min + '" max="' + this.max + '" step="' + this.step + '" value="' + this.value + '"' + this.style() + '>';
  78. this.html += '</div>';
  79. /* store value as initial value for later resetting */
  80. this.initialValue = this.value;
  81. return this.html;
  82. },
  83. /**
  84. * This method registers the change event to internally re-set the value of the
  85. * slider.
  86. */
  87. registerEvents: function() {
  88. if(!this.internalEvents) {
  89. this.internalEvents = {
  90. change: {
  91. target: this,
  92. action: 'setValueFromDOM'
  93. }
  94. }
  95. }
  96. this.bindToCaller(this, M.View.registerEvents)();
  97. },
  98. /**
  99. * Updates a SliderView with DOM access by jQuery.
  100. *
  101. * @private
  102. */
  103. renderUpdate: function() {
  104. /* check if the slider's value is numeric, otherwise use initial value */
  105. if(isNaN(this.value)) {
  106. this.value = this.initialValue;
  107. /* if it is a number, but out of bounds, use min/max */
  108. } else if(this.value < this.min) {
  109. this.value = this.min
  110. } else if(this.value > this.max) {
  111. this.value = this.max
  112. }
  113. $('#' + this.id).val(this.value);
  114. $('#' + this.id).slider('refresh');
  115. },
  116. /**
  117. * This method sets its value to the value it has in its DOM representation
  118. * and then delegates these changes to a controller property if the
  119. * contentBindingReverse property is set.
  120. *
  121. * Additionally call target / action if set.
  122. *
  123. * @param {String} id The DOM id of the event target.
  124. * @param {Object} event The DOM event.
  125. * @param {Object} nextEvent The next event (external event), if specified.
  126. */
  127. setValueFromDOM: function(id, event, nextEvent) {
  128. this.value = $('#' + this.id).val();
  129. if(nextEvent) {
  130. M.EventDispatcher.callHandler(nextEvent, event, NO, [this.value, this.id]);
  131. }
  132. },
  133. /**
  134. * Applies some style-attributes to the slider.
  135. *
  136. * @private
  137. * @returns {String} The slider's styling as html representation.
  138. */
  139. style: function() {
  140. var html = '';
  141. if(this.cssClass) {
  142. html += ' class="' + this.cssClass + '"';
  143. }
  144. return html;
  145. },
  146. /**
  147. * Do some theming/styling once the slider was added to the DOM.
  148. *
  149. * @private
  150. */
  151. theme: function() {
  152. if(this.isSliderOnly) {
  153. $('#' + this.id).hide();
  154. }
  155. if(!this.isEnabled) {
  156. this.disable();
  157. }
  158. },
  159. /**
  160. * This method resets the slider to its initial value.
  161. */
  162. resetSlider: function() {
  163. this.value = this.initialValue;
  164. this.renderUpdate();
  165. },
  166. /**
  167. * This method disables the text field by setting the disabled property of its
  168. * html representation to true.
  169. */
  170. disable: function() {
  171. this.isEnabled = NO;
  172. $('#' + this.id).slider('disable');
  173. },
  174. /**
  175. * This method enables the text field by setting the disabled property of its
  176. * html representation to false.
  177. */
  178. enable: function() {
  179. this.isEnabled = YES;
  180. $('#' + this.id).slider('enable');
  181. }
  182. });