diff --git a/docs/bitty.js b/docs/bitty.js index c79349c..b4e8a3c 100644 --- a/docs/bitty.js +++ b/docs/bitty.js @@ -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); diff --git a/docs/index.js b/docs/index.js index 62cb91d..8e4ca24 100644 --- a/docs/index.js +++ b/docs/index.js @@ -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 = `` - 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) diff --git a/docs/render.js b/docs/render.js index 18b5af1..7bea2dc 100644 --- a/docs/render.js +++ b/docs/render.js @@ -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) { diff --git a/docs/render/download.css b/docs/render/download.css index b1969f2..c55ddba 100644 --- a/docs/render/download.css +++ b/docs/render/download.css @@ -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 { diff --git a/docs/render/download.js b/docs/render/download.js index e1cc505..0d08f5a 100644 --- a/docs/render/download.js +++ b/docs/render/download.js @@ -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; } \ No newline at end of file