use chained delay for setting resizable images

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

@@ -280,33 +280,37 @@ var IPython = (function (IPython) {
     };
 
 
-    OutputArea.prototype.append_png = function (png, element) {
-        var toinsert = $("<div/>").addClass("box-flex1 output_subarea output_png");
-        var img = $("<img/>").attr('src','data:image/png;base64,'+png);
+    OutputArea.prototype._dblclick_to_reset_size = function (img) {
+        // schedule wrapping image in resizable after a delay,
+        // so we don't end up calling resize on a zero-size object
+        var that = this;
         setTimeout(function () {
+            var h0 = img.height();
+            var w0 = img.width();
+            if (!(h0 && w0)) {
+                // zero size, schedule another timeout
+                that._dblclick_to_reset_size(img);
+                return
+            }
             img.resizable({
                 aspectRatio: true,
-                autoHide: true,
-                start: function(evt, ui) {
-                    var wrapper = $(evt.target);
-                    var original_height = ui.originalSize.height;
-                    var original_width = ui.originalSize.width;
-                    if (original_height == 0 || original_width == 0) {
-                        // protect against weird case of zero size;
-                        return;
-                    }
-                    // only do this once:
-                    wrapper.unbind("resizestart");
-                    wrapper.dblclick(function () {
-                        // resize wrapper & image together for some reason:
-                        wrapper.height(original_height);
-                        img.height(original_height);
-                        wrapper.width(original_width);
-                        img.width(original_width);
-                    });
-                }
+                autoHide: true
+            });
+            img.dblclick(function () {
+                // resize wrapper & image together for some reason:
+                img.parent().height(h0);
+                img.height(h0);
+                img.parent().width(w0);
+                img.width(w0);
             });
         }, 250);
+    }
+
+
+    OutputArea.prototype.append_png = function (png, element) {
+        var toinsert = $("<div/>").addClass("box-flex1 output_subarea output_png");
+        var img = $("<img/>").attr('src','data:image/png;base64,'+png);
+        this._dblclick_to_reset_size(img);
         toinsert.append(img);
         element.append(toinsert);
     };
@@ -315,30 +319,7 @@ var IPython = (function (IPython) {
     OutputArea.prototype.append_jpeg = function (jpeg, element) {
         var toinsert = $("<div/>").addClass("box-flex1 output_subarea output_jpeg");
         var img = $("<img/>").attr('src','data:image/jpeg;base64,'+jpeg);
-        setTimeout(function () {
-            img.resizable({
-                aspectRatio: true,
-                autoHide: true,
-                start: function(evt, ui) {
-                    var wrapper = $(evt.target);
-                    var original_height = ui.originalSize.height;
-                    var original_width = ui.originalSize.width;
-                    if (original_height == 0 || original_width == 0) {
-                        // protect against weird case of zero size;
-                        return;
-                    }
-                    // only do this once:
-                    wrapper.unbind("resizestart");
-                    wrapper.dblclick(function () {
-                        // resize wrapper & image together for some reason:
-                        wrapper.height(original_height);
-                        img.height(original_height);
-                        wrapper.width(original_width);
-                        img.width(original_width);
-                    });
-                }
-            });
-        }, 250);
+        this._dblclick_to_reset_size(img);
         toinsert.append(img);
         element.append(toinsert);
     };