andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add open in Codepen

Browse Source
This commit is contained in:
Angelos Chalaris
2018-03-03 13:17:58 +02:00
parent 3344d294b1
commit d3a2f528b9
9 changed files with 139 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/js/components/CodepenCopy.js Normal file
View File

@ -0,0 +1,25 @@
import { selectAll } from '../deps/utils'
const snippets = selectAll('.snippet')
snippets.forEach(snippet => {
var codepenForm = document.createElement('form');
codepenForm.action = 'https://codepen.io/pen/define';
codepenForm.method = 'POST';
codepenForm.target = '_blank';
var codepenInput = document.createElement('input');
codepenInput.type = 'hidden';
codepenInput.name = 'data';
var codepenButton = document.createElement('button');
codepenButton.classList = 'btn is-large codepen-btn';
codepenButton.innerHTML = 'View on Codepen';
var css = snippet.querySelector('pre code.lang-css');
var html = snippet.querySelector('pre code.lang-html');
var js = snippet.querySelector('pre code.lang-js');
css = css ? css.textContent : '';
html = html ? html.textContent : '';
js = js ? js.textContent : '';
codepenInput.value = '{"title":"'+snippet.querySelector('h3 > span').textContent+'", "html":"'+html+'" , "css":"'+css+'" , "js":"'+js+'" }';
codepenForm.appendChild(codepenInput);
codepenForm.appendChild(codepenButton);
snippet.appendChild(codepenForm);
});

1
src/js/index.js
View File

@ -17,3 +17,4 @@ import Sidebar from './components/Sidebar'
import BackToTopButton from './components/BackToTopButton'
import Tag from './components/Tag'
import Snippet from './components/Snippet'
import CodepenCopy from './components/CodepenCopy'