moving typeset to utils, usage in cell and outputarea

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

@@ -1,808 +1,836 b''
 // Copyright (c) IPython Development Team.
 // Distributed under the terms of the Modified BSD License.
 
 define([
     'base/js/namespace',
     'jquery',
     'codemirror/lib/codemirror',
 ], function(IPython, $, CodeMirror){
     "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)
         var is_open = false;
         return str.replace(/\033\[(0?[01]|22|39)?([;\d]+)?m/g, function(match, prefix, pattern) {
             if (!pattern) {
                 // [(01|22|39|)m close spans
                 if (is_open) {
                     is_open = false;
                     return "</span>";
                 } else {
                     return "";
                 }
             } else {
                 is_open = true;
 
                 // 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>");
     }
 
     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 url_path_split = function (path) {
         /**
          * Like os.path.split for URLs.
          * Always returns two strings, the directory path and the base filename
          */
         
         var idx = path.lastIndexOf('/');
         if (idx === -1) {
             return ['', path];
         } else {
             return [ path.slice(0, idx), path.slice(idx + 1) ];
         }
     };
     
     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));
     };
     
     var to_absolute_cursor_pos = function (cm, cursor) {
         /**
          * get the absolute cursor position from CodeMirror's col, ch
          */
         if (!cursor) {
             cursor = cm.getCursor();
         }
         var cursor_pos = cursor.ch;
         for (var i = 0; i < cursor.line; i++) {
             cursor_pos += cm.getLine(i).length + 1;
         }
         return cursor_pos;
     };
     
     var from_absolute_cursor_pos = function (cm, cursor_pos) {
         /**
          * turn absolute cursor postion into CodeMirror col, ch cursor
          */
         var i, line;
         var offset = 0;
         for (i = 0, line=cm.getLine(i); line !== undefined; i++, line=cm.getLine(i)) {
             if (offset + line.length < cursor_pos) {
                 offset += line.length + 1;
             } else {
                 return {
                     line : i,
                     ch : cursor_pos - offset,
                 };
             }
         }
         // reached end, return endpoint
         return {
             ch : line.length - 1,
             line : i - 1,
         };
     };
     
     // 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;
         }
     };
     
     var mergeopt = function(_class, options, overwrite){
         options = options || {};
         overwrite = overwrite || {};
         return $.extend(true, {}, _class.options_default, options, overwrite);
     };
     
     var ajax_error_msg = function (jqXHR) {
         /**
          * Return a JSON error message if there is one,
          * otherwise the basic HTTP status text.
          */
         if (jqXHR.responseJSON && jqXHR.responseJSON.traceback) {
             return jqXHR.responseJSON.traceback;
         } else if (jqXHR.responseJSON && jqXHR.responseJSON.message) {
             return jqXHR.responseJSON.message;
         } else {
             return jqXHR.statusText;
         }
     };
     var log_ajax_error = function (jqXHR, status, error) {
         /**
          * log ajax failures with informative messages
          */
         var msg = "API request failed (" + jqXHR.status + "): ";
         console.log(jqXHR);
         msg += ajax_error_msg(jqXHR);
         console.log(msg);
     };
     
     var requireCodeMirrorMode = function (mode, callback, errback) {
         /**
          * load a mode with requirejs
          */
         if (typeof mode != "string") mode = mode.name;
         if (CodeMirror.modes.hasOwnProperty(mode)) {
             callback(CodeMirror.modes.mode);
             return;
         }
         require([
                 // might want to use CodeMirror.modeURL here
                 ['codemirror/mode', mode, mode].join('/'),
             ], callback, errback
         );
     };
     
     /** Error type for wrapped XHR errors. */
     var XHR_ERROR = 'XhrError';
     
     /**
      * Wraps an AJAX error as an Error object.
      */
     var wrap_ajax_error = function (jqXHR, status, error) {
         var wrapped_error = new Error(ajax_error_msg(jqXHR));
         wrapped_error.name =  XHR_ERROR;
         // provide xhr response
         wrapped_error.xhr = jqXHR;
         wrapped_error.xhr_status = status;
         wrapped_error.xhr_error = error;
         return wrapped_error;
     };
     
     var promising_ajax = function(url, settings) {
         /**
          * Like $.ajax, but returning an ES6 promise. success and error settings
          * will be ignored.
          */
         return new Promise(function(resolve, reject) {
             settings.success = function(data, status, jqXHR) {
                 resolve(data);
             };
             settings.error = function(jqXHR, status, error) {
                 log_ajax_error(jqXHR, status, error);
                 reject(wrap_ajax_error(jqXHR, status, error));
             };
             $.ajax(url, settings);
         });
     };
 
     var WrappedError = function(message, error){
         /**
          * Wrappable Error class
          *
          * The Error class doesn't actually act on `this`.  Instead it always
          * returns a new instance of Error.  Here we capture that instance so we
          * can apply it's properties to `this`.
          */
         var tmp = Error.apply(this, [message]);
 
         // Copy the properties of the error over to this.
         var properties = Object.getOwnPropertyNames(tmp);
         for (var i = 0; i < properties.length; i++) {
             this[properties[i]] = tmp[properties[i]];
         }
 
         // Keep a stack of the original error messages.
         if (error instanceof WrappedError) {
             this.error_stack = error.error_stack;
         } else {
             this.error_stack = [error];
         }
         this.error_stack.push(tmp);
 
         return this;
     };
 
     WrappedError.prototype = Object.create(Error.prototype, {});
 
 
     var load_class = function(class_name, module_name, registry) {
         /**
          * Tries to load a class
          *
          * Tries to load a class from a module using require.js, if a module 
          * is specified, otherwise tries to load a class from the global 
          * registry, if the global registry is provided.
          */
         return new Promise(function(resolve, reject) {
 
             // Try loading the view module using require.js
             if (module_name) {
                 require([module_name], function(module) {
                     if (module[class_name] === undefined) {
                         reject(new Error('Class '+class_name+' not found in module '+module_name));
                     } else {
                         resolve(module[class_name]);
                     }
                 }, reject);
             } else {
                 if (registry && registry[class_name]) {
                     resolve(registry[class_name]);
                 } else {
                     reject(new Error('Class '+class_name+' not found in registry '));
                 }
             }
         });
     };
 
     var resolve_promises_dict = function(d) {
         /**
          * Resolve a promiseful dictionary.
          * Returns a single Promise.
          */
         var keys = Object.keys(d);
         var values = [];
         keys.forEach(function(key) {
             values.push(d[key]);
         });
         return Promise.all(values).then(function(v) {
             d = {};
             for(var i=0; i<keys.length; i++) {
                 d[keys[i]] = v[i];
             }
             return d;
         });
     };
 
     var WrappedError = function(message, error){
         /**
          * Wrappable Error class
          *
          * The Error class doesn't actually act on `this`.  Instead it always
          * returns a new instance of Error.  Here we capture that instance so we
          * can apply it's properties to `this`.
          */
         var tmp = Error.apply(this, [message]);
 
         // Copy the properties of the error over to this.
         var properties = Object.getOwnPropertyNames(tmp);
         for (var i = 0; i < properties.length; i++) {
             this[properties[i]] = tmp[properties[i]];
         }
 
         // Keep a stack of the original error messages.
         if (error instanceof WrappedError) {
             this.error_stack = error.error_stack;
         } else {
             this.error_stack = [error];
         }
         this.error_stack.push(tmp);
 
         return this;
     };
 
     WrappedError.prototype = Object.create(Error.prototype, {});
 
     var reject = function(message, log) {
         /**
          * Creates a wrappable Promise rejection function.
          * 
          * Creates a function that returns a Promise.reject with a new WrappedError
          * that has the provided message and wraps the original error that 
          * caused the promise to reject.
          */
         return function(error) { 
             var wrapped_error = new WrappedError(message, error);
             if (log) console.error(wrapped_error); 
             return Promise.reject(wrapped_error); 
         };
     };
 
+    var typeset = function(element, text) {
+        /**
+         * Apply MathJax rendering to an element, and optionally set its text
+         *
+         * If MathJax is not available, make no changes.
+         *
+         * Returns the output any number of typeset elements, or undefined if
+         * MathJax was not available.
+         *
+         * Parameters
+         * ----------
+         * element: Node, NodeList, or jQuery selection
+         * text: option string
+         */
+        if(!window.MathJax){
+            return;
+        }
+        var $el = element.jquery ? element : $(element);
+        if(arguments.length > 1){
+            $el.text(text);
+        }
+        return $el.map(function(){
+            // MathJax takes a DOM node: $.map makes `this` the context
+            return MathJax.Hub.Queue(["Typeset", MathJax.Hub, this]);
+        });
+    };
+
     var utils = {
         regex_split : regex_split,
         uuid : uuid,
         fixConsole : fixConsole,
         fixCarriageReturn : fixCarriageReturn,
         autoLinkUrls : autoLinkUrls,
         points_to_pixels : points_to_pixels,
         get_body_data : get_body_data,
         parse_url : parse_url,
         url_path_split : url_path_split,
         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,
         to_absolute_cursor_pos : to_absolute_cursor_pos,
         from_absolute_cursor_pos : from_absolute_cursor_pos,
         browser : browser,
         platform: platform,
         is_or_has : is_or_has,
         is_focused : is_focused,
         mergeopt: mergeopt,
         ajax_error_msg : ajax_error_msg,
         log_ajax_error : log_ajax_error,
         requireCodeMirrorMode : requireCodeMirrorMode,
         XHR_ERROR : XHR_ERROR,
         wrap_ajax_error : wrap_ajax_error,
         promising_ajax : promising_ajax,
         WrappedError: WrappedError,
         load_class: load_class,
         resolve_promises_dict: resolve_promises_dict,
         reject: reject,
+        typeset: typeset,
     };
 
     // Backwards compatability.
     IPython.utils = utils;
     
     return utils;
 }); 

