Merge pull request #8062 from minrk/max-width-again

another stab at confining images to page width

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

@@ -588,6 +588,7 @@ define([
         var toinsert = this.create_output_subarea(md, "output_html rendered_html", type);
         this.keyboard_manager.register_events(toinsert);
         toinsert.append(html);
+        dblclick_to_reset_size(toinsert.find('img'));
         element.append(toinsert);
         return toinsert;
     };
@@ -603,6 +604,7 @@ define([
             html = mathjaxutils.replace_math(html, math);
             toinsert.append(html);
         });
+        dblclick_to_reset_size(toinsert.find('img'));
         element.append(toinsert);
         return toinsert;
     };
@@ -668,6 +670,23 @@ define([
         return toinsert;
     };
 
+    function dblclick_to_reset_size (img) {
+        /**
+         * Double-click on an image toggles confinement to notebook width
+         *
+         * img: jQuery element
+         */
+
+        img.dblclick(function () {
+            // dblclick toggles *raw* size, disabling max-width confinement.
+            if (img.hasClass('unconfined')) {
+                img.removeClass('unconfined');
+            } else {
+                img.addClass('unconfined');
+            }
+        });
+    };
+    
     var set_width_height = function (img, md, mime) {
         /**
          * set width and height of an img element from metadata
@@ -676,6 +695,9 @@ define([
         if (height !== undefined) img.attr('height', height);
         var width = _get_metadata_key(md, 'width', mime);
         if (width !== undefined) img.attr('width', width);
+        if (_get_metadata_key(md, 'unconfined', mime)) {
+            img.addClass('unconfined');
+        }
     };
     
     var append_png = function (png, md, element, handle_inserted) {
@@ -689,6 +711,7 @@ define([
         }
         img[0].src = 'data:image/png;base64,'+ png;
         set_width_height(img, md, 'image/png');
+        dblclick_to_reset_size(img);
         toinsert.append(img);
         element.append(toinsert);
         return toinsert;
@@ -706,6 +729,7 @@ define([
         }
         img[0].src = 'data:image/jpeg;base64,'+ jpeg;
         set_width_height(img, md, 'image/jpeg');
+        dblclick_to_reset_size(img);
         toinsert.append(img);
         element.append(toinsert);
         return toinsert;

IPython/html/static/notebook/less/outputarea.less

@@ -66,6 +66,14 @@ div.output_area {
             margin-right: 0;
         }
     }
+    
+    img, svg {
+        max-width: 100%;
+        height: auto;
+        &.unconfined {
+            max-width: none;
+        }
+    }
 }
 
 /* This is needed to protect the pre formating from global settings such
@@ -98,6 +106,8 @@ div.output_subarea {
     overflow-x: auto;
     padding: @code_padding;
     .box-flex1();
+    // appears to be needed for max-width in children to mean anything on Firefox:
+    max-width: calc(~"100% - 14ex");
 }
 
 /* The rest of the output_* classes are for special styling of the different

IPython/html/static/notebook/less/renderedhtml.less

@@ -82,5 +82,12 @@
         margin-right: auto;
     }
     * + img {margin-top: 1em;}
-
+    
+    img, svg {
+        max-width: 100%;
+        height: auto;
+        &.unconfined {
+            max-width: none;
+        }
+    }
 }

IPython/html/static/notebook/less/textcell.less

@@ -35,6 +35,10 @@ h1,h2,h3,h4,h5,h6 {
     display: none;
 }
 
+.text_cell.rendered .rendered_html {
+    overflow-x: auto;
+}
+
 .text_cell.unrendered .text_cell_render {
     display:none;
 }

IPython/html/static/style/ipython.min.css

@@ -825,6 +825,15 @@ div.output_area .rendered_html img {
   margin-left: 0;
   margin-right: 0;
 }
+div.output_area img,
+div.output_area svg {
+  max-width: 100%;
+  height: auto;
+}
+div.output_area img.unconfined,
+div.output_area svg.unconfined {
+  max-width: none;
+}
 /* This is needed to protect the pre formating from global settings such
    as that of bootstrap */
 .output {
@@ -881,6 +890,7 @@ div.output_subarea {
   box-flex: 1;
   /* Modern browsers */
   flex: 1;
+  max-width: calc(100% - 14ex);
 }
 /* The rest of the output_* classes are for special styling of the different
    output types */
@@ -1116,6 +1126,15 @@ div.output_unrecognized a:hover {
 .rendered_html * + img {
   margin-top: 1em;
 }
+.rendered_html img,
+.rendered_html svg {
+  max-width: 100%;
+  height: auto;
+}
+.rendered_html img.unconfined,
+.rendered_html svg.unconfined {
+  max-width: none;
+}
 div.text_cell {
   /* Old browsers */
   display: -webkit-box;
@@ -1165,6 +1184,9 @@ h6:hover .anchor-link {
 .text_cell.rendered .input_area {
   display: none;
 }
+.text_cell.rendered .rendered_html {
+  overflow-x: auto;
+}
 .text_cell.unrendered .text_cell_render {
   display: none;
 }

IPython/html/static/style/style.min.css

@@ -9617,6 +9617,15 @@ div.output_area .rendered_html img {
   margin-left: 0;
   margin-right: 0;
 }
+div.output_area img,
+div.output_area svg {
+  max-width: 100%;
+  height: auto;
+}
+div.output_area img.unconfined,
+div.output_area svg.unconfined {
+  max-width: none;
+}
 /* This is needed to protect the pre formating from global settings such
    as that of bootstrap */
 .output {
@@ -9673,6 +9682,7 @@ div.output_subarea {
   box-flex: 1;
   /* Modern browsers */
   flex: 1;
+  max-width: calc(100% - 14ex);
 }
 /* The rest of the output_* classes are for special styling of the different
    output types */
@@ -9908,6 +9918,15 @@ div.output_unrecognized a:hover {
 .rendered_html * + img {
   margin-top: 1em;
 }
+.rendered_html img,
+.rendered_html svg {
+  max-width: 100%;
+  height: auto;
+}
+.rendered_html img.unconfined,
+.rendered_html svg.unconfined {
+  max-width: none;
+}
 div.text_cell {
   /* Old browsers */
   display: -webkit-box;
@@ -9957,6 +9976,9 @@ h6:hover .anchor-link {
 .text_cell.rendered .input_area {
   display: none;
 }
+.text_cell.rendered .rendered_html {
+  overflow-x: auto;
+}
 .text_cell.unrendered .text_cell_render {
   display: none;
 }