##// END OF EJS Templates
A comma after `this.touch`
Tarun Gaba -
Show More
@@ -1,310 +1,310 b''
1 1 // Copyright (c) IPython Development Team.
2 2 // Distributed under the terms of the Modified BSD License.
3 3
4 4 define([
5 5 "widgets/js/widget",
6 6 "jqueryui",
7 7 "components/bootstrap/js/bootstrap.min",
8 8 ], function(widget, $){
9 9
10 10 var IntSliderView = widget.DOMWidgetView.extend({
11 11 render : function(){
12 12 // Called when view is rendered.
13 13 this.$el
14 14 .addClass('widget-hbox-single');
15 15 this.$label = $('<div />')
16 16 .appendTo(this.$el)
17 17 .addClass('widget-hlabel')
18 18 .hide();
19 19
20 20 this.$slider = $('<div />')
21 21 .slider({})
22 22 .addClass('slider');
23 23 // Put the slider in a container
24 24 this.$slider_container = $('<div />')
25 25 .addClass('widget-hslider')
26 26 .append(this.$slider);
27 27 this.$el_to_style = this.$slider_container; // Set default element to style
28 28 this.$el.append(this.$slider_container);
29 29
30 30 this.$readout = $('<div/>')
31 31 .appendTo(this.$el)
32 32 .addClass('widget-hreadout')
33 33 .hide();
34 34
35 35 // Set defaults.
36 36 this.update();
37 37 },
38 38
39 39 update : function(options){
40 40 // Update the contents of this view
41 41 //
42 42 // Called when the model is changed. The model may have been
43 43 // changed by another view or by a state update from the back-end.
44 44 if (options === undefined || options.updated_view != this) {
45 45 // JQuery slider option keys. These keys happen to have a
46 46 // one-to-one mapping with the corrosponding keys of the model.
47 47 var jquery_slider_keys = ['step', 'max', 'min', 'disabled'];
48 48 var that = this;
49 49 that.$slider.slider({});
50 50 _.each(jquery_slider_keys, function(key, i) {
51 51 var model_value = that.model.get(key);
52 52 if (model_value !== undefined) {
53 53 that.$slider.slider("option", key, model_value);
54 54 }
55 55 });
56 56
57 57 // WORKAROUND FOR JQUERY SLIDER BUG.
58 58 // The horizontal position of the slider handle
59 59 // depends on the value of the slider at the time
60 60 // of orientation change. Before applying the new
61 61 // workaround, we set the value to the minimum to
62 62 // make sure that the horizontal placement of the
63 63 // handle in the vertical slider is always
64 64 // consistent.
65 65 var orientation = this.model.get('orientation');
66 66 var min = this.model.get('min');
67 67 var max = this.model.get('max');
68 68 this.$slider.slider('option', 'value', min);
69 69 this.$slider.slider('option', 'orientation', orientation);
70 70 value = this.model.get('value');
71 71 if(value > max) {
72 72 value = max;
73 73 }
74 74 else if(value < min){
75 75 value = min;
76 76 }
77 77 this.model.set('value', value, {updated_view: this});
78 78 this.$slider.slider('option', 'value', value);
79 79 this.$readout.text(value);
80 this.touch()
80 this.touch();
81 81
82 82 // Use the right CSS classes for vertical & horizontal sliders
83 83 if (orientation=='vertical') {
84 84 this.$slider_container
85 85 .removeClass('widget-hslider')
86 86 .addClass('widget-vslider');
87 87 this.$el
88 88 .removeClass('widget-hbox-single')
89 89 .addClass('widget-vbox-single');
90 90 this.$label
91 91 .removeClass('widget-hlabel')
92 92 .addClass('widget-vlabel');
93 93 this.$readout
94 94 .removeClass('widget-hreadout')
95 95 .addClass('widget-vreadout');
96 96
97 97 } else {
98 98 this.$slider_container
99 99 .removeClass('widget-vslider')
100 100 .addClass('widget-hslider');
101 101 this.$el
102 102 .removeClass('widget-vbox-single')
103 103 .addClass('widget-hbox-single');
104 104 this.$label
105 105 .removeClass('widget-vlabel')
106 106 .addClass('widget-hlabel');
107 107 this.$readout
108 108 .removeClass('widget-vreadout')
109 109 .addClass('widget-hreadout');
110 110 }
111 111
112 112 var description = this.model.get('description');
113 113 if (description.length === 0) {
114 114 this.$label.hide();
115 115 } else {
116 116 this.$label.text(description);
117 117 MathJax.Hub.Queue(["Typeset",MathJax.Hub,this.$label.get(0)]);
118 118 this.$label.show();
119 119 }
120 120
121 121 var readout = this.model.get('readout');
122 122 if (readout) {
123 123 this.$readout.show();
124 124 } else {
125 125 this.$readout.hide();
126 126 }
127 127 }
128 128 return IntSliderView.__super__.update.apply(this);
129 129 },
130 130
131 131 events: {
132 132 // Dictionary of events and their handlers.
133 133 "slide" : "handleSliderChange"
134 134 },
135 135
136 136 handleSliderChange: function(e, ui) {
137 137 // Called when the slider value is changed.
138 138
139 139 // Calling model.set will trigger all of the other views of the
140 140 // model to update.
141 141 var actual_value = this._validate_slide_value(ui.value);
142 142 this.model.set('value', actual_value, {updated_view: this});
143 143 this.$readout.text(actual_value);
144 144 this.touch();
145 145 },
146 146
147 147 _validate_slide_value: function(x) {
148 148 // Validate the value of the slider before sending it to the back-end
149 149 // and applying it to the other views on the page.
150 150
151 151 // Double bit-wise not truncates the decimel (int cast).
152 152 return ~~x;
153 153 },
154 154 });
155 155
156 156
157 157 var IntTextView = widget.DOMWidgetView.extend({
158 158 render : function(){
159 159 // Called when view is rendered.
160 160 this.$el
161 161 .addClass('widget-hbox-single');
162 162 this.$label = $('<div />')
163 163 .appendTo(this.$el)
164 164 .addClass('widget-hlabel')
165 165 .hide();
166 166 this.$textbox = $('<input type="text" />')
167 167 .addClass('form-control')
168 168 .addClass('widget-numeric-text')
169 169 .appendTo(this.$el);
170 170 this.$el_to_style = this.$textbox; // Set default element to style
171 171 this.update(); // Set defaults.
172 172 },
173 173
174 174 update : function(options){
175 175 // Update the contents of this view
176 176 //
177 177 // Called when the model is changed. The model may have been
178 178 // changed by another view or by a state update from the back-end.
179 179 if (options === undefined || options.updated_view != this) {
180 180 var value = this.model.get('value');
181 181 if (this._parse_value(this.$textbox.val()) != value) {
182 182 this.$textbox.val(value);
183 183 }
184 184
185 185 if (this.model.get('disabled')) {
186 186 this.$textbox.attr('disabled','disabled');
187 187 } else {
188 188 this.$textbox.removeAttr('disabled');
189 189 }
190 190
191 191 var description = this.model.get('description');
192 192 if (description.length === 0) {
193 193 this.$label.hide();
194 194 } else {
195 195 this.$label.text(description);
196 196 MathJax.Hub.Queue(["Typeset",MathJax.Hub,this.$label.get(0)]);
197 197 this.$label.show();
198 198 }
199 199 }
200 200 return IntTextView.__super__.update.apply(this);
201 201 },
202 202
203 203 events: {
204 204 // Dictionary of events and their handlers.
205 205 "keyup input" : "handleChanging",
206 206 "paste input" : "handleChanging",
207 207 "cut input" : "handleChanging",
208 208
209 209 // Fires only when control is validated or looses focus.
210 210 "change input" : "handleChanged"
211 211 },
212 212
213 213 handleChanging: function(e) {
214 214 // Handles and validates user input.
215 215
216 216 // Try to parse value as a int.
217 217 var numericalValue = 0;
218 218 if (e.target.value !== '') {
219 219 var trimmed = e.target.value.trim();
220 220 if (!(['-', '-.', '.', '+.', '+'].indexOf(trimmed) >= 0)) {
221 221 numericalValue = this._parse_value(e.target.value);
222 222 }
223 223 }
224 224
225 225 // If parse failed, reset value to value stored in model.
226 226 if (isNaN(numericalValue)) {
227 227 e.target.value = this.model.get('value');
228 228 } else if (!isNaN(numericalValue)) {
229 229 if (this.model.get('max') !== undefined) {
230 230 numericalValue = Math.min(this.model.get('max'), numericalValue);
231 231 }
232 232 if (this.model.get('min') !== undefined) {
233 233 numericalValue = Math.max(this.model.get('min'), numericalValue);
234 234 }
235 235
236 236 // Apply the value if it has changed.
237 237 if (numericalValue != this.model.get('value')) {
238 238
239 239 // Calling model.set will trigger all of the other views of the
240 240 // model to update.
241 241 this.model.set('value', numericalValue, {updated_view: this});
242 242 this.touch();
243 243 }
244 244 }
245 245 },
246 246
247 247 handleChanged: function(e) {
248 248 // Applies validated input.
249 249 if (this.model.get('value') != e.target.value) {
250 250 e.target.value = this.model.get('value');
251 251 }
252 252 },
253 253
254 254 _parse_value: function(value) {
255 255 // Parse the value stored in a string.
256 256 return parseInt(value);
257 257 },
258 258 });
259 259
260 260
261 261 var ProgressView = widget.DOMWidgetView.extend({
262 262 render : function(){
263 263 // Called when view is rendered.
264 264 this.$el
265 265 .addClass('widget-hbox-single');
266 266 this.$label = $('<div />')
267 267 .appendTo(this.$el)
268 268 .addClass('widget-hlabel')
269 269 .hide();
270 270 this.$progress = $('<div />')
271 271 .addClass('progress')
272 272 .addClass('widget-progress')
273 273 .appendTo(this.$el);
274 274 this.$el_to_style = this.$progress; // Set default element to style
275 275 this.$bar = $('<div />')
276 276 .addClass('progress-bar')
277 277 .css('width', '50%')
278 278 .appendTo(this.$progress);
279 279 this.update(); // Set defaults.
280 280 },
281 281
282 282 update : function(){
283 283 // Update the contents of this view
284 284 //
285 285 // Called when the model is changed. The model may have been
286 286 // changed by another view or by a state update from the back-end.
287 287 var value = this.model.get('value');
288 288 var max = this.model.get('max');
289 289 var min = this.model.get('min');
290 290 var percent = 100.0 * (value - min) / (max - min);
291 291 this.$bar.css('width', percent + '%');
292 292
293 293 var description = this.model.get('description');
294 294 if (description.length === 0) {
295 295 this.$label.hide();
296 296 } else {
297 297 this.$label.text(description);
298 298 MathJax.Hub.Queue(["Typeset",MathJax.Hub,this.$label.get(0)]);
299 299 this.$label.show();
300 300 }
301 301 return ProgressView.__super__.update.apply(this);
302 302 },
303 303 });
304 304
305 305 return {
306 306 'IntSliderView': IntSliderView,
307 307 'IntTextView': IntTextView,
308 308 'ProgressView': ProgressView,
309 309 };
310 310 });
General Comments 0
You need to be logged in to leave comments. Login now