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