float_range.js
236 lines
| 8.6 KiB
| application/javascript
|
JavascriptLexer
|
r14285 | require(["notebook/js/widget"], function(){ | ||
|
r14263 | var FloatRangeWidgetModel = IPython.WidgetModel.extend({}); | ||
IPython.notebook.widget_manager.register_widget_model('FloatRangeWidgetModel', FloatRangeWidgetModel); | ||||
|
r14252 | |||
|
r14263 | var FloatSliderView = IPython.WidgetView.extend({ | ||
|
r14252 | |||
|
r14263 | // Called when view is rendered. | ||
render : function(){ | ||||
this.$el | ||||
|
r14295 | .addClass('widget-hbox-single') | ||
|
r14278 | .html(''); | ||
|
r14292 | this.$label = $('<div />') | ||
.appendTo(this.$el) | ||||
|
r14297 | .addClass('widget-hlabel') | ||
|
r14292 | .hide(); | ||
|
r14263 | this.$slider = $('<div />') | ||
|
r14268 | .slider({}) | ||
.addClass('slider'); | ||||
|
r14263 | |||
// Put the slider in a container | ||||
this.$slider_container = $('<div />') | ||||
|
r14296 | .addClass('widget-hslider') | ||
|
r14268 | .append(this.$slider); | ||
|
r14263 | this.$el.append(this.$slider_container); | ||
// Set defaults. | ||||
this.update(); | ||||
}, | ||||
|
r14252 | |||
|
r14263 | // Handles: Backend -> Frontend Sync | ||
// Frontent -> Frontend Sync | ||||
update : function(){ | ||||
// Slider related keys. | ||||
|
r14301 | var _keys = ['step', 'max', 'min', 'disabled']; | ||
|
r14263 | for (var index in _keys) { | ||
var key = _keys[index]; | ||||
if (this.model.get(key) != undefined) { | ||||
this.$slider.slider("option", key, this.model.get(key)); | ||||
} | ||||
|
r14252 | } | ||
|
r14292 | |||
|
r14301 | // 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. | ||||
|
r14296 | var orientation = this.model.get('orientation'); | ||
|
r14301 | var value = this.model.get('min'); | ||
this.$slider.slider('option', 'value', value); | ||||
this.$slider.slider('option', 'orientation', orientation); | ||||
var value = this.model.get('value'); | ||||
this.$slider.slider('option', 'value', value); | ||||
// Use the right CSS classes for vertical & horizontal sliders | ||||
|
r14296 | if (orientation=='vertical') { | ||
this.$slider_container | ||||
.removeClass('widget-hslider') | ||||
.addClass('widget-vslider'); | ||||
this.$el | ||||
.removeClass('widget-hbox-single') | ||||
|
r14297 | .addClass('widget-vbox-single'); | ||
this.$label | ||||
.removeClass('widget-hlabel') | ||||
.addClass('widget-vlabel'); | ||||
|
r14296 | } else { | ||
this.$slider_container | ||||
.removeClass('widget-vslider') | ||||
.addClass('widget-hslider'); | ||||
this.$el | ||||
|
r14297 | .removeClass('widget-vbox-single') | ||
|
r14296 | .addClass('widget-hbox-single'); | ||
|
r14297 | this.$label | ||
.removeClass('widget-vlabel') | ||||
.addClass('widget-hlabel'); | ||||
|
r14296 | } | ||
|
r14292 | var description = this.model.get('description'); | ||
if (description.length == 0) { | ||||
this.$label.hide(); | ||||
} else { | ||||
this.$label.html(description); | ||||
this.$label.show(); | ||||
} | ||||
|
r14279 | return IPython.WidgetView.prototype.update.call(this); | ||
|
r14263 | }, | ||
// Handles: User input | ||||
events: { "slide" : "handleSliderChange" }, | ||||
handleSliderChange: function(e, ui) { | ||||
this.model.set('value', ui.value); | ||||
|
r14278 | this.model.update_other_views(this); | ||
|
r14263 | }, | ||
}); | ||||
|
r14252 | |||
|
r14263 | IPython.notebook.widget_manager.register_widget_view('FloatSliderView', FloatSliderView); | ||
|
r14252 | |||
|
r14263 | var FloatTextView = IPython.WidgetView.extend({ | ||
|
r14252 | |||
|
r14263 | // Called when view is rendered. | ||
render : function(){ | ||||
this.$el | ||||
|
r14295 | .addClass('widget-hbox-single') | ||
|
r14278 | .html(''); | ||
|
r14292 | this.$label = $('<div />') | ||
.appendTo(this.$el) | ||||
|
r14297 | .addClass('widget-hlabel') | ||
|
r14292 | .hide(); | ||
|
r14263 | this.$textbox = $('<input type="text" />') | ||
.addClass('input') | ||||
|
r14295 | .addClass('widget-numeric-text') | ||
|
r14263 | .appendTo(this.$el); | ||
this.update(); // Set defaults. | ||||
}, | ||||
|
r14252 | |||
|
r14263 | // Handles: Backend -> Frontend Sync | ||
// Frontent -> Frontend Sync | ||||
update : function(){ | ||||
var value = this.model.get('value'); | ||||
if (!this.changing && parseFloat(this.$textbox.val()) != value) { | ||||
this.$textbox.val(value); | ||||
} | ||||
if (this.model.get('disabled')) { | ||||
this.$textbox.attr('disabled','disabled'); | ||||
} else { | ||||
this.$textbox.removeAttr('disabled'); | ||||
} | ||||
|
r14292 | |||
var description = this.model.get('description'); | ||||
if (description.length == 0) { | ||||
this.$label.hide(); | ||||
} else { | ||||
this.$label.html(description); | ||||
this.$label.show(); | ||||
} | ||||
|
r14279 | return IPython.WidgetView.prototype.update.call(this); | ||
|
r14263 | }, | ||
|
r14253 | |||
|
r14263 | |||
events: {"keyup input" : "handleChanging", | ||||
"paste input" : "handleChanging", | ||||
"cut input" : "handleChanging", | ||||
"change input" : "handleChanged"}, // Fires only when control is validated or looses focus. | ||||
// Handles and validates user input. | ||||
handleChanging: function(e) { | ||||
|
r14253 | |||
|
r14263 | // Try to parse value as a float. | ||
var numericalValue = 0.0; | ||||
if (e.target.value != '') { | ||||
numericalValue = parseFloat(e.target.value); | ||||
} | ||||
// 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')) { | ||||
this.changing = true; | ||||
this.model.set('value', numericalValue); | ||||
|
r14278 | this.model.update_other_views(this); | ||
|
r14263 | this.changing = false; | ||
} | ||||
} | ||||
}, | ||||
// Applies validated input. | ||||
handleChanged: function(e) { | ||||
// Update the textbox | ||||
if (this.model.get('value') != e.target.value) { | ||||
e.target.value = this.model.get('value'); | ||||
|
r14252 | } | ||
} | ||||
|
r14263 | }); | ||
|
r14252 | |||
|
r14263 | IPython.notebook.widget_manager.register_widget_view('FloatTextView', FloatTextView); | ||
|
r14298 | |||
var ProgressView = IPython.WidgetView.extend({ | ||||
// Called when view is rendered. | ||||
render : function(){ | ||||
this.$el | ||||
.addClass('widget-hbox-single') | ||||
.html(''); | ||||
this.$label = $('<div />') | ||||
.appendTo(this.$el) | ||||
.addClass('widget-hlabel') | ||||
.hide(); | ||||
this.$progress = $('<div />') | ||||
.addClass('progress') | ||||
.addClass('widget-progress') | ||||
.appendTo(this.$el); | ||||
this.$bar = $('<div />') | ||||
.addClass('bar') | ||||
.css('width', '50%') | ||||
.appendTo(this.$progress); | ||||
this.update(); // Set defaults. | ||||
}, | ||||
// Handles: Backend -> Frontend Sync | ||||
// Frontent -> Frontend Sync | ||||
update : function(){ | ||||
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.html(description); | ||||
this.$label.show(); | ||||
} | ||||
return IPython.WidgetView.prototype.update.call(this); | ||||
}, | ||||
}); | ||||
IPython.notebook.widget_manager.register_widget_view('ProgressView', ProgressView); | ||||
|
r14263 | }); | ||