Skip to content

Run code PrismJS button registration #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Aug 16, 2019
Merged

Run code PrismJS button registration #14

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
33eb10b
Run code PrismJS button registration
cherifGsoul Aug 1, 2019
2939c7d
remove comment in the code
cherifGsoul Aug 1, 2019
d579268
DOM queries enhancements
cherifGsoul Aug 1, 2019
536289a
Prevent run button to be registred for every demo
cherifGsoul Aug 12, 2019
8b1aa0c
Check if codepen iframe is selected
cherifGsoul Aug 13, 2019
df6865a
Be specific to div when selecting the codepen link
cherifGsoul Aug 13, 2019
96d22a3
use event delegation on run button
cherifGsoul Aug 14, 2019
7a18b43
One delegated event listener on the body
cherifGsoul Aug 16, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 38 additions & 30 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,62 +100,70 @@ function getStylesFromIframe(iframe) {
}

module.exports = function() {
var codepens = document.querySelectorAll(".codepen");
var parents = [];
//remove the old codepen links
codepens.forEach(function(codepen, i){
var el = findSelector(codepen, 'pre, .demo_wrapper');
parents.push(el);
codepen.parentNode.removeChild(codepen);
});

document.body.addEventListener("click", function(ev){
if(matches.call(ev.target, ".codepen")){

var el = findSelector(ev.target, "pre, .demo_wrapper");
if(el && matches.call(el, "pre")) {
var preElement = el;
var codeElement = preElement.querySelector("code");
var language = codeElement.className.match(languageHTML)[1];
var text = codeElement.textContent;
//Register PrismJS "Run" custom button
Prism.plugins.toolbar.registerButton("run-code", function(env) {
var btn = document.createElement("button");
btn.innerHTML = "Run";
btn.addEventListener('click', function() {
var el;
for (var i = 0; i < parents.length; i++) {
if (parents[i].contains(env.element)) {
el = parents[i];
break;
}
};
Copy link
Contributor

@chasenlehara chasenlehara Aug 1, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does registerButton only need to be called once (vs. a call for each instance of the toolbar)?

Instead of keeping the parents, should we walk up from env.element to find the pre?

Copy link
Contributor Author

@cherifGsoul cherifGsoul Aug 1, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The registerButton needs to be called once otherwise it register all the buttons for each of the codes.

For parents I did try to walk up but it didn't work.


if (el && matches.call(el, 'pre')) {
var language = env.language;
var text = env.code;
var data = types[language](text);

if(data.js) {
if (data.js) {
data.js = data.js.trim();
}
if(data.html) {
if (data.html) {
data.html = data.html.trim();
}
if(data) {
if (data) {
cleanCodePenData(data);
if(window.CREATE_CODE_PEN) {
if (window.CREATE_CODE_PEN) {
CREATE_CODE_PEN(data);
} else {
createCodePen(data);
}

} else {
console.warn("Unable to create a codepen for this demo");
console.warn('Unable to create a codepen for this demo');
}
}
if(el && matches.call(el, ".demo_wrapper")) {
var htmlCode = el.querySelector("[data-for=html] code");
var htmlText = htmlCode ? htmlCode.textContent.trim() : "";

var jsCode = el.querySelector("[data-for=js] code");
var jsText = jsCode ? jsCode.textContent.trim() : "";

var cssText = getStylesFromIframe( el.querySelector("iframe") );

if (el && matches.call(el, '.demo_wrapper')) {
var htmlCode = el.querySelector('[data-for=html] code');
var htmlText = htmlCode ? htmlCode.textContent.trim() : '';
var jsCode = el.querySelector('[data-for=js] code');
var jsText = jsCode ? jsCode.textContent.trim() : '';
var cssText = getStylesFromIframe(el.querySelector('iframe'));
var codePen = {
html: htmlText,
js: jsText,
js_module: true,
editors: "1011",
editors: '1011',
css: cssText.trim()
};
cleanCodePenData(codePen);
if(window.CREATE_CODE_PEN) {
if (window.CREATE_CODE_PEN) {
CREATE_CODE_PEN(codePen);
} else {
createCodePen(codePen);
}

}

}
});
return btn;
});
};
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,9 @@
"dependencies": {},
"devDependencies": {
"bit-docs-generate-html": "^0.1.0",
"bit-docs-prettify": "^0.4.1",
"connect": "^2.14.4",
"mocha": "^6.0.2",
"zombie": "^4.3.0"
"zombie": "^6.1.0"
}
}
67 changes: 61 additions & 6 deletions test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ describe("bit-docs-html-codepen-link", function() {
html: {
dependencies: {
"bit-docs-html-codepen-link": __dirname,
"bit-docs-prettify": "^0.4.0",
"bit-docs-tag-demo": "^0.5.3"
}
},
Expand All @@ -54,10 +55,10 @@ describe("bit-docs-html-codepen-link", function() {
browser.window.CREATE_CODE_PEN = function(data) {
createCallData.push(data);
};
var codePens = doc.querySelectorAll('.codepen');

Array.from(codePens).forEach(function(codePen) {
codePen.click();
var toolbars = doc.querySelectorAll('.toolbar');
Array.from(toolbars).forEach(function(toolbar) {
Copy link
Contributor

@chasenlehara chasenlehara Aug 1, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is Array.from necessary? I think toolbars.forEach would exist.

Copy link
Contributor Author

@cherifGsoul cherifGsoul Aug 1, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No I just changed the existed code that used it, I'll update it

var btn = toolbar.children[toolbar.children.length - 1].querySelector('button');
btn.click();
});
assert.deepEqual(createCallData, [{
html: '<my-app></my-app>',
Expand All @@ -70,8 +71,21 @@ describe("bit-docs-html-codepen-link", function() {
js: 'import {DefineMap} from "//unpkg.com/can@^5.0.0-pre.1/core.mjs";\nconsole.log( myCounter.count ) //-> 1',
js_module: true,
editors: '0011'
}
]);
},
{
css: 'h1 {color: red;}',
editors: '1011',
html: '<h1>Hi There!</h1>',
js: 'var code = "code";',
js_module: true
},
{
css: 'h1 {color: red;}',
editors: '1011',
html: '<h1>Hi There!</h1>',
js: 'var code = "code";',
js_module: true
}]);

close();
done();
Expand Down Expand Up @@ -223,4 +237,45 @@ describe("bit-docs-html-codepen-link", function() {
it("supports ts files", function() {
assert.ok(codepenData.ts, "there is a ts");
});

it("Registers run code button", function(done) {
this.timeout(60000);

var docMap = Promise.resolve({
index: {
name: "index",
demo: "path/to/demo.html",
body: fs.readFileSync(__dirname + "/test-demo.md", "utf8"),
codepen: [
["can", "//unpkg.com/can@^5.0.0-pre.1/core.mjs"]
]
}
});

generate(docMap, {
html: {
dependencies: {
"bit-docs-html-codepen-link": __dirname,
"bit-docs-prettify": "^0.4.0",
"bit-docs-tag-demo": "^0.5.3"
}
},
dest: path.join(__dirname, "temp"),
parent: "index",
forceBuild: true,
minifyBuild: false
}).then(function() {
open("temp/index.html", function(browser, close) {
var doc = browser.window.document;
var toolbars = doc.querySelectorAll(".code-toolbar");
toolbars.forEach(function(toolbar) {
var children = toolbar.children;
assert.equal(toolbar.children.length, 2);
assert.equal(children[children.length - 1].innerHTML, '<div class="toolbar-item"><button>Copy</button></div><div class="toolbar-item"><button>Run</button></div>');
});
close();
done();
}, done);
}, done);
});
});