From 524f98d21f27423207d8346bd88ac97a2965d16b 2014-01-16 10:55:59
From: Jonathan Frederic <jdfreder@calpoly.edu>
Date: 2014-01-16 10:55:59
Subject: [PATCH] Added toggle button view

---

diff --git a/IPython/html/static/notebook/js/widgets/bool.js b/IPython/html/static/notebook/js/widgets/bool.js
index 405a721..104ec7c 100644
--- a/IPython/html/static/notebook/js/widgets/bool.js
+++ b/IPython/html/static/notebook/js/widgets/bool.js
@@ -45,4 +45,48 @@ require(["notebook/js/widget"], function(){
     });
 
     IPython.notebook.widget_manager.register_widget_view('CheckboxView', CheckboxView);
+
+    var ToggleButtonView = IPython.WidgetView.extend({
+      
+        // Called when view is rendered.
+        render : function(){
+            this.$el
+                .html('')
+                .addClass(this.model.comm.comm_id);
+
+            this.$button = $('<button />')
+                .addClass('btn')
+                .attr('type', 'button')
+                .attr('data-toggle', 'button')
+                .appendTo(this.$el);
+
+            this.update(); // Set defaults.
+        },
+        
+        // Handles: Backend -> Frontend Sync
+        //          Frontent -> Frontend Sync
+        update : function(){
+            if (!this.user_invoked_update) {
+                if (this.model.get('value')) {
+                    this.$button.addClass('active');
+                } else {
+                    this.$button.removeClass('active');
+                }
+                this.$button.html(this.model.get('description'));
+            }
+        },
+        
+        events: {"click button" : "handleClick"},
+        
+        // Handles and validates user input.
+        handleClick: function(e) { 
+            this.user_invoked_update = true;
+            this.model.set('value', ! $(e.target).hasClass('active'));
+            this.model.apply(this);
+            this.user_invoked_update = false;
+        },
+    });
+
+    IPython.notebook.widget_manager.register_widget_view('ToggleButtonView', ToggleButtonView);
+
 });