##// END OF EJS Templates
another stab at confining images to page width...
Min RK -
Show More
@@ -668,6 +668,23 b' define(['
668 return toinsert;
668 return toinsert;
669 };
669 };
670
670
671 dblclick_to_reset_size = function (img) {
672 /**
673 * Double-click on an image toggles confinement to notebook width
674 *
675 * img: jQuery element
676 */
677
678 img.dblclick(function () {
679 // dblclick toggles *raw* size, disabling max-width confinement.
680 if (img.hasClass('unconfined')) {
681 img.removeClass('unconfined');
682 } else {
683 img.addClass('unconfined');
684 }
685 });
686 };
687
671 var set_width_height = function (img, md, mime) {
688 var set_width_height = function (img, md, mime) {
672 /**
689 /**
673 * set width and height of an img element from metadata
690 * set width and height of an img element from metadata
@@ -676,6 +693,9 b' define(['
676 if (height !== undefined) img.attr('height', height);
693 if (height !== undefined) img.attr('height', height);
677 var width = _get_metadata_key(md, 'width', mime);
694 var width = _get_metadata_key(md, 'width', mime);
678 if (width !== undefined) img.attr('width', width);
695 if (width !== undefined) img.attr('width', width);
696 if (_get_metadata_key(md, 'unconfined', mime)) {
697 img.addClass('unconfined');
698 }
679 };
699 };
680
700
681 var append_png = function (png, md, element, handle_inserted) {
701 var append_png = function (png, md, element, handle_inserted) {
@@ -689,6 +709,7 b' define(['
689 }
709 }
690 img[0].src = 'data:image/png;base64,'+ png;
710 img[0].src = 'data:image/png;base64,'+ png;
691 set_width_height(img, md, 'image/png');
711 set_width_height(img, md, 'image/png');
712 dblclick_to_reset_size(img);
692 toinsert.append(img);
713 toinsert.append(img);
693 element.append(toinsert);
714 element.append(toinsert);
694 return toinsert;
715 return toinsert;
@@ -706,6 +727,7 b' define(['
706 }
727 }
707 img[0].src = 'data:image/jpeg;base64,'+ jpeg;
728 img[0].src = 'data:image/jpeg;base64,'+ jpeg;
708 set_width_height(img, md, 'image/jpeg');
729 set_width_height(img, md, 'image/jpeg');
730 dblclick_to_reset_size(img);
709 toinsert.append(img);
731 toinsert.append(img);
710 element.append(toinsert);
732 element.append(toinsert);
711 return toinsert;
733 return toinsert;
@@ -66,6 +66,14 b' div.output_area {'
66 margin-right: 0;
66 margin-right: 0;
67 }
67 }
68 }
68 }
69
70 img, svg {
71 max-width: 100%;
72 height: auto;
73 &.unconfined {
74 max-width: none;
75 }
76 }
69 }
77 }
70
78
71 /* This is needed to protect the pre formating from global settings such
79 /* This is needed to protect the pre formating from global settings such
@@ -83,4 +83,11 b''
83 }
83 }
84 * + img {margin-top: 1em;}
84 * + img {margin-top: 1em;}
85
85
86 img, svg {
87 max-width: 100%;
88 height: auto;
89 &.unconfined {
90 max-width: none;
91 }
92 }
86 }
93 }
@@ -825,6 +825,15 b' div.output_area .rendered_html img {'
825 margin-left: 0;
825 margin-left: 0;
826 margin-right: 0;
826 margin-right: 0;
827 }
827 }
828 div.output_area img,
829 div.output_area svg {
830 max-width: 100%;
831 height: auto;
832 }
833 div.output_area img.unconfined,
834 div.output_area svg.unconfined {
835 max-width: none;
836 }
828 /* This is needed to protect the pre formating from global settings such
837 /* This is needed to protect the pre formating from global settings such
829 as that of bootstrap */
838 as that of bootstrap */
830 .output {
839 .output {
@@ -1116,6 +1125,15 b' div.output_unrecognized a:hover {'
1116 .rendered_html * + img {
1125 .rendered_html * + img {
1117 margin-top: 1em;
1126 margin-top: 1em;
1118 }
1127 }
1128 .rendered_html img,
1129 .rendered_html svg {
1130 max-width: 100%;
1131 height: auto;
1132 }
1133 .rendered_html img.unconfined,
1134 .rendered_html svg.unconfined {
1135 max-width: none;
1136 }
1119 div.text_cell {
1137 div.text_cell {
1120 /* Old browsers */
1138 /* Old browsers */
1121 display: -webkit-box;
1139 display: -webkit-box;
@@ -9617,6 +9617,15 b' div.output_area .rendered_html img {'
9617 margin-left: 0;
9617 margin-left: 0;
9618 margin-right: 0;
9618 margin-right: 0;
9619 }
9619 }
9620 div.output_area img,
9621 div.output_area svg {
9622 max-width: 100%;
9623 height: auto;
9624 }
9625 div.output_area img.unconfined,
9626 div.output_area svg.unconfined {
9627 max-width: none;
9628 }
9620 /* This is needed to protect the pre formating from global settings such
9629 /* This is needed to protect the pre formating from global settings such
9621 as that of bootstrap */
9630 as that of bootstrap */
9622 .output {
9631 .output {
@@ -9908,6 +9917,15 b' div.output_unrecognized a:hover {'
9908 .rendered_html * + img {
9917 .rendered_html * + img {
9909 margin-top: 1em;
9918 margin-top: 1em;
9910 }
9919 }
9920 .rendered_html img,
9921 .rendered_html svg {
9922 max-width: 100%;
9923 height: auto;
9924 }
9925 .rendered_html img.unconfined,
9926 .rendered_html svg.unconfined {
9927 max-width: none;
9928 }
9911 div.text_cell {
9929 div.text_cell {
9912 /* Old browsers */
9930 /* Old browsers */
9913 display: -webkit-box;
9931 display: -webkit-box;
@@ -142,6 +142,9 b" width={{output.metadata['image/png']['width']}}"
142 {%- if 'height' in output.metadata.get('image/png', {}) %}
142 {%- if 'height' in output.metadata.get('image/png', {}) %}
143 height={{output.metadata['image/png']['height']}}
143 height={{output.metadata['image/png']['height']}}
144 {%- endif %}
144 {%- endif %}
145 {%- if output.metadata.get('image/png', {}).get('unconfined') %}
146 class="unconfined"
147 {%- endif %}
145 >
148 >
146 </div>
149 </div>
147 {%- endblock data_png %}
150 {%- endblock data_png %}
General Comments 0
You need to be logged in to leave comments. Login now