Skip to content

Commit f389dea

Browse files
m-mujicam-mujica
committed
Prettify code
1 parent f92591b commit f389dea

File tree

2 files changed

+80
-76
lines changed

2 files changed

+80
-76
lines changed

‎demo_frame.js‎

Lines changed: 64 additions & 76 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,72 @@ 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+
tabs();
5544
}
5645

5746
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;
47+
var html = demoEl ? demoEl.innerHTML : this.contentWindow.DEMO_HTML;
48+
49+
if (!html) {
50+
// try to make from body
51+
var clonedBody = this.contentDocument.body.cloneNode(true);
52+
var scripts = [].slice.call(clonedBody.getElementsByTagName("script"));
53+
scripts.forEach(function(script) {
54+
if (!script.type || script.type.indexOf("javascript") === -1) {
55+
script.parentNode.removeChild(script);
56+
}
57+
});
58+
var styles = [].slice.call(clonedBody.getElementsByTagName("style"));
59+
styles.forEach(function(style) {
60+
style.parentNode.removeChild(style);
61+
});
62+
html = clonedBody.innerHTML;
63+
}
64+
return html;
7665
}
7766

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-
}
67+
function getJS(sourceEl) {
68+
var source = sourceEl ? sourceEl.innerHTML : this.contentWindow.DEMO_SOURCE;
69+
if (!source) {
70+
var scripts = [].slice.call(
71+
this.contentDocument.querySelectorAll("script")
72+
);
73+
// get the first one that is JS
74+
for (var i = 0; i < scripts.length; i++) {
75+
if (
76+
!scripts[i].type ||
77+
(scripts[i].type.indexOf("javascript") >= 0 && !scripts[i].src)
78+
) {
79+
source = scripts[i].innerHTML;
80+
break;
8981
}
9082
}
91-
return (source ? source.trim() : '');
83+
}
84+
return source ? source.trim() : "";
9285
}
9386

9487
function show(el) {
@@ -100,32 +93,30 @@ module.exports = function(node){
10093
}
10194

10295
function tabs() {
103-
node.querySelector("ul").addEventListener("click", function(ev){
96+
node.querySelector("ul").addEventListener("click", function(ev) {
10497
var el = ev.target;
105-
if(el.className === "tab") {
98+
if (el.className === "tab") {
10699
toggle(el.dataset ? el.dataset.tab : el.getAttribute("data-tab"));
107100
}
108101
});
109102
toggle("demo");
110103

111104
function toggle(tabName) {
112-
each(".tab", function(el){
113-
if(el.classList) {
105+
each(".tab", function(el) {
106+
if (el.classList) {
114107
el.classList.remove("active");
115108
} else {
116109
el.className = "tab";
117110
}
118-
119111
});
120112

121113
each(".tab-content", hide);
122-
each(".tab[data-tab='" + tabName + "']", function(el){
123-
if(el.classList) {
114+
each(".tab[data-tab='" + tabName + "']", function(el) {
115+
if (el.classList) {
124116
el.classList.add("active");
125117
} else {
126118
el.className = "tab active";
127119
}
128-
129120
});
130121
each("[data-for='" + tabName + "']", show);
131122
}
@@ -134,13 +125,10 @@ module.exports = function(node){
134125
var tabs = [].slice.call(node.querySelectorAll(selector));
135126
tabs.forEach(cb);
136127
}
137-
138128
}
139129

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

‎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+
`;

0 commit comments

Comments
 (0)