##// END OF EJS Templates
Use contentEditable to allow modification via the the slider readout
Gordon Ball -
Show More
@@ -29,6 +29,7 define([
29 29 this.$readout = $('<div/>')
30 30 .appendTo(this.$el)
31 31 .addClass('widget-readout')
32 .attr('contentEditable', true)
32 33 .hide();
33 34
34 35 this.model.on('change:slider_color', function(sender, value) {
@@ -156,9 +157,40 define([
156 157
157 158 events: {
158 159 // Dictionary of events and their handlers.
159 "slide" : "handleSliderChange"
160 "slide" : "handleSliderChange",
161 "blur [contentEditable=true]": "handleTextChange"
160 162 },
161 163
164 handleTextChange: function(e) {
165 var text = $(e.target).text().trim();
166 var value = this._validate_text_input(text);
167 if (isNaN(value)) {
168 this.$readout.text(this.model.get('value'));
169 } else {
170 //check for outside range
171 if (value > this.model.get('max')) value = this.model.get('max');
172 if (value < this.model.get('min')) value = this.model.get('min');
173
174 //update the readout unconditionally
175 //this covers eg, entering a float value which rounds to the
176 //existing int value, which will not trigger an update since the model
177 //doesn't change, but we should update the text to reflect that
178 //a float value isn't being used
179 this.$readout.text(value);
180
181 //note that the step size currently isn't enforced, so if an
182 //off-step value is input it will be retained
183
184 //update the model
185 this.model.set('value', value, {updated_view: this});
186 this.touch();
187 }
188 },
189
190 _validate_text_input: function(x) {
191 return parseInt(x);
192 },
193
162 194 handleSliderChange: function(e, ui) {
163 195 // Called when the slider value is changed.
164 196
General Comments 0
You need to be logged in to leave comments. Login now