diff --git a/IPython/html/widgets/selection/__init__.py b/IPython/html/widgets/selection/__init__.py new file mode 100644 index 0000000..6d2fc06 --- /dev/null +++ b/IPython/html/widgets/selection/__init__.py @@ -0,0 +1 @@ +from widget import SelectionWidget \ No newline at end of file diff --git a/IPython/html/widgets/selection/model.js b/IPython/html/widgets/selection/model.js new file mode 100644 index 0000000..7741f82 --- /dev/null +++ b/IPython/html/widgets/selection/model.js @@ -0,0 +1,2 @@ +var SelectionWidgetModel = IPython.WidgetModel.extend({}); +IPython.notebook.widget_manager.register_widget_model('SelectionWidgetModel', SelectionWidgetModel); diff --git a/IPython/html/widgets/selection/view_dropdown.js b/IPython/html/widgets/selection/view_dropdown.js new file mode 100644 index 0000000..45c2ab7 --- /dev/null +++ b/IPython/html/widgets/selection/view_dropdown.js @@ -0,0 +1,62 @@ +var DropdownView = IPython.WidgetView.extend({ + + // Called when view is rendered. + render : function(){ + + this.$el + .html('') + .addClass(this.model.comm.comm_id); + this.$buttongroup = $('<div />') + .addClass('btn-group') + .appendTo(this.$el); + this.$droplabel = $('<button />') + .addClass('btn') + .appendTo(this.$buttongroup); + this.$dropbutton = $('<button />') + .addClass('btn') + .addClass('dropdown-toggle') + .attr('data-toggle', 'dropdown') + .html('<span class="caret"></span>') + .appendTo(this.$buttongroup); + this.$droplist = $('<ul />') + .addClass('dropdown-menu') + .appendTo(this.$buttongroup); + + // Set defaults. + this.update(); + }, + + // Handles: Backend -> Frontend Sync + // Frontent -> Frontend Sync + update : function(){ + this.$droplabel.html(this.model.get('value')); + + var items = this.model.get('values'); + this.$droplist.html(''); + for (var index in items) { + var that = this; + var item_button = $('<a href="#"/>') + .html(items[index]) + .on('click', function(e){ + that.model.set('value', $(e.target).html(), this ); + }) + + this.$droplist.append($('<li />').append(item_button)) + } + + if (this.model.get('disabled')) { + this.$buttongroup.attr('disabled','disabled'); + this.$droplabel.attr('disabled','disabled'); + this.$dropbutton.attr('disabled','disabled'); + this.$droplist.attr('disabled','disabled'); + } else { + this.$buttongroup.removeAttr('disabled'); + this.$droplabel.removeAttr('disabled'); + this.$dropbutton.removeAttr('disabled'); + this.$droplist.removeAttr('disabled'); + } + }, + +}); + +IPython.notebook.widget_manager.register_widget_view('DropdownView', DropdownView); diff --git a/IPython/html/widgets/selection/view_radiobutton.js b/IPython/html/widgets/selection/view_radiobutton.js new file mode 100644 index 0000000..db473fa --- /dev/null +++ b/IPython/html/widgets/selection/view_radiobutton.js @@ -0,0 +1,63 @@ +var RadioButtonView = IPython.WidgetView.extend({ + + // Called when view is rendered. + render : function(){ + this.$el + .html('') + .addClass(this.model.comm.comm_id); + this.update(); + }, + + // Handles: Backend -> Frontend Sync + // Frontent -> Frontend Sync + update : function(){ + + // Add missing items to the DOM. + var items = this.model.get('values'); + for (var index in items) { + var item_query = ' :input[value="' + items[index] + '"]'; + if (this.$el.find(item_query).length == 0) { + var $label = $('<label />') + .addClass('radio') + .html(items[index]) + .appendTo(this.$el); + + var that = this; + $('<input />') + .attr('type', 'radio') + .addClass(this.model) + .val(items[index]) + .prependTo($label) + .on('click', function(e){ + that.model.set('value', $(e.target).val(), this); + that.model.apply(); + }); + } + + if (this.model.get('value') == items[index]) { + this.$el.find(item_query).prop('checked', true); + } else { + this.$el.find(item_query).prop('checked', false); + } + } + + // Remove items that no longer exist. + this.$el.find('input').each(function(i, obj) { + var value = $(obj).val(); + var found = false; + for (var index in items) { + if (items[index] == value) { + found = true; + break; + } + } + + if (!found) { + $(obj).parent().remove(); + } + }); + }, + +}); + +IPython.notebook.widget_manager.register_widget_view('RadioButtonView', RadioButtonView); diff --git a/IPython/html/widgets/selection/widget.py b/IPython/html/widgets/selection/widget.py new file mode 100644 index 0000000..44a6e31 --- /dev/null +++ b/IPython/html/widgets/selection/widget.py @@ -0,0 +1,15 @@ +import os + +from ..widget import Widget +from IPython.utils.traitlets import Unicode, List, Bool +from IPython.utils.javascript import display_all_js + +class SelectionWidget(Widget): + target_name = Unicode('SelectionWidgetModel') + default_view_name = Unicode('DropdownView') + _keys = ['value', 'values', 'disabled'] + + value = Unicode() + values = List() # List of values the user can select + disabled = Bool(False) # Enable or disable user changes + \ No newline at end of file