Merge pull request #5114 from minrk/empty-button

use non-breaking space for button with no description

IPython/html/static/base/js/utils.js

@@ -1,575 +1,582 b''
 //----------------------------------------------------------------------------
 //  Copyright (C) 2008-2012  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.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // Utilities
 //============================================================================
 IPython.namespace('IPython.utils');
 
 IPython.utils = (function (IPython) {
     "use strict";
     
     IPython.load_extensions = function () {
         // load one or more IPython notebook extensions with requirejs
         
         var extensions = [];
         var extension_names = arguments;
         for (var i = 0; i < extension_names.length; i++) {
             extensions.push("nbextensions/" + arguments[i]);
         }
         
         require(extensions,
             function () {
                 for (var i = 0; i < arguments.length; i++) {
                     var ext = arguments[i];
                     var ext_name = extension_names[i];
                     // success callback
                     console.log("Loaded extension: " + ext_name);
                     if (ext && ext.load_ipython_extension !== undefined) {
                         ext.load_ipython_extension();
                     }
                 }
             },
             function (err) {
                 // failure callback
                 console.log("Failed to load extension(s):", err.requireModules, err);
             }
         );
     };
 
     //============================================================================
     // Cross-browser RegEx Split
     //============================================================================
 
     // This code has been MODIFIED from the code licensed below to not replace the
     // default browser split.  The license is reproduced here.
 
     // see http://blog.stevenlevithan.com/archives/cross-browser-split for more info:
     /*!
      * Cross-Browser Split 1.1.1
      * Copyright 2007-2012 Steven Levithan <stevenlevithan.com>
      * Available under the MIT License
      * ECMAScript compliant, uniform cross-browser split method
      */
 
     /**
      * Splits a string into an array of strings using a regex or string
      * separator. Matches of the separator are not included in the result array.
      * However, if `separator` is a regex that contains capturing groups,
      * backreferences are spliced into the result each time `separator` is
      * matched. Fixes browser bugs compared to the native
      * `String.prototype.split` and can be used reliably cross-browser.
      * @param {String} str String to split.
      * @param {RegExp|String} separator Regex or string to use for separating
      *     the string.
      * @param {Number} [limit] Maximum number of items to include in the result
      *     array.
      * @returns {Array} Array of substrings.
      * @example
      *
      * // Basic use
      * regex_split('a b c d', ' ');
      * // -> ['a', 'b', 'c', 'd']
      *
      * // With limit
      * regex_split('a b c d', ' ', 2);
      * // -> ['a', 'b']
      *
      * // Backreferences in result array
      * regex_split('..word1 word2..', /([a-z]+)(\d+)/i);
      * // -> ['..', 'word', '1', ' ', 'word', '2', '..']
      */
     var regex_split = function (str, separator, limit) {
         // If `separator` is not a regex, use `split`
         if (Object.prototype.toString.call(separator) !== "[object RegExp]") {
             return split.call(str, separator, limit);
         }
         var output = [],
             flags = (separator.ignoreCase ? "i" : "") +
                     (separator.multiline  ? "m" : "") +
                     (separator.extended   ? "x" : "") + // Proposed for ES6
                     (separator.sticky     ? "y" : ""), // Firefox 3+
             lastLastIndex = 0,
             // Make `global` and avoid `lastIndex` issues by working with a copy
             separator = new RegExp(separator.source, flags + "g"),
             separator2, match, lastIndex, lastLength;
         str += ""; // Type-convert
 
         var compliantExecNpcg = typeof(/()??/.exec("")[1]) === "undefined";
         if (!compliantExecNpcg) {
             // Doesn't need flags gy, but they don't hurt
             separator2 = new RegExp("^" + separator.source + "$(?!\\s)", flags);
         }
         /* Values for `limit`, per the spec:
          * If undefined: 4294967295 // Math.pow(2, 32) - 1
          * If 0, Infinity, or NaN: 0
          * If positive number: limit = Math.floor(limit); if (limit > 4294967295) limit -= 4294967296;
          * If negative number: 4294967296 - Math.floor(Math.abs(limit))
          * If other: Type-convert, then use the above rules
          */
         limit = typeof(limit) === "undefined" ?
             -1 >>> 0 : // Math.pow(2, 32) - 1
             limit >>> 0; // ToUint32(limit)
         while (match = separator.exec(str)) {
             // `separator.lastIndex` is not reliable cross-browser
             lastIndex = match.index + match[0].length;
             if (lastIndex > lastLastIndex) {
                 output.push(str.slice(lastLastIndex, match.index));
                 // Fix browsers whose `exec` methods don't consistently return `undefined` for
                 // nonparticipating capturing groups
                 if (!compliantExecNpcg && match.length > 1) {
                     match[0].replace(separator2, function () {
                         for (var i = 1; i < arguments.length - 2; i++) {
                             if (typeof(arguments[i]) === "undefined") {
                                 match[i] = undefined;
                             }
                         }
                     });
                 }
                 if (match.length > 1 && match.index < str.length) {
                     Array.prototype.push.apply(output, match.slice(1));
                 }
                 lastLength = match[0].length;
                 lastLastIndex = lastIndex;
                 if (output.length >= limit) {
                     break;
                 }
             }
             if (separator.lastIndex === match.index) {
                 separator.lastIndex++; // Avoid an infinite loop
             }
         }
         if (lastLastIndex === str.length) {
             if (lastLength || !separator.test("")) {
                 output.push("");
             }
         } else {
             output.push(str.slice(lastLastIndex));
         }
         return output.length > limit ? output.slice(0, limit) : output;
     };
 
     //============================================================================
     // End contributed Cross-browser RegEx Split
     //============================================================================
 
 
     var uuid = function () {
         // http://www.ietf.org/rfc/rfc4122.txt
         var s = [];
         var hexDigits = "0123456789ABCDEF";
         for (var i = 0; i < 32; i++) {
             s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
         }
         s[12] = "4";  // bits 12-15 of the time_hi_and_version field to 0010
         s[16] = hexDigits.substr((s[16] & 0x3) | 0x8, 1);  // bits 6-7 of the clock_seq_hi_and_reserved to 01
 
         var uuid = s.join("");
         return uuid;
     };
 
 
     //Fix raw text to parse correctly in crazy XML
     function xmlencode(string) {
         return string.replace(/\&/g,'&'+'amp;')
             .replace(/</g,'&'+'lt;')
             .replace(/>/g,'&'+'gt;')
             .replace(/\'/g,'&'+'apos;')
             .replace(/\"/g,'&'+'quot;')
             .replace(/`/g,'&'+'#96;');
     }
 
 
     //Map from terminal commands to CSS classes
     var ansi_colormap = {
         "01":"ansibold",
         
         "30":"ansiblack",
         "31":"ansired",
         "32":"ansigreen",
         "33":"ansiyellow",
         "34":"ansiblue",
         "35":"ansipurple",
         "36":"ansicyan",
         "37":"ansigray",
         
         "40":"ansibgblack",
         "41":"ansibgred",
         "42":"ansibggreen",
         "43":"ansibgyellow",
         "44":"ansibgblue",
         "45":"ansibgpurple",
         "46":"ansibgcyan",
         "47":"ansibggray"
     };
     
     function _process_numbers(attrs, numbers) {
         // process ansi escapes
         var n = numbers.shift();
         if (ansi_colormap[n]) {
             if ( ! attrs["class"] ) {
                 attrs["class"] = ansi_colormap[n];
             } else {
                 attrs["class"] += " " + ansi_colormap[n];
             }
         } else if (n == "38" || n == "48") {
             // VT100 256 color or 24 bit RGB
             if (numbers.length < 2) {
                 console.log("Not enough fields for VT100 color", numbers);
                 return;
             }
             
             var index_or_rgb = numbers.shift();
             var r,g,b;
             if (index_or_rgb == "5") {
                 // 256 color
                 var idx = parseInt(numbers.shift());
                 if (idx < 16) {
                     // indexed ANSI
                     // ignore bright / non-bright distinction
                     idx = idx % 8;
                     var ansiclass = ansi_colormap[n[0] + (idx % 8).toString()];
                     if ( ! attrs["class"] ) {
                         attrs["class"] = ansiclass;
                     } else {
                         attrs["class"] += " " + ansiclass;
                     }
                     return;
                 } else if (idx < 232) {
                     // 216 color 6x6x6 RGB
                     idx = idx - 16;
                     b = idx % 6;
                     g = Math.floor(idx / 6) % 6;
                     r = Math.floor(idx / 36) % 6;
                     // convert to rgb
                     r = (r * 51);
                     g = (g * 51);
                     b = (b * 51);
                 } else {
                     // grayscale
                     idx = idx - 231;
                     // it's 1-24 and should *not* include black or white,
                     // so a 26 point scale
                     r = g = b = Math.floor(idx * 256 / 26);
                 }
             } else if (index_or_rgb == "2") {
                 // Simple 24 bit RGB
                 if (numbers.length > 3) {
                     console.log("Not enough fields for RGB", numbers);
                     return;
                 }
                 r = numbers.shift();
                 g = numbers.shift();
                 b = numbers.shift();
             } else {
                 console.log("unrecognized control", numbers);
                 return;
             }
             if (r !== undefined) {
                 // apply the rgb color
                 var line;
                 if (n == "38") {
                     line = "color: ";
                 } else {
                     line = "background-color: ";
                 }
                 line = line + "rgb(" + r + "," + g + "," + b + ");"
                 if ( !attrs["style"] ) {
                     attrs["style"] = line;
                 } else {
                     attrs["style"] += " " + line;
                 }
             }
         }
     }
 
     function ansispan(str) {
         // ansispan function adapted from github.com/mmalecki/ansispan (MIT License)
         // regular ansi escapes (using the table above)
         return str.replace(/\033\[(0?[01]|22|39)?([;\d]+)?m/g, function(match, prefix, pattern) {
             if (!pattern) {
                 // [(01|22|39|)m close spans
                 return "</span>";
             }
             // consume sequence of color escapes
             var numbers = pattern.match(/\d+/g);
             var attrs = {};
             while (numbers.length > 0) {
                 _process_numbers(attrs, numbers);
             }
             
             var span = "<span ";
             for (var attr in attrs) {
                 var value = attrs[attr];
                 span = span + " " + attr + '="' + attrs[attr] + '"';
             }
             return span + ">";
         });
     };
     
     // Transform ANSI color escape codes into HTML <span> tags with css
     // classes listed in the above ansi_colormap object. The actual color used
     // are set in the css file.
     function fixConsole(txt) {
         txt = xmlencode(txt);
         var re = /\033\[([\dA-Fa-f;]*?)m/;
         var opened = false;
         var cmds = [];
         var opener = "";
         var closer = "";
 
         // Strip all ANSI codes that are not color related.  Matches
         // all ANSI codes that do not end with "m".
         var ignored_re = /(?=(\033\[[\d;=]*[a-ln-zA-Z]{1}))\1(?!m)/g;
         txt = txt.replace(ignored_re, "");
         
         // color ansi codes
         txt = ansispan(txt);
         return txt;
     }
 
     // Remove chunks that should be overridden by the effect of
     // carriage return characters
     function fixCarriageReturn(txt) {
         var tmp = txt;
         do {
             txt = tmp;
             tmp = txt.replace(/\r+\n/gm, '\n'); // \r followed by \n --> newline
             tmp = tmp.replace(/^.*\r+/gm, '');  // Other \r --> clear line
         } while (tmp.length < txt.length);
         return txt;
     }
 
     // Locate any URLs and convert them to a anchor tag
     function autoLinkUrls(txt) {
         return txt.replace(/(^|\s)(https?|ftp)(:[^'">\s]+)/gi,
             "$1<a target=\"_blank\" href=\"$2$3\">$2$3</a>");
     }
 
     // some keycodes that seem to be platform/browser independent
     var keycodes = {
                 BACKSPACE:  8,
                 TAB      :  9,
                 ENTER    : 13,
                 SHIFT    : 16,
                 CTRL     : 17,
                 CONTROL  : 17,
                 ALT      : 18,
                 CAPS_LOCK: 20,
                 ESC      : 27,
                 SPACE    : 32,
                 PGUP     : 33,
                 PGDOWN   : 34,
                 END      : 35,
                 HOME     : 36,
                 LEFT_ARROW: 37,
                 LEFTARROW: 37,
                 LEFT     : 37,
                 UP_ARROW : 38,
                 UPARROW  : 38,
                 UP       : 38,
                 RIGHT_ARROW:39,
                 RIGHTARROW:39,
                 RIGHT    : 39,
                 DOWN_ARROW: 40,
                 DOWNARROW: 40,
                 DOWN     : 40,
                 I        : 73,
                 M        : 77,
                 // all three of these keys may be COMMAND on OS X:
                 LEFT_SUPER : 91,
                 RIGHT_SUPER : 92,
                 COMMAND  : 93,
     };
     
     // trigger a key press event
     var press = function (key) {
         var key_press =  $.Event('keydown', {which: key});
         $(document).trigger(key_press);
     }
 
     var press_up = function() { press(keycodes.UP); };
     var press_down = function() { press(keycodes.DOWN); };
 
     var press_ctrl_enter = function() {
         $(document).trigger($.Event('keydown', {which: keycodes.ENTER, ctrlKey: true}));
     };
 
     var press_shift_enter = function() {
         $(document).trigger($.Event('keydown', {which: keycodes.ENTER, shiftKey: true}));
     };
 
     // trigger the ctrl-m shortcut followed by one of our keys
     var press_ghetto = function(key) {
         $(document).trigger($.Event('keydown', {which: keycodes.M, ctrlKey: true}));
         press(key);
     };
 
 
     var points_to_pixels = function (points) {
         // A reasonably good way of converting between points and pixels.
         var test = $('<div style="display: none; width: 10000pt; padding:0; border:0;"></div>');
         $(body).append(test);
         var pixel_per_point = test.width()/10000;
         test.remove();
         return Math.floor(points*pixel_per_point);
     };
     
     var always_new = function (constructor) {
         // wrapper around contructor to avoid requiring `var a = new constructor()`
         // useful for passing constructors as callbacks,
         // not for programmer laziness.
         // from http://programmers.stackexchange.com/questions/118798
         return function () {
             var obj = Object.create(constructor.prototype);
             constructor.apply(obj, arguments);
             return obj;
         };
     };
 
 
     var url_path_join = function () {
         // join a sequence of url components with '/'
         var url = '';
         for (var i = 0; i < arguments.length; i++) {
             if (arguments[i] === '') {
                 continue;
             }
             if (url.length > 0 && url[url.length-1] != '/') {
                 url = url + '/' + arguments[i];
             } else {
                 url = url + arguments[i];
             }
         }
         url = url.replace(/\/\/+/, '/');
         return url;
     };
     
     var parse_url = function (url) {
         // an `a` element with an href allows attr-access to the parsed segments of a URL
         // a = parse_url("http://localhost:8888/path/name#hash")
         // a.protocol = "http:"
         // a.host     = "localhost:8888"
         // a.hostname = "localhost"
         // a.port     = 8888
         // a.pathname = "/path/name"
         // a.hash     = "#hash"
         var a = document.createElement("a");
         a.href = url;
         return a;
     };
     
     var encode_uri_components = function (uri) {
         // encode just the components of a multi-segment uri,
         // leaving '/' separators
         return uri.split('/').map(encodeURIComponent).join('/');
     };
     
     var url_join_encode = function () {
         // join a sequence of url components with '/',
         // encoding each component with encodeURIComponent
         return encode_uri_components(url_path_join.apply(null, arguments));
     };
 
 
     var splitext = function (filename) {
         // mimic Python os.path.splitext
         // Returns ['base', '.ext']
         var idx = filename.lastIndexOf('.');
         if (idx > 0) {
             return [filename.slice(0, idx), filename.slice(idx)];
         } else {
             return [filename, ''];
         }
     };
 
 
+    var escape_html = function (text) {
+        // escape text to HTML
+        return $("<div/>").text(text).html();
+    }
+
+
     var get_body_data = function(key) {
         // get a url-encoded item from body.data and decode it
         // we should never have any encoded URLs anywhere else in code
         // until we are building an actual request
         return decodeURIComponent($('body').data(key));
     };
 
 
     // http://stackoverflow.com/questions/2400935/browser-detection-in-javascript
     var browser = (function() {
         if (typeof navigator === 'undefined') {
             // navigator undefined in node
             return 'None';
         }
         var N= navigator.appName, ua= navigator.userAgent, tem;
         var M= ua.match(/(opera|chrome|safari|firefox|msie)\/?\s*(\.?\d+(\.\d+)*)/i);
         if (M && (tem= ua.match(/version\/([\.\d]+)/i))!= null) M[2]= tem[1];
         M= M? [M[1], M[2]]: [N, navigator.appVersion,'-?'];
         return M;
     })();
 
     // http://stackoverflow.com/questions/11219582/how-to-detect-my-browser-version-and-operating-system-using-javascript
     var platform = (function () {
         if (typeof navigator === 'undefined') {
             // navigator undefined in node
             return 'None';
         }
         var OSName="None";
         if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows";
         if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS";
         if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX";
         if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux";
         return OSName
     })();
 
     var is_or_has = function (a, b) {
         // Is b a child of a or a itself?
         return a.has(b).length !==0 || a.is(b);
     }
 
     var is_focused = function (e) {
         // Is element e, or one of its children focused?
         e = $(e);
         var target = $(document.activeElement);
         if (target.length > 0) {
             if (is_or_has(e, target)) {
                 return true;
             } else {
                 return false;
             }
         } else {
             return false;
         }
     }
 
 
     return {
         regex_split : regex_split,
         uuid : uuid,
         fixConsole : fixConsole,
         keycodes : keycodes,
         press : press,
         press_up : press_up,
         press_down : press_down,
         press_ctrl_enter : press_ctrl_enter,
         press_shift_enter : press_shift_enter,
         press_ghetto : press_ghetto,
         fixCarriageReturn : fixCarriageReturn,
         autoLinkUrls : autoLinkUrls,
         points_to_pixels : points_to_pixels,
         get_body_data : get_body_data,
         parse_url : parse_url,
         url_path_join : url_path_join,
         url_join_encode : url_join_encode,
         encode_uri_components : encode_uri_components,
         splitext : splitext,
+        escape_html : escape_html,
         always_new : always_new,
         browser : browser,
         platform: platform,
         is_or_has : is_or_has,
         is_focused : is_focused
     };
 
 }(IPython));
 

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

@@ -1,125 +1,125 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.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // BoolWidget
 //============================================================================
 
 /**
  * @module IPython
  * @namespace IPython
  **/
 
 define(["notebook/js/widgets/widget"], function(WidgetManager){
 
     var CheckboxView = IPython.DOMWidgetView.extend({
         render : function(){
             // Called when view is rendered.
             this.$el
                 .addClass('widget-hbox-single');
             this.$label = $('<div />')
                 .addClass('widget-hlabel')
                 .appendTo(this.$el)
                 .hide();
             this.$checkbox = $('<input />')
                 .attr('type', 'checkbox')
                 .appendTo(this.$el)
                 .click($.proxy(this.handle_click, this));
 
             this.$el_to_style = this.$checkbox; // Set default element to style
             this.update(); // Set defaults.
         },
 
         handle_click: function() {
             // Handles when the checkbox is clicked.
 
             // Calling model.set will trigger all of the other views of the 
             // model to update.
             var value = this.model.get('value');
             this.model.set('value', ! value, {updated_view: this});
             this.touch();
         },
         
         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.
             this.$checkbox.prop('checked', this.model.get('value'));
 
             if (options === undefined || options.updated_view != this) {
                 var disabled = this.model.get('disabled');
                 this.$checkbox.prop('disabled', disabled);
 
                 var description = this.model.get('description');
-                if (description.length === 0) {
+                if (description.trim().length === 0) {
                     this.$label.hide();
                 } else {
                     this.$label.text(description);
                     this.$label.show();
                 }
             }
             return CheckboxView.__super__.update.apply(this);
         },
         
     });
     WidgetManager.register_widget_view('CheckboxView', CheckboxView);
 
 
     var ToggleButtonView = IPython.DOMWidgetView.extend({
         render : function() {
             // Called when view is rendered.
             var that = this;
             this.setElement($('<button />')
                 .addClass('btn')
                 .attr('type', 'button')
                 .on('click', function (e) {
                     e.preventDefault();
                     that.handle_click();
                 }));
 
             this.update(); // Set defaults.
         },
         
         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 (this.model.get('value')) {
                 this.$el.addClass('active');
             } else {
                 this.$el.removeClass('active');
             }
 
             if (options === undefined || options.updated_view != this) {
 
                 var disabled = this.model.get('disabled');
                 this.$el.prop('disabled', disabled);
 
                 var description = this.model.get('description');
-                if (description.length === 0) {
-                    this.$el.text(' '); // Preserve button height
+                if (description.trim().length === 0) {
+                    this.$el.html("&nbsp;"); // Preserve button height
                 } else {
                     this.$el.text(description);
                 }
             }
             return ToggleButtonView.__super__.update.apply(this);
         },
         
         handle_click: function(e) { 
             // Handles and validates user input.
 
             // Calling model.set will trigger all of the other views of the 
             // model to update.
             var value = this.model.get('value');
             this.model.set('value', ! value, {updated_view: this});
             this.touch();
         },
     });
     WidgetManager.register_widget_view('ToggleButtonView', ToggleButtonView);
 });

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

@@ -1,60 +1,60 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.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // ButtonWidget
 //============================================================================
 
 /**
  * @module IPython
  * @namespace IPython
  **/
 
 define(["notebook/js/widgets/widget"], function(WidgetManager){
 
     var ButtonView = IPython.DOMWidgetView.extend({
         render : function(){
             // Called when view is rendered.
             this.setElement($("<button />")
                 .addClass('btn'));
 
             this.update(); // Set defaults.
         },
         
         update : function(){
             // 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.
             var description = this.model.get('description');
             if (description.length === 0) {
-                this.$el.text(' '); // Preserve button height
+                this.$el.html("&nbsp;"); // Preserve button height
             } else {
                 this.$el.text(description);
             }
             
             if (this.model.get('disabled')) {
                 this.$el.attr('disabled','disabled');
             } else {
                 this.$el.removeAttr('disabled');
             }
 
             return ButtonView.__super__.update.apply(this);
         },
 
         events: {
             // Dictionary of events and their handlers.
             'click': '_handle_click',
         },
         
         _handle_click: function(){
             // Handles when the button is clicked.
             this.send({event: 'click'});
         },
     });
     WidgetManager.register_widget_view('ButtonView', ButtonView);
 });

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

@@ -1,282 +1,282 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.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // ContainerWidget
 //============================================================================
 
 /**
  * @module IPython
  * @namespace IPython
  **/
 
 define(["notebook/js/widgets/widget"], function(WidgetManager) {
 
     var ContainerView = IPython.DOMWidgetView.extend({
         render: function(){
             // Called when view is rendered.
             this.$el.addClass('widget-container')
                 .addClass('vbox');
             this.children={};
             this.update_children([], this.model.get('_children'));
             this.model.on('change:_children', function(model, value, options) {
                 this.update_children(model.previous('_children'), value);
             }, this);
             this.update();
         },
         
         update_children: function(old_list, new_list) {
             // Called when the children list changes.
             this.do_diff(old_list,
                 new_list, 
                 $.proxy(this.remove_child_model, this),
                 $.proxy(this.add_child_model, this));
         },
 
         remove_child_model: function(model) {
             // Called when a model is removed from the children list.
             this.child_views[model.id].remove();
             this.delete_child_view(model);
         },
 
         add_child_model: function(model) {
             // Called when a model is added to the children list.
             var view = this.create_child_view(model);
             this.$el.append(view.$el);
         },
         
         update: function(){
             // 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.
             return ContainerView.__super__.update.apply(this);
         },
     });
     
     WidgetManager.register_widget_view('ContainerView', ContainerView);
     
     var PopupView = IPython.DOMWidgetView.extend({
         render: function(){
             // Called when view is rendered.
             var that = this;
             this.children={};
             
             this.$el.on("remove", function(){
                     that.$window.remove();
                 });
             this.$window = $('<div />')
                 .addClass('modal widget-modal')
                 .appendTo($('#notebook-container'))
                 .mousedown(function(){
                     that.bring_to_front();
                 });
 
             // Set the elements array since the this.$window element is not child
             // of this.$el and the parent widget manager or other widgets may
             // need to know about all of the top-level widgets.  The IPython
             // widget manager uses this to register the elements with the
             // keyboard manager.
             this.additional_elements = [this.$window]
 
             this.$title_bar = $('<div />')
                 .addClass('popover-title')
                 .appendTo(this.$window)
                 .mousedown(function(){
                     that.bring_to_front();
                 });
             this.$close = $('<button />')
                 .addClass('close icon-remove')
                 .css('margin-left', '5px')
                 .appendTo(this.$title_bar)
                 .click(function(){
                     that.hide();
                     event.stopPropagation();
                 });
             this.$minimize = $('<button />')
                 .addClass('close icon-arrow-down')
                 .appendTo(this.$title_bar)
                 .click(function(){
                     that.popped_out = !that.popped_out;
                     if (!that.popped_out) {
                         that.$minimize
                             .removeClass('icon-arrow-down')
                             .addClass('icon-arrow-up');
                             
                         that.$window
                             .draggable('destroy')
                             .resizable('destroy')
                             .removeClass('widget-modal modal')
                             .addClass('docked-widget-modal')
                             .detach()
                             .insertBefore(that.$show_button);
                         that.$show_button.hide();
                         that.$close.hide();
                     } else {
                         that.$minimize
                             .addClass('icon-arrow-down')
                             .removeClass('icon-arrow-up');
 
                         that.$window
                             .removeClass('docked-widget-modal')
                             .addClass('widget-modal modal')
                             .detach()
                             .appendTo($('#notebook-container'))
                             .draggable({handle: '.popover-title', snap: '#notebook, .modal', snapMode: 'both'})
                             .resizable()
                             .children('.ui-resizable-handle').show();
                         that.show();
                         that.$show_button.show();
                         that.$close.show();
                     }
                     event.stopPropagation();
                 });
             this.$title = $('<div />')
                 .addClass('widget-modal-title')
-                .text(' ')
+                .html("&nbsp;")
                 .appendTo(this.$title_bar);
             this.$body = $('<div />')
                 .addClass('modal-body')
                 .addClass('widget-modal-body')
                 .addClass('widget-container')
                 .addClass('vbox')
                 .appendTo(this.$window);
             
             this.$show_button = $('<button />')
-                .text(' ')
+                .html("&nbsp;")
                 .addClass('btn btn-info widget-modal-show')
                 .appendTo(this.$el)
                 .click(function(){
                     that.show();
                 });
             
             this.$window.draggable({handle: '.popover-title', snap: '#notebook, .modal', snapMode: 'both'});
             this.$window.resizable();
             this.$window.on('resize', function(){
                 that.$body.outerHeight(that.$window.innerHeight() - that.$title_bar.outerHeight());
             });
 
             this.$el_to_style = this.$body;
             this._shown_once = false;
             this.popped_out = true;
 
             this.update_children([], this.model.get('_children'));
             this.model.on('change:_children', function(model, value, options) {
                 this.update_children(model.previous('_children'), value);
             }, this);
             this.update();
         },
         
         hide: function() {
             // Called when the modal hide button is clicked.
             this.$window.hide();
             this.$show_button.removeClass('btn-info');
         },
         
         show: function() {
             // Called when the modal show button is clicked.
             this.$show_button.addClass('btn-info');
             this.$window.show();
             if (this.popped_out) {
                 this.$window.css("positon", "absolute");
                 this.$window.css("top", "0px");
                 this.$window.css("left", Math.max(0, (($('body').outerWidth() - this.$window.outerWidth()) / 2) + 
                     $(window).scrollLeft()) + "px");
                 this.bring_to_front();
             }
         },
         
         bring_to_front: function() {
             // Make the modal top-most, z-ordered about the other modals.
             var $widget_modals = $(".widget-modal");
             var max_zindex = 0;
             $widget_modals.each(function (index, el){
                 max_zindex = Math.max(max_zindex, parseInt($(el).css('z-index')));
             });
             
             // Start z-index of widget modals at 2000
             max_zindex = Math.max(max_zindex, 2000);
 
             $widget_modals.each(function (index, el){
                 $el = $(el);
                 if (max_zindex == parseInt($el.css('z-index'))) {
                     $el.css('z-index', max_zindex - 1);
                 }
             });
             this.$window.css('z-index', max_zindex);
         },
         
         update_children: function(old_list, new_list) {
             // Called when the children list is modified.
             this.do_diff(old_list, 
                 new_list, 
                 $.proxy(this.remove_child_model, this),
                 $.proxy(this.add_child_model, this));
         },
 
         remove_child_model: function(model) {
             // Called when a child is removed from children list.
             this.child_views[model.id].remove();
             this.delete_child_view(model);
         },
 
         add_child_model: function(model) {
             // Called when a child is added to children list.
             var view = this.create_child_view(model);
             this.$body.append(view.$el);
         },
         
         update: function(){
             // 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.
             var description = this.model.get('description');
-            if (description.length === 0) {
-                this.$title.text(' '); // Preserve title height
+            if (description.trim().length === 0) {
+                this.$title.html("&nbsp;"); // Preserve title height
             } else {
                 this.$title.text(description);
             }
             
             var button_text = this.model.get('button_text');
-            if (button_text.length === 0) {
-                this.$show_button.text(' '); // Preserve button height
+            if (button_text.trim().length === 0) {
+                this.$show_button.html("&nbsp;"); // Preserve button height
             } else {
                 this.$show_button.text(button_text);
             }
             
             if (!this._shown_once) {
                 this._shown_once = true;
                 this.show();
             }
             
             return PopupView.__super__.update.apply(this);
         },
         
         _get_selector_element: function(selector) {
             // Get an element view a 'special' jquery selector.  (see widget.js)
             //
             // Since the modal actually isn't within the $el in the DOM, we need to extend
             // the selector logic to allow the user to set css on the modal if need be.
             // The convention used is:
             // "modal" - select the modal div
             // "modal [selector]" - select element(s) within the modal div.
             // "[selector]" - select elements within $el
             // "" - select the $el_to_style
             if (selector.substring(0, 5) == 'modal') {
                 if (selector == 'modal') {
                     return this.$window;
                 } else {
                     return this.$window.find(selector.substring(6));
                 }
             } else {
                 return PopupView.__super__._get_selector_element.apply(this, [selector]);
             }
         },
     });
     WidgetManager.register_widget_view('PopupView', PopupView);
 });

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

@@ -1,376 +1,382 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/widgets/widget"], function(WidgetManager){
 
     var DropdownView = 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('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')
-                .text(' ')
+                .html("&nbsp;")
                 .appendTo(this.$buttongroup);
             this.$dropbutton = $('<button />')
                 .addClass('btn')
                 .addClass('dropdown-toggle')
                 .addClass('widget-combo-carrot-btn')
                 .attr('data-toggle', 'dropdown')
                 .append($('<span />').addClass("caret"))
                 .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_name');
-                if (selected_item_text.length === 0) {
-                    this.$droplabel.text(' ');
+                if (selected_item_text.trim().length === 0) {
+                    this.$droplabel.html("&nbsp;");
                 } else {
                     this.$droplabel.text(selected_item_text);
                 }
                 
                 var items = this.model.get('value_names');
                 var $replace_droplist = $('<ul />')
                     .addClass('dropdown-menu');
                 var that = this;
                 _.each(items, function(item, i) {
                     var item_button = $('<a href="#"/>')
                         .text(item)
                         .on('click', $.proxy(that.handle_click, that));
                     $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.text(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_name', $(e.target).text(), {updated_view: this});
             this.touch();
         },
         
     });
     WidgetManager.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('value_names');
                 var disabled = this.model.get('disabled');
                 var that = this;
                 _.each(items, function(item, index) {
                     var item_query = ' :input[value="' + item + '"]';
                     if (that.$el.find(item_query).length === 0) {
                         var $label = $('<label />')
                             .addClass('radio')
                             .text(item)
                             .appendTo(that.$container);
                         
                         $('<input />')
                             .attr('type', 'radio')
                             .addClass(that.model)
                             .val(item)
                             .prependTo($label)
                             .on('click', $.proxy(that.handle_click, that));
                     }
                     
                     var $item_element = that.$container.find(item_query);
                     if (that.model.get('value_name') == item) {
                         $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;
                     _.each(items, function(item, index) {
                         if (item == value) {
                             found = true;
                             return false;
                         }
                     });
                     
                     if (!found) {
                         $(obj).parent().remove();
                     }
                 });
 
                 var description = this.model.get('description');
                 if (description.length === 0) {
                     this.$label.hide();
                 } else {
                     this.$label.text(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_name', $(e.target).val(), {updated_view: this});
             this.touch();
         },
     });
     WidgetManager.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('value_names');
                 var disabled = this.model.get('disabled');
                 var that = this;
+                var item_html;
                 _.each(items, function(item, index) {
-                   var item_query = ' :contains("' + item + '")';
-                    if (that.$buttongroup.find(item_query).length === 0) {
-                        $('<button />')
+                    if (item.trim().length == 0) {
+                        item_html = "&nbsp;";
+                    } else {
+                        item_html = IPython.utils.escape_html(item);
+                    }
+                    var item_query = '[data-value="' + item + '"]';
+                    var $item_element = that.$buttongroup.find(item_query);
+                    if (!$item_element.length) {
+                        $item_element = $('<button/>')
                             .attr('type', 'button')
                             .addClass('btn')
-                            .text(item)
+                            .html(item_html)
                             .appendTo(that.$buttongroup)
+                            .attr('data-value', item)
                             .on('click', $.proxy(that.handle_click, that));
                     }
-                    
-                    var $item_element = that.$buttongroup.find(item_query);
                     if (that.model.get('value_name') == item) {
                         $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).text();
+                    var value = $(obj).data('value');
                     var found = false;
                     _.each(items, function(item, index) {
                         if (item == value) {
                             found = true;
                             return false;
                         }
                     });
 
                     if (!found) {
                         $(obj).remove();
                     }
                 });
 
                 var description = this.model.get('description');
                 if (description.length === 0) {
                     this.$label.hide();
                 } else {
                     this.$label.text(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_name', $(e.target).text(), {updated_view: this});
+            this.model.set('value_name', $(e.target).data('value'), {updated_view: this});
             this.touch();
         },    
     });
     WidgetManager.register_widget_view('ToggleButtonsView', ToggleButtonsView);
 
 
     var SelectView = 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('value_names');
                 var that = this;
                 _.each(items, function(item, index) {
                    var item_query = ' :contains("' + item + '")';
                     if (that.$listbox.find(item_query).length === 0) {
                         $('<option />')
                             .text(item)
                             .attr('value_name', item)
                             .appendTo(that.$listbox)
                             .on('click', $.proxy(that.handle_click, that));
                     } 
                 });
 
                 // Select the correct element
                 this.$listbox.val(this.model.get('value_name'));
                 
                 // 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).text();
                     var found = false;
                     _.each(items, function(item, index) {
                         if (item == value) {
                             found = true;
                             return false;
                         }
                     });
                     
                     if (!found) {
                         $(obj).remove();
                     }
                 });
 
                 var description = this.model.get('description');
                 if (description.length === 0) {
                     this.$label.hide();
                 } else {
                     this.$label.text(description);
                     this.$label.show();
                 }
             }
             return SelectView.__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_name', $(e.target).text(), {updated_view: this});
             this.touch();
         },    
     });
     WidgetManager.register_widget_view('SelectView', SelectView);
 });