Skip to content

Commit 6f6e562

Browse files
matthewpmatthewp
committed
Basics working of @demo 
0 parents  commit 6f6e562

File tree

11 files changed

+339
-0
lines changed

11 files changed

+339
-0
lines changed

‎.editorconfig

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
; Unix-style newlines
2+
[*]
3+
end_of_line = LF
4+
indent_style = tab
5+
trim_trailing_whitespace = false
6+
insert_final_newline = true

‎.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules/
2+
temp/

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# bit-docs-tag-demo

‎bit-docs.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
var tags = require("./tags");
2+
3+
module.exports = function(bitDocs){
4+
var pkg = require("./package.json");
5+
var deps = {};
6+
7+
deps[pkg.name] = pkg.version;
8+
9+
bitDocs.register("html", {
10+
dependencies: dependencies
11+
});
12+
13+
bitDocs.register("tags", tags);
14+
};

‎demo.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
var demoFrame = require("./demo_frame");
2+
3+
var demos = [].slice.call(document.getElementsByClassName("demo_wrapper"));
4+
demos.forEach(demoFrame);

‎demo_frame.js

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
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, docConfig){
17+
var demoDiv = document.createElement("div");
18+
demoDiv.className = "demo";
19+
demoDiv.innerHTML = template;
20+
var demoSrc = (docConfig.demoSrcRoot || "..") + "/" + node.dataset.demoSrc;
21+
demoDiv.getElementsByTagName("iframe")[0].src = demoSrc;
22+
23+
node.innerHTML = "";
24+
node.appendChild(demoDiv);
25+
26+
return demoDiv;
27+
}
28+
29+
30+
module.exports = function(node){
31+
var docConfig = window.docConfig || {};
32+
33+
render(node, docConfig);
34+
35+
var iframe = node.getElementsByTagName("iframe")[0];
36+
37+
iframe.addEventListener("load", process);
38+
39+
function process(){
40+
var demoEl = this.contentDocument.getElementById('demo-html'),
41+
sourceEl = this.contentDocument.getElementById('demo-source');
42+
43+
var html = getHTML.call(this, demoEl);
44+
var js = getJS.call(this, sourceEl);
45+
46+
var dataForHtml = node.querySelector("[data-for=html] > pre");
47+
dataForHtml.innerHTML = html;
48+
49+
var dataForJS = node.querySelector("[data-for=js] > pre");
50+
dataForJS.innerHTML = js;
51+
show(node.querySelector("[data-tab=js]"));
52+
53+
tabs();
54+
}
55+
56+
function getHTML(demoEl) {
57+
var html = demoEl ? demoEl.innerHTML : this.contentWindow.DEMO_HTML;
58+
59+
if(!html) {
60+
// try to make from body
61+
var clonedBody = this.contentDocument.body.cloneNode(true);
62+
var scripts = [].slice.call(clonedBody.getElementsByTagName("script"));
63+
scripts.forEach(function(script){
64+
if(!script.type || script.type.indexOf("javascript") >= 0) {
65+
script.parentNode.removeChild(script);
66+
}
67+
});
68+
var styles = [].slice.call(clonedBody.getElementsByTagName("style"));
69+
styles.forEach(function(style){
70+
style.parentNode.removeChild(style);
71+
});
72+
html = clonedBody.innerHTML;
73+
}
74+
return html;
75+
}
76+
77+
function getJS(sourceEl){
78+
var source = sourceEl ? sourceEl.innerHTML : this.contentWindow.DEMO_SOURCE;
79+
if(!source){
80+
var scripts = [].slice.call(this.contentDocument.querySelectorAll("script"));
81+
// get the first one that is JS
82+
for(var i =0; i < scripts.length; i++){
83+
if(!scripts[i].type || scripts[i].type.indexOf("javascript") >= 0 &&
84+
!scripts[i].src){
85+
source = scripts[i].innerHTML;
86+
break;
87+
}
88+
}
89+
}
90+
return source.trim();
91+
}
92+
93+
function show(el) {
94+
el.style.display = "block";
95+
}
96+
97+
function hide(el) {
98+
el.style.display = "none";
99+
}
100+
101+
function tabs() {
102+
node.querySelector("ul").addEventListener("click", function(ev){
103+
var el = ev.target;
104+
if(el.className === "tab") {
105+
toggle(el.dataset.tab);
106+
}
107+
});
108+
toggle("demo");
109+
110+
function toggle(tabName) {
111+
each(".tab", function(el){
112+
el.classList.remove("active");
113+
});
114+
115+
each(".tab-content", hide);
116+
each(".tab[data-tab='" + tabName + "']", function(el){
117+
el.classList.add("active");
118+
});
119+
each("[data-for='" + tabName + "']", show);
120+
}
121+
122+
function each(selector, cb) {
123+
var tabs = [].slice.call(node.querySelectorAll(selector));
124+
tabs.forEach(cb);
125+
}
126+
127+
}
128+
129+
};

‎demo_frame.stache

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<div class="demo">
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 src="{{demoSrc}}"/>
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+
</div>

