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 6 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
121 changes: 70 additions & 51 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,16 @@ function findSelector(start, selector) {
}
}

function findDemoWrapper(el) {
while(el && el.parentNode) {
if(matches.call(el.parentNode, '.demo_wrapper')) {
var demoWrapper = el.parentNode;
return demoWrapper;
Copy link
Contributor

Choose a reason for hiding this comment

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

I think you can just return demoWrapper instead of assigning it to a variable.

}
el = el.parentNode;
}
}

function getStylesFromIframe(iframe) {
var styles = iframe.contentDocument.documentElement.querySelectorAll("style");
var cssText = "";
Expand All @@ -100,62 +110,71 @@ function getStylesFromIframe(iframe) {
}

module.exports = function() {
var codepens = document.querySelectorAll('div.codepen');
//remove the old codepen links
codepens.forEach(function(codepen, i){
var wrapper = findSelector(codepen, "pre, .demo_wrapper");
//the CodePen iframe wrapper has ".codepen" class too
if (wrapper) {
wrapper.setAttribute('data-has-run', true);
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;

var data = types[language](text);

if(data.js) {
data.js = data.js.trim();
}
if(data.html) {
data.html = data.html.trim();
}
if(data) {
cleanCodePenData(data);
if(window.CREATE_CODE_PEN) {
CREATE_CODE_PEN(data);
//Register PrismJS "Run" custom button
Prism.plugins.toolbar.registerButton("run-code", function(env) {
var demoWrapper = findDemoWrapper(env.element);
var pre = env.element.parentElement;
var hasRunBtn = demoWrapper ? demoWrapper.getAttribute("data-has-run") : pre.getAttribute("data-has-run");
//prevent other demos without codepen link to register Run button
if (hasRunBtn) {
var btn = document.createElement("button");
btn.innerHTML = "Run";
btn.addEventListener('click', function() {
Copy link
Member

Choose a reason for hiding this comment

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

do we need to setup this event handler for every codepen? Could event delegation be used to help peformance?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@justinbmeyer updated, thank you!


if (!demoWrapper && matches.call(env.element.parentNode, 'pre')) {
var language = env.language;
var text = env.code;
var data = types[language](text);
if (data.js) {
data.js = data.js.trim();
}
if (data.html) {
data.html = data.html.trim();
}
if (data) {
cleanCodePenData(data);
if (window.CREATE_CODE_PEN) {
CREATE_CODE_PEN(data);
} else {
createCodePen(data);
}
} else {
createCodePen(data);
console.warn('Unable to create a codepen for this demo');
}

} else {
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") );

var codePen = {
html: htmlText,
js: jsText,
js_module: true,
editors: "1011",
css: cssText.trim()
};
cleanCodePenData(codePen);
if(window.CREATE_CODE_PEN) {
CREATE_CODE_PEN(codePen);
} else {
createCodePen(codePen);
if (demoWrapper && matches.call(demoWrapper, '.demo_wrapper')) {
var htmlCode = demoWrapper.querySelector('[data-for=html] code');
var htmlText = htmlCode ? htmlCode.textContent.trim() : '';
var jsCode = demoWrapper.querySelector('[data-for=js] code');
var jsText = jsCode ? jsCode.textContent.trim() : '';
var cssText = getStylesFromIframe(demoWrapper.querySelector('iframe'));
var codePen = {
html: htmlText,
js: jsText,
js_module: true,
editors: '1011',
css: cssText.trim()
};
cleanCodePenData(codePen);
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');
toolbars.forEach(function(toolbar) {
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);
});
});