From 23579586c9dd0e7a2c638e9508f99e13498f10b7 2014-01-16 10:55:59
From: Jonathan Frederic <jdfreder@calpoly.edu>
Date: 2014-01-16 10:55:59
Subject: [PATCH] Added togglebutton group

---

diff --git a/IPython/html/static/notebook/js/widgets/selection.js b/IPython/html/static/notebook/js/widgets/selection.js
index e4eedb5..44dfe03 100644
--- a/IPython/html/static/notebook/js/widgets/selection.js
+++ b/IPython/html/static/notebook/js/widgets/selection.js
@@ -63,6 +63,7 @@ var DropdownView = IPython.WidgetView.extend({
 });
 
 IPython.notebook.widget_manager.register_widget_view('DropdownView', DropdownView);
+
 var RadioButtonView = IPython.WidgetView.extend({
     
     // Called when view is rendered.
@@ -126,3 +127,68 @@ var RadioButtonView = IPython.WidgetView.extend({
 });
 
 IPython.notebook.widget_manager.register_widget_view('RadioButtonView', RadioButtonView);
+
+
+var ToggleButtonView = 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')
+            .attr('data-toggle', 'buttons-radio')
+            .appendTo(this.$el);
+        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 = ' :contains("' + items[index] + '")';
+            if (this.$buttongroup.find(item_query).length == 0) {
+                
+                var that = this;
+                $('<button />')
+                    .attr('type', 'button')
+                    .addClass('btn')
+                    .html(items[index])
+                    .appendTo(this.$buttongroup)
+                    .on('click', function(e){
+                        that.model.set('value', $(e.target).html(), this);
+                        that.model.apply();
+                    });
+            }
+            
+            if (this.model.get('value') == items[index]) {
+                this.$buttongroup.find(item_query).addClass('active');
+            } else {
+                this.$buttongroup.find(item_query).removeClass('active');
+            }
+        }
+        
+        // Remove items that no longer exist.
+        this.$buttongroup.find('button').each(function(i, obj) {
+            var value = $(obj).html();
+            var found = false;
+            for (var index in items) {
+                if (items[index] == value) {
+                    found = true;
+                    break;
+                }
+            }
+            
+            if (!found) {
+                $(obj).remove();
+            }
+        });
+    },
+    
+});
+
+IPython.notebook.widget_manager.register_widget_view('ToggleButtonView', ToggleButtonView);