mirror of
https://github.com/arfct/itty-bitty.git
synced 2026-03-11 08:54:33 +00:00
Fix codepen support
This commit is contained in:
parent
cb5ad426c4
commit
042480e701
2 changed files with 47 additions and 27 deletions
60
docs/edit.js
60
docs/edit.js
|
|
@ -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);
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
14
docs/render/canvas.boilerplate.js
Normal file
14
docs/render/canvas.boilerplate.js
Normal 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)()
|
||||
Loading…
Reference in a new issue