Changed add_class and remove_class to use messages instead of stateful communication

IPython/html/static/notebook/js/widget.js

@@ -1,593 +1,603 b''
 //----------------------------------------------------------------------------
 //  Copyright (C) 2013  The IPython Development Team
 //
 //  Distributed under the terms of the BSD License.  The full license is in
 //  the file COPYING, distributed as part of this software.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // WidgetModel, WidgetView, and WidgetManager
 //============================================================================
 /**
  * Base Widget classes
  * @module IPython
  * @namespace IPython
  * @submodule widget
  */
 
 "use strict";
 
 // Use require.js 'define' method so that require.js is intelligent enough to
 // syncronously load everything within this file when it is being 'required' 
 // elsewhere.
 define(["components/underscore/underscore-min",
          "components/backbone/backbone-min",
         ], function(underscore, backbone){
 
 
     //--------------------------------------------------------------------
     // WidgetModel class
     //--------------------------------------------------------------------
     var WidgetModel = Backbone.Model.extend({
         constructor: function(comm_manager, comm, widget_manager) {
             this.comm_manager = comm_manager;
             this.widget_manager = widget_manager;
             this.pending_msgs = 0;
             this.msg_throttle = 3;
             this.msg_buffer = null;
             this.views = {};
 
             // Remember comm associated with the model.
             this.comm = comm;
             comm.model = this;
 
             // Hook comm messages up to model.
             comm.on_close($.proxy(this._handle_comm_closed, this));
             comm.on_msg($.proxy(this._handle_comm_msg, this));
 
             return Backbone.Model.apply(this);
         },
 
 
         update_other_views: function(caller) {
             this.last_modified_view = caller;
             this.save(this.changedAttributes(), {patch: true});
 
             for (var cell in this.views) {
                 var views = this.views[cell];
                 for (var view_index in views) {
                     var view = views[view_index];
                     if (view !== caller) {
                         view.update();    
                     }
                 }
             }
         },
     
         send: function(content) {
 
             // Used the last modified view as the sender of the message.  This
             // will insure that any python code triggered by the sent message
             // can create and display widgets and output.
             var cell = null;
             if (this.last_modified_view != undefined && 
                 this.last_modified_view.cell != undefined) {
                 cell = this.last_modified_view.cell;
             }
             var callbacks = this._make_callbacks(cell);
             var data = {custom_content: content};
             this.comm.send(data, callbacks);   
         },
 
 
         on_view_displayed: function (callback) {
             this._view_displayed_callback = callback;
         },
 
 
         on_close: function (callback) {
             this._close_callback = callback;
         },
 
 
         on_msg: function (callback) {
             this._msg_callback = callback;
         },
 
 
         _handle_custom_msg: function (content) {
             if (this._msg_callback) {
                 try {
                     this._msg_callback(content);
                 } catch (e) {
                     console.log("Exception in widget model msg callback", e, content);
                 }
             }
         },
 
 
         // Handle when a widget is closed.
         _handle_comm_closed: function (msg) {
-            for (var cell in this.views) {
-                var views = this.views[cell];
-                for (var view_index in views) {
-                    var view = views[view_index];
-                    view.remove();
-                }
-            }
+            this._execute_views_method('remove');
             delete this.comm.model; // Delete ref so GC will collect widget model.
         },
 
 
         // Handle incomming comm msg.
         _handle_comm_msg: function (msg) {
             var method = msg.content.data.method;
             switch (method){
                 case 'display':
 
                     // Try to get the cell.
                     var cell = this._get_msg_cell(msg.parent_header.msg_id);
                     if (cell == null) {
                         console.log("Could not determine where the display" + 
                             " message was from.  Widget will not be displayed")
                     } else {
                         this._display_view(msg.content.data.view_name, 
                         msg.content.data.parent,
                         cell);
                     }
                     break;
                 case 'update':
                     this._handle_update(msg.content.data.state);
                     break;
+                case 'add_class':
+                case 'remove_class':
+                    var selector = msg.content.data.selector;
+                    var class_list = msg.content.data.class_list;
+                    this._execute_views_method(method, selector, class_list);
+                    break;
                 case 'custom':
                     this._handle_custom_msg(msg.content.data.custom_content);
                     break;
             }
         },
 
 
         // Handle when a widget is updated via the python side.
         _handle_update: function (state) {
             this.updating = true;
             try {
                 for (var key in state) {
                     if (state.hasOwnProperty(key)) {
                         if (key == "_css"){
 
                             // Set the css value of the model as an attribute
                             // instead of a backbone trait because we are only 
                             // interested in backend css -> frontend css.  In
                             // other words, if the css dict changes in the
                             // frontend, we don't need to push the changes to
                             // the backend.
                             this.css = state[key];
                         } else {
                             this.set(key, state[key]); 
                         }
                     }
                 }
                 this.id = this.comm.comm_id;
                 this.save();
             } finally {
                 this.updating = false;
             }
         },
 
 
         _handle_status: function (cell, msg) {
             //execution_state : ('busy', 'idle', 'starting')
             if (msg.content.execution_state=='idle') {
                 
                 // Send buffer if this message caused another message to be
                 // throttled.
                 if (this.msg_buffer != null &&
                     this.msg_throttle == this.pending_msgs) {
 
                     var cell = this._get_msg_cell(msg.parent_header.msg_id);
                     var callbacks = this._make_callbacks(cell);
                     var data = {sync_method: 'update', sync_data: this.msg_buffer};
                     this.comm.send(data, callbacks);   
                     this.msg_buffer = null;
                 } else {
 
                     // Only decrease the pending message count if the buffer
                     // doesn't get flushed (sent).
                     --this.pending_msgs;
                 }
             }
         },
 
 
         // Custom syncronization logic.
         _handle_sync: function (method, options) {
             var model_json = this.toJSON();
 
             // Only send updated state if the state hasn't been changed 
             // during an update.
             if (!this.updating) {
                 if (this.pending_msgs >= this.msg_throttle) {
                     // The throttle has been exceeded, buffer the current msg so
                     // it can be sent once the kernel has finished processing 
                     // some of the existing messages.
                     if (method=='patch') {
                         if (this.msg_buffer == null) {
                             this.msg_buffer = $.extend({}, model_json); // Copy
                         }
                         for (var attr in options.attrs) {
                             this.msg_buffer[attr] = options.attrs[attr];
                         }
                     } else {
                         this.msg_buffer = $.extend({}, model_json); // Copy
                     }
 
                 } else {
                     // We haven't exceeded the throttle, send the message like 
                     // normal.  If this is a patch operation, just send the 
                     // changes.
                     var send_json = model_json;
                     if (method=='patch') {
                         send_json = {};
                         for (var attr in options.attrs) {
                             send_json[attr] = options.attrs[attr];
                         }
                     }
 
                     var data = {sync_method: method, sync_data: send_json};
 
                     var cell = null;
                     if (this.last_modified_view != undefined && this.last_modified_view != null) {
                         cell = this.last_modified_view.cell;    
                     }
                     
                     var callbacks = this._make_callbacks(cell);
                     this.comm.send(data, callbacks);    
                     this.pending_msgs++;
                 }
             }
             
             // Since the comm is a one-way communication, assume the message 
             // arrived.
             return model_json;
         },
 
 
         _handle_view_displayed: function(view) {
             if (this._view_displayed_callback) {
                 try {
                     this._view_displayed_callback(view)
                 } catch (e) {
                     console.log("Exception in widget model view displayed callback", e, view, this);
                 }
             }
         },
 
 
+        _execute_views_method: function (/* method_name, [argument0], [argument1], [...] */) {
+            var method_name = arguments[0];
+            var args = null;
+            if (arguments.length > 1) {
+                args = [].splice.call(arguments,1);
+            }
+
+            for (var cell in this.views) {
+                var views = this.views[cell];
+                for (var view_index in views) {
+                    var view = views[view_index];
+                    var method = view[method_name];
+                    if (args === null) {
+                        method.apply(view);
+                    } else {
+                        method.apply(view, args);
+                    }
+                }
+            }
+        },
+
+
         // Create view that represents the model.
         _display_view: function (view_name, parent_comm_id, cell) {
             var new_views = [];
 
             // Try creating and adding the view to it's parent.
             var displayed = false;
             if (parent_comm_id != undefined) {
                 var parent_comm = this.comm_manager.comms[parent_comm_id];
                 var parent_model = parent_comm.model;
                 var parent_views = parent_model.views[cell];
                 for (var parent_view_index in parent_views) {
                     var parent_view = parent_views[parent_view_index];
                     if (parent_view.display_child != undefined) {
                         var view = this._create_view(view_name, cell);
                         if (view != null) {
                             new_views.push(view);
                             parent_view.display_child(view);
                             displayed = true;
                             this._handle_view_displayed(view);
                         }
                     }
                 }
             }
 
             // If no parent view is defined or exists.  Add the view's 
             // element to cell's widget div.
             if (!displayed) {
                 var view = this._create_view(view_name, cell);
                 if (view != null) {
                     new_views.push(view);
 
                     if (cell.widget_subarea != undefined && cell.widget_subarea != null) {
                         cell.widget_area.show();
                         cell.widget_subarea.append(view.$el);
                         this._handle_view_displayed(view);
                     }
                 }
             }
 
             // Force the new view(s) to update their selves
             for (var view_index in new_views) {
                 var view = new_views[view_index];
                 view.update();
             }
         },
 
 
         // Create a view
         _create_view: function (view_name, cell) {
             var view_type = this.widget_manager.widget_view_types[view_name]; 
             if (view_type != undefined && view_type != null) {
                 var view = new view_type({model: this});
                 view.render();
                 if (this.views[cell]==undefined) {
                     this.views[cell] = []
                 }
                 this.views[cell].push(view);
                 view.cell = cell;
 
                 // Handle when the view element is remove from the page.
                 var that = this;
                 view.$el.on("remove", function(){ 
                     var index = that.views[cell].indexOf(view);
                     if (index > -1) {
                         that.views[cell].splice(index, 1);
                     }
                     view.remove(); // Clean-up view 
                     if (that.views[cell].length()==0) {
                         delete that.views[cell];
                     }
 
                     // Close the comm if there are no views left.
                     if (that.views.length()==0) {
                         if (that._close_callback) {
                             try {
                                 that._close_callback(that)
                             } catch (e) {
                                 console.log("Exception in widget model close callback", e, that);
                             }
                         }
                         that.comm.close();     
                         delete that.comm.model; // Delete ref so GC will collect widget model.
                     }
                 });
                 return view;    
             }
             return null;
         },
 
 
         // Build a callback dict.
         _make_callbacks: function (cell) {
             var callbacks = {};
             if (cell != null) {
                 
                 // Try to get output handlers
                 var handle_output = null;
                 var handle_clear_output = null;
                 if (cell.output_area != undefined && cell.output_area != null) {
                     handle_output = $.proxy(cell.output_area.handle_output, cell.output_area);
                     handle_clear_output = $.proxy(cell.output_area.handle_clear_output, cell.output_area);
                 }
 
                 // Create callback dict usign what is known
                 var that = this;
                 callbacks = {
                     iopub : {
                         output : handle_output,
                         clear_output : handle_clear_output,
 
                         status : function(msg){
                             that._handle_status(cell, msg);
                         },
 
                         // Special function only registered by widget messages.
                         // Allows us to get the cell for a message so we know
                         // where to add widgets if the code requires it.
                         get_cell : function() {
                             return cell;
                         },
                     },
                 };
             }
             return callbacks;
         },
 
 
         // Get the output area corresponding to the msg_id.
         // cell is an instance of IPython.Cell
         _get_msg_cell: function (msg_id) {
 
             // First, check to see if the msg was triggered by cell execution.
             var cell = this.widget_manager.get_msg_cell(msg_id);
             if (cell != null) {
                 return cell;
             }
 
             // Second, check to see if a get_cell callback was defined
             // for the message.  get_cell callbacks are registered for
             // widget messages, so this block is actually checking to see if the
             // message was triggered by a widget.
             var kernel = this.comm_manager.kernel;
             var callbacks = kernel.get_callbacks_for_msg(msg_id);
             if (callbacks != undefined && 
                 callbacks.iopub != undefined && 
                 callbacks.iopub.get_cell != undefined) {
 
                 return callbacks.iopub.get_cell();
             }
             
             // Not triggered by a cell or widget (no get_cell callback 
             // exists).
             return null;
         },
 
     });
 
 
     //--------------------------------------------------------------------
     // WidgetView class
     //--------------------------------------------------------------------
     var WidgetView = Backbone.View.extend({
         
         initialize: function() {
             this.visible = true;
             this.model.on('change',this.update,this);
-            this._add_class_calls = this.model.get('_add_class')[0];
-            this._remove_class_calls = this.model.get('_remove_class')[0];
         },
         
+        add_class: function(selector, class_list){
+            var elements = this._get_selector_element(selector);
+            if (elements.length > 0) {
+                elements.addClass(class_list);
+            }
+        },
+        
+        remove_class: function(selector, class_list){
+            var elements = this._get_selector_element(selector);
+            if (elements.length > 0) {
+                elements.removeClass(class_list);
+            }
+        },
+
         update: function() {
             if (this.model.get('visible') != undefined) {
                 if (this.visible != this.model.get('visible')) {
                     this.visible = this.model.get('visible');
                     if (this.visible) {
                         this.$el.show();
                     } else {
                         this.$el.hide();
                     }
                 }
             }
 
             if (this.model.css != undefined) {
                 for (var selector in this.model.css) {
                     if (this.model.css.hasOwnProperty(selector)) {
 
                         // Apply the css traits to all elements that match the selector.
                         var elements = this._get_selector_element(selector);
                         if (elements.length > 0) {
                             var css_traits = this.model.css[selector];    
                             for (var css_key in css_traits) {
                                 if (css_traits.hasOwnProperty(css_key)) {
                                     elements.css(css_key, css_traits[css_key]);
                                 }
                             }
                         }
                     }
                 }
             }
-
-            var add_class = this.model.get('_add_class');
-            if (add_class != undefined){
-                var add_class_calls = add_class[0];
-                if (add_class_calls > this._add_class_calls) {
-                    this._add_class_calls = add_class_calls;
-                    var elements = this._get_selector_element(add_class[1]);
-                    if (elements.length > 0) {
-                        elements.addClass(add_class[2]);
-                    }
-                }    
-            }
-
-            var remove_class = this.model.get('_remove_class');
-            if (remove_class != undefined){
-                var remove_class_calls = remove_class[0];
-                if (remove_class_calls > this._remove_class_calls) {
-                    this._remove_class_calls = remove_class_calls;
-                    var elements = this._get_selector_element(remove_class[1]);
-                    if (elements.length > 0) {
-                        elements.removeClass(remove_class[2]);
-                    }
-                }    
-            }
         },
 
         _get_selector_element: function(selector) {
             // Get the elements via the css selector.  If the selector is
             // blank, apply the style to the $el_to_style element.  If
             // the $el_to_style element is not defined, use apply the 
             // style to the view's element.
             var elements = this.$el.find(selector);
-            if (selector=='') {
+            if (selector===undefined || selector===null || selector=='') {
                 if (this.$el_to_style == undefined) {
                     elements = this.$el;
                 } else {
                     elements = this.$el_to_style;
                 }
             }
             return elements;
         },
     });
 
 
     //--------------------------------------------------------------------
     // WidgetManager class
     //--------------------------------------------------------------------
     var WidgetManager = function(){
         this.comm_manager = null;
         this.widget_model_types = {};
         this.widget_view_types = {};
         
         var that = this;
         Backbone.sync = function(method, model, options, error) {
             var result = model._handle_sync(method, options);
             if (options.success) {
               options.success(result);
             }
         }; 
     }
 
 
     WidgetManager.prototype.attach_comm_manager = function (comm_manager) {
         this.comm_manager = comm_manager;
 
         // Register already register widget model types with the comm manager.
         for (var widget_model_name in this.widget_model_types) {
             this.comm_manager.register_target(widget_model_name, $.proxy(this._handle_com_open, this));
         }
     }
 
 
     WidgetManager.prototype.register_widget_model = function (widget_model_name, widget_model_type) {
         // Register the widget with the comm manager.  Make sure to pass this object's context
         // in so `this` works in the call back.
         if (this.comm_manager!=null) {
             this.comm_manager.register_target(widget_model_name, $.proxy(this._handle_com_open, this));
         }
         this.widget_model_types[widget_model_name] = widget_model_type;
     }
 
 
     WidgetManager.prototype.register_widget_view = function (widget_view_name, widget_view_type) {
         this.widget_view_types[widget_view_name] = widget_view_type;
     }
 
 
     WidgetManager.prototype.get_msg_cell = function (msg_id) {
         if (IPython.notebook != undefined && IPython.notebook != null) {
             return IPython.notebook.get_msg_cell(msg_id);
         }
     }
     
     
     WidgetManager.prototype.on_create_widget = function (callback) {
         this._create_widget_callback = callback;
     }
 
 
     WidgetManager.prototype._handle_create_widget = function (widget_model) {
         if (this._create_widget_callback) {
             try {
                 this._create_widget_callback(widget_model);
             } catch (e) {
                 console.log("Exception in WidgetManager callback", e, widget_model);
             }
         }
     }
 
 
     WidgetManager.prototype._handle_com_open = function (comm, msg) {
         var widget_type_name = msg.content.target_name;
         var widget_model = new this.widget_model_types[widget_type_name](this.comm_manager, comm, this);
         this._handle_create_widget(widget_model);
     }
     
 
     //--------------------------------------------------------------------
     // Init code
     //--------------------------------------------------------------------
     IPython.WidgetManager = WidgetManager;
     IPython.WidgetModel = WidgetModel;
     IPython.WidgetView = WidgetView;
 
     if (IPython.widget_manager==undefined || IPython.widget_manager==null) {
         IPython.widget_manager = new WidgetManager();    
     }
 
     return IPython.widget_manager;
 });

IPython/html/widgets/widget.py

@@ -1,416 +1,414 b''
 """Base Widget class.  Allows user to create widgets in the backend that render
 in the IPython notebook frontend.
 """
 #-----------------------------------------------------------------------------
 # Copyright (c) 2013, the IPython Development Team.
 #
 # Distributed under the terms of the Modified BSD License.
 #
 # The full license is in the file COPYING.txt, distributed with this software.
 #-----------------------------------------------------------------------------
 
 #-----------------------------------------------------------------------------
 # Imports
 #-----------------------------------------------------------------------------
 from copy import copy
 from glob import glob
 import uuid
 import sys
 import os
 import inspect
 import types
 
 import IPython
 from IPython.kernel.comm import Comm
 from IPython.config import LoggingConfigurable
 from IPython.utils.traitlets import Unicode, Dict, List, Instance, Bool
 from IPython.display import Javascript, display
 from IPython.utils.py3compat import string_types
 
 
 #-----------------------------------------------------------------------------
 # Classes
 #-----------------------------------------------------------------------------
 class Widget(LoggingConfigurable):
 
     # Shared declarations
     _keys = []
     
     # Public declarations
     target_name = Unicode('widget', help="""Name of the backbone model 
         registered in the frontend to create and sync this widget with.""")
     default_view_name = Unicode(help="""Default view registered in the frontend
         to use to represent the widget.""")
     parent = Instance('IPython.html.widgets.widget.Widget')
     visible = Bool(True, help="Whether or not the widget is visible.")
 
     def _parent_changed(self, name, old, new):
         if self._displayed:
             raise Exception('Parent cannot be set because widget has been displayed.')
         elif new == self:
             raise Exception('Parent cannot be set to self.')
         else:
 
             # Parent/child association
             if new is not None and not self in new._children:
                 new._children.append(self)
             if old is not None and self in old._children:
                 old._children.remove(self)                
 
     # Private/protected declarations
     _property_lock = (None, None) # Last updated (key, value) from the front-end.  Prevents echo.
     _css = Dict() # Internal CSS property dict
-    _add_class = List() # Used to add a js class to a DOM element (call#, selector, class_name)
-    _remove_class = List() # Used to remove a js class from a DOM element (call#, selector, class_name)
     _displayed = False
     _comm = None
     
     
     def __init__(self, **kwargs):
         """Public constructor
 
         Parameters
         ----------
         parent : Widget instance (optional)
             Widget that this widget instance is child of.  When the widget is
             displayed in the frontend, it's corresponding view will be made
             child of the parent's view if the parent's view exists already.  If
             the parent's view is displayed, it will automatically display this 
             widget's default view as it's child.  The default view can be set
             via the default_view_name property.
         """
         self._children = []
-        self._add_class = [0]
-        self._remove_class = [0]
         self._display_callbacks = []
         self._msg_callbacks = []
         super(Widget, self).__init__(**kwargs)
                 
         # Register after init to allow default values to be specified
         self.on_trait_change(self._handle_property_changed, self.keys)
         
         
     def __del__(self):
         """Object disposal"""
         self.close()
     
 
     def close(self):
         """Close method.  Closes the widget which closes the underlying comm.
         When the comm is closed, all of the widget views are automatically 
         removed from the frontend."""
         try:
             self._comm.close()
             del self._comm
         except:
             pass # Comm doesn't exist and/or is already closed.
     
     
     # Properties      
     def _get_keys(self):
-        keys = ['visible', '_css', '_add_class', '_remove_class']
+        keys = ['visible', '_css']
         keys.extend(self._keys)
         return keys
     keys = property(_get_keys)
     
     
     # Event handlers
     def _handle_msg(self, msg):
         """Called when a msg is recieved from the frontend"""
         data = msg['content']['data']
 
         # Handle backbone sync methods CREATE, PATCH, and UPDATE
         if 'sync_method' in data and 'sync_data' in data:
             sync_method = data['sync_method']
             sync_data = data['sync_data']
             self._handle_recieve_state(sync_data) # handles all methods
 
         # Handle a custom msg from the front-end
         if 'custom_content' in data:
             self._handle_custom_msg(data['custom_content'])
 
 
     def _handle_custom_msg(self, content):
         """Called when a custom msg is recieved."""
         for handler in self._msg_callbacks:
             if callable(handler):
                 argspec = inspect.getargspec(handler)
                 nargs = len(argspec[0])
 
                 # Bound methods have an additional 'self' argument
                 if isinstance(handler, types.MethodType):
                     nargs -= 1
 
                 # Call the callback
                 if nargs == 1:
                     handler(content)
                 elif nargs == 2:
                     handler(self, content)
                 else:
                     raise TypeError('Widget msg callback must ' \
                         'accept 1 or 2 arguments, not %d.' % nargs)
     
     
     def _handle_recieve_state(self, sync_data):
         """Called when a state is recieved from the frontend."""
         # Use _keys instead of keys - Don't get retrieve the css from the client side.
         for name in self._keys:
             if name in sync_data:
                 try:
                     self._property_lock = (name, sync_data[name])
                     setattr(self, name, sync_data[name])
                 finally:
                     self._property_lock = (None, None)
     
     
     def _handle_property_changed(self, name, old, new):
         """Called when a proeprty has been changed."""
         # Make sure this isn't information that the front-end just sent us.
         if self._property_lock[0] != name and self._property_lock[1] != new \
         and self._comm is not None:
             # TODO: Validate properties.
             # Send new state to frontend
             self.send_state(key=name)
 
 
     def _handle_close(self):
         """Called when the comm is closed by the frontend."""
         self._comm = None
 
 
     def _handle_displayed(self, view_name):
         """Called when a view has been displayed for this widget instance
 
         Parameters
         ----------
         view_name: unicode
             Name of the view that was displayed."""
         for handler in self._display_callbacks:
             if callable(handler):
                 argspec = inspect.getargspec(handler)
                 nargs = len(argspec[0])
 
                 # Bound methods have an additional 'self' argument
                 if isinstance(handler, types.MethodType):
                     nargs -= 1
 
                 # Call the callback
                 if nargs == 0:
                     handler()
                 elif nargs == 1:
                     handler(self)
                 elif nargs == 2:
                     handler(self, view_name)
                 else:
                     raise TypeError('Widget display callback must ' \
                         'accept 0-2 arguments, not %d.' % nargs)
     
     
     # Public methods
     def send_state(self, key=None):
         """Sends the widget state, or a piece of it, to the frontend.
 
         Parameters
         ----------
         key : unicode (optional)
             A single property's name to sync with the frontend.
         """
         if self._comm is not None:
             state = {}
 
             # If a key is provided, just send the state of that key.
             keys = []
             if key is None:
                 keys.extend(self.keys)
             else:
                 keys.append(key)
             for key in self.keys:
                 try:
                     state[key] = getattr(self, key)
                 except Exception as e:
                     pass # Eat errors, nom nom nom
             self._comm.send({"method": "update",
                             "state": state})
 
 
     def get_css(self, key, selector=""):
         """Get a CSS property of the widget.  Note, this function does not 
         actually request the CSS from the front-end;  Only properties that have 
         been set with set_css can be read.
 
         Parameters
         ----------
         key: unicode
             CSS key
         selector: unicode (optional)
             JQuery selector used when the CSS key/value was set.
         """
         if selector in self._css and key in self._css[selector]:
             return self._css[selector][key]
         else:
             return None
 
 
     def set_css(self, *args, **kwargs):
         """Set one or more CSS properties of the widget (shared among all of the 
         views).  This function has two signatures:
         - set_css(css_dict, [selector=''])
         - set_css(key, value, [selector=''])
 
         Parameters
         ----------
         css_dict : dict
             CSS key/value pairs to apply
         key: unicode
             CSS key
         value
             CSS value
         selector: unicode (optional)
             JQuery selector to use to apply the CSS key/value.
         """
         selector = kwargs.get('selector', '')
 
         # Signature 1: set_css(css_dict, [selector=''])
         if len(args) == 1:
             if isinstance(args[0], dict):
                 for (key, value) in args[0].items():
                     self.set_css(key, value, selector=selector)
             else:
                 raise Exception('css_dict must be a dict.')
 
         # Signature 2: set_css(key, value, [selector=''])
         elif len(args) == 2 or len(args) == 3:
 
             # Selector can be a positional arg if it's the 3rd value
             if len(args) == 3:
                 selector = args[2]
             if selector not in self._css:
                 self._css[selector] = {}
                 
             # Only update the property if it has changed.
             key = args[0]
             value = args[1]
             if not (key in self._css[selector] and value in self._css[selector][key]):
                 self._css[selector][key] = value
                 self.send_state('_css') # Send new state to client.
         else:
             raise Exception('set_css only accepts 1-3 arguments')
 
 
     def add_class(self, class_name, selector=""):
         """Add class[es] to a DOM element
 
         Parameters
         ----------
         class_name: unicode
             Class name(s) to add to the DOM element(s).  Multiple class names 
             must be space separated.
         selector: unicode (optional)
             JQuery selector to select the DOM element(s) that the class(es) will 
             be added to.
         """
-        self._add_class = [self._add_class[0] + 1, selector, class_name]
-        self.send_state(key='_add_class')
+        self._comm.send({"method": "add_class",
+                        "class_list": class_name,
+                        "selector": selector})
 
 
     def remove_class(self, class_name, selector=""):
         """Remove class[es] from a DOM element
 
         Parameters
         ----------
         class_name: unicode
             Class name(s) to remove from  the DOM element(s).  Multiple class 
             names must be space separated.
         selector: unicode (optional)
             JQuery selector to select the DOM element(s) that the class(es) will 
             be removed from.
         """
-        self._remove_class = [self._remove_class[0] + 1, selector, class_name]
-        self.send_state(key='_remove_class')
+        self._comm.send({"method": "remove_class",
+                        "class_list": class_name,
+                        "selector": selector})
 
 
     def send(self, content):
         """Sends a custom msg to the widget model in the front-end.
 
         Parameters
         ----------
         content : dict
             Content of the message to send.
         """
         if self._comm is not None:
             self._comm.send({"method": "custom",
                             "custom_content": content})
 
 
     def on_msg(self, callback, remove=False):
         """Register a callback for when a custom msg is recieved from the front-end
 
         Parameters
         ----------
         callback: method handler
             Can have a signature of:
             - callback(content)
             - callback(sender, content)
         remove: bool
             True if the callback should be unregistered."""
         if remove and callback in self._msg_callbacks:
             self._msg_callbacks.remove(callback)
         elif not remove and not callback in self._msg_callbacks:
             self._msg_callbacks.append(callback)
 
 
     def on_displayed(self, callback, remove=False):
         """Register a callback to be called when the widget has been displayed
 
         Parameters
         ----------
         callback: method handler
             Can have a signature of:
             - callback()
             - callback(sender)
             - callback(sender, view_name)
         remove: bool
             True if the callback should be unregistered."""
         if remove and callback in self._display_callbacks:
             self._display_callbacks.remove(callback)
         elif not remove and not callback in self._display_callbacks:
             self._display_callbacks.append(callback)
 
 
     # Support methods
     def _repr_widget_(self, view_name=None):
         """Function that is called when `IPython.display.display` is called on
         the widget.
 
         Parameters
         ----------
         view_name: unicode (optional)
             View to display in the frontend.  Overrides default_view_name."""
 
         if not view_name:
             view_name = self.default_view_name
         
         # Create a comm.
         if self._comm is None:
             self._comm = Comm(target_name=self.target_name)
             self._comm.on_msg(self._handle_msg)
             self._comm.on_close(self._handle_close)
         
         # Make sure model is syncronized
         self.send_state()
             
         # Show view.
         if self.parent is None or self.parent._comm is None:
             self._comm.send({"method": "display", "view_name": view_name})
         else:
             self._comm.send({"method": "display", 
                             "view_name": view_name,
                             "parent": self.parent._comm.comm_id})
         self._displayed = True
         self._handle_displayed(view_name)
 
         # Now display children if any.
         for child in self._children:
             if child != self:
                 child._repr_widget_()
         return None