Skip to content

Commit efd550e

Browse files
m-mujicam-mujica
authored
Merge pull request #13 from bit-docs/resize
Resize iframe to fit content up to 600px
2 parents f92591b + 8bd1e63 commit efd550e

File tree

7 files changed

+528
-291
lines changed

7 files changed

+528
-291
lines changed

‎.travis.yml

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
1+
dist: trusty
12
language: node_js
23
node_js: node
4+
addons:
5+
chrome: stable
36
before_install:
47
- "export DISPLAY=:99.0"
58
- "sh -e /etc/init.d/xvfb start"
9+
- sleep 3 # give xvfb some time to start

‎demo_frame.js

Lines changed: 90 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,13 @@
1-
var template = '<ul>' +
2-
'<li class="tab" data-tab="demo">Demo</li>' +
3-
'<li class="tab" data-tab="html">HTML</li>' +
4-
'<li class="tab" data-tab="js" style="display:none;">JS</li>' +
5-
'</ul>' +
6-
'<div class="tab-content" data-for="demo">' +
7-
'<iframe></iframe>' +
8-
'</div>' +
9-
'<div class="tab-content" data-for="html">' +
10-
'<pre class="prettyprint"></pre>' +
11-
'</div>' +
12-
'<div class="tab-content" data-for="js">' +
13-
'<pre class="prettyprint lang-js"></pre>' +
14-
'</div>';
15-
16-
function render(node, docObject){
1+
var template = require("./demo_tpl");
2+
3+
function render(node, docObject) {
174
var demoDiv = document.createElement("div");
185
demoDiv.className = "demo";
196
demoDiv.innerHTML = template;
20-
var demoSrc = (docObject.pathToRoot || "..") + "/" + (node.dataset ? node.dataset.demoSrc : node.getAttribute("data-demo-src"));
7+
var demoSrc =
8+
(docObject.pathToRoot || "..") +
9+
"/" +
10+
(node.dataset ? node.dataset.demoSrc : node.getAttribute("data-demo-src"));
2111
demoDiv.getElementsByTagName("iframe")[0].src = demoSrc;
2212

2313
node.innerHTML = "";
@@ -26,69 +16,73 @@ function render(node, docObject){
2616
return demoDiv;
2717
}
2818

29-
30-
module.exports = function(node){
19+
module.exports = function(node) {
3120
var docObject = window.docObject || {};
3221
render(node, docObject);
3322

3423
var iframe = node.getElementsByTagName("iframe")[0];
3524

3625
iframe.addEventListener("load", process);
3726

38-
function process(){
39-
var demoEl = this.contentDocument.getElementById('demo-html'),
40-
sourceEl = this.contentDocument.getElementById('demo-source');
27+
function process() {
28+
var demoEl = this.contentDocument.getElementById("demo-html"),
29+
sourceEl = this.contentDocument.getElementById("demo-source");
4130

42-
var html = getHTML.call(this, demoEl);
43-
var js = getJS.call(this, sourceEl);
31+
var html = getHTML.call(this, demoEl);
32+
var js = getJS.call(this, sourceEl);
4433

45-
var dataForHtml = node.querySelector("[data-for=html] > pre");
46-
dataForHtml.innerHTML = prettyify(html);
34+
var dataForHtml = node.querySelector("[data-for=html] > pre");
35+
dataForHtml.innerHTML = prettyify(html);
4736

48-
if (js) {
49-
var dataForJS = node.querySelector("[data-for=js] > pre");
50-
dataForJS.innerHTML = prettyify(js.replace(/\t/g," "));
51-
show(node.querySelector("[data-tab=js]"));
52-
}
37+
if (js) {
38+
var dataForJS = node.querySelector("[data-for=js] > pre");
39+
dataForJS.innerHTML = prettyify(js.replace(/\t/g, " "));
40+
show(node.querySelector("[data-tab=js]"));
41+
}
5342

54-
tabs();
43+
resizeIframe();
44+
tabs();
5545
}
5646

5747
function getHTML(demoEl) {
58-
var html = demoEl ? demoEl.innerHTML : this.contentWindow.DEMO_HTML;
59-
60-
if(!html) {
61-
// try to make from body
62-
var clonedBody = this.contentDocument.body.cloneNode(true);
63-
var scripts = [].slice.call(clonedBody.getElementsByTagName("script"));
64-
scripts.forEach(function(script){
65-
if(!script.type || script.type.indexOf("javascript") === -1) {
66-
script.parentNode.removeChild(script);
67-
}
68-
});
69-
var styles = [].slice.call(clonedBody.getElementsByTagName("style"));
70-
styles.forEach(function(style){
71-
style.parentNode.removeChild(style);
72-
});
73-
html = clonedBody.innerHTML;
74-
}
75-
return html;
48+
var html = demoEl ? demoEl.innerHTML : this.contentWindow.DEMO_HTML;
49+
50+
if (!html) {
51+
// try to make from body
52+
var clonedBody = this.contentDocument.body.cloneNode(true);
53+
var scripts = [].slice.call(clonedBody.getElementsByTagName("script"));
54+
scripts.forEach(function(script) {
55+
if (!script.type || script.type.indexOf("javascript") === -1) {
56+
script.parentNode.removeChild(script);
57+
}
58+
});
59+
var styles = [].slice.call(clonedBody.getElementsByTagName("style"));
60+
styles.forEach(function(style) {
61+
style.parentNode.removeChild(style);
62+
});
63+
html = clonedBody.innerHTML;
64+
}
65+
return html;
7666
}
7767

78-
function getJS(sourceEl){
79-
var source = sourceEl ? sourceEl.innerHTML : this.contentWindow.DEMO_SOURCE;
80-
if(!source){
81-
var scripts = [].slice.call(this.contentDocument.querySelectorAll("script"));
82-
// get the first one that is JS
83-
for(var i =0; i < scripts.length; i++){
84-
if(!scripts[i].type || (scripts[i].type.indexOf("javascript") >= 0 &&
85-
!scripts[i].src)){
86-
source = scripts[i].innerHTML;
87-
break;
88-
}
68+
function getJS(sourceEl) {
69+
var source = sourceEl ? sourceEl.innerHTML : this.contentWindow.DEMO_SOURCE;
70+
if (!source) {
71+
var scripts = [].slice.call(
72+
this.contentDocument.querySelectorAll("script")
73+
);
74+
// get the first one that is JS
75+
for (var i = 0; i < scripts.length; i++) {
76+
if (
77+
!scripts[i].type ||
78+
(scripts[i].type.indexOf("javascript") >= 0 && !scripts[i].src)
79+
) {
80+
source = scripts[i].innerHTML;
81+
break;
8982
}
9083
}
91-
return (source ? source.trim() : '');
84+
}
85+
return source ? source.trim() : "";
9286
}
9387

9488
function show(el) {
@@ -100,32 +94,30 @@ module.exports = function(node){
10094
}
10195

10296
function tabs() {
103-
node.querySelector("ul").addEventListener("click", function(ev){
97+
node.querySelector("ul").addEventListener("click", function(ev) {
10498
var el = ev.target;
105-
if(el.className === "tab") {
99+
if (el.className === "tab") {
106100
toggle(el.dataset ? el.dataset.tab : el.getAttribute("data-tab"));
107101
}
108102
});
109103
toggle("demo");
110104

111105
function toggle(tabName) {
112-
each(".tab", function(el){
113-
if(el.classList) {
106+
each(".tab", function(el) {
107+
if (el.classList) {
114108
el.classList.remove("active");
115109
} else {
116110
el.className = "tab";
117111
}
118-
119112
});
120113

121114
each(".tab-content", hide);
122-
each(".tab[data-tab='" + tabName + "']", function(el){
123-
if(el.classList) {
115+
each(".tab[data-tab='" + tabName + "']", function(el) {
116+
if (el.classList) {
124117
el.classList.add("active");
125118
} else {
126119
el.className = "tab active";
127120
}
128-
129121
});
130122
each("[data-for='" + tabName + "']", show);
131123
}
@@ -134,13 +126,36 @@ module.exports = function(node){
134126
var tabs = [].slice.call(node.querySelectorAll(selector));
135127
tabs.forEach(cb);
136128
}
137-
138129
}
139130

140-
function prettyify(txt){
141-
txt = txt.replace(/</g, '&lt;');
142-
return typeof prettyPrintOne !== "undefined" ?
143-
prettyPrintOne(txt) : txt;
131+
function prettyify(txt) {
132+
txt = txt.replace(/</g, "&lt;");
133+
return typeof prettyPrintOne !== "undefined" ? prettyPrintOne(txt) : txt;
144134
}
145135

136+
function resizeIframe() {
137+
var frame = node.getElementsByTagName("iframe")[0];
138+
var height = frame.contentWindow.document.body.scrollHeight;
139+
140+
var tolerance = 5; // pixels
141+
var low = height - tolerance;
142+
var high = height + tolerance;
143+
144+
// turns "150px" to 150, and "" to 0
145+
var getCssHeight = function() {
146+
var h = frame.style.height;
147+
return Number(h.substr(0, h.length - 2) || 0);
148+
};
149+
150+
var cssHeight = getCssHeight();
151+
152+
// Setting the height causes the next resizeIframe call to get a different
153+
// height reading (lower); The range/tolerance logic is added to prevent the
154+
// continous shrinking of the iframe
155+
if (cssHeight < low || cssHeight > high) {
156+
iframe.style.height = Math.min(high, 600) + "px";
157+
}
158+
159+
setTimeout(resizeIframe, 1000);
160+
}
146161
};

‎demo_tpl.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
module.exports = `
2+
<ul>
3+
<li class="tab" data-tab="demo">Demo</li>
4+
<li class="tab" data-tab="html">HTML</li>
5+
<li class="tab" data-tab="js" style="display:none;">JS</li>
6+
</ul>
7+
<div class="tab-content" data-for="demo">
8+
<iframe></iframe>
9+
</div>
10+
<div class="tab-content" data-for="html">
11+
<pre class="prettyprint"></pre>
12+
</div>
13+
<div class="tab-content" data-for="js">
14+
<pre class="prettyprint lang-js"></pre>
15+
</div>
16+
`;

‎package.json

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,23 +17,23 @@
1717
"url": "git+ssh://[email protected]/bit-docs/bit-docs-tag-demo.git"
1818
},
1919
"scripts": {
20+
"generate": "node test/generate",
21+
"preversion": "npm test",
22+
"postversion": "git push --tags && git push",
2023
"release:major": "npm version major && npm publish",
2124
"release:minor": "npm version minor && npm publish",
2225
"release:patch": "npm version patch && npm publish",
2326
"release:pre": "npm version prerelease && npm publish",
24-
"test": "mocha test.js --reporter spec",
25-
"preversion": "npm test",
26-
"postversion": "git push --tags && git push"
27+
"test": "npm run generate && mocha test.js"
2728
},
2829
"devDependencies": {
2930
"bit-docs-generate-html": "0.5.0-pre.4",
3031
"can-stache": "3.7.2",
31-
"express": "^4.15.2",
32+
"express": "^4.16.2",
3233
"mocha": "^3.2.0",
33-
"rimraf": "^2.6.1",
34+
"puppeteer": "^0.13.0",
3435
"steal": "^1.4.6",
35-
"steal-less": "^1.2.0",
36-
"zombie": "^5.0.5"
36+
"steal-less": "^1.2.0"
3737
},
3838
"steal": {
3939
"plugins": [

0 commit comments

Comments
 (0)