int_range.js
118 lines
| 4.4 KiB
| application/javascript
|
JavascriptLexer
|
r14253 | require(["notebook/js/widget"], function () { | |
var IntRangeWidgetModel = IPython.WidgetModel.extend({}); | |||
IPython.notebook.widget_manager.register_widget_model('IntRangeWidgetModel', IntRangeWidgetModel); | |||
|
r14252 | ||
|
r14253 | var IntSliderView = IPython.WidgetView.extend({ | |
|
r14252 | ||
|
r14253 | // Called when view is rendered. | |
render : function(){ | |||
this.$el.html(''); | |||
this.$slider = $('<div />') | |||
.slider({}) | |||
.addClass('slider'); | |||
// Put the slider in a container | |||
this.$slider_container = $('<div />') | |||
.css('padding-top', '4px') | |||
.css('padding-bottom', '4px') | |||
.addClass(this.model.comm.comm_id) | |||
.append(this.$slider); | |||
this.$el.append(this.$slider_container); | |||
// Set defaults. | |||
this.update(); | |||
}, | |||
|
r14252 | ||
|
r14253 | // Handles: Backend -> Frontend Sync | |
// Frontent -> Frontend Sync | |||
update : function(){ | |||
// Slider related keys. | |||
var _keys = ['value', 'step', 'max', 'min', 'disabled', 'orientation']; | |||
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 | } | |
|
r14253 | }, | |
// Handles: User input | |||
events: { "slide" : "handleSliderChange" }, | |||
handleSliderChange: function(e, ui) { | |||
this.model.set('value', ~~ui.value); // Double bit-wise not to truncate decimel | |||
this.model.apply(this); | |||
}, | |||
}); | |||
|
r14252 | ||
|
r14253 | IPython.notebook.widget_manager.register_widget_view('IntSliderView', IntSliderView); | |
|
r14252 | ||
|
r14253 | var IntTextView = IPython.WidgetView.extend({ | |
|
r14252 | ||
|
r14253 | // Called when view is rendered. | |
render : function(){ | |||
this.$el | |||
.html('') | |||
.addClass(this.model.comm.comm_id); | |||
this.$textbox = $('<input type="text" />') | |||
.addClass('input') | |||
.appendTo(this.$el); | |||
this.update(); // Set defaults. | |||
}, | |||
// Handles: Backend -> Frontend Sync | |||
// Frontent -> Frontend Sync | |||
update : function(){ | |||
var value = this.model.get('value'); | |||
if (!this.changing && parseInt(this.$textbox.val()) != value) { | |||
this.$textbox.val(value); | |||
} | |||
if (this.model.get('disabled')) { | |||
this.$textbox.attr('disabled','disabled'); | |||
} else { | |||
this.$textbox.removeAttr('disabled'); | |||
} | |||
}, | |||
|
r14252 | ||
|
r14253 | 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) { | |||
|
r14252 | ||
|
r14253 | // Try to parse value as a float. | |
var numericalValue = 0; | |||
if (e.target.value != '') { | |||
numericalValue = parseInt(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)) { | |||
numericalValue = Math.min(this.model.get('max'), numericalValue); | |||
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); | |||
this.model.apply(this); | |||
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 | } | |
} | |||
|
r14253 | }); | |
|
r14252 | ||
|
r14253 | IPython.notebook.widget_manager.register_widget_view('IntTextView', IntTextView); | |
}); |