widget_int.js
298 lines
| 11.4 KiB
| application/javascript
|
JavascriptLexer
|
r17198 | // Copyright (c) IPython Development Team. | ||
// Distributed under the terms of the Modified BSD License. | ||||
|
r14366 | |||
|
r17198 | define([ | ||
"widgets/js/widget", | ||||
|
r17216 | "jqueryui", | ||
|
r17312 | "bootstrap", | ||
|
r17216 | ], function(widget, $){ | ||
|
r17198 | |||
var IntSliderView = widget.DOMWidgetView.extend({ | ||||
|
r14672 | render : function(){ | ||
// Called when view is rendered. | ||||
this.$el | ||||
.addClass('widget-hbox-single'); | ||||
this.$label = $('<div />') | ||||
.appendTo(this.$el) | ||||
.addClass('widget-hlabel') | ||||
.hide(); | ||||
|
r14982 | |||
|
r14672 | this.$slider = $('<div />') | ||
.slider({}) | ||||
.addClass('slider'); | ||||
// Put the slider in a container | ||||
this.$slider_container = $('<div />') | ||||
.addClass('widget-hslider') | ||||
|
r16817 | .append(this.$slider); | ||
|
r14672 | this.$el.append(this.$slider_container); | ||
|
r14982 | this.$readout = $('<div/>') | ||
.appendTo(this.$el) | ||||
|
r14983 | .addClass('widget-hreadout') | ||
|
r14982 | .hide(); | ||
|
r14672 | // Set defaults. | ||
this.update(); | ||||
}, | ||||
update : function(options){ | ||||
// Update the contents of this view | ||||
// | ||||
// Called when the model is changed. The model may have been | ||||
// changed by another view or by a state update from the back-end. | ||||
if (options === undefined || options.updated_view != this) { | ||||
// JQuery slider option keys. These keys happen to have a | ||||
// one-to-one mapping with the corrosponding keys of the model. | ||||
var jquery_slider_keys = ['step', 'max', 'min', 'disabled']; | ||||
|
r14686 | var that = this; | ||
|
r17175 | that.$slider.slider({}); | ||
|
r14672 | _.each(jquery_slider_keys, function(key, i) { | ||
|
r14686 | var model_value = that.model.get(key); | ||
|
r14672 | if (model_value !== undefined) { | ||
|
r14686 | that.$slider.slider("option", key, model_value); | ||
|
r14672 | } | ||
}); | ||||
// WORKAROUND FOR JQUERY SLIDER BUG. | ||||
// The horizontal position of the slider handle | ||||
// depends on the value of the slider at the time | ||||
// of orientation change. Before applying the new | ||||
// workaround, we set the value to the minimum to | ||||
// make sure that the horizontal placement of the | ||||
// handle in the vertical slider is always | ||||
// consistent. | ||||
var orientation = this.model.get('orientation'); | ||||
var value = this.model.get('min'); | ||||
this.$slider.slider('option', 'value', value); | ||||
this.$slider.slider('option', 'orientation', orientation); | ||||
value = this.model.get('value'); | ||||
this.$slider.slider('option', 'value', value); | ||||
|
r14983 | this.$readout.text(value); | ||
|
r14672 | |||
// Use the right CSS classes for vertical & horizontal sliders | ||||
if (orientation=='vertical') { | ||||
this.$slider_container | ||||
.removeClass('widget-hslider') | ||||
.addClass('widget-vslider'); | ||||
this.$el | ||||
.removeClass('widget-hbox-single') | ||||
.addClass('widget-vbox-single'); | ||||
this.$label | ||||
.removeClass('widget-hlabel') | ||||
.addClass('widget-vlabel'); | ||||
|
r14983 | this.$readout | ||
.removeClass('widget-hreadout') | ||||
.addClass('widget-vreadout'); | ||||
|
r14672 | |||
} else { | ||||
this.$slider_container | ||||
.removeClass('widget-vslider') | ||||
.addClass('widget-hslider'); | ||||
this.$el | ||||
.removeClass('widget-vbox-single') | ||||
.addClass('widget-hbox-single'); | ||||
this.$label | ||||
.removeClass('widget-vlabel') | ||||
.addClass('widget-hlabel'); | ||||
|
r14983 | this.$readout | ||
.removeClass('widget-vreadout') | ||||
.addClass('widget-hreadout'); | ||||
|
r14672 | } | ||
var description = this.model.get('description'); | ||||
if (description.length === 0) { | ||||
this.$label.hide(); | ||||
} else { | ||||
this.$label.text(description); | ||||
|
r16817 | MathJax.Hub.Queue(["Typeset",MathJax.Hub,this.$label.get(0)]); | ||
|
r14672 | this.$label.show(); | ||
} | ||||
|
r14982 | |||
var readout = this.model.get('readout'); | ||||
if (readout) { | ||||
this.$readout.show(); | ||||
} else { | ||||
this.$readout.hide(); | ||||
} | ||||
|
r14672 | } | ||
return IntSliderView.__super__.update.apply(this); | ||||
}, | ||||
events: { | ||||
// Dictionary of events and their handlers. | ||||
"slide" : "handleSliderChange" | ||||
}, | ||||
handleSliderChange: function(e, ui) { | ||||
// Called when the slider value is changed. | ||||
// Calling model.set will trigger all of the other views of the | ||||
// model to update. | ||||
|
r14982 | var actual_value = this._validate_slide_value(ui.value); | ||
this.model.set('value', actual_value, {updated_view: this}); | ||||
this.$readout.text(actual_value); | ||||
|
r14672 | this.touch(); | ||
}, | ||||
|
r14694 | |||
_validate_slide_value: function(x) { | ||||
// Validate the value of the slider before sending it to the back-end | ||||
// and applying it to the other views on the page. | ||||
// Double bit-wise not truncates the decimel (int cast). | ||||
return ~~x; | ||||
}, | ||||
|
r14672 | }); | ||
|
r17198 | var IntTextView = widget.DOMWidgetView.extend({ | ||
|
r14672 | render : function(){ | ||
// Called when view is rendered. | ||||
this.$el | ||||
.addClass('widget-hbox-single'); | ||||
this.$label = $('<div />') | ||||
.appendTo(this.$el) | ||||
.addClass('widget-hlabel') | ||||
.hide(); | ||||
this.$textbox = $('<input type="text" />') | ||||
|
r16952 | .addClass('form-control') | ||
|
r14672 | .addClass('widget-numeric-text') | ||
.appendTo(this.$el); | ||||
this.update(); // Set defaults. | ||||
}, | ||||
update : function(options){ | ||||
// Update the contents of this view | ||||
// | ||||
// Called when the model is changed. The model may have been | ||||
// changed by another view or by a state update from the back-end. | ||||
if (options === undefined || options.updated_view != this) { | ||||
var value = this.model.get('value'); | ||||
|
r14694 | if (this._parse_value(this.$textbox.val()) != value) { | ||
|
r14672 | this.$textbox.val(value); | ||
} | ||||
if (this.model.get('disabled')) { | ||||
this.$textbox.attr('disabled','disabled'); | ||||
} else { | ||||
this.$textbox.removeAttr('disabled'); | ||||
} | ||||
var description = this.model.get('description'); | ||||
if (description.length === 0) { | ||||
this.$label.hide(); | ||||
} else { | ||||
this.$label.text(description); | ||||
|
r16817 | MathJax.Hub.Queue(["Typeset",MathJax.Hub,this.$label.get(0)]); | ||
|
r14672 | this.$label.show(); | ||
} | ||||
} | ||||
return IntTextView.__super__.update.apply(this); | ||||
}, | ||||
events: { | ||||
// Dictionary of events and their handlers. | ||||
"keyup input" : "handleChanging", | ||||
"paste input" : "handleChanging", | ||||
"cut input" : "handleChanging", | ||||
// Fires only when control is validated or looses focus. | ||||
"change input" : "handleChanged" | ||||
}, | ||||
handleChanging: function(e) { | ||||
// Handles and validates user input. | ||||
|
r14694 | // Try to parse value as a int. | ||
|
r14672 | var numericalValue = 0; | ||
if (e.target.value !== '') { | ||||
|
r16019 | var trimmed = e.target.value.trim(); | ||
if (!(['-', '-.', '.', '+.', '+'].indexOf(trimmed) >= 0)) { | ||||
numericalValue = this._parse_value(e.target.value); | ||||
} | ||||
|
r14672 | } | ||
// If parse failed, reset value to value stored in model. | ||||
if (isNaN(numericalValue)) { | ||||
e.target.value = this.model.get('value'); | ||||
} else if (!isNaN(numericalValue)) { | ||||
if (this.model.get('max') !== undefined) { | ||||
numericalValue = Math.min(this.model.get('max'), numericalValue); | ||||
} | ||||
if (this.model.get('min') !== undefined) { | ||||
numericalValue = Math.max(this.model.get('min'), numericalValue); | ||||
} | ||||
// Apply the value if it has changed. | ||||
if (numericalValue != this.model.get('value')) { | ||||
// Calling model.set will trigger all of the other views of the | ||||
// model to update. | ||||
this.model.set('value', numericalValue, {updated_view: this}); | ||||
this.touch(); | ||||
} | ||||
} | ||||
}, | ||||
|
r14792 | handleChanged: function(e) { | ||
|
r14672 | // Applies validated input. | ||
if (this.model.get('value') != e.target.value) { | ||||
e.target.value = this.model.get('value'); | ||||
} | ||||
|
r14694 | }, | ||
_parse_value: function(value) { | ||||
// Parse the value stored in a string. | ||||
return parseInt(value); | ||||
}, | ||||
|
r14672 | }); | ||
|
r14694 | |||
|
r17198 | var ProgressView = widget.DOMWidgetView.extend({ | ||
|
r14694 | render : function(){ | ||
// Called when view is rendered. | ||||
this.$el | ||||
.addClass('widget-hbox-single'); | ||||
this.$label = $('<div />') | ||||
.appendTo(this.$el) | ||||
.addClass('widget-hlabel') | ||||
.hide(); | ||||
this.$progress = $('<div />') | ||||
.addClass('progress') | ||||
.addClass('widget-progress') | ||||
.appendTo(this.$el); | ||||
this.$bar = $('<div />') | ||||
|
r16913 | .addClass('progress-bar') | ||
|
r14694 | .css('width', '50%') | ||
.appendTo(this.$progress); | ||||
this.update(); // Set defaults. | ||||
}, | ||||
update : function(){ | ||||
// Update the contents of this view | ||||
// | ||||
// Called when the model is changed. The model may have been | ||||
// changed by another view or by a state update from the back-end. | ||||
var value = this.model.get('value'); | ||||
var max = this.model.get('max'); | ||||
var min = this.model.get('min'); | ||||
var percent = 100.0 * (value - min) / (max - min); | ||||
this.$bar.css('width', percent + '%'); | ||||
var description = this.model.get('description'); | ||||
if (description.length === 0) { | ||||
this.$label.hide(); | ||||
} else { | ||||
this.$label.text(description); | ||||
|
r16817 | MathJax.Hub.Queue(["Typeset",MathJax.Hub,this.$label.get(0)]); | ||
|
r14694 | this.$label.show(); | ||
} | ||||
return ProgressView.__super__.update.apply(this); | ||||
}, | ||||
}); | ||||
|
r17198 | return { | ||
'IntSliderView': IntSliderView, | ||||
'IntTextView': IntTextView, | ||||
'ProgressView': ProgressView, | ||||
}; | ||||
|
r14672 | }); | ||