Added ListBoxView

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

@@ -1,277 +1,355 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.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // SelectionWidget
 //============================================================================
 
 /**
  * @module IPython
  * @namespace IPython
  **/
 
 define(["notebook/js/widget"], function(widget_manager){
     var SelectionWidgetModel = IPython.WidgetModel.extend({});
     widget_manager.register_widget_model('SelectionWidgetModel', SelectionWidgetModel);
 
     var DropdownView = IPython.WidgetView.extend({
         
         // Called when view is rendered.
         render : function(){
             
             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();
         },
         
         // Handles: Backend -> Frontend Sync
         //          Frontent -> Frontend Sync
         update : function(){
 
             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('');
             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);
                         that.model.update_other_views(that);
                     })
                 
                 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');
             }
 
             var description = this.model.get('description');
             if (description.length == 0) {
                 this.$label.hide();
             } else {
                 this.$label.html(description);
                 this.$label.show();
             }
             return IPython.WidgetView.prototype.update.call(this);
         },
         
     });
 
     widget_manager.register_widget_view('DropdownView', DropdownView);
 
     var RadioButtonsView = IPython.WidgetView.extend({
         
         // Called when view is rendered.
         render : function(){
             this.$el
                 .addClass('widget-hbox')
                 .html('');
             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();
         },
         
         // Handles: Backend -> Frontend Sync
         //          Frontent -> Frontend Sync
         update : function(){
             
             // 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);
                     
                     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.update_other_views(that);
                         });
                 }
                 
                 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 IPython.WidgetView.prototype.update.call(this);
         },
         
     });
 
     widget_manager.register_widget_view('RadioButtonsView', RadioButtonsView);
 
 
     var ToggleButtonsView = IPython.WidgetView.extend({
         
         // Called when view is rendered.
         render : function(){
             this.$el
                 .addClass('widget-hbox-single')
                 .html('');
             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();
         },
         
         // Handles: Backend -> Frontend Sync
         //          Frontent -> Frontend Sync
         update : function(){
             
             // 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) {
                     
                     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.update_other_views(that);
                         });
                 }
                 
                 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 IPython.WidgetView.prototype.update.call(this);
         },
         
     });
 
     widget_manager.register_widget_view('ToggleButtonsView', ToggleButtonsView);
+
+    var ListBoxView = IPython.WidgetView.extend({
+        
+        // Called when view is rendered.
+        render : function(){
+            this.$el
+                .addClass('widget-hbox')
+                .html('');
+            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();
+        },
+        
+        // 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.$listbox.find(item_query).length == 0) {
+                    
+                    var that = this;
+                    $('<option />')
+                        .html(items[index])
+                        .attr('value', items[index])
+                        .appendTo(this.$listbox)
+                        .on('click', function(e){
+                            that.model.set('value', $(e.target).html(), this);
+                            that.model.update_other_views(that);
+                        });
+                }
+            }
+
+            // 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 IPython.WidgetView.prototype.update.call(this);
+        },
+        
+    });
+
+    widget_manager.register_widget_view('ListBoxView', ListBoxView);
 });

IPython/html/static/notebook/less/widgets.less

