Make dropdown view DOM swap elements on update.

IPython/html/static/notebook/js/widgets/widget_selection.js

@@ -1,371 +1,375
 //----------------------------------------------------------------------------
 //  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.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // SelectionWidget
 //============================================================================
 
 /**
  * @module IPython
  * @namespace IPython
  **/
 
 define(["notebook/js/widgets/widget"], function(widget_manager){
 
     var DropdownView = IPython.DOMWidgetView.extend({
         render : function(){
             // Called when view is rendered.            
             this.$el
                 .addClass('widget-hbox-single')
                 .html('');
             this.$label = $('<div />')
                 .appendTo(this.$el)
                 .addClass('widget-hlabel')
                 .hide();
             this.$buttongroup = $('<div />')
                 .addClass('widget_item')
                 .addClass('btn-group')
                 .appendTo(this.$el);
             this.$el_to_style = this.$buttongroup; // Set default element to style
             this.$droplabel = $('<button />')
                 .addClass('btn')
                 .addClass('widget-combo-btn')
                 .html('&nbsp;')
                 .appendTo(this.$buttongroup);
             this.$dropbutton = $('<button />')
                 .addClass('btn')
                 .addClass('dropdown-toggle')
                 .addClass('widget-combo-carrot-btn')
                 .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();
         },
         
         update : function(options){
             // Update the contents of this view
             //
             // Called when the model is changed.  The model may have been 
             // changed by another view or by a state update from the back-end.
 
             if (options === undefined || options.updated_view != this) {
                 var selected_item_text = this.model.get('value');
                 selected_item_text = selected_item_text.replace(/ /g, '&nbsp;');
                 selected_item_text = selected_item_text.replace(/\n/g, '<br>\n');
                 if (selected_item_text.length === 0) {
                     this.$droplabel.html('&nbsp;');
                 } else {
                     this.$droplabel.html(selected_item_text);    
                 }
                 
                 var items = this.model.get('values');
-                this.$droplist.html('');
+                var $replace_droplist = $('<ul />')
+                    .addClass('dropdown-menu');
                 for (var index in items) {
                     var that = this;
                     var item_button = $('<a href="#"/>')
                         .html(items[index])
                         .on('click', $.proxy(this.handle_click, this));
-                    this.$droplist.append($('<li />').append(item_button));
+                    $replace_droplist.append($('<li />').append(item_button));
                 }
+                this.$droplist.replaceWith($replace_droplist);
+                this.$droplist.remove();
+                this.$droplist = $replace_droplist;
                 
                 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');
                 }
 
                 var description = this.model.get('description');
                 if (description.length === 0) {
                     this.$label.hide();
                 } else {
                     this.$label.html(description);
                     this.$label.show();
                 }
             }
             return DropdownView.__super__.update.apply(this);
         },
 
         handle_click: function (e) {
             // Handle when a value is clicked.
             
             // Calling model.set will trigger all of the other views of the 
             // model to update.
             this.model.set('value', $(e.target).html(), {updated_view: this});
             this.touch();
         },
         
     });
     widget_manager.register_widget_view('DropdownView', DropdownView);
 
 
     var RadioButtonsView = IPython.DOMWidgetView.extend({    
         render : function(){
             // Called when view is rendered.
             this.$el
                 .addClass('widget-hbox');
             this.$label = $('<div />')
                 .appendTo(this.$el)
                 .addClass('widget-hlabel')
                 .hide();
             this.$container = $('<div />')
                 .appendTo(this.$el)
                 .addClass('widget-container')
                 .addClass('vbox');
             this.$el_to_style = this.$container; // Set default element to style
             this.update();
         },
         
         update : function(options){
             // Update the contents of this view
             //
             // Called when the model is changed.  The model may have been 
             // changed by another view or by a state update from the back-end.
             if (options === undefined || options.updated_view != this) {
                 // Add missing items to the DOM.
                 var items = this.model.get('values');
                 var disabled = this.model.get('disabled');
                 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.$container);
                         
                         $('<input />')
                             .attr('type', 'radio')
                             .addClass(this.model)
                             .val(items[index])
                             .prependTo($label)
                             .on('click', $.proxy(this.handle_click, this));
                     }
                     
                     var $item_element = this.$container.find(item_query);
                     if (this.model.get('value') == items[index]) {
                         $item_element.prop('checked', true);
                     } else {
                         $item_element.prop('checked', false);
                     }
                     $item_element.prop('disabled', disabled);
                 }
                 
                 // Remove items that no longer exist.
                 this.$container.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();
                     }
                 });
 
                 var description = this.model.get('description');
                 if (description.length === 0) {
                     this.$label.hide();
                 } else {
                     this.$label.html(description);
                     this.$label.show();
                 }
             }
             return RadioButtonsView.__super__.update.apply(this);
         },
 
         handle_click: function (e) {
             // Handle when a value is clicked.
             
             // Calling model.set will trigger all of the other views of the 
             // model to update.
             this.model.set('value', $(e.target).val(), {updated_view: this});
             this.touch();
         },
     });
     widget_manager.register_widget_view('RadioButtonsView', RadioButtonsView);
 
 
     var ToggleButtonsView = IPython.DOMWidgetView.extend({    
         render : function(){
             // Called when view is rendered.
             this.$el
                 .addClass('widget-hbox-single');
             this.$label = $('<div />')
                 .appendTo(this.$el)
                 .addClass('widget-hlabel')
                 .hide();
             this.$buttongroup = $('<div />')
                 .addClass('btn-group')
                 .attr('data-toggle', 'buttons-radio')
                 .appendTo(this.$el);
             this.$el_to_style = this.$buttongroup; // Set default element to style
             this.update();
         },
         
         update : function(options){
             // Update the contents of this view
             //
             // Called when the model is changed.  The model may have been 
             // changed by another view or by a state update from the back-end.
             if (options === undefined || options.updated_view != this) {
                 // Add missing items to the DOM.
                 var items = this.model.get('values');
                 var disabled = this.model.get('disabled');
                 for (var index in items) {
                     var item_query = ' :contains("' + items[index] + '")';
                     if (this.$buttongroup.find(item_query).length === 0) {
                         $('<button />')
                             .attr('type', 'button')
                             .addClass('btn')
                             .html(items[index])
                             .appendTo(this.$buttongroup)
                             .on('click', $.proxy(this.handle_click, this));
                     }
                     
                     var $item_element = this.$buttongroup.find(item_query);
                     if (this.model.get('value') == items[index]) {
                         $item_element.addClass('active');
                     } else {
                         $item_element.removeClass('active');
                     }
                     $item_element.prop('disabled', disabled);
                 }
                 
                 // 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();
                     }
                 });
 
                 var description = this.model.get('description');
                 if (description.length === 0) {
                     this.$label.hide();
                 } else {
                     this.$label.html(description);
                     this.$label.show();
                 }
             }
             return ToggleButtonsView.__super__.update.apply(this);
         },
 
         handle_click: function (e) {
             // Handle when a value is clicked.
             
             // Calling model.set will trigger all of the other views of the 
             // model to update.
             this.model.set('value', $(e.target).html(), {updated_view: this});
             this.touch();
         },    
     });
     widget_manager.register_widget_view('ToggleButtonsView', ToggleButtonsView);
 
 
     var ListBoxView = IPython.DOMWidgetView.extend({    
         render : function(){
             // Called when view is rendered.
             this.$el
                 .addClass('widget-hbox');
             this.$label = $('<div />')
                 .appendTo(this.$el)
                 .addClass('widget-hlabel')
                 .hide();
             this.$listbox = $('<select />')
                 .addClass('widget-listbox')
                 .attr('size', 6)
                 .appendTo(this.$el);
             this.$el_to_style = this.$listbox; // Set default element to style
             this.update();
         },
         
         update : function(options){
             // Update the contents of this view
             //
             // Called when the model is changed.  The model may have been 
             // changed by another view or by a state update from the back-end.
             if (options === undefined || options.updated_view != this) {
                 // 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.$listbox.find(item_query).length === 0) {
                         $('<option />')
                             .html(items[index])
                             .attr('value', items[index])
                             .appendTo(this.$listbox)
                             .on('click', $.proxy(this.handle_click, this));
                     }
                 }
 
                 // Select the correct element
                 this.$listbox.val(this.model.get('value'));
                 
                 // Disable listbox if needed
                 var disabled = this.model.get('disabled');
                 this.$listbox.prop('disabled', disabled);
 
                 // Remove items that no longer exist.
                 this.$listbox.find('option').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();
                     }
                 });
 
                 var description = this.model.get('description');
                 if (description.length === 0) {
                     this.$label.hide();
                 } else {
                     this.$label.html(description);
                     this.$label.show();
                 }
             }
             return ListBoxView.__super__.update.apply(this);
         },
 
         handle_click: function (e) {
             // Handle when a value is clicked.
             
             // Calling model.set will trigger all of the other views of the 
             // model to update.
             this.model.set('value', $(e.target).html(), {updated_view: this});
             this.touch();
         },    
     });
     widget_manager.register_widget_view('ListBoxView', ListBoxView);
 });