Fix codepen support

This commit is contained in:
Nicholas Jitkoff 2022-07-09 07:38:32 -07:00
parent cb5ad426c4
commit 042480e701
2 changed files with 47 additions and 27 deletions

View file

@ -219,36 +219,42 @@ function handlePaste(e) {
var TEMPLATE_MARKER = "/*use-itty-bitty-template*/";
function fetchCodepen(url) {
var h, c, j;
$.when(
$.get({ url: url + ".html", cache: false }, function(html) {
h = html;
}),
$.get({ url: url + ".css", cache: false }, function(css) {
c = css;
}),
$.get({ url: url + ".js", cache: false }, function(js) {
j = js;
})
).then(function() {
Promise.all([
fetch(url + ".html"),
fetch(url + ".css"),
fetch(url + ".js"),
]).then(async function(responses) {
console.log("responses", responses);
let h = await responses[0].text();
let c = await responses[1].text();
let j = await responses[2].text();
console.log({h,c,j})
var useTemplate = c.indexOf(TEMPLATE_MARKER) >= 0;
var string =
'<style type="text/css">' +
c +
"</style>" +
'<style type="text/css">' + c + "</style>" +
h +
'<script type="text/javascript">' +
j +
"</script>";
stringToZip(string, function(zip) {
setFileName("✒️" + url);
var title = QS("#doc-title").innerText;
setTimeout(function() {
var data = (useTemplate ? "" : DATA_PREFIX_BXZE) + zip;
importedFileData = data;
updateLink(data, {title});
}, 300);
});
'<script type="text/javascript">' + j + "</script>";
console.log("string", string);
let url = `data:text/html;charset=utf-8,${encodeURIComponent(string)}`;
let durl = new bitty.DataURL(url);
durl = await durl.compress(bitty.GZIP_MARKER);
let ratio = durl.href.length / url.length;
console.log(`Compressed from ${url.length} to ${durl.href.length} bytes (${Math.round(ratio * 100)}%)`);
// setFileName("✒️" + "codepen");
var title = QS("#doc-title").innerText;
setTimeout(function() {
// var data = (useTemplate ? "" : DATA_PREFIX_BXZE) + zip;
// importedFileData = url;
updateLink(durl.href, {title:"CODEPEN"});
}, 300);
});
}

View file

@ -0,0 +1,14 @@
document.body.style = "display:flex; min-height:100vh; justify-content: center; align-items: center; margin:0;"
let canvas = window.canvas = document.createElement("canvas");
canvas.style = "max-height: 100vh; max-width: 100vw;";
document.body.append(canvas);
window.ctx = canvas.getContext("2d");
let update = () => {
var density = window.devicePixelRatio;
window.w = canvas.width = window.innerWidth * density;
window.h = canvas.height = window.innerHeight * density;
console.log("canvas", canvas.width, canvas.height)
draw();
}
(window.onresize = update)()