Add selection widget

IPython/html/widgets/selection/__init__.py

@@ -0,0 +1,1 b''
+from widget import SelectionWidget
  No newline at end of file

IPython/html/widgets/selection/model.js

@@ -0,0 +1,2 b''
+var SelectionWidgetModel = IPython.WidgetModel.extend({});
+IPython.notebook.widget_manager.register_widget_model('SelectionWidgetModel', SelectionWidgetModel);

IPython/html/widgets/selection/view_dropdown.js

@@ -0,0 +1,62 b''
+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);

IPython/html/widgets/selection/view_radiobutton.js

@@ -0,0 +1,63 b''
+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);

IPython/html/widgets/selection/widget.py

@@ -0,0 +1,15 b''
+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