Skip to content

Commit 6f56fcb

Browse files
ritz078ritz078
committed
feat(gist): Feature to embed github gists added
1 parent 98fd2e7 commit 6f56fcb

8 files changed

Lines changed: 97 additions & 36 deletions

File tree

‎dist/embed.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/css/embed.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,9 @@
3737
border: 1px solid #eee
3838
}
3939

40-
.ejs-vine iframe {
40+
.ejs-vine iframe ,.ejs-gist iframe{
4141
border: 0;
42-
margin: 10px 0
42+
margin: 10px 0;
4343
}
4444

4545
pre {

‎src/embed.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/embed.css.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/embed.js‎

Lines changed: 32 additions & 24 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/embed.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/js/modules/code/code.es6‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ if(build.PLUNKER) var Plunker = require('./plunker.es6');
66
if(build.JSBIN) var JsBin = require('./jsbin.es6');
77
if(build.CODEPEN) var CodePen = require('./codepen.es6');
88
if(build.JSFIDDLE) var JsFiddle = require('./jsfiddle.es6');
9+
if(build.GIST) var Gist = require('./gist.es6');
910

1011
class Code {
1112
constructor(input, output, options, embeds) {
@@ -19,12 +20,14 @@ class Code {
1920
try {
2021
let output = this.output;
2122
let embeds = this.embeds;
22-
output = this.options.highlightCode && build.HIGHLIGHTCODE ? (new Highlight(output, this.options).process()) : output;
23-
embeds = utils.ifEmbed(this.options, 'ideone') && build.IDEONE ? (new Ideone(this.input, this.options, embeds).process()) : embeds;
24-
embeds = utils.ifEmbed(this.options, 'plunker') && build.PLUNKER ? (new Plunker(this.input, this.options, embeds).process()) : embeds;
25-
embeds = utils.ifEmbed(this.options, 'jsbin') && build.JSBIN ? (new JsBin(this.input, this.options, embeds).process()) : embeds;
26-
embeds = utils.ifEmbed(this.options, 'codepen') && build.CODEPEN ? (new CodePen(this.input, this.options, embeds).process()) : embeds;
27-
embeds = utils.ifEmbed(this.options, 'jsfiddle') && build.JSFIDDLE ? (new JsFiddle(this.input, this.options, embeds).process()) : embeds;
23+
let options = this.options;
24+
output = options.highlightCode && build.HIGHLIGHTCODE ? (new Highlight(output, options).process()) : output;
25+
embeds = utils.ifEmbed(options, 'ideone') && build.IDEONE ? (new Ideone(this.input, options, embeds).process()) : embeds;
26+
embeds = utils.ifEmbed(options, 'plunker') && build.PLUNKER ? (new Plunker(this.input, options, embeds).process()) : embeds;
27+
embeds = utils.ifEmbed(options, 'jsbin') && build.JSBIN ? (new JsBin(this.input, options, embeds).process()) : embeds;
28+
embeds = utils.ifEmbed(options, 'codepen') && build.CODEPEN ? (new CodePen(this.input, options, embeds).process()) : embeds;
29+
embeds = utils.ifEmbed(options, 'jsfiddle') && build.JSFIDDLE ? (new JsFiddle(this.input, options, embeds).process()) : embeds;
30+
embeds = utils.ifEmbed(options, 'gist') && build.GIST ? (new Gist(this.input, options,embeds).process()) : embeds;
2831

2932
return [output, embeds];
3033
} catch (error) {

‎src/js/modules/code/gist.es6‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
let Base = require('../base.es6');
2+
3+
class Gist extends Base {
4+
constructor(input, options, embeds) {
5+
super(input, options, embeds);
6+
this.regex = /gist.github.com\/[a-zA-Z0-9_-]+\/([a-zA-Z0-9]+)/g;
7+
8+
this.options.element.addEventListener('rendered', () => {
9+
this.load()
10+
})
11+
}
12+
13+
template(match) {
14+
let template =
15+
`<div class="ejs-gist" data-src="${match}"></div>`
16+
return template;
17+
}
18+
19+
load() {
20+
let gists = this.options.element.getElementsByClassName('ejs-gist');
21+
for (var i = 0; i < gists.length; i++) {
22+
var gistFrame = document.createElement("iframe");
23+
gistFrame.setAttribute("width", "100%");
24+
gistFrame.id = `ejs-gist-${i}`;
25+
26+
var zone = gists[i];
27+
zone.innerHTML = "";
28+
zone.appendChild(gistFrame);
29+
30+
// Create the iframe's document
31+
var gistFrameHTML =
32+
`<html><base target="_parent"/><body onload="parent.document.getElementById('ejs-gist-${i}').style.height=parseInt(document.body.scrollHeight)+20+'px'"><script type="text/javascript" src="https://${gists[i].getAttribute('data-src')}.js"></script></body></html>`;
33+
34+
// Set iframe's document with a trigger for this document to adjust the height
35+
var gistFrameDoc = gistFrame.document;
36+
37+
if (gistFrame.contentDocument) {
38+
gistFrameDoc = gistFrame.contentDocument;
39+
} else if (gistFrame.contentWindow) {
40+
gistFrameDoc = gistFrame.contentWindow.document;
41+
}
42+
43+
gistFrameDoc.open();
44+
gistFrameDoc.writeln(gistFrameHTML);
45+
gistFrameDoc.close();
46+
}
47+
}
48+
}
49+
50+
module.exports = Gist;

0 commit comments

Comments
 (0)