mirror of
https://github.com/arfct/itty-bitty.git
synced 2026-03-11 08:54:33 +00:00
Add download renderer
This commit is contained in:
Nicholas Jitkoff
parent
3b0aa507e8
commit
04fa9fec3e
5 changed files with 39 additions and 38 deletions
|
|
@ -47,7 +47,7 @@ class DataURL {
|
|||
}
|
||||
|
||||
// Decompress if needed
|
||||
if (this.format != "base64") {
|
||||
if (this.format && (this.format != "base64")) {
|
||||
let bytes = base64ToByteArray(this.data);
|
||||
this.rawData = await decompressData(bytes, this.format)
|
||||
this.data = await dataToBase64(this.rawData);
|
||||
|
|
|
|||
|
|
@ -41,6 +41,7 @@
|
|||
"text/rawhtml": {script:"parse"},
|
||||
"javascript": {script:"bookmarklet"},
|
||||
"web3": {script:"web3", mode:"frame"},
|
||||
"text/directory": {script:"download", args: {extension:"vcf", filename:"contact"}}
|
||||
}
|
||||
|
||||
window.addEventListener("message", function(e) {
|
||||
|
|
@ -94,6 +95,7 @@
|
|||
var iframe = document.getElementById("iframe");
|
||||
var dataPrefix = undefined;
|
||||
var renderMode = "data";
|
||||
var renderer;
|
||||
|
||||
let components = window.location.pathname.substring(1).split("/");
|
||||
let info = {}
|
||||
|
|
@ -127,7 +129,7 @@
|
|||
|
||||
if (fragment.startsWith("data:")) {
|
||||
let info = bitty.infoForDataURL(fragment);
|
||||
const renderer = info.params?.render || renderers[info.mediatype]?.script;
|
||||
renderer = info.params?.render ? {script:info.params.render} : renderers[info.mediatype];
|
||||
|
||||
type = "data:" + info.mediaType;
|
||||
|
||||
|
|
@ -146,7 +148,7 @@
|
|||
}
|
||||
|
||||
if (renderer) {
|
||||
var script = renderer;
|
||||
var script = renderer.script;
|
||||
if (script.indexOf("/") == -1) script = location.origin + '/render/' + script + '.js'
|
||||
renderMode = "script";
|
||||
}
|
||||
|
|
@ -160,7 +162,7 @@
|
|||
|
||||
let renderer = renderers[scheme];
|
||||
if (renderer) {
|
||||
return renderContentWithScript(false, renderer.script, title, info, fragment, fragment);
|
||||
return renderContentWithScript(false, renderer, title, info, fragment, fragment);
|
||||
}
|
||||
return window.location.replace(fragment);
|
||||
}
|
||||
|
|
@ -222,7 +224,7 @@
|
|||
if (renderMode == "frame") {
|
||||
writeDocContent(contentTarget, content)
|
||||
} else if (renderMode == "script") {
|
||||
renderContentWithScript(contentTarget == document, script, title, info, content, dataURL);
|
||||
renderContentWithScript(contentTarget == document, renderer, title, info, content, dataURL);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -238,7 +240,8 @@
|
|||
|
||||
|
||||
const SCRIPT_LOADER = `<!doctype html><meta charset=utf-8><script src="${location.origin}/render.js"></script>`
|
||||
function renderContentWithScript(overwrite, script, title, info, body, url) {
|
||||
function renderContentWithScript(overwrite, renderer, title, info, body, url) {
|
||||
let script = renderer.script;
|
||||
if (script.indexOf("/") == -1) script = location.origin + '/render/' + script + '.js'
|
||||
|
||||
if (overwrite) {
|
||||
|
|
@ -252,7 +255,7 @@
|
|||
|
||||
} else {
|
||||
iframe.onload = (() => {
|
||||
iframe.contentWindow.postMessage({script, url, title, info, body}, "*");
|
||||
iframe.contentWindow.postMessage({script, url, title, info, body, args:renderer.args}, "*");
|
||||
delete iframe.onload
|
||||
});
|
||||
// writeDocContent(iframe.contentWindow.document, SCRIPT_LOADER)
|
||||
|
|
|
|||
|
|
@ -23,8 +23,8 @@ function async(u, c) {
|
|||
s.parentNode.insertBefore(o, s);
|
||||
}
|
||||
|
||||
function loadSyle(href) {
|
||||
document.head.appendChild(el("link", { type: "text/css", rel: "stylesheet", href}));
|
||||
function loadSyle(href, callback) {
|
||||
document.head.appendChild(el("link", { type: "text/css", rel: "stylesheet", href, onload:callback}));
|
||||
}
|
||||
|
||||
function renderScriptContent(data, origin) {
|
||||
|
|
|
|||
|
|
@ -1,14 +1,11 @@
|
|||
|
||||
* {
|
||||
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
}
|
||||
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
body:not(.download) #download {
|
||||
display:none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#download {
|
||||
|
|
@ -24,7 +21,7 @@ body:not(.download) #download {
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
font-size:14px;
|
||||
font-size:13px;
|
||||
}
|
||||
|
||||
#dl-image {
|
||||
|
|
@ -33,13 +30,17 @@ body:not(.download) #download {
|
|||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url("data:image/svg+xml,%0A%3Csvg width='128' height='128' viewBox='0 0 128 128' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='path-1-outside-1_116_2' maskUnits='userSpaceOnUse' x='27' y='15' width='74' height='98' fill='black'%3E%3Crect fill='white' x='27' y='15' width='74' height='98'/%3E%3Cpath d='M80 16H28V112H100V36L80 16Z'/%3E%3C/mask%3E%3Cpath d='M80 16H28V112H100V36L80 16Z' fill='white'/%3E%3Cpath d='M28 16V15H27V16H28ZM80 16L80.7071 15.2929L80.4142 15H80V16ZM28 112H27V113H28V112ZM100 112V113H101V112H100ZM100 36H101V35.5858L100.707 35.2929L100 36ZM28 17H80V15H28V17ZM29 112V16H27V112H29ZM100 111H28V113H100V111ZM99 36V112H101V36H99ZM100.707 35.2929L80.7071 15.2929L79.2929 16.7071L99.2929 36.7071L100.707 35.2929Z' fill='black' fill-opacity='0.15' mask='url(%23path-1-outside-1_116_2)'/%3E%3C/svg%3E%0A");
|
||||
padding: 20px 32px;
|
||||
padding: 32px 32px;
|
||||
box-sizing: border-box;
|
||||
display:flex;
|
||||
display:
|
||||
flex;
|
||||
justify-content: center;
|
||||
align-items: center;;
|
||||
color:rgba(0,0,0,0.3);
|
||||
font-weight:bold;
|
||||
align-items: end;
|
||||
color:
|
||||
rgba(0,0,0,0.3);
|
||||
font-weight:
|
||||
bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#dl-button {
|
||||
|
|
|
|||
|
|
@ -1,27 +1,24 @@
|
|||
let url = params.body
|
||||
let title = params.title
|
||||
loadSyle(document.currentScript.src.replace("js", "css"))
|
||||
document.body.appendChild(
|
||||
el("div", {id:"content"},
|
||||
el("a", {href:url, innerText:"Script: " + title || "Bookmarklet"}),
|
||||
el("p", {id:"emoji", innerText:"☝️"}),
|
||||
el("p", {innerText:"Drag this bookmarklet to your bookmarks / favorites to use it."}),
|
||||
el("p", {innerText:"On mobile, bookmark this page, then edit the address to remove everything to the left of 'javascript:'."})
|
||||
)
|
||||
);
|
||||
|
||||
|
||||
try {
|
||||
//let dl = document.querySelector("#download");
|
||||
let extension = title.split(".")
|
||||
let dl = el("a", {id: "download", href:url, download: title},
|
||||
el("div", {id: "dl-image", innerText:extension.pop() ?? ""}),
|
||||
el("div", {id: "dl-name", innerText:"title"}),
|
||||
let filename = params.title
|
||||
let components = filename.split(".");
|
||||
let extension = params.args?.extension;
|
||||
let title = params.args?.filename ? [params.args?.filename, params.args?.extension].join(".") : filename || "";
|
||||
if (components.length > 1) {
|
||||
extension = components.pop();
|
||||
title = components.join(".");
|
||||
}
|
||||
|
||||
let dl = el("a", {id: "download", href:params.url, download: title},
|
||||
el("div", {id: "dl-image", innerText:extension ?? ""}),
|
||||
el("div", {id: "dl-name", innerText:title}),
|
||||
el("div", {id: "dl-button"}),
|
||||
)
|
||||
document.body.append(dl)
|
||||
dl.click();
|
||||
setTimeout(() => dl.click(), 1000);
|
||||
|
||||
} catch (e) {
|
||||
console.log("DL error", e)
|
||||
location.href = url;
|
||||
top.location.href = params.url;
|
||||
}
|
||||
Loading…
Reference in a new issue