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