From f1e4732c2c4a158a2684eac1c90f1e10f61eab1c Mon Sep 17 00:00:00 2001 From: Nicholas Jitkoff Date: Tue, 17 May 2022 22:36:38 -0700 Subject: [PATCH] Update bookmarklet --- docs/index.js | 25 +++++++++++++---- docs/render/bookmarklet.css | 50 ++++++++++++++++++++++++--------- docs/render/bookmarklet.js | 41 +++++++++++++++++++++------ netlify/edge-functions/index.js | 19 +++++++++++-- 4 files changed, 105 insertions(+), 30 deletions(-) diff --git a/docs/index.js b/docs/index.js index 19118a5..fbeae96 100644 --- a/docs/index.js +++ b/docs/index.js @@ -43,7 +43,7 @@ let path = "/" + e.data.title.replace(/\s/g, "_"); if (e.data.description) path += "/d:" + encodeURIComponent(e.data.description); if (e.data.favicon) path += "/f:" + encodeURIComponent(e.data.favicon); - if (e.data.image) path += "/i:" + encodeURIComponent(e.data.image); + if (e.data.image) path += "/i:" + encodeURIComponent(btoa(e.data.image)); window.location.pathname = path; } if (e.data.replaceURL) { @@ -75,8 +75,21 @@ var dataPrefix = undefined; var renderMode = "data"; + + let components = window.location.pathname.substring(1).split("/"); + let info = {} + info.t = decodeURIComponent(components.shift()).replace(/_/g, " "); + components.forEach(component => { + let field = component.split(":"); + let key = field.shift(); + let value = decodeURIComponent(field.join(":")); + if (key.length && value.length) info[key] = value; + }) + info.d = info.d?.replace(/_/g, " "); + + var slashIndex = fragment.indexOf("/"); - var title = fragment.substring(0, slashIndex); + var title = fragment.substring(0, slashIndex) || info.t; if (title) title = decodeURIComponent(title.replace(/_/g, " ")) var type = undefined; var description = undefined; @@ -134,7 +147,7 @@ let renderer = renderers[scheme]; if (renderer) { - return renderContentWithScript(renderer.script, title, fragment, fragment); + return renderContentWithScript(renderer.script, title, info, fragment, fragment); } return window.location.replace(fragment); } @@ -187,7 +200,7 @@ if (renderMode == "frame") { writeDocContent(contentTarget, content) } else if (renderMode == "script") { - renderContentWithScript(script, title, content, dataURL); + renderContentWithScript(script, title, info, content, dataURL); } }); } @@ -202,10 +215,10 @@ // window.addEventListener('hashchange',renderContent); const SCRIPT_LOADER = `` - function renderContentWithScript(script, title, body, url) { + function renderContentWithScript(script, title, info, body, url) { if (script.indexOf("/") == -1) script = location.origin + '/render/' + script + '.js' iframe.onload = (() => { - iframe.contentWindow.postMessage({script, url, title, body}, "*"); + iframe.contentWindow.postMessage({script, url, title, info, body}, "*"); delete iframe.onload }); // writeDocContent(iframe.contentWindow.document, SCRIPT_LOADER) diff --git a/docs/render/bookmarklet.css b/docs/render/bookmarklet.css index f108bf2..e417e66 100644 --- a/docs/render/bookmarklet.css +++ b/docs/render/bookmarklet.css @@ -7,22 +7,34 @@ body { text-align: center; } -a { +a.bookmarklet { + cursor:grab; + padding:2em; + color:currentColor; font-size:12px; + text-decoration:none; + user-select: none; + font-weight:600; +} +.capsule { + user-select:none; line-height:3em; border: 2px solid currentColor; - background-color:rgba(0,0,0,0.05); - color:currentColor; - padding:0.2em .75em; - border-radius:1em; - text-decoration:none; - cursor:grab; - user-select: none; + padding:0.333em 1em; + border-radius: 2em; + box-shadow:1px 1px black; + + background-color:hsl(196, 69%, 85%); + transition:transform 1s; } -a:hover { - border: 2px solid currentColor; - background-color:rgba(0,0,0,0.1); +.hint { + font-size:small; + opacity:0.54; +} + +a.bookmarklet:hover .capsule{ + padding: 0.5333em 1.2em; } div#content { @@ -31,7 +43,7 @@ div#content { } #emoji { font-size: 300%; - filter:grayscale() brightness(1.1); + /* filter:grayscale() brightness(1.1); */ } :root { color-scheme: light dark; } @@ -44,4 +56,16 @@ div#content { #emoji { filter:grayscale() brightness(0.8); } -} \ No newline at end of file +} + +.mobile { + display:none; +} + +html[data-useragent*='Mobile'] .desktop { + display:none +} + +html[data-useragent*='Mobile'] .mobile { + display:block +} diff --git a/docs/render/bookmarklet.js b/docs/render/bookmarklet.js index 07a5fdd..cbd26b0 100644 --- a/docs/render/bookmarklet.js +++ b/docs/render/bookmarklet.js @@ -1,11 +1,36 @@ let url = params.body let title = params.title +let ua = navigator.userAgent; + +var b = document.documentElement; +b.setAttribute('data-useragent', navigator.userAgent); +b.setAttribute('data-platform', navigator.platform ); + +let mobile = ua.match(/Mobile/i) + +let barName = ua.match(/Chrome/i) ? "Bookmarks" : "Favorites" +let managerName = ua.match(/Edge/i) ? "Favorites" : "Bookmarks" + +let cmdKey = ua.match(/Mac/i) ? "⇧⌘B" : "Ctrl + Shift + B" + +// 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.64 Safari/537.36' + + 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:'."}) - ) -); + + + + document.body.appendChild( + el("div", {id:"content"}, + el("a", {className:"bookmarklet", href:url}, el("span", {className:"capsule", innerText:"▶ " + title || "Bookmarklet"})), + el("p", {id:"emoji", innerText:"☝️"}), + el("p", {innerHTML:`This page contains a bookmarklet.`}), + + el("p", {className:"", innerText:`Drag this bookmarklet to your ${managerName} to use it.`}), + el("p", {className:"hint desktop", innerText:`(Hit ${cmdKey} to toggle the ${managerName} bar)`}), + el("p", {className:"hint mobile", innerText:`To open ${managerName} while dragging, hold on top of it, or tap bookmarks with a second finger to open`}), + el("p", {innerText:`Or bookmark this page, then edit the address to remove everything to the left of "javascript:"`}), + + ) + ); + diff --git a/netlify/edge-functions/index.js b/netlify/edge-functions/index.js index b35c357..c013084 100644 --- a/netlify/edge-functions/index.js +++ b/netlify/edge-functions/index.js @@ -8,7 +8,7 @@ export default async (request, context) => { let components = path.substring(1).split("/"); // components.shift(); let info = {} - info.t = decodeURIComponent(components.shift()).replace(/_/g, " "); + info.title = decodeURIComponent(components.shift()).replace(/_/g, " "); components.forEach(component => { let field = component.split(":"); @@ -20,12 +20,25 @@ export default async (request, context) => { info.d = info.d?.replace(/_/g, " "); let content = []; - if (info.t) { content.push(`${info.t}`,``); } + if (info.title) { content.push(`${info.t}`,``); } if (info.s) { content.push(``); } + if (info.t) { content.push(``); } if (info.d) { content.push(``,``); } - if (info.i) { content.push(``); } + if (info.i) { + if (!info.i.startsWith("http")) info.i = atob(info.i); + content.push(``); + if (info.iw) content.push(``); + if (info.ih) content.push(``); + } + if (info.v) { + if (!info.v.startsWith("http")) info.v = atob(info.v); + content.push(``); + if (info.vw) content.push(``); + if (info.vh) content.push(``); + } if (info.f) { if (info.f.length > 9){ + if (!info.f.startsWith("http")) info.f = atob(info.f); content.push(``); } else { let codepoints = Array.from(info.f).map(c => c.codePointAt(0).toString(16));