Skip to content

Commit 33eb10b

Browse files
cherifGsoulcherifGsoul
committed
Run code PrismJS button registration
1 parent 6e7d111 commit 33eb10b

File tree

3 files changed

+102
-38
lines changed

3 files changed

+102
-38
lines changed

‎index.js‎

Lines changed: 39 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -100,62 +100,70 @@ function getStylesFromIframe(iframe) {
100100
}
101101

102102
module.exports = function() {
103+
var codepens = document.querySelectorAll(".codepen");
104+
var parents = [];
105+
//remove the old codepen links
106+
codepens.forEach(function(codepen, i){
107+
var el = findSelector(codepen, 'pre, .demo_wrapper');
108+
parents.push(el);
109+
codepen.parentNode.removeChild(codepen);
110+
});
103111

104-
document.body.addEventListener("click", function(ev){
105-
if(matches.call(ev.target, ".codepen")){
106-
107-
var el = findSelector(ev.target, "pre, .demo_wrapper");
108-
if(el && matches.call(el, "pre")) {
109-
var preElement = el;
110-
var codeElement = preElement.querySelector("code");
111-
var language = codeElement.className.match(languageHTML)[1];
112-
var text = codeElement.textContent;
113-
112+
//Register PrismJS "Run" custom button
113+
Prism.plugins.toolbar.registerButton("run-code", function(env) {
114+
var btn = document.createElement("button");
115+
btn.innerHTML = "Run";
116+
btn.addEventListener('click', function() {
117+
var el;
118+
for (var i = 0; i < parents.length; i++) {
119+
if (parents[i].contains(env.element)) {
120+
el = parents[i];
121+
break;
122+
}
123+
};
124+
//var el = findSelector(env.element.parentElement, 'pre, .demo_wrapper');
125+
if (el && matches.call(el, 'pre')) {
126+
var language = env.language;
127+
var text = env.code;
114128
var data = types[language](text);
115-
116-
if(data.js) {
129+
if (data.js) {
117130
data.js = data.js.trim();
118131
}
119-
if(data.html) {
132+
if (data.html) {
120133
data.html = data.html.trim();
121134
}
122-
if(data) {
135+
if (data) {
123136
cleanCodePenData(data);
124-
if(window.CREATE_CODE_PEN) {
137+
if (window.CREATE_CODE_PEN) {
125138
CREATE_CODE_PEN(data);
126139
} else {
127140
createCodePen(data);
128141
}
129-
130142
} else {
131-
console.warn("Unable to create a codepen for this demo");
143+
console.warn('Unable to create a codepen for this demo');
132144
}
133145
}
134-
if(el && matches.call(el, ".demo_wrapper")) {
135-
var htmlCode = el.querySelector("[data-for=html] code");
136-
var htmlText = htmlCode ? htmlCode.textContent.trim() : "";
137-
138-
var jsCode = el.querySelector("[data-for=js] code");
139-
var jsText = jsCode ? jsCode.textContent.trim() : "";
140-
141-
var cssText = getStylesFromIframe( el.querySelector("iframe") );
142-
146+
if (el && matches.call(el, '.demo_wrapper')) {
147+
var htmlCode = el.querySelector('[data-for=html] code');
148+
var htmlText = htmlCode ? htmlCode.textContent.trim() : '';
149+
var jsCode = el.querySelector('[data-for=js] code');
150+
var jsText = jsCode ? jsCode.textContent.trim() : '';
151+
var cssText = getStylesFromIframe(el.querySelector('iframe'));
143152
var codePen = {
144153
html: htmlText,
145154
js: jsText,
146155
js_module: true,
147-
editors: "1011",
156+
editors: '1011',
148157
css: cssText.trim()
149158
};
150159
cleanCodePenData(codePen);
151-
if(window.CREATE_CODE_PEN) {
160+
if (window.CREATE_CODE_PEN) {
152161
CREATE_CODE_PEN(codePen);
153162
} else {
154163
createCodePen(codePen);
155164
}
156-
157165
}
158-
159-
}
166+
});
167+
return btn;
160168
});
161169
};

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,9 @@
2727
"dependencies": {},
2828
"devDependencies": {
2929
"bit-docs-generate-html": "^0.1.0",
30+
"bit-docs-prettify": "^0.4.1",
3031
"connect": "^2.14.4",
3132
"mocha": "^6.0.2",
32-
"zombie": "^4.3.0"
33+
"zombie": "^6.1.0"
3334
}
3435
}

‎test.js‎

Lines changed: 61 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ describe("bit-docs-html-codepen-link", function() {
4040
html: {
4141
dependencies: {
4242
"bit-docs-html-codepen-link": __dirname,
43+
"bit-docs-prettify": "^0.4.0",
4344
"bit-docs-tag-demo": "^0.5.3"
4445
}
4546
},
@@ -54,10 +55,10 @@ describe("bit-docs-html-codepen-link", function() {
5455
browser.window.CREATE_CODE_PEN = function(data) {
5556
createCallData.push(data);
5657
};
57-
var codePens = doc.querySelectorAll('.codepen');
58-
59-
Array.from(codePens).forEach(function(codePen) {
60-
codePen.click();
58+
var toolbars = doc.querySelectorAll('.toolbar');
59+
Array.from(toolbars).forEach(function(toolbar) {
60+
var btn = toolbar.children[toolbar.children.length - 1].querySelector('button');
61+
btn.click();
6162
});
6263
assert.deepEqual(createCallData, [{
6364
html: '<my-app></my-app>',
@@ -70,8 +71,21 @@ describe("bit-docs-html-codepen-link", function() {
7071
js: 'import {DefineMap} from "//unpkg.com/can@^5.0.0-pre.1/core.mjs";\nconsole.log( myCounter.count ) //-> 1',
7172
js_module: true,
7273
editors: '0011'
73-
}
74-
]);
74+
},
75+
{
76+
css: 'h1 {color: red;}',
77+
editors: '1011',
78+
html: '<h1>Hi There!</h1>',
79+
js: 'var code = "code";',
80+
js_module: true
81+
},
82+
{
83+
css: 'h1 {color: red;}',
84+
editors: '1011',
85+
html: '<h1>Hi There!</h1>',
86+
js: 'var code = "code";',
87+
js_module: true
88+
}]);
7589

7690
close();
7791
done();
@@ -223,4 +237,45 @@ describe("bit-docs-html-codepen-link", function() {
223237
it("supports ts files", function() {
224238
assert.ok(codepenData.ts, "there is a ts");
225239
});
240+
241+
it("Registers run code button", function(done) {
242+
this.timeout(60000);
243+
244+
var docMap = Promise.resolve({
245+
index: {
246+
name: "index",
247+
demo: "path/to/demo.html",
248+
body: fs.readFileSync(__dirname + "/test-demo.md", "utf8"),
249+
codepen: [
250+
["can", "//unpkg.com/can@^5.0.0-pre.1/core.mjs"]
251+
]
252+
}
253+
});
254+
255+
generate(docMap, {
256+
html: {
257+
dependencies: {
258+
"bit-docs-html-codepen-link": __dirname,
259+
"bit-docs-prettify": "^0.4.0",
260+
"bit-docs-tag-demo": "^0.5.3"
261+
}
262+
},
263+
dest: path.join(__dirname, "temp"),
264+
parent: "index",
265+
forceBuild: true,
266+
minifyBuild: false
267+
}).then(function() {
268+
open("temp/index.html", function(browser, close) {
269+
var doc = browser.window.document;
270+
var toolbars = doc.querySelectorAll(".code-toolbar");
271+
toolbars.forEach(function(toolbar) {
272+
var children = toolbar.children;
273+
assert.equal(toolbar.children.length, 2);
274+
assert.equal(children[children.length - 1].innerHTML, '<div class="toolbar-item"><button>Copy</button></div><div class="toolbar-item"><button>Run</button></div>');
275+
});
276+
close();
277+
done();
278+
}, done);
279+
}, done);
280+
});
226281
});

0 commit comments

Comments
 (0)