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 });