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