IPython/html/static/notebook/js/cell.js

@@ -1,681 +1,678 b''
 // Copyright (c) IPython Development Team.
 // Distributed under the terms of the Modified BSD License.
 
 /**
  *
  *
  * @module cell
  * @namespace cell
  * @class Cell
  */
 
 
 define([
     'base/js/namespace',
     'jquery',
     'base/js/utils',
     'codemirror/lib/codemirror',
     'codemirror/addon/edit/matchbrackets',
     'codemirror/addon/edit/closebrackets',
     'codemirror/addon/comment/comment'
 ], function(IPython, $, utils, CodeMirror, cm_match, cm_closeb, cm_comment) {
     // TODO: remove IPython dependency here 
     "use strict";
 
     var Cell = function (options) {
         /* Constructor
          *
          * The Base `Cell` class from which to inherit.
          * @constructor
          * @param:
          *  options: dictionary
          *      Dictionary of keyword arguments.
          *          events: $(Events) instance
          *          config: dictionary
          *          keyboard_manager: KeyboardManager instance
          */
         options = options || {};
         this.keyboard_manager = options.keyboard_manager;
         this.events = options.events;
         var config = utils.mergeopt(Cell, options.config);
         // superclass default overwrite our default
         
         this.placeholder = config.placeholder || '';
         this.read_only = config.cm_config.readOnly;
         this.selected = false;
         this.rendered = false;
         this.mode = 'command';
 
         // Metadata property
         var that = this;
         this._metadata = {};
         Object.defineProperty(this, 'metadata', {
             get: function() { return that._metadata; },
             set: function(value) {
                 that._metadata = value;
                 if (that.celltoolbar) {
                     that.celltoolbar.rebuild();
                 }
             }
         });
 
         // load this from metadata later ?
         this.user_highlight = 'auto';
         this.cm_config = config.cm_config;
         this.cell_id = utils.uuid();
         this._options = config;
 
         // For JS VM engines optimization, attributes should be all set (even
         // to null) in the constructor, and if possible, if different subclass
         // have new attributes with same name, they should be created in the
         // same order. Easiest is to create and set to null in parent class.
 
         this.element = null;
         this.cell_type = this.cell_type || null;
         this.code_mirror = null;
 
         this.create_element();
         if (this.element !== null) {
             this.element.data("cell", this);
             this.bind_events();
             this.init_classes();
         }
     };
 
     Cell.options_default = {
         cm_config : {
             indentUnit : 4,
             readOnly: false,
             theme: "default",
             extraKeys: {
                 "Cmd-Right":"goLineRight",
                 "End":"goLineRight",
                 "Cmd-Left":"goLineLeft"
             }
         }
     };
     
     // FIXME: Workaround CM Bug #332 (Safari segfault on drag)
     // by disabling drag/drop altogether on Safari
     // https://github.com/codemirror/CodeMirror/issues/332    
     if (utils.browser[0] == "Safari") {
         Cell.options_default.cm_config.dragDrop = false;
     }
 
     /**
      * Empty. Subclasses must implement create_element.
      * This should contain all the code to create the DOM element in notebook
      * and will be called by Base Class constructor.
      * @method create_element
      */
     Cell.prototype.create_element = function () {
     };
 
     Cell.prototype.init_classes = function () {
         /**
          * Call after this.element exists to initialize the css classes
          * related to selected, rendered and mode.
          */
         if (this.selected) {
             this.element.addClass('selected');
         } else {
             this.element.addClass('unselected');
         }
         if (this.rendered) {
             this.element.addClass('rendered');
         } else {
             this.element.addClass('unrendered');
         }
         if (this.mode === 'edit') {
             this.element.addClass('edit_mode');
         } else {
             this.element.addClass('command_mode');
         }
     };
 
     /**
      * Subclasses can implement override bind_events.
      * Be carefull to call the parent method when overwriting as it fires event.
      * this will be triggerd after create_element in constructor.
      * @method bind_events
      */
     Cell.prototype.bind_events = function () {
         var that = this;
         // We trigger events so that Cell doesn't have to depend on Notebook.
         that.element.click(function (event) {
             if (!that.selected) {
                 that.events.trigger('select.Cell', {'cell':that});
             }
         });
         that.element.focusin(function (event) {
             if (!that.selected) {
                 that.events.trigger('select.Cell', {'cell':that});
             }
         });
         if (this.code_mirror) {
             this.code_mirror.on("change", function(cm, change) {
                 that.events.trigger("set_dirty.Notebook", {value: true});
             });
         }
         if (this.code_mirror) {
             this.code_mirror.on('focus', function(cm, change) {
                 that.events.trigger('edit_mode.Cell', {cell: that});
             });
         }
         if (this.code_mirror) {
             this.code_mirror.on('blur', function(cm, change) {
                 that.events.trigger('command_mode.Cell', {cell: that});
             });
         }
 
         this.element.dblclick(function () {
             if (that.selected === false) {
                 this.events.trigger('select.Cell', {'cell':that});
             }
             var cont = that.unrender();
             if (cont) {
                 that.focus_editor();
             }
         });
     };
     
     /**
      * This method gets called in CodeMirror's onKeyDown/onKeyPress
      * handlers and is used to provide custom key handling.
      *
      * To have custom handling, subclasses should override this method, but still call it
      * in order to process the Edit mode keyboard shortcuts.
      *
      * @method handle_codemirror_keyevent
      * @param {CodeMirror} editor - The codemirror instance bound to the cell
      * @param {event} event - key press event which either should or should not be handled by CodeMirror
      * @return {Boolean} `true` if CodeMirror should ignore the event, `false` Otherwise
      */
     Cell.prototype.handle_codemirror_keyevent = function (editor, event) {
         var shortcuts = this.keyboard_manager.edit_shortcuts;
 
         var cur = editor.getCursor();
         if((cur.line !== 0 || cur.ch !==0) && event.keyCode === 38){
             event._ipkmIgnore = true;
         }
         var nLastLine = editor.lastLine();
         if ((event.keyCode === 40) &&
              ((cur.line !== nLastLine) ||
                (cur.ch !== editor.getLineHandle(nLastLine).text.length))
            ) {
             event._ipkmIgnore = true;
         }
         // if this is an edit_shortcuts shortcut, the global keyboard/shortcut
         // manager will handle it
         if (shortcuts.handles(event)) {
             return true;
         }
         
         return false;
     };
 
 
     /**
      * Triger typsetting of math by mathjax on current cell element
      * @method typeset
      */
     Cell.prototype.typeset = function () {
-        if (window.MathJax) {
-            var cell_math = this.element.get(0);
-            MathJax.Hub.Queue(["Typeset", MathJax.Hub, cell_math]);
-        }
+        utils.typeset(this.element);
     };
 
     /**
      * handle cell level logic when a cell is selected
      * @method select
      * @return is the action being taken
      */
     Cell.prototype.select = function () {
         if (!this.selected) {
             this.element.addClass('selected');
             this.element.removeClass('unselected');
             this.selected = true;
             return true;
         } else {
             return false;
         }
     };
 
     /**
      * handle cell level logic when a cell is unselected
      * @method unselect
      * @return is the action being taken
      */
     Cell.prototype.unselect = function () {
         if (this.selected) {
             this.element.addClass('unselected');
             this.element.removeClass('selected');
             this.selected = false;
             return true;
         } else {
             return false;
         }
     };
 
     /**
      * should be overritten by subclass
      * @method execute
      */
     Cell.prototype.execute = function () {
         return;
     };
 
     /**
      * handle cell level logic when a cell is rendered
      * @method render
      * @return is the action being taken
      */
     Cell.prototype.render = function () {
         if (!this.rendered) {
             this.element.addClass('rendered');
             this.element.removeClass('unrendered');
             this.rendered = true;
             return true;
         } else {
             return false;
         }
     };
 
     /**
      * handle cell level logic when a cell is unrendered
      * @method unrender
      * @return is the action being taken
      */
     Cell.prototype.unrender = function () {
         if (this.rendered) {
             this.element.addClass('unrendered');
             this.element.removeClass('rendered');
             this.rendered = false;
             return true;
         } else {
             return false;
         }
     };
 
     /**
      * Delegates keyboard shortcut handling to either IPython keyboard
      * manager when in command mode, or CodeMirror when in edit mode
      *
      * @method handle_keyevent
      * @param {CodeMirror} editor - The codemirror instance bound to the cell
      * @param {event} - key event to be handled
      * @return {Boolean} `true` if CodeMirror should ignore the event, `false` Otherwise
      */
     Cell.prototype.handle_keyevent = function (editor, event) {
         if (this.mode === 'command') {
             return true;
         } else if (this.mode === 'edit') {
             return this.handle_codemirror_keyevent(editor, event);
         }
     };
 
     /**
      * @method at_top
      * @return {Boolean}
      */
     Cell.prototype.at_top = function () {
         var cm = this.code_mirror;
         var cursor = cm.getCursor();
         if (cursor.line === 0 && cursor.ch === 0) {
             return true;
         }
         return false;
     };
 
     /**
      * @method at_bottom
      * @return {Boolean}
      * */
     Cell.prototype.at_bottom = function () {
         var cm = this.code_mirror;
         var cursor = cm.getCursor();
         if (cursor.line === (cm.lineCount()-1) && cursor.ch === cm.getLine(cursor.line).length) {
             return true;
         }
         return false;
     };
 
     /**
      * enter the command mode for the cell
      * @method command_mode
      * @return is the action being taken
      */
     Cell.prototype.command_mode = function () {
         if (this.mode !== 'command') {
             this.element.addClass('command_mode');
             this.element.removeClass('edit_mode');
             this.mode = 'command';
             return true;
         } else {
             return false;
         }
     };
 
     /**
      * enter the edit mode for the cell
      * @method command_mode
      * @return is the action being taken
      */
     Cell.prototype.edit_mode = function () {
         if (this.mode !== 'edit') {
             this.element.addClass('edit_mode');
             this.element.removeClass('command_mode');
             this.mode = 'edit';
             return true;
         } else {
             return false;
         }
     };
     
     /**
      * Focus the cell in the DOM sense
      * @method focus_cell
      */
     Cell.prototype.focus_cell = function () {
         this.element.focus();
     };
 
     /**
      * Focus the editor area so a user can type
      *
      * NOTE: If codemirror is focused via a mouse click event, you don't want to
      * call this because it will cause a page jump.
      * @method focus_editor
      */
     Cell.prototype.focus_editor = function () {
         this.refresh();
         this.code_mirror.focus();
     };
 
     /**
      * Refresh codemirror instance
      * @method refresh
      */
     Cell.prototype.refresh = function () {
         if (this.code_mirror) {
             this.code_mirror.refresh();
         }
     };
 
     /**
      * should be overritten by subclass
      * @method get_text
      */
     Cell.prototype.get_text = function () {
     };
 
     /**
      * should be overritten by subclass
      * @method set_text
      * @param {string} text
      */
     Cell.prototype.set_text = function (text) {
     };
 
     /**
      * should be overritten by subclass
      * serialise cell to json.
      * @method toJSON
      **/
     Cell.prototype.toJSON = function () {
         var data = {};
         // deepcopy the metadata so copied cells don't share the same object
         data.metadata = JSON.parse(JSON.stringify(this.metadata));
         data.cell_type = this.cell_type;
         return data;
     };
 
     /**
      * should be overritten by subclass
      * @method fromJSON
      **/
     Cell.prototype.fromJSON = function (data) {
         if (data.metadata !== undefined) {
             this.metadata = data.metadata;
         }
     };
 
 
     /**
      * can the cell be split into two cells (false if not deletable)
      * @method is_splittable
      **/
     Cell.prototype.is_splittable = function () {
         return this.is_deletable();
     };
 
 
     /**
      * can the cell be merged with other cells (false if not deletable)
      * @method is_mergeable
      **/
     Cell.prototype.is_mergeable = function () {
         return this.is_deletable();
     };
 
     /**
      * is the cell deletable? only false (undeletable) if
      * metadata.deletable is explicitly false -- everything else
      * counts as true
      *
      * @method is_deletable
      **/
     Cell.prototype.is_deletable = function () {
         if (this.metadata.deletable === false) {
             return false;
         }
         return true;
     };
 
     /**
      * @return {String} - the text before the cursor
      * @method get_pre_cursor
      **/
     Cell.prototype.get_pre_cursor = function () {
         var cursor = this.code_mirror.getCursor();
         var text = this.code_mirror.getRange({line:0, ch:0}, cursor);
         text = text.replace(/^\n+/, '').replace(/\n+$/, '');
         return text;
     };
 
 
     /**
      * @return {String} - the text after the cursor
      * @method get_post_cursor
      **/
     Cell.prototype.get_post_cursor = function () {
         var cursor = this.code_mirror.getCursor();
         var last_line_num = this.code_mirror.lineCount()-1;
         var last_line_len = this.code_mirror.getLine(last_line_num).length;
         var end = {line:last_line_num, ch:last_line_len};
         var text = this.code_mirror.getRange(cursor, end);
         text = text.replace(/^\n+/, '').replace(/\n+$/, '');
         return text;
     };
 
     /**
      * Show/Hide CodeMirror LineNumber
      * @method show_line_numbers
      *
      * @param value {Bool}  show (true), or hide (false) the line number in CodeMirror
      **/
     Cell.prototype.show_line_numbers = function (value) {
         this.code_mirror.setOption('lineNumbers', value);
         this.code_mirror.refresh();
     };
 
     /**
      * Toggle  CodeMirror LineNumber
      * @method toggle_line_numbers
      **/
     Cell.prototype.toggle_line_numbers = function () {
         var val = this.code_mirror.getOption('lineNumbers');
         this.show_line_numbers(!val);
     };
 
     /**
      * Force codemirror highlight mode
      * @method force_highlight
      * @param {object} - CodeMirror mode
      **/
     Cell.prototype.force_highlight = function(mode) {
         this.user_highlight = mode;
         this.auto_highlight();
     };
 
     /**
      * Try to autodetect cell highlight mode, or use selected mode
      * @methods _auto_highlight
      * @private
      * @param {String|object|undefined} - CodeMirror mode | 'auto'
      **/
     Cell.prototype._auto_highlight = function (modes) {
         /**
          *Here we handle manually selected modes
          */
         var that = this;
         var mode;
         if( this.user_highlight !== undefined &&  this.user_highlight != 'auto' )
         {
             mode = this.user_highlight;
             CodeMirror.autoLoadMode(this.code_mirror, mode);
             this.code_mirror.setOption('mode', mode);
             return;
         }
         var current_mode = this.code_mirror.getOption('mode', mode);
         var first_line = this.code_mirror.getLine(0);
         // loop on every pairs
         for(mode in modes) {
             var regs = modes[mode].reg;
             // only one key every time but regexp can't be keys...
             for(var i=0; i<regs.length; i++) {
                 // here we handle non magic_modes
                 if(first_line.match(regs[i]) !== null) {
                     if(current_mode == mode){
                         return;
                     }
                     if (mode.search('magic_') !== 0) {
                         utils.requireCodeMirrorMode(mode, function () {
                             that.code_mirror.setOption('mode', mode);
                         });
                         return;
                     }
                     var open = modes[mode].open || "%%";
                     var close = modes[mode].close || "%%end";
                     var magic_mode = mode;
                     mode = magic_mode.substr(6);
                     if(current_mode == magic_mode){
                         return;
                     }
                     utils.requireCodeMirrorMode(mode, function () {
                         // create on the fly a mode that switch between
                         // plain/text and something else, otherwise `%%` is
                         // source of some highlight issues.
                         CodeMirror.defineMode(magic_mode, function(config) {
                             return CodeMirror.multiplexingMode(
                                 CodeMirror.getMode(config, 'text/plain'),
                                 // always set something on close
                                 {open: open, close: close,
                                  mode: CodeMirror.getMode(config, mode),
                                  delimStyle: "delimit"
                                 }
                             );
                         });
                         that.code_mirror.setOption('mode', magic_mode);
                     });
                     return;
                 }
             }
         }
         // fallback on default
         var default_mode;
         try {
             default_mode = this._options.cm_config.mode;
         } catch(e) {
             default_mode = 'text/plain';
         }
         if( current_mode === default_mode){
             return;
         }
         this.code_mirror.setOption('mode', default_mode);
     };
 
     var UnrecognizedCell = function (options) {
         /** Constructor for unrecognized cells */
         Cell.apply(this, arguments);
         this.cell_type = 'unrecognized';
         this.celltoolbar = null;
         this.data = {};
         
         Object.seal(this);
     };
 
     UnrecognizedCell.prototype = Object.create(Cell.prototype);
     
     
     // cannot merge or split unrecognized cells
     UnrecognizedCell.prototype.is_mergeable = function () {
         return false;
     };
     
     UnrecognizedCell.prototype.is_splittable = function () {
         return false;
     };
     
     UnrecognizedCell.prototype.toJSON = function () {
         /**
          * deepcopy the metadata so copied cells don't share the same object
          */
         return JSON.parse(JSON.stringify(this.data));
     };
 
     UnrecognizedCell.prototype.fromJSON = function (data) {
         this.data = data;
         if (data.metadata !== undefined) {
             this.metadata = data.metadata;
         } else {
             data.metadata = this.metadata;
         }
         this.element.find('.inner_cell').find("a").text("Unrecognized cell type: " + data.cell_type);
     };
     
     UnrecognizedCell.prototype.create_element = function () {
         Cell.prototype.create_element.apply(this, arguments);
         var cell = this.element = $("<div>").addClass('cell unrecognized_cell');
         cell.attr('tabindex','2');
 
         var prompt = $('<div/>').addClass('prompt input_prompt');
         cell.append(prompt);
         var inner_cell = $('<div/>').addClass('inner_cell');
         inner_cell.append(
             $("<a>")
                 .attr("href", "#")
                 .text("Unrecognized cell type")
         );
         cell.append(inner_cell);
         this.element = cell;
     };
     
     UnrecognizedCell.prototype.bind_events = function () {
         Cell.prototype.bind_events.apply(this, arguments);
         var cell = this;
         
         this.element.find('.inner_cell').find("a").click(function () {
             cell.events.trigger('unrecognized_cell.Cell', {cell: cell})
         });
     };
 
     // Backwards compatibility.
     IPython.Cell = Cell;
 
     return {
         Cell: Cell,
         UnrecognizedCell: UnrecognizedCell
     };
 });