‎package.json

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"name": "bit-docs-tag-demo",
3+
"version": "0.1.0",
4+
"description": "@demo tag for bit-docs",
5+
"main": "demo.js",
6+
"scripts": {
7+
"test": "mocha test.js --reporter spec",
8+
"postversion": "git push --tags && git push",
9+
"preversion": "npm test",
10+
"release:pre": "npm version prerelease && npm publish",
11+
"release:patch": "npm version patch && npm publish",
12+
"release:minor": "npm version minor && npm publish",
13+
"release:major": "npm version major && npm publish"
14+
},
15+
"repository": {
16+
"type": "git",
17+
"url": "git+ssh://[email protected]/bit-docs/bit-docs-tag-demo.git"
18+
},
19+
"keywords": [
20+
"bit-docs"
21+
],
22+
"author": "Bitovi",
23+
"license": "MIT",
24+
"bugs": {
25+
"url": "https://github.com/bit-docs/bit-docs-tag-demo/issues"
26+
},
27+
"homepage": "https://github.com/bit-docs/bit-docs-tag-demo#readme",
28+
"dependencies": {
29+
"bit-docs-process-tags": "^0.0.3",
30+
"bit-docs-type-annotate": "^0.0.1"
31+
},
32+
"devDependencies": {
33+
"bit-docs-generate-html": "^0.0.3",
34+
"connect": "^2.14.4",
35+
"mocha": "^2.5.3",
36+
"zombie": "^4.2.1"
37+
}
38+
}

‎tags.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
2+
exports.demo = {
3+
add: function( line, curData, scope, objects, currentWrite ) {
4+
console.log("DOING IT");
5+
6+
var m = line.match(/^\s*@demo\s*([\w\.\/\-\$]*)\s*([\w]*)/)
7+
if ( m ) {
8+
var src = m[1] ? m[1].toLowerCase() : '';
9+
var heightAttr = m[2].length > 0 ? " data-demo-height='" + m[2] + "'" : '';
10+
11+
12+
13+
var cd = ( curData && curData.length !== 2),
14+
cw = (currentWrite || "body"),
15+
html = "<div class='demo_wrapper' data-demo-src='" + src + "'" + heightAttr + "></div>\n";
16+
17+
18+
// use curData if it is not an array
19+
var useCurData = cd && (typeof curData.description === "string") && !curData.body;
20+
21+
if(useCurData) {
22+
23+
curData.description += html;
24+
} else {
25+
this.body += html;
26+
}
27+
28+
}
29+
}
30+
};

‎test.js

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
var assert = require("assert");
2+
var generate = require("bit-docs-generate-html/generate");
3+
var path = require("path");
4+
5+
var Browser = require("zombie"),
6+
connect = require("connect");
7+
8+
9+
var find = function(browser, property, callback, done){
10+
var start = new Date();
11+
var check = function(){
12+
if(browser.window && browser.window[property]) {
13+
callback(browser.window[property]);
14+
} else if(new Date() - start < 2000){
15+
setTimeout(check, 20);
16+
} else {
17+
done("failed to find "+property);
18+
}
19+
};
20+
check();
21+
};
22+
var waitFor = function(browser, checker, callback, done){
23+
var start = new Date();
24+
var check = function(){
25+
if(checker(browser.window)) {
26+
callback(browser.window);
27+
} else if(new Date() - start < 2000){
28+
setTimeout(check, 20);
29+
} else {
30+
done(new Error("checker was never true"));
31+
}
32+
};
33+
check();
34+
};
35+
36+
37+
var open = function(url, callback, done){
38+
var server = connect().use(connect.static(path.join(__dirname))).listen(8081);
39+
var browser = new Browser();
40+
browser.visit("http://localhost:8081/"+url)
41+
.then(function(){
42+
callback(browser, function(){
43+
server.close();
44+
})
45+
}).catch(function(e){
46+
server.close();
47+
done(e)
48+
});
49+
};
50+
51+
describe("bit-docs-tag-demo", function(){
52+
it("basics works", function(done){
53+
this.timeout(60000);
54+
55+
var docMap = Promise.resolve({
56+
index: {
57+
name: "index",
58+
demo: "path/to/demo.html",
59+
body: "<div class='demo_wrapper' data-demo-src='test/basics/demo.html'></div>\n"
60+
}
61+
});
62+
63+
generate(docMap, {
64+
html: {
65+
dependencies: {
66+
"bit-docs-tag-demo": __dirname
67+
}
68+
},
69+
dest: path.join(__dirname, "temp"),
70+
parent: "index",
71+
forceBuild: true,
72+
debug: true,
73+
minifyBuild: false
74+
}).then(function(){
75+
76+
open("temp/index.html",function(browser, close){
77+
waitFor(browser, function(window){
78+
return window.document.getElementsByClassName("demo").length;
79+
}, function(){
80+
var doc = browser.window.document;
81+
var tabs = doc.getElementsByClassName("tab");
82+
83+
assert.equal(tabs.length, 3, "there are 3 tabs");
84+
85+
// TODO better testing, click on stuff
86+
87+
close();
88+
done();
89+
});
90+
},done);
91+
});
92+
});
93+
});

0 commit comments

Comments
 (0)