diff --git a/IPython/html/static/notebook/js/widgets/model_container.js b/IPython/html/static/notebook/js/widgets/model_container.js index 2b8a896..a4f1325 100644 --- a/IPython/html/static/notebook/js/widgets/model_container.js +++ b/IPython/html/static/notebook/js/widgets/model_container.js @@ -1,2 +1,17 @@ var ContainerModel = IPython.WidgetModel.extend({}); IPython.notebook.widget_manager.register_widget_model('container_widget', ContainerModel); + +var ContainerView = IPython.WidgetView.extend({ + + render : function(){ + this.$el.html(''); + this.$container = $('
') + .addClass('container') + .addClass(this.model.comm.comm_id); + this.$el.append(this.$container); + }, + + update : function(){}, +}); + +IPython.notebook.widget_manager.register_widget_view('ContainerView', ContainerView); diff --git a/IPython/html/static/notebook/js/widgets/model_float_range.js b/IPython/html/static/notebook/js/widgets/model_float_range.js index fad0d59..0fc5366 100644 --- a/IPython/html/static/notebook/js/widgets/model_float_range.js +++ b/IPython/html/static/notebook/js/widgets/model_float_range.js @@ -1,2 +1,119 @@ var FloatRangeWidgetModel = IPython.WidgetModel.extend({}); IPython.notebook.widget_manager.register_widget_model('FloatRangeWidgetModel', FloatRangeWidgetModel); + +var FloatSliderView = IPython.WidgetView.extend({ + + // Called when view is rendered. + render : function(){ + this.$el + .html('') + .addClass(this.model.comm.comm_id); + this.$slider = $('
') + .slider({}) + .addClass('slider'); + + // Put the slider in a container + this.$slider_container = $('
') + .css('padding-top', '4px') + .css('padding-bottom', '4px') + .append(this.$slider); + this.$el.append(this.$slider_container); + + // Set defaults. + this.update(); + }, + + // 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)); + } + } + }, + + // Handles: User input + events: { "slide" : "handleSliderChange" }, + handleSliderChange: function(e, ui) { + this.model.set('value', ui.value); + this.model.apply(this); + }, +}); + +IPython.notebook.widget_manager.register_widget_view('FloatSliderView', FloatSliderView); + + +var FloatTextView = IPython.WidgetView.extend({ + + // Called when view is rendered. + render : function(){ + this.$el + .html('') + .addClass(this.model.comm.comm_id); + this.$textbox = $('') + .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 && parseFloat(this.$textbox.val()) != value) { + this.$textbox.val(value); + } + + if (this.model.get('disabled')) { + this.$textbox.attr('disabled','disabled'); + } else { + this.$textbox.removeAttr('disabled'); + } + }, + + + 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) { + + // 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)) { + 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'); + } + } +}); + +IPython.notebook.widget_manager.register_widget_view('FloatTextView', FloatTextView); diff --git a/IPython/html/static/notebook/js/widgets/model_int_range.js b/IPython/html/static/notebook/js/widgets/model_int_range.js index e927052..996aeec 100644 --- a/IPython/html/static/notebook/js/widgets/model_int_range.js +++ b/IPython/html/static/notebook/js/widgets/model_int_range.js @@ -1,2 +1,117 @@ var IntRangeWidgetModel = IPython.WidgetModel.extend({}); IPython.notebook.widget_manager.register_widget_model('IntRangeWidgetModel', IntRangeWidgetModel); + +var IntSliderView = IPython.WidgetView.extend({ + + // Called when view is rendered. + render : function(){ + this.$el.html(''); + this.$slider = $('
') + .slider({}) + .addClass('slider'); + + // Put the slider in a container + this.$slider_container = $('
') + .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(); + }, + + // 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)); + } + } + }, + + // 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); + }, +}); + +IPython.notebook.widget_manager.register_widget_view('IntSliderView', IntSliderView); + +var IntTextView = IPython.WidgetView.extend({ + + // Called when view is rendered. + render : function(){ + this.$el + .html('') + .addClass(this.model.comm.comm_id); + this.$textbox = $('') + .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'); + } + }, + + + 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) { + + // 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'); + } + } +}); + +IPython.notebook.widget_manager.register_widget_view('IntTextView', IntTextView); diff --git a/IPython/html/static/notebook/js/widgets/model_selection.js b/IPython/html/static/notebook/js/widgets/model_selection.js index 7741f82..e4eedb5 100644 --- a/IPython/html/static/notebook/js/widgets/model_selection.js +++ b/IPython/html/static/notebook/js/widgets/model_selection.js @@ -1,2 +1,128 @@ var SelectionWidgetModel = IPython.WidgetModel.extend({}); IPython.notebook.widget_manager.register_widget_model('SelectionWidgetModel', SelectionWidgetModel); + +var DropdownView = IPython.WidgetView.extend({ + + // Called when view is rendered. + render : function(){ + + this.$el + .html('') + .addClass(this.model.comm.comm_id); + this.$buttongroup = $('
') + .addClass('btn-group') + .appendTo(this.$el); + this.$droplabel = $('