Resize iframe to fit content up to 600px

Closes #4

Author: m-mujica

demo_frame.js

@@ -40,6 +40,7 @@ module.exports = function(node) {
 			show(node.querySelector("[data-tab=js]"));
 		}
 
+		resizeIframe();
 		tabs();
 	}
 
@@ -131,4 +132,30 @@ module.exports = function(node) {
 		txt = txt.replace(/</g, "&lt;");
 		return typeof prettyPrintOne !== "undefined" ? prettyPrintOne(txt) : txt;
 	}
+
+	function resizeIframe() {
+		var frame = node.getElementsByTagName("iframe")[0];
+		var height = frame.contentWindow.document.body.scrollHeight;
+
+		var tolerance = 5; // pixels
+		var low = height - tolerance;
+		var high = height + tolerance;
+
+		// turns "150px" to 150, and "" to 0
+		var getCssHeight = function() {
+			var h = frame.style.height;
+			return Number(h.substr(0, h.length - 2) || 0);
+		};
+
+		var cssHeight = getCssHeight();
+
+		// Setting the height causes the next resizeIframe call to get a different
+		// height reading (lower); The range/tolerance logic is added to prevent the
+		// continous shrinking of the iframe
+		if (cssHeight < low || cssHeight > high) {
+			iframe.style.height = Math.min(high, 600) + "px";
+		}
+
+		setTimeout(resizeIframe, 1000);
+	}
 };

test.js

@@ -359,6 +359,33 @@ describe("bit-docs-tag-demo", function() {
 			});
 		});
 
+		describe("resize iframe to fit content up to 600px", function() {
+			before(function() {
+				return ctx.browser
+					.newPage()
+					.then(function(p) {
+						ctx.page = p;
+						return ctx.page.goto("http://127.0.0.1:8081/test/temp/height.html");
+					})
+					.then(function() {
+						return ctx.page.waitForFunction(function() {
+							var iframe = document.querySelector("iframe");
+							return iframe && iframe.style.height === "600px";
+						});
+					});
+			});
+
+			it("resizes height up to 600px", function() {
+				ctx.page
+					.evaluate(function() {
+						return document.querySelector("iframe").style.height;
+					})
+					.then(function(height) {
+						assert.equal(height, "600px");
+					});
+			});
+		});
+
 		describe("multiple instances", function() {
 			this.timeout(8000);
 
@@ -391,8 +418,8 @@ describe("bit-docs-tag-demo", function() {
 						};
 					})
 					.then(function(r) {
-						assert.equal(r.wrappers, 4, "four wrappers exists");
-						assert.equal(r.injected, 4, "four injected into wrappers");
+						assert.equal(r.wrappers, 5, "four wrappers exists");
+						assert.equal(r.injected, 5, "four injected into wrappers");
 					});
 			});
 		});

test/demos/demo-height.html

@@ -0,0 +1,9 @@
+<div id="demo-html"></b></div>
+<script id="demo-source">
+	for (var i = 0; i < 7; i += 1) {
+		var div = document.createElement("div");
+		div.style.height = "100px";
+		div.textContent = "it worked!";
+		document.body.appendChild(div);
+	}
+</script>

test/generate.js

@@ -15,7 +15,8 @@ function allDemos() {
 		"demo-with-ids",
 		"demo-without-ids",
 		"demo-without-js",
-		"demo-complex"
+		"demo-complex",
+		"demo-height"
 	]
 		.map(function(demo) {
 			return "<h2>" + demo + "</h2>" + makeWrapper(demo);
@@ -40,6 +41,10 @@ var docMap = Promise.resolve({
 		name: "complex",
 		body: makeWrapper("demo-complex")
 	},
+	height: {
+		name: "height",
+		body: makeWrapper("demo-height")
+	},
 	index: {
 		name: "index",
 		body: allDemos()