@@ -1,211 +1,217 b''
 
 /*
 LESS file that styles IPython notebook widgets and the area they sit in.
 
 The widget area typically looks something like this:
  +------------------------------------------+
  | widget-area                              |
  |  +--------+---------------------------+  |
  |  | prompt | widget-subarea            |  |
  |  |        | +--------+  +--------+    |  |
  |  |        | | widget |  | widget |    |  |
  |  |        | +--------+  +--------+    |  |
  |  +--------+---------------------------+  |
  +------------------------------------------+
 */
 
 .widget-area {
     page-break-inside: avoid;
     .hbox();
 
     .widget-subarea {
         padding: 0.44em 0.4em 0.4em 1px;
         margin-left: 6px;
         .border-box-sizing();
         .vbox();
         .box-flex2();
 
         /* Horizontal Label */
         .widget-hlabel {
             min-width: 10ex;
             padding-right: 8px;
             padding-top: 3px;
             text-align: right;
             vertical-align: text-top;
         }
 
         /* Vertical Label */
         .widget-vlabel {
             padding-bottom: 5px;
             text-align: center;
             vertical-align: text-bottom;
         }
 
 
         /* Slider Track */
         .slide-track {
             border: 1px solid #CCCCCC;
             background: #FFFFFF;
             .corner-all(); /* Round the corners of the slide track */
         }
 
         /* Horizontal jQuery Slider 
 
         Both the horizontal and vertical versions of the slider are characterized
         by a styled div that contains an invisible jQuery slide div which 
         contains a visible slider handle div.  This is requred so we can control
         how the slider is drawn and 'fix' the issue where the slide handle 
         doesn't stop at the end of the slide.
 
         Both horizontal and vertical sliders have this div nesting:
         +------------------------------------------+
         | widget-(h/v)slider                       |
         |  +--------+---------------------------+  |
         |  | ui-slider                          |  |
         |  |          +------------------+      |  |
         |  |          | ui-slider-handle |      |  |
         |  |          +------------------+      |  |
         |  +--------+---------------------------+  |
         +------------------------------------------+
         */
         .widget-hslider {
 
             /* Fix the padding of the slide track so the ui-slider is sized 
             correctly. */
             padding-left: 8px;
             padding-right: 5px;
             overflow: visible;
 
             /* Default size of the slider */
             width: 348px; 
             height: 5px;
             max-height: 5px;
             margin-top: 11px;
             
             /* Style the slider track */
             .slide-track();
 
             /* Make the div a flex box (makes FF behave correctly). */
             .hbox();
 
             /* Inner, invisible slide div */
             .ui-slider {
                 border: 0px !important;
                 background: none !important;
                 
                 .hbox();
                 .box-flex1();
 
                 .ui-slider-handle {
                     width: 14px !important;
                     height: 28px !important;
 
                     margin-top: -8px !important;
                 }
             }
         }
 
         /* Vertical jQuery Slider */
         .widget-vslider {
             
             /* Fix the padding of the slide track so the ui-slider is sized 
             correctly. */
             padding-bottom: 8px;
             overflow: visible; 
 
             /* Default size of the slider */
             width: 5px;
             max-width: 5px;
             height: 250px;
             margin-left: 12px;
             
             /* Style the slider track */
             .slide-track();
 
             /* Make the div a flex box (makes FF behave correctly). */
             .vbox();
             
             /* Inner, invisible slide div */
             .ui-slider {
                 border: 0px !important;
                 background: none !important;
                 margin-left: -4px;
                 margin-top: 5px;
                 
                 .vbox();
                 .box-flex1();
 
                 .ui-slider-handle {
                     width: 28px !important;
                     height: 14px !important;
                     margin-left: -9px;
                 }
             }
         }
 
         /* String Textbox - used for TextBoxView and TextAreaView */
         .widget-text {
             width: 350px;
             margin-bottom: 0px;
         }
 
+        /* Listbox */
+        .widget-listbox {
+            width: 364px;
+            margin-bottom: 0px;
+        }
+
         /* Single Line Textbox - used for IntTextView and FloatTextView */
         .widget-numeric-text {
             width: 150px;
         }
 
         /* Progress Bar */
         .widget-progress {
             width: 363px;
 
             /* Disable progress bar animation */
             .bar {
                 -webkit-transition: none;
                 -moz-transition: none;
                 -ms-transition: none;
                 -o-transition: none;
                 transition: none;
             }
         }
 
         /* ComboBox Main Button */
         .widget-combo-btn {
             min-width: 138px; /* + 26px drop arrow btn = 164px */
         }
 
         /* ContainerWidget */
         .widget-container {
             .border-box-sizing();
         }
 
         /* The following section sets the style for the invisible div that
         hold widgets and their accompanying labels.
 
         Looks like this:
         +-----------------------------+
         | widget-box (or similar)     |
         |  +-------+---------------+  |
         |  | Label | Actual Widget |  |
         |  +-------+---------------+  |
         +-----------------------------+
         */
         .widget-box {
             .start();
             .widget-container();
             margin: 5px;
         }
         .widget-hbox { /* Horizontal widgets */
             .widget-box();
             .hbox();
         }
         .widget-hbox-single { /* Single line horizontal widgets */
             .widget-hbox();
             height: 30px;
         }
         .widget-vbox-single { /* For vertical slides */
             .widget-box();
             .vbox();
             width: 30px;
         }
     }
 }

examples/widgets/Part 1 - Basics.ipynb

