Last active
September 20, 2017 18:21
-
-
Save allenhwkim/dd0143e67a05bb297df265cec6c0b515 to your computer and use it in GitHub Desktop.
Create a plunker page from javascript form submisstion
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| class PlunkerSubmit { | |
| constructor() { | |
| this.formFields = []; | |
| this.indexHeads = []; | |
| this.indexBody = ''; | |
| } | |
| setDescription(description) { | |
| this.formFields.push({name: 'description', value: description}); | |
| } | |
| addHead(headLine) { | |
| this.indexHeads.push(headLine); | |
| } | |
| setBody(html) { | |
| this.indexBody = html; | |
| } | |
| addFile(fileName, contents) { | |
| this.formFields.push({name: `files[${fileName}]`, value: contents}); | |
| if (fileName.endsWith('.css')) { | |
| this.addHead(`<script src="${fileName}"></script>`); | |
| } else if (fileName.endsWith('.js')) { | |
| this.addHead(`<link href="${fileName}" rel="stylesheet">`); | |
| } | |
| return this; | |
| } | |
| indexHtml() { | |
| let output = ''; | |
| if (this.indexBody.match(/<html/)) { // full html is here | |
| output = this.indexBody; | |
| (!this.indexBody.match(/<\/body>/)) && // if no body tag, add one | |
| (output = output.replace(/<\/html>/, '\n<body>\n</body>\n</html>')); | |
| (!this.indexBody.match(/<\/head>/)) && // if no head tag, add one | |
| (output = output.replace(/<body>/, '\n<head>\n</head>\n<body>')); | |
| // add head tags into head. | |
| output = output.replace(/<\/head>/, this.indexHeads.join('\n')+'\n</head>'); | |
| } else { | |
| output = [ | |
| '<!DOCTYPE html>', '<html>', | |
| '<head>', this.indexHeads.join('\n'), '</head>', | |
| '<body>', this.indexBody, '</body>', '</html>' | |
| ].join('\n'); | |
| } | |
| return output; | |
| } | |
| save() { | |
| let form = document.createElement('form'); | |
| let indexFile = {name: 'files[index.html]', value: this.indexHtml()}; | |
| let submit = document.createElement('input'); | |
| let files = [indexFile, ...this.formFields]; | |
| form.style.display = 'none'; | |
| form.setAttribute('method', 'post'); | |
| form.setAttribute('action', 'http://plnkr.co/edit/?p=preview'); | |
| form.setAttribute('target', '_blank') | |
| files.forEach(field => { | |
| let input = document.createElement('input'); | |
| input.setAttribute('type', 'hidden'); | |
| input.setAttribute('name', field.name); | |
| input.setAttribute('value', field.value); | |
| form.appendChild(input); | |
| }); | |
| submit.setAttribute('type', 'submit'); | |
| form.appendChild(submit); | |
| document.body.appendChild(form); | |
| submit.click(); | |
| document.body.removeChild(form); | |
| } | |
| } | |
| // var plnkr = new PlunkerSubmit(); | |
| // plnkr.setDescription('xxxxxxxxxx'); | |
| // plnkr.addHead('<my-custom-head />'); | |
| // plnkr.addHead('<my-custom-head />'); | |
| // plnkr.setBody('<html><body>a\n b\n c\n d\n</body>\n</html>'); | |
| // plnkr.addFile('script.js', 'this is js') | |
| // plnkr.addFile('style.css', 'this is css') | |
| // plnkr.addFile('config.json', 'this is json') | |
| // plnkr.save(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment