diff --git a/IPython/html/static/notebook/js/outputarea.js b/IPython/html/static/notebook/js/outputarea.js index 6dd7d0e..5db8639 100644 --- a/IPython/html/static/notebook/js/outputarea.js +++ b/IPython/html/static/notebook/js/outputarea.js @@ -278,6 +278,20 @@ var IPython = (function (IPython) { needs_height_reset = true; } + // 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 () { + // Only reset the height to automatic if the height is currently + // fixed (done by wait=True flag on clear_output). + console.log('appended'); + if (needs_height_reset) { + that.element.height(''); + } + that.element.trigger('resize'); + }; + // validate output data types json = this.validate_output(json); @@ -285,26 +299,18 @@ var IPython = (function (IPython) { this.append_pyout(json); } else if (json.output_type === 'pyerr') { this.append_pyerr(json); - } else if (json.output_type === 'display_data') { - this.append_display_data(json); } else if (json.output_type === 'stream') { this.append_stream(json); } + + if (json.output_type === 'display_data') { + this.append_display_data(json, handle_appended); + } else { + handle_appended(); + } this.outputs.push(json); - // We must release the animation fixed height in a timeout since Gecko - // (FireFox) doesn't render the image immediately as the data is - // available. - var that = this; - setTimeout(function(){ - // 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'); - }, 250); }; @@ -479,9 +485,9 @@ var IPython = (function (IPython) { }; - OutputArea.prototype.append_display_data = function (json) { + OutputArea.prototype.append_display_data = function (json, handle_inserted) { var toinsert = this.create_output_area(); - if (this.append_mime_type(json, toinsert)) { + if (this.append_mime_type(json, toinsert, handle_inserted)) { this._safe_append(toinsert); // If we just output latex, typeset it. if ((json['text/latex'] !== undefined) || (json['text/html'] !== undefined)) { @@ -498,7 +504,7 @@ var IPython = (function (IPython) { 'image/jpeg' : true }; - OutputArea.prototype.append_mime_type = function (json, element) { + OutputArea.prototype.append_mime_type = function (json, element, handle_inserted) { for (var type_i in OutputArea.display_order) { var type = OutputArea.display_order[type_i]; var append = OutputArea.append_map[type]; @@ -515,7 +521,14 @@ var IPython = (function (IPython) { } } var md = json.metadata || {}; - var toinsert = append.apply(this, [value, md, element]); + var toinsert = append.apply(this, [value, md, element, handle_inserted]); + // Since only the png and jpeg mime types call the inserted + // callback, if the mim 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() < 0 && handle_inserted !== undefined) { + setTimeout(handle_inserted, 0); + } $([IPython.events]).trigger('output_appended.OutputArea', [type, value, md, toinsert]); return toinsert; } @@ -615,10 +628,13 @@ var IPython = (function (IPython) { if (width !== undefined) img.attr('width', width); }; - var append_png = function (png, md, element) { + 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 = $("").attr('src','data:image/png;base64,'+png); + if (handle_inserted !== undefined) { + img.load(handle_inserted); + } set_width_height(img, md, 'image/png'); this._dblclick_to_reset_size(img); toinsert.append(img); @@ -627,10 +643,13 @@ var IPython = (function (IPython) { }; - var append_jpeg = function (jpeg, md, element) { + 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 = $("").attr('src','data:image/jpeg;base64,'+jpeg); + if (handle_inserted !== undefined) { + img.load(handle_inserted); + } set_width_height(img, md, 'image/jpeg'); this._dblclick_to_reset_size(img); toinsert.append(img);