IPython/html/static/notebook/js/outputarea.js

@@ -1,980 +1,978 b''
 // Copyright (c) IPython Development Team.
 // Distributed under the terms of the Modified BSD License.
 
 define([
     'base/js/namespace',
     'jqueryui',
     'base/js/utils',
     'base/js/security',
     'base/js/keyboard',
     'notebook/js/mathjaxutils',
     'components/marked/lib/marked',
 ], function(IPython, $, utils, security, keyboard, mathjaxutils, marked) {
     "use strict";
 
     /**
      * @class OutputArea
      *
      * @constructor
      */
 
     var OutputArea = function (options) {
         this.selector = options.selector;
         this.events = options.events;
         this.keyboard_manager = options.keyboard_manager;
         this.wrapper = $(options.selector);
         this.outputs = [];
         this.collapsed = false;
         this.scrolled = false;
         this.trusted = true;
         this.clear_queued = null;
         if (options.prompt_area === undefined) {
             this.prompt_area = true;
         } else {
             this.prompt_area = options.prompt_area;
         }
         this.create_elements();
         this.style();
         this.bind_events();
     };
 
 
     /**
      * Class prototypes
      **/
 
     OutputArea.prototype.create_elements = function () {
         this.element = $("<div/>");
         this.collapse_button = $("<div/>");
         this.prompt_overlay = $("<div/>");
         this.wrapper.append(this.prompt_overlay);
         this.wrapper.append(this.element);
         this.wrapper.append(this.collapse_button);
     };
 
 
     OutputArea.prototype.style = function () {
         this.collapse_button.hide();
         this.prompt_overlay.hide();
         
         this.wrapper.addClass('output_wrapper');
         this.element.addClass('output');
         
         this.collapse_button.addClass("btn btn-default output_collapsed");
         this.collapse_button.attr('title', 'click to expand output');
         this.collapse_button.text('. . .');
         
         this.prompt_overlay.addClass('out_prompt_overlay prompt');
         this.prompt_overlay.attr('title', 'click to expand output; double click to hide output');
         
         this.collapse();
     };
 
     /**
      * Should the OutputArea scroll?
      * Returns whether the height (in lines) exceeds a threshold.
      *
      * @private
      * @method _should_scroll
      * @param [lines=100]{Integer}
      * @return {Bool}
      *
      */
     OutputArea.prototype._should_scroll = function (lines) {
         if (lines <=0 ){ return; }
         if (!lines) {
             lines = 100;
         }
         // line-height from http://stackoverflow.com/questions/1185151
         var fontSize = this.element.css('font-size');
         var lineHeight = Math.floor(parseInt(fontSize.replace('px','')) * 1.5);
         
         return (this.element.height() > lines * lineHeight);
     };
 
 
     OutputArea.prototype.bind_events = function () {
         var that = this;
         this.prompt_overlay.dblclick(function () { that.toggle_output(); });
         this.prompt_overlay.click(function () { that.toggle_scroll(); });
 
         this.element.resize(function () {
             // FIXME: Firefox on Linux misbehaves, so automatic scrolling is disabled
             if ( utils.browser[0] === "Firefox" ) {
                 return;
             }
             // maybe scroll output,
             // if it's grown large enough and hasn't already been scrolled.
             if ( !that.scrolled && that._should_scroll(OutputArea.auto_scroll_threshold)) {
                 that.scroll_area();
             }
         });
         this.collapse_button.click(function () {
             that.expand();
         });
     };
 
 
     OutputArea.prototype.collapse = function () {
         if (!this.collapsed) {
             this.element.hide();
             this.prompt_overlay.hide();
             if (this.element.html()){
                 this.collapse_button.show();
             }
             this.collapsed = true;
         }
     };
 
 
     OutputArea.prototype.expand = function () {
         if (this.collapsed) {
             this.collapse_button.hide();
             this.element.show();
             this.prompt_overlay.show();
             this.collapsed = false;
         }
     };
 
 
     OutputArea.prototype.toggle_output = function () {
         if (this.collapsed) {
             this.expand();
         } else {
             this.collapse();
         }
     };
 
 
     OutputArea.prototype.scroll_area = function () {
         this.element.addClass('output_scroll');
         this.prompt_overlay.attr('title', 'click to unscroll output; double click to hide');
         this.scrolled = true;
     };
 
 
     OutputArea.prototype.unscroll_area = function () {
         this.element.removeClass('output_scroll');
         this.prompt_overlay.attr('title', 'click to scroll output; double click to hide');
         this.scrolled = false;
     };
 
     /**
      *
      * Scroll OutputArea if height supperior than a threshold (in lines).
      *
      * Threshold is a maximum number of lines. If unspecified, defaults to
      * OutputArea.minimum_scroll_threshold.
      *
      * Negative threshold will prevent the OutputArea from ever scrolling.
      *
      * @method scroll_if_long
      *
      * @param [lines=20]{Number} Default to 20 if not set,
      * behavior undefined for value of `0`.
      *
      **/
     OutputArea.prototype.scroll_if_long = function (lines) {
         var n = lines | OutputArea.minimum_scroll_threshold;
         if(n <= 0){
             return;
         }
 
         if (this._should_scroll(n)) {
             // only allow scrolling long-enough output
             this.scroll_area();
         }
     };
 
 
     OutputArea.prototype.toggle_scroll = function () {
         if (this.scrolled) {
             this.unscroll_area();
         } else {
             // only allow scrolling long-enough output
             this.scroll_if_long();
         }
     };
 
 
     // typeset with MathJax if MathJax is available
     OutputArea.prototype.typeset = function () {
-        if (window.MathJax){
-            MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
-        }
+        utils.typeset(this.element);
     };
 
 
     OutputArea.prototype.handle_output = function (msg) {
         var json = {};
         var msg_type = json.output_type = msg.header.msg_type;
         var content = msg.content;
         if (msg_type === "stream") {
             json.text = content.text;
             json.name = content.name;
         } else if (msg_type === "display_data") {
             json.data = content.data;
             json.output_type = msg_type;
             json.metadata = content.metadata;
         } else if (msg_type === "execute_result") {
             json.data = content.data;
             json.output_type = msg_type;
             json.metadata = content.metadata;
             json.execution_count = content.execution_count;
         } else if (msg_type === "error") {
             json.ename = content.ename;
             json.evalue = content.evalue;
             json.traceback = content.traceback;
         } else {
             console.log("unhandled output message", msg);
             return;
         }
         this.append_output(json);
     };
     
     
     OutputArea.output_types = [
         'application/javascript',
         'text/html',
         'text/markdown',
         'text/latex',
         'image/svg+xml',
         'image/png',
         'image/jpeg',
         'application/pdf',
         'text/plain'
     ];
 
     OutputArea.prototype.validate_mimebundle = function (json) {
         /**
          * scrub invalid outputs
          */
         var data = json.data;
         $.map(OutputArea.output_types, function(key){
             if (key !== 'application/json' &&
                 data[key] !== undefined &&
                 typeof data[key] !== 'string'
             ) {
                 console.log("Invalid type for " + key, data[key]);
                 delete data[key];
             }
         });
         return json;
     };
     
     OutputArea.prototype.append_output = function (json) {
         this.expand();
         
         // Clear the output if clear is queued.
         var needs_height_reset = false;
         if (this.clear_queued) {
             this.clear_output(false);
             needs_height_reset = true;
         }
 
         var record_output = true;
         switch(json.output_type) {
             case 'execute_result':
                 json = this.validate_mimebundle(json);
                 this.append_execute_result(json);
                 break;
             case 'stream':
                 // append_stream might have merged the output with earlier stream output
                 record_output = this.append_stream(json);
                 break;
             case 'error':
                 this.append_error(json);
                 break;
             case 'display_data':
                 // append handled below
                 json = this.validate_mimebundle(json);
                 break;
             default:
                 console.log("unrecognized output type: " + json.output_type);
                 this.append_unrecognized(json);
         }
 
         // We must release the animation fixed height in a callback since Gecko
         // (FireFox) doesn't render the image immediately as the data is 
         // available.
         var that = this;
         var handle_appended = function ($el) {
             /**
              * Only reset the height to automatic if the height is currently
              * fixed (done by wait=True flag on clear_output).
              */
             if (needs_height_reset) {
                 that.element.height('');
             }
             that.element.trigger('resize');
         };
         if (json.output_type === 'display_data') {
             this.append_display_data(json, handle_appended);
         } else {
             handle_appended();
         }
         
         if (record_output) {
             this.outputs.push(json);
         }
     };
 
 
     OutputArea.prototype.create_output_area = function () {
         var oa = $("<div/>").addClass("output_area");
         if (this.prompt_area) {
             oa.append($('<div/>').addClass('prompt'));
         }
         return oa;
     };
 
 
     function _get_metadata_key(metadata, key, mime) {
         var mime_md = metadata[mime];
         // mime-specific higher priority
         if (mime_md && mime_md[key] !== undefined) {
             return mime_md[key];
         }
         // fallback on global
         return metadata[key];
     }
 
     OutputArea.prototype.create_output_subarea = function(md, classes, mime) {
         var subarea = $('<div/>').addClass('output_subarea').addClass(classes);
         if (_get_metadata_key(md, 'isolated', mime)) {
             // Create an iframe to isolate the subarea from the rest of the
             // document
             var iframe = $('<iframe/>').addClass('box-flex1');
             iframe.css({'height':1, 'width':'100%', 'display':'block'});
             iframe.attr('frameborder', 0);
             iframe.attr('scrolling', 'auto');
 
             // Once the iframe is loaded, the subarea is dynamically inserted
             iframe.on('load', function() {
                 // Workaround needed by Firefox, to properly render svg inside
                 // iframes, see http://stackoverflow.com/questions/10177190/
                 // svg-dynamically-added-to-iframe-does-not-render-correctly
                 this.contentDocument.open();
 
                 // Insert the subarea into the iframe
                 // We must directly write the html. When using Jquery's append
                 // method, javascript is evaluated in the parent document and
                 // not in the iframe document.  At this point, subarea doesn't
                 // contain any user content.
                 this.contentDocument.write(subarea.html());
 
                 this.contentDocument.close();
 
                 var body = this.contentDocument.body;
                 // Adjust the iframe height automatically
                 iframe.height(body.scrollHeight + 'px');
             });
 
             // Elements should be appended to the inner subarea and not to the
             // iframe
             iframe.append = function(that) {
                 subarea.append(that);
             };
 
             return iframe;
         } else {
             return subarea;
         }
     };
 
 
     OutputArea.prototype._append_javascript_error = function (err, element) {
         /**
          * display a message when a javascript error occurs in display output
          */
         var msg = "Javascript error adding output!";
         if ( element === undefined ) return;
         element
             .append($('<div/>').text(msg).addClass('js-error'))
             .append($('<div/>').text(err.toString()).addClass('js-error'))
             .append($('<div/>').text('See your browser Javascript console for more details.').addClass('js-error'));
     };
     
     OutputArea.prototype._safe_append = function (toinsert) {
         /**
          * safely append an item to the document
          * this is an object created by user code,
          * and may have errors, which should not be raised
          * under any circumstances.
          */
         try {
             this.element.append(toinsert);
         } catch(err) {
             console.log(err);
             // Create an actual output_area and output_subarea, which creates
             // the prompt area and the proper indentation.
             var toinsert = this.create_output_area();
             var subarea = $('<div/>').addClass('output_subarea');
             toinsert.append(subarea);
             this._append_javascript_error(err, subarea);
             this.element.append(toinsert);
         }
 
         // Notify others of changes.
         this.element.trigger('changed');
     };
 
 
     OutputArea.prototype.append_execute_result = function (json) {
         var n = json.execution_count || ' ';
         var toinsert = this.create_output_area();
         if (this.prompt_area) {
             toinsert.find('div.prompt').addClass('output_prompt').text('Out[' + n + ']:');
         }
         var inserted = this.append_mime_type(json, toinsert);
         if (inserted) {
             inserted.addClass('output_result');
         }
         this._safe_append(toinsert);
         // If we just output latex, typeset it.
         if ((json.data['text/latex'] !== undefined) ||
             (json.data['text/html'] !== undefined) ||
             (json.data['text/markdown'] !== undefined)) {
             this.typeset();
         }
     };
 
 
     OutputArea.prototype.append_error = function (json) {
         var tb = json.traceback;
         if (tb !== undefined && tb.length > 0) {
             var s = '';
             var len = tb.length;
             for (var i=0; i<len; i++) {
                 s = s + tb[i] + '\n';
             }
             s = s + '\n';
             var toinsert = this.create_output_area();
             var append_text = OutputArea.append_map['text/plain'];
             if (append_text) {
                 append_text.apply(this, [s, {}, toinsert]).addClass('output_error');
             }
             this._safe_append(toinsert);
         }
     };
 
 
     OutputArea.prototype.append_stream = function (json) {
         var text = json.text;
         var subclass = "output_"+json.name;
         if (this.outputs.length > 0){
             // have at least one output to consider
             var last = this.outputs[this.outputs.length-1];
             if (last.output_type == 'stream' && json.name == last.name){
                 // latest output was in the same stream,
                 // so append directly into its pre tag
                 // escape ANSI & HTML specials:
                 last.text = utils.fixCarriageReturn(last.text + json.text);
                 var pre = this.element.find('div.'+subclass).last().find('pre');
                 var html = utils.fixConsole(last.text);
                 // The only user content injected with this HTML call is
                 // escaped by the fixConsole() method.
                 pre.html(html);
                 // return false signals that we merged this output with the previous one,
                 // and the new output shouldn't be recorded.
                 return false;
             }
         }
 
         if (!text.replace("\r", "")) {
             // text is nothing (empty string, \r, etc.)
             // so don't append any elements, which might add undesirable space
             // return true to indicate the output should be recorded.
             return true;
         }
 
         // If we got here, attach a new div
         var toinsert = this.create_output_area();
         var append_text = OutputArea.append_map['text/plain'];
         if (append_text) {
             append_text.apply(this, [text, {}, toinsert]).addClass("output_stream " + subclass);
         }
         this._safe_append(toinsert);
         return true;
     };
 
 
     OutputArea.prototype.append_unrecognized = function (json) {
         var that = this;
         var toinsert = this.create_output_area();
         var subarea = $('<div/>').addClass('output_subarea output_unrecognized');
         toinsert.append(subarea);
         subarea.append(
             $("<a>")
                 .attr("href", "#")
                 .text("Unrecognized output: " + json.output_type)
                 .click(function () {
                     that.events.trigger('unrecognized_output.OutputArea', {output: json})
                 })
         );
         this._safe_append(toinsert);
     };
 
 
     OutputArea.prototype.append_display_data = function (json, handle_inserted) {
         var toinsert = this.create_output_area();
         if (this.append_mime_type(json, toinsert, handle_inserted)) {
             this._safe_append(toinsert);
             // If we just output latex, typeset it.
             if ((json.data['text/latex'] !== undefined) ||
                 (json.data['text/html'] !== undefined) ||
                 (json.data['text/markdown'] !== undefined)) {
                 this.typeset();
             }
         }
     };
 
 
     OutputArea.safe_outputs = {
         'text/plain' : true,
         'text/latex' : true,
         'image/png' : true,
         'image/jpeg' : true
     };
     
     OutputArea.prototype.append_mime_type = function (json, element, handle_inserted) {
         for (var i=0; i < OutputArea.display_order.length; i++) {
             var type = OutputArea.display_order[i];
             var append = OutputArea.append_map[type];
             if ((json.data[type] !== undefined) && append) {
                 var value = json.data[type];
                 if (!this.trusted && !OutputArea.safe_outputs[type]) {
                     // not trusted, sanitize HTML
                     if (type==='text/html' || type==='text/svg') {
                         value = security.sanitize_html(value);
                     } else {
                         // don't display if we don't know how to sanitize it
                         console.log("Ignoring untrusted " + type + " output.");
                         continue;
                     }
                 }
                 var md = json.metadata || {};
                 var toinsert = append.apply(this, [value, md, element, handle_inserted]);
                 // Since only the png and jpeg mime types call the inserted
                 // callback, if the mime type is something other we must call the 
                 // inserted callback only when the element is actually inserted
                 // into the DOM.  Use a timeout of 0 to do this.
                 if (['image/png', 'image/jpeg'].indexOf(type) < 0 && handle_inserted !== undefined) {
                     setTimeout(handle_inserted, 0);
                 }
                 this.events.trigger('output_appended.OutputArea', [type, value, md, toinsert]);
                 return toinsert;
             }
         }
         return null;
     };
 
 
     var append_html = function (html, md, element) {
         var type = 'text/html';
         var toinsert = this.create_output_subarea(md, "output_html rendered_html", type);
         this.keyboard_manager.register_events(toinsert);
         toinsert.append(html);
         element.append(toinsert);
         return toinsert;
     };
 
 
     var append_markdown = function(markdown, md, element) {
         var type = 'text/markdown';
         var toinsert = this.create_output_subarea(md, "output_markdown", type);
         var text_and_math = mathjaxutils.remove_math(markdown);
         var text = text_and_math[0];
         var math = text_and_math[1];
         marked(text, function (err, html) {
             html = mathjaxutils.replace_math(html, math);
             toinsert.append(html);
         });
         element.append(toinsert);
         return toinsert;
     };
 
 
     var append_javascript = function (js, md, element) {
         /**
          * We just eval the JS code, element appears in the local scope.
          */
         var type = 'application/javascript';
         var toinsert = this.create_output_subarea(md, "output_javascript", type);
         this.keyboard_manager.register_events(toinsert);
         element.append(toinsert);
 
         // Fix for ipython/issues/5293, make sure `element` is the area which
         // output can be inserted into at the time of JS execution.
         element = toinsert;
         try {
             eval(js);
         } catch(err) {
             console.log(err);
             this._append_javascript_error(err, toinsert);
         }
         return toinsert;
     };
 
 
     var append_text = function (data, md, element) {
         var type = 'text/plain';
         var toinsert = this.create_output_subarea(md, "output_text", type);
         // escape ANSI & HTML specials in plaintext:
         data = utils.fixConsole(data);
         data = utils.fixCarriageReturn(data);
         data = utils.autoLinkUrls(data);
         // The only user content injected with this HTML call is
         // escaped by the fixConsole() method.
         toinsert.append($("<pre/>").html(data));
         element.append(toinsert);
         return toinsert;
     };
 
 
     var append_svg = function (svg_html, md, element) {
         var type = 'image/svg+xml';
         var toinsert = this.create_output_subarea(md, "output_svg", type);
 
         // Get the svg element from within the HTML.
         var svg = $('<div />').html(svg_html).find('svg');
         var svg_area = $('<div />');
         var width = svg.attr('width');
         var height = svg.attr('height');
         svg
             .width('100%')
             .height('100%');
         svg_area
             .width(width)
             .height(height);
 
         // The jQuery resize handlers don't seem to work on the svg element.
         // When the svg renders completely, measure it's size and set the parent
         // div to that size.  Then set the svg to 100% the size of the parent
         // div and make the parent div resizable.  
         this._dblclick_to_reset_size(svg_area, true, false);
 
         svg_area.append(svg);
         toinsert.append(svg_area);
         element.append(toinsert);
 
         return toinsert;
     };
 
     OutputArea.prototype._dblclick_to_reset_size = function (img, immediately, resize_parent) {
         /**
          * Add a resize handler to an element
          *
          * img: jQuery element
          * immediately: bool=False
          *      Wait for the element to load before creating the handle.
          * resize_parent: bool=True
          *      Should the parent of the element be resized when the element is
          *      reset (by double click).
          */
         var callback = function (){
             var h0 = img.height();
             var w0 = img.width();
             if (!(h0 && w0)) {
                 // zero size, don't make it resizable
                 return;
             }
             img.resizable({
                 aspectRatio: true,
                 autoHide: true
             });
             img.dblclick(function () {
                 // resize wrapper & image together for some reason:
                 img.height(h0);
                 img.width(w0);
                 if (resize_parent === undefined || resize_parent) {
                     img.parent().height(h0);
                     img.parent().width(w0);
                 }
             });
         };
 
         if (immediately) {
             callback();
         } else {
             img.on("load", callback);
         }
     };
     
     var set_width_height = function (img, md, mime) {
         /**
          * set width and height of an img element from metadata
          */
         var height = _get_metadata_key(md, 'height', mime);
         if (height !== undefined) img.attr('height', height);
         var width = _get_metadata_key(md, 'width', mime);
         if (width !== undefined) img.attr('width', width);
     };
     
     var append_png = function (png, md, element, handle_inserted) {
         var type = 'image/png';
         var toinsert = this.create_output_subarea(md, "output_png", type);
         var img = $("<img/>");
         if (handle_inserted !== undefined) {
             img.on('load', function(){
                 handle_inserted(img);
             });
         }
         img[0].src = 'data:image/png;base64,'+ png;
         set_width_height(img, md, 'image/png');
         this._dblclick_to_reset_size(img);
         toinsert.append(img);
         element.append(toinsert);
         return toinsert;
     };
 
 
     var append_jpeg = function (jpeg, md, element, handle_inserted) {
         var type = 'image/jpeg';
         var toinsert = this.create_output_subarea(md, "output_jpeg", type);
         var img = $("<img/>");
         if (handle_inserted !== undefined) {
             img.on('load', function(){
                 handle_inserted(img);
             });
         }
         img[0].src = 'data:image/jpeg;base64,'+ jpeg;
         set_width_height(img, md, 'image/jpeg');
         this._dblclick_to_reset_size(img);
         toinsert.append(img);
         element.append(toinsert);
         return toinsert;
     };
 
 
     var append_pdf = function (pdf, md, element) {
         var type = 'application/pdf';
         var toinsert = this.create_output_subarea(md, "output_pdf", type);
         var a = $('<a/>').attr('href', 'data:application/pdf;base64,'+pdf);
         a.attr('target', '_blank');
         a.text('View PDF');
         toinsert.append(a);
         element.append(toinsert);
         return toinsert;
      };
 
     var append_latex = function (latex, md, element) {
         /**
          * This method cannot do the typesetting because the latex first has to
          * be on the page.
          */
         var type = 'text/latex';
         var toinsert = this.create_output_subarea(md, "output_latex", type);
         toinsert.append(latex);
         element.append(toinsert);
         return toinsert;
     };
 
 
     OutputArea.prototype.append_raw_input = function (msg) {
         var that = this;
         this.expand();
         var content = msg.content;
         var area = this.create_output_area();
         
         // disable any other raw_inputs, if they are left around
         $("div.output_subarea.raw_input_container").remove();
         
         var input_type = content.password ? 'password' : 'text';
         
         area.append(
             $("<div/>")
             .addClass("box-flex1 output_subarea raw_input_container")
             .append(
                 $("<span/>")
                 .addClass("raw_input_prompt")
                 .text(content.prompt)
             )
             .append(
                 $("<input/>")
                 .addClass("raw_input")
                 .attr('type', input_type)
                 .attr("size", 47)
                 .keydown(function (event, ui) {
                     // make sure we submit on enter,
                     // and don't re-execute the *cell* on shift-enter
                     if (event.which === keyboard.keycodes.enter) {
                         that._submit_raw_input();
                         return false;
                     }
                 })
             )
         );
         
         this.element.append(area);
         var raw_input = area.find('input.raw_input');
         // Register events that enable/disable the keyboard manager while raw
         // input is focused.
         this.keyboard_manager.register_events(raw_input);
         // Note, the following line used to read raw_input.focus().focus().
         // This seemed to be needed otherwise only the cell would be focused.
         // But with the modal UI, this seems to work fine with one call to focus().
         raw_input.focus();
     };
 
     OutputArea.prototype._submit_raw_input = function (evt) {
         var container = this.element.find("div.raw_input_container");
         var theprompt = container.find("span.raw_input_prompt");
         var theinput = container.find("input.raw_input");
         var value = theinput.val();
         var echo  = value;
         // don't echo if it's a password
         if (theinput.attr('type') == 'password') {
             echo = '········';
         }
         var content = {
             output_type : 'stream',
             name : 'stdout',
             text : theprompt.text() + echo + '\n'
         };
         // remove form container
         container.parent().remove();
         // replace with plaintext version in stdout
         this.append_output(content, false);
         this.events.trigger('send_input_reply.Kernel', value);
     };
 
 
     OutputArea.prototype.handle_clear_output = function (msg) {
         /**
          * msg spec v4 had stdout, stderr, display keys
          * v4.1 replaced these with just wait
          * The default behavior is the same (stdout=stderr=display=True, wait=False),
          * so v4 messages will still be properly handled,
          * except for the rarely used clearing less than all output.
          */
         this.clear_output(msg.content.wait || false);
     };
 
 
     OutputArea.prototype.clear_output = function(wait) {
         if (wait) {
 
             // If a clear is queued, clear before adding another to the queue.
             if (this.clear_queued) {
                 this.clear_output(false);
             }
 
             this.clear_queued = true;
         } else {
 
             // Fix the output div's height if the clear_output is waiting for
             // new output (it is being used in an animation).
             if (this.clear_queued) {
                 var height = this.element.height();
                 this.element.height(height);
                 this.clear_queued = false;
             }
             
             // Clear all
             // Remove load event handlers from img tags because we don't want
             // them to fire if the image is never added to the page.
             this.element.find('img').off('load');
             this.element.html("");
 
             // Notify others of changes.
             this.element.trigger('changed');
             
             this.outputs = [];
             this.trusted = true;
             this.unscroll_area();
             return;
         }
     };
 
 
     // JSON serialization
 
     OutputArea.prototype.fromJSON = function (outputs, metadata) {
         var len = outputs.length;
         metadata = metadata || {};
 
         for (var i=0; i<len; i++) {
             this.append_output(outputs[i]);
         }
 
         if (metadata.collapsed !== undefined) {
             this.collapsed = metadata.collapsed;
             if (metadata.collapsed) {
                 this.collapse_output();
             }
         }
         if (metadata.autoscroll !== undefined) {
             this.collapsed = metadata.collapsed;
             if (metadata.collapsed) {
                 this.collapse_output();
             } else {
                 this.expand_output();
             }
         }
     };
 
 
     OutputArea.prototype.toJSON = function () {
         return this.outputs;
     };
 
     /**
      * Class properties
      **/
 
     /**
      * Threshold to trigger autoscroll when the OutputArea is resized,
      * typically when new outputs are added.
      *
      * Behavior is undefined if autoscroll is lower than minimum_scroll_threshold,
      * unless it is < 0, in which case autoscroll will never be triggered
      *
      * @property auto_scroll_threshold
      * @type Number
      * @default 100
      *
      **/
     OutputArea.auto_scroll_threshold = 100;
 
     /**
      * Lower limit (in lines) for OutputArea to be made scrollable. OutputAreas
      * shorter than this are never scrolled.
      *
      * @property minimum_scroll_threshold
      * @type Number
      * @default 20
      *
      **/
     OutputArea.minimum_scroll_threshold = 20;
 
 
     OutputArea.display_order = [
         'application/javascript',
         'text/html',
         'text/markdown',
         'text/latex',
         'image/svg+xml',
         'image/png',
         'image/jpeg',
         'application/pdf',
         'text/plain'
     ];
 
     OutputArea.append_map = {
         "text/plain" : append_text,
         "text/html" : append_html,
         "text/markdown": append_markdown,
         "image/svg+xml" : append_svg,
         "image/png" : append_png,
         "image/jpeg" : append_jpeg,
         "text/latex" : append_latex,
         "application/javascript" : append_javascript,
         "application/pdf" : append_pdf
     };
 
     // For backwards compatability.
     IPython.OutputArea = OutputArea;
 
     return {'OutputArea': OutputArea};
 });