@@ -1,323 +1,324 b''
 {
  "metadata": {
   "cell_tags": [
    [
     "<None>",
     null
    ]
   ],
   "name": ""
  },
  "nbformat": 3,
  "nbformat_minor": 0,
  "worksheets": [
   {
    "cells": [
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "To use IPython widgets in the notebook, the widget namespace and display function need to be imported."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "from IPython.html import widgets # Widget definitions\n",
       "from IPython.display import display # Used to display widgets in the notebook"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 1
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {},
      "source": [
       "Basic Widgets"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "The IPython notebook comes preloaded with basic widgets that represent common data types.  These widgets are\n",
       "\n",
       "- BoolWidget : boolean  \n",
       "- FloatRangeWidget : bounded float  \n",
       "- FloatWidget : unbounded float  \n",
       "- IntRangeWidget : bounded integer  \n",
       "- IntWidget : unbounded integer  \n",
       "- SelectionWidget : enumeration  \n",
       "- StringWidget : string  \n",
       "\n",
       "A few special widgets are also included, that can be used to capture events and change how other widgets are displayed.  These widgets are\n",
       "\n",
       "- ButtonWidget  \n",
       "- ContainerWidget  \n",
       "- MulticontainerWidget  \n",
       "\n",
       "To see the complete list of widgets, one can execute the following"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "[widget for widget in dir(widgets) if widget.endswith('Widget')]"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "metadata": {},
        "output_type": "pyout",
        "prompt_number": 2,
        "text": [
         "['BoolWidget',\n",
         " 'ButtonWidget',\n",
         " 'ContainerWidget',\n",
         " 'FloatRangeWidget',\n",
         " 'FloatWidget',\n",
         " 'IntRangeWidget',\n",
         " 'IntWidget',\n",
         " 'MulticontainerWidget',\n",
         " 'SelectionWidget',\n",
         " 'StringWidget',\n",
         " 'Widget']"
        ]
       }
      ],
      "prompt_number": 2
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "The basic widgets can all be constructed without arguments.  The following creates a FloatRangeWidget without displaying it"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "mywidget = widgets.FloatRangeWidget()"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 3
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Constructing a widget does not display it on the page.  To display a widget, the widget must be passed to the IPython `display(object)` method.  `mywidget` is displayed by"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "display(mywidget)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 4
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "It's important to realize that widgets are not the same as output, even though they are displayed with `display`.  Widgets are drawn in a special widget area.  That area is marked with a close button which allows you to collapse the widgets.  Widgets cannot be interleaved with output.  Doing so would break the ability to make simple animations using `clear_output`.\n",
       "\n",
       "Widgets are manipulated via special instance properties (traitlets).  The names of these instance properties are listed in the widget's `keys` property (as seen below).  A few of these properties are common to most, if not all, widgets.  The common properties are `value`, `description`, `visible`, and `disabled`.  `_css`, `_add_class`, and `_remove_class` are internal properties that exist in all widgets and should not be modified."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "mywidget.keys"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "metadata": {},
        "output_type": "pyout",
        "prompt_number": 5,
        "text": [
         "['visible',\n",
         " '_css',\n",
         " '_add_class',\n",
         " '_remove_class',\n",
         " 'value',\n",
         " 'step',\n",
         " 'max',\n",
         " 'min',\n",
         " 'disabled',\n",
         " 'orientation',\n",
         " 'description']"
        ]
       }
      ],
      "prompt_number": 5
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Changing a widget's property value will automatically update that widget everywhere it is displayed in the notebook.  Here the value of `mywidget` is set.  The slider shown above (after input 4) updates automatically to the new value.  In reverse, changing the value of the displayed widget will update the property's value."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "mywidget.value = 25.0"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 6
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "After changing the widget's value in the notebook by hand to 0.0 (sliding the bar to the far left)."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "mywidget.value"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "metadata": {},
        "output_type": "pyout",
        "prompt_number": 7,
        "text": [
         "0.0"
        ]
       }
      ],
      "prompt_number": 7
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Widget property values can also be set with kwargs during the construction of the widget (as seen below)."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "mysecondwidget = widgets.SelectionWidget(values=[\"Item A\", \"Item B\", \"Item C\"], value=\"Nothing Selected\")\n",
       "display(mysecondwidget)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 8
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {},
      "source": [
       "Views"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "The data types that most of the widgets represent can be displayed more than one way.  A `view` is a visual representation of a widget in the notebook.  In the example in the section above, the default `view` for the `FloatRangeWidget` is used.  The default view is set in the widgets `default_view_name` instance property (as seen below)."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "mywidget.default_view_name"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "metadata": {},
        "output_type": "pyout",
        "prompt_number": 9,
        "text": [
         "u'FloatSliderView'"
        ]
       }
      ],
      "prompt_number": 9
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "When a widget is displayed using `display(...)`, the `default_view_name` is used to determine what view type should be used to display the widget.  View names are case sensitive.  Sometimes the default view isn't the best view to represent a piece of data.  To change what view is used, either the `default_view_name` can be changed or the `view_name` kwarg of `display` can be set.  This also can be used to display one widget multiple ways in one output (as seen below)."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "display(mywidget)\n",
       "display(mywidget, view_name=\"FloatTextView\")"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 10
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Some views work with multiple different widget types and some views only work with one.  The complete list of views and supported widgets is below.  The default views are italicized.\n",
       "\n",
       "| Widget Name            | View Names          |\n",
       "|:-----------------------|:--------------------|\n",
       "| BoolWidget             |   *CheckboxView*    |\n",
       "|                        |   ToggleButtonView  |\n",
       "| ButtonWidget           |   *ButtonView*      |\n",
       "| ContainerWidget        |   *ContainerView*   |\n",
       "| FloatRangeWidget       |   *FloatSliderView* |\n",
       "|                        |   FloatTextView     |\n",
       "|                        |   ProgressView      |\n",
       "| FloatWidget            |   *FloatTextView*   |\n",
       "| IntRangeWidget         |   *IntSliderView*   |\n",
       "|                        |   IntTextView       |\n",
       "|                        |   ProgressView      |\n",
       "| IntWidget              |   *IntTextView*     |\n",
       "| MulticontainerWidget   |   AccordionView     |\n",
       "|                        |   *TabView*         |\n",
       "| SelectionWidget        |   ToggleButtonsView |\n",
       "|                        |   RadioButtonsView  |\n",
       "|                        |   *DropdownView*    |\n",
+      "|                        |   ListBoxView       |\n",
       "| StringWidget           |   LabelView         |\n",
       "|                        |   TextAreaView      |\n",
       "|                        |   *TextBoxView*     |\n"
      ]
     }
    ],
    "metadata": {}
   }
  ]
 }
  No newline at end of file