diff --git a/examples/resources/common.js b/examples/resources/common.js index 3b2ce82c5b..893fe51c1a 100644 --- a/examples/resources/common.js +++ b/examples/resources/common.js @@ -20,31 +20,78 @@ e.clearSelection(); }); + function fetchResource(resource) { + return new Promise((resolve, reject) => { + const isImage = /\.(png|jpe?g|gif|tiff)$/.test(resource); + const xhr = new XMLHttpRequest(); + xhr.open('GET', resource); + if (isImage) { + xhr.responseType = 'blob'; + } else { + xhr.responseType = 'text'; + } + xhr.addEventListener('load', () => { + if (isImage) { + const a = new FileReader(); + a.addEventListener('load', e => { + resolve ({ + isBinary: true, + content: e.target.result + }) + }); + a.readAsDataURL(xhr.response); + } else { + resolve ({ + content: xhr.response + }) + } + }); + xhr.addEventListener('error', reject); + xhr.send(); + }) + } + var codepenButton = document.getElementsByClassName('codepen-button')[0]; if (codepenButton) { codepenButton.onclick = function(event) { event.preventDefault(); - var form = document.getElementById('codepen-form'); const html = document.getElementById('example-html-source').innerText; const js = document.getElementById('example-js-source').innerText; const pkgJson = document.getElementById('example-pkg-source').innerText; - form.parameters.value = compress({ - files: { - 'index.html': { - content: html - }, - 'index.js': { - content: js - }, - "package.json": { - content: pkgJson - }, - 'sandbox.config.json': { - content: '{"template": "parcel"}' + const form = document.getElementById('codepen-form'); + + const localResources = (js.match(/'data\/[^']*/g) || []) + .concat(js.match(/'resources\/[^']*/g) || []) + .map(f => f.slice(1)); + + const promises = localResources.map(resource => fetchResource(resource)); + + Promise.all(promises) + .then(results => { + const data = { + files: { + 'index.html': { + content: html + }, + 'index.js': { + content: js + }, + "package.json": { + content: pkgJson + }, + 'sandbox.config.json': { + content: '{"template": "parcel"}' + } + } + }; + + for (let i = 0; i < localResources.length; i++) { + data.files[localResources[i]] = results[i]; } - } - }); - form.submit(); + + form.parameters.value = compress(data); + form.submit(); + }); }; } })();