IPython/html/static/widgets/js/widget.js

@@ -1,695 +1,683 b''
 // Copyright (c) IPython Development Team.
 // Distributed under the terms of the Modified BSD License.
 
 define(["widgets/js/manager",
         "underscore",
         "backbone",
         "jquery",
         "base/js/utils",
         "base/js/namespace",
 ], function(widgetmanager, _, Backbone, $, utils, IPython){
 
     var WidgetModel = Backbone.Model.extend({
         constructor: function (widget_manager, model_id, comm) {
             /**
              * Constructor
              *
              * Creates a WidgetModel instance.
              *
              * Parameters
              * ----------
              * widget_manager : WidgetManager instance
              * model_id : string
              *      An ID unique to this model.
              * comm : Comm instance (optional)
              */
             this.widget_manager = widget_manager;
             this.state_change = Promise.resolve();
             this._buffered_state_diff = {};
             this.pending_msgs = 0;
             this.msg_buffer = null;
             this.state_lock = null;
             this.id = model_id;
             this.views = {};
 
             if (comm !== undefined) {
                 // Remember comm associated with the model.
                 this.comm = comm;
                 comm.model = this;
 
                 // Hook comm messages up to model.
                 comm.on_close($.proxy(this._handle_comm_closed, this));
                 comm.on_msg($.proxy(this._handle_comm_msg, this));
             }
             return Backbone.Model.apply(this);
         },
 
         send: function (content, callbacks) {
             /**
              * Send a custom msg over the comm.
              */
             if (this.comm !== undefined) {
                 var data = {method: 'custom', content: content};
                 this.comm.send(data, callbacks);
                 this.pending_msgs++;
             }
         },
 
         _handle_comm_closed: function (msg) {
             /**
              * Handle when a widget is closed.
              */
             this.trigger('comm:close');
             this.stopListening();
             this.trigger('destroy', this);
             delete this.comm.model; // Delete ref so GC will collect widget model.
             delete this.comm;
             delete this.model_id; // Delete id from model so widget manager cleans up.
             for (var id in this.views) {
                 if (this.views.hasOwnProperty(id)) {
                     this.views[id].remove();
                 }
             }
         },
 
         _handle_comm_msg: function (msg) {
             /**
              * Handle incoming comm msg.
              */
             var method = msg.content.data.method;
             var that = this;
             switch (method) {
                 case 'update':
                     this.state_change = this.state_change.then(function() {
                         return that.set_state(msg.content.data.state);
                     }).catch(utils.reject("Couldn't process update msg for model id '" + String(that.id) + "'", true));
                     break;
                 case 'custom':
                     this.trigger('msg:custom', msg.content.data.content);
                     break;
                 case 'display':
                     this.widget_manager.display_view(msg, this);
                     break;
             }
         },
 
         set_state: function (state) {
             var that = this;
             // Handle when a widget is updated via the python side.
             return this._unpack_models(state).then(function(state) {
                 that.state_lock = state;
                 try {
                     WidgetModel.__super__.set.call(that, state);
                 } finally {
                     that.state_lock = null;
                 }
             }).catch(utils.reject("Couldn't set model state", true));
         },
 
         _handle_status: function (msg, callbacks) {
             /**
              * Handle status msgs.
              *
              * execution_state : ('busy', 'idle', 'starting')
              */
             if (this.comm !== undefined) {
                 if (msg.content.execution_state ==='idle') {
                     // Send buffer if this message caused another message to be
                     // throttled.
                     if (this.msg_buffer !== null &&
                         (this.get('msg_throttle') || 3) === this.pending_msgs) {
                         var data = {method: 'backbone', sync_method: 'update', sync_data: this.msg_buffer};
                         this.comm.send(data, callbacks);
                         this.msg_buffer = null;
                     } else {
                         --this.pending_msgs;
                     }
                 }
             }
         },
 
         callbacks: function(view) {
             /**
              * Create msg callbacks for a comm msg.
              */
             var callbacks = this.widget_manager.callbacks(view);
 
             if (callbacks.iopub === undefined) {
                 callbacks.iopub = {};
             }
 
             var that = this;
             callbacks.iopub.status = function (msg) {
                 that._handle_status(msg, callbacks);
             };
             return callbacks;
         },
 
         set: function(key, val, options) {
             /**
              * Set a value.
              */
             var return_value = WidgetModel.__super__.set.apply(this, arguments);
 
             // Backbone only remembers the diff of the most recent set()
             // operation.  Calling set multiple times in a row results in a 
             // loss of diff information.  Here we keep our own running diff.
             this._buffered_state_diff = $.extend(this._buffered_state_diff, this.changedAttributes() || {});
             return return_value;
         },
 
         sync: function (method, model, options) {
             /**
              * Handle sync to the back-end.  Called when a model.save() is called.
              *
              * Make sure a comm exists.
              */
             var error = options.error || function() {
                 console.error('Backbone sync error:', arguments);
             };
             if (this.comm === undefined) {
                 error();
                 return false;
             }
 
             // Delete any key value pairs that the back-end already knows about.
             var attrs = (method === 'patch') ? options.attrs : model.toJSON(options);
             if (this.state_lock !== null) {
                 var keys = Object.keys(this.state_lock);
                 for (var i=0; i<keys.length; i++) {
                     var key = keys[i];
                     if (attrs[key] === this.state_lock[key]) {
                         delete attrs[key];
                     }
                 }
             }
 
             // Only sync if there are attributes to send to the back-end.
             attrs = this._pack_models(attrs);
             if (_.size(attrs) > 0) {
 
                 // If this message was sent via backbone itself, it will not
                 // have any callbacks.  It's important that we create callbacks
                 // so we can listen for status messages, etc...
                 var callbacks = options.callbacks || this.callbacks();
 
                 // Check throttle.
                 if (this.pending_msgs >= (this.get('msg_throttle') || 3)) {
                     // The throttle has been exceeded, buffer the current msg so
                     // it can be sent once the kernel has finished processing 
                     // some of the existing messages.
                     
                     // Combine updates if it is a 'patch' sync, otherwise replace updates
                     switch (method) {
                         case 'patch':
                             this.msg_buffer = $.extend(this.msg_buffer || {}, attrs);
                             break;
                         case 'update':
                         case 'create':
                             this.msg_buffer = attrs;
                             break;
                         default:
                             error();
                             return false;
                     }
                     this.msg_buffer_callbacks = callbacks;
 
                 } else {
                     // We haven't exceeded the throttle, send the message like 
                     // normal.
                     var data = {method: 'backbone', sync_data: attrs};
                     this.comm.send(data, callbacks);
                     this.pending_msgs++;
                 }
             }
             // Since the comm is a one-way communication, assume the message 
             // arrived.  Don't call success since we don't have a model back from the server
             // this means we miss out on the 'sync' event.
             this._buffered_state_diff = {};
         },
 
         save_changes: function(callbacks) {
             /**
              * Push this model's state to the back-end
              *
              * This invokes a Backbone.Sync.
              */
             this.save(this._buffered_state_diff, {patch: true, callbacks: callbacks});
         },
 
         _pack_models: function(value) {
             /**
              * Replace models with model ids recursively.
              */
             var that = this;
             var packed;
             if (value instanceof Backbone.Model) {
                 return "IPY_MODEL_" + value.id;
 
             } else if ($.isArray(value)) {
                 packed = [];
                 _.each(value, function(sub_value, key) {
                     packed.push(that._pack_models(sub_value));
                 });
                 return packed;
             } else if (value instanceof Date || value instanceof String) {
                 return value;
             } else if (value instanceof Object) {
                 packed = {};
                 _.each(value, function(sub_value, key) {
                     packed[key] = that._pack_models(sub_value);
                 });
                 return packed;
 
             } else {
                 return value;
             }
         },
 
         _unpack_models: function(value) {
             /**
              * Replace model ids with models recursively.
              */
             var that = this;
             var unpacked;
             if ($.isArray(value)) {
                 unpacked = [];
                 _.each(value, function(sub_value, key) {
                     unpacked.push(that._unpack_models(sub_value));
                 });
                 return Promise.all(unpacked);
             } else if (value instanceof Object) {
                 unpacked = {};
                 _.each(value, function(sub_value, key) {
                     unpacked[key] = that._unpack_models(sub_value);
                 });
                 return utils.resolve_promises_dict(unpacked);
             } else if (typeof value === 'string' && value.slice(0,10) === "IPY_MODEL_") {
                 // get_model returns a promise already
                 return this.widget_manager.get_model(value.slice(10, value.length));
             } else {
                 return Promise.resolve(value);
             }
         },
 
         on_some_change: function(keys, callback, context) {
             /**
              * on_some_change(["key1", "key2"], foo, context) differs from
              * on("change:key1 change:key2", foo, context).
              * If the widget attributes key1 and key2 are both modified, 
              * the second form will result in foo being called twice
              * while the first will call foo only once.
              */
             this.on('change', function() {
                 if (keys.some(this.hasChanged, this)) {
                     callback.apply(context);
                 }
             }, this);
 
        },
     });
     widgetmanager.WidgetManager.register_widget_model('WidgetModel', WidgetModel);
 
 
     var WidgetView = Backbone.View.extend({
         initialize: function(parameters) {
             /**
              * Public constructor.
              */
             this.model.on('change',this.update,this);
             this.options = parameters.options;
             this.id = this.id || utils.uuid();
             this.model.views[this.id] = this;
             this.on('displayed', function() { 
                 this.is_displayed = true; 
             }, this);
         },
 
         update: function(){
             /**
              * Triggered on model change.
              *
              * Update view to be consistent with this.model
              */
         },
 
         create_child_view: function(child_model, options) {
             /**
              * Create and promise that resolves to a child view of a given model
              */
             var that = this;
             options = $.extend({ parent: this }, options || {});
             return this.model.widget_manager.create_view(child_model, options).catch(utils.reject("Couldn't create child view"), true);
         },
 
         callbacks: function(){
             /**
              * Create msg callbacks for a comm msg.
              */
             return this.model.callbacks(this);
         },
 
         render: function(){
             /**
              * Render the view.
              *
              * By default, this is only called the first time the view is created
              */
         },
 
         show: function(){
             /**
              * Show the widget-area
              */
             if (this.options && this.options.cell &&
                 this.options.cell.widget_area !== undefined) {
                 this.options.cell.widget_area.show();
             }
         },
 
         send: function (content) {
             /**
              * Send a custom msg associated with this view.
              */
             this.model.send(content, this.callbacks());
         },
 
         touch: function () {
             this.model.save_changes(this.callbacks());
         },
 
         after_displayed: function (callback, context) {
             /**
              * Calls the callback right away is the view is already displayed
              * otherwise, register the callback to the 'displayed' event.
              */
             if (this.is_displayed) {
                 callback.apply(context);
             } else {
                 this.on('displayed', callback, context);
             }
         }
     });
 
 
     var DOMWidgetView = WidgetView.extend({
         initialize: function (parameters) {
             /**
              * Public constructor
              */
             DOMWidgetView.__super__.initialize.apply(this, [parameters]);
             this.on('displayed', this.show, this);
             this.model.on('change:visible', this.update_visible, this);
             this.model.on('change:_css', this.update_css, this);
 
             this.model.on('change:_dom_classes', function(model, new_classes) {
                 var old_classes = model.previous('_dom_classes');
                 this.update_classes(old_classes, new_classes);
             }, this);
 
             this.model.on('change:color', function (model, value) { 
                 this.update_attr('color', value); }, this);
 
             this.model.on('change:background_color', function (model, value) { 
                 this.update_attr('background', value); }, this);
 
             this.model.on('change:width', function (model, value) { 
                 this.update_attr('width', value); }, this);
 
             this.model.on('change:height', function (model, value) { 
                 this.update_attr('height', value); }, this);
 
             this.model.on('change:border_color', function (model, value) { 
                 this.update_attr('border-color', value); }, this);
 
             this.model.on('change:border_width', function (model, value) { 
                 this.update_attr('border-width', value); }, this);
 
             this.model.on('change:border_style', function (model, value) { 
                 this.update_attr('border-style', value); }, this);
 
             this.model.on('change:font_style', function (model, value) { 
                 this.update_attr('font-style', value); }, this);
 
             this.model.on('change:font_weight', function (model, value) { 
                 this.update_attr('font-weight', value); }, this);
 
             this.model.on('change:font_size', function (model, value) { 
                 this.update_attr('font-size', this._default_px(value)); }, this);
 
             this.model.on('change:font_family', function (model, value) { 
                 this.update_attr('font-family', value); }, this);
 
             this.model.on('change:padding', function (model, value) { 
                 this.update_attr('padding', value); }, this);
 
             this.model.on('change:margin', function (model, value) { 
                 this.update_attr('margin', this._default_px(value)); }, this);
 
             this.model.on('change:border_radius', function (model, value) { 
                 this.update_attr('border-radius', this._default_px(value)); }, this);
 
             this.after_displayed(function() {
                 this.update_visible(this.model, this.model.get("visible"));
                 this.update_classes([], this.model.get('_dom_classes'));
                 
                 this.update_attr('color', this.model.get('color'));
                 this.update_attr('background', this.model.get('background_color'));
                 this.update_attr('width', this.model.get('width'));
                 this.update_attr('height', this.model.get('height'));
                 this.update_attr('border-color', this.model.get('border_color'));
                 this.update_attr('border-width', this.model.get('border_width'));
                 this.update_attr('border-style', this.model.get('border_style'));
                 this.update_attr('font-style', this.model.get('font_style'));
                 this.update_attr('font-weight', this.model.get('font_weight'));
                 this.update_attr('font-size', this.model.get('font_size'));
                 this.update_attr('font-family', this.model.get('font_family'));
                 this.update_attr('padding', this.model.get('padding'));
                 this.update_attr('margin', this.model.get('margin'));
                 this.update_attr('border-radius', this.model.get('border_radius'));
 
                 this.update_css(this.model, this.model.get("_css"));
             }, this);
         },
 
         _default_px: function(value) {
             /**
              * Makes browser interpret a numerical string as a pixel value.
              */
             if (/^\d+\.?(\d+)?$/.test(value.trim())) {
                 return value.trim() + 'px';
             }
             return value;
         },
 
         update_attr: function(name, value) {
             /**
              * Set a css attr of the widget view.
              */
             this.$el.css(name, value);
         },
 
         update_visible: function(model, value) {
             /**
              * Update visibility
              */
             this.$el.toggle(value);
          },
 
         update_css: function (model, css) {
             /**
              * Update the css styling of this view.
              */
             var e = this.$el;
             if (css === undefined) {return;}
             for (var i = 0; i < css.length; i++) {
                 // Apply the css traits to all elements that match the selector.
                 var selector = css[i][0];
                 var elements = this._get_selector_element(selector);
                 if (elements.length > 0) {
                     var trait_key = css[i][1];
                     var trait_value = css[i][2];
                     elements.css(trait_key ,trait_value);
                 }
             }
         },
 
         update_classes: function (old_classes, new_classes, $el) {
             /**
              * Update the DOM classes applied to an element, default to this.$el.
              */
             if ($el===undefined) {
                 $el = this.$el;
             }
             _.difference(old_classes, new_classes).map(function(c) {$el.removeClass(c);})
             _.difference(new_classes, old_classes).map(function(c) {$el.addClass(c);})
         },
 
         update_mapped_classes: function(class_map, trait_name, previous_trait_value, $el) {
             /**
              * Update the DOM classes applied to the widget based on a single
              * trait's value.
              *
              * Given a trait value classes map, this function automatically
              * handles applying the appropriate classes to the widget element
              * and removing classes that are no longer valid.
              *
              * Parameters
              * ----------
              * class_map: dictionary
              *  Dictionary of trait values to class lists.
              *  Example:
              *      {
              *          success: ['alert', 'alert-success'],
              *          info: ['alert', 'alert-info'],
              *          warning: ['alert', 'alert-warning'],
              *          danger: ['alert', 'alert-danger']
              *      };
              * trait_name: string
              *  Name of the trait to check the value of.
              * previous_trait_value: optional string, default ''
              *  Last trait value
              * $el: optional jQuery element handle, defaults to this.$el
              *  Element that the classes are applied to.
              */
             var key = previous_trait_value;
             if (key === undefined) {
                 key = this.model.previous(trait_name);
             }
             var old_classes = class_map[key] ? class_map[key] : [];
             key = this.model.get(trait_name);
             var new_classes = class_map[key] ? class_map[key] : [];
 
             this.update_classes(old_classes, new_classes, $el || this.$el);
         },
         
         _get_selector_element: function (selector) {
             /**
              * Get the elements via the css selector.
              */
             var elements;
             if (!selector) {
                 elements = this.$el;
             } else {
                 elements = this.$el.find(selector).addBack(selector);
             }
             return elements;
         },
 
         typeset: function(element, text){
-            // after (optionally) updating a node(list) or jQuery selection's 
-            // text, check if MathJax is available and typeset it
-            var $el = element.jquery ? element : $(element);
-
-            if(arguments.length > 1){
-                $el.text(text);
-            }
-            if(!window.MathJax){
-                return;
-            }
-            return $el.map(function(){
-                return MathJax.Hub.Queue(["Typeset", MathJax.Hub, this]);
-            });
+            utils.typeset.apply(null, arguments);
         },
     });
 
 
     var ViewList = function(create_view, remove_view, context) {
         /**
          * - create_view and remove_view are default functions called when adding or removing views
          * - create_view takes a model and returns a view or a promise for a view for that model
          * - remove_view takes a view and destroys it (including calling `view.remove()`)
          * - each time the update() function is called with a new list, the create and remove
          *   callbacks will be called in an order so that if you append the views created in the
          *   create callback and remove the views in the remove callback, you will duplicate 
          *   the order of the list.
          * - the remove callback defaults to just removing the view (e.g., pass in null for the second parameter)
          * - the context defaults to the created ViewList.  If you pass another context, the create and remove
          *   will be called in that context.
          */
 
         this.initialize.apply(this, arguments);
     };
 
     _.extend(ViewList.prototype, {
         initialize: function(create_view, remove_view, context) {
             this.state_change = Promise.resolve();
             this._handler_context = context || this;
             this._models = [];
             this.views = [];
             this._create_view = create_view;
             this._remove_view = remove_view || function(view) {view.remove();};
         },
 
         update: function(new_models, create_view, remove_view, context) {
             /**
              * the create_view, remove_view, and context arguments override the defaults
              * specified when the list is created.
              * returns a promise that resolves after this update is done
              */
             var remove = remove_view || this._remove_view;
             var create = create_view || this._create_view;
             if (create === undefined || remove === undefined){
                 console.error("Must define a create a remove function");
             }
             var context = context || this._handler_context;
             var added_views = [];
             var that = this;
             this.state_change = this.state_change.then(function() {
                 var i;
                  // first, skip past the beginning of the lists if they are identical
                 for (i = 0; i < new_models.length; i++) {
                     if (i >= that._models.length || new_models[i] !== that._models[i]) {
                         break;
                     }
                 }
                 var first_removed = i;
                 // Remove the non-matching items from the old list.
                 for (var j = first_removed; j < that._models.length; j++) {
                     remove.call(context, that.views[j]);
                 }
 
                 // Add the rest of the new list items.
                 for (; i < new_models.length; i++) {
                     added_views.push(create.call(context, new_models[i]));
                 }
                 // make a copy of the input array
                 that._models = new_models.slice();
                 return Promise.all(added_views).then(function(added) {
                     Array.prototype.splice.apply(that.views, [first_removed, that.views.length].concat(added));
                     return that.views;
                 });
             });
             return this.state_change;
         },
 
         remove: function() {
             /**
              * removes every view in the list; convenience function for `.update([])`
              * that should be faster
              * returns a promise that resolves after this removal is done
              */
             var that = this;
             this.state_change = this.state_change.then(function() {
                 for (var i = 0; i < that.views.length; i++) {
                     that._remove_view.call(that._handler_context, that.views[i]);
                 }
                 that._models = [];
                 that.views = [];
             });
             return this.state_change;
         },
     });
 
     var widget = {
         'WidgetModel': WidgetModel,
         'WidgetView': WidgetView,
         'DOMWidgetView': DOMWidgetView,
         'ViewList': ViewList,
     };
 
     // For backwards compatability.
     $.extend(IPython, widget);
 
     return widget;
 });