prehistoric-systems/itty-bitty
1
0
Fork 0
mirror of https://github.com/arfct/itty-bitty.git synced 2026-03-11 08:54:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update bookmarklet

Browse source
This commit is contained in:
Nicholas Jitkoff 2022-05-17 22:36:38 -07:00
parent 1503c09123
commit f1e4732c2c
4 changed files with 105 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
docs/index.js
View file

@ -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 = `<!doctype html><meta charset=utf-8><script src="${location.origin}/render.js"></script>`
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)

50
docs/render/bookmarklet.css
View file

@ -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);
}
}
}
.mobile {
display:none;
}
html[data-useragent*='Mobile'] .desktop {
display:none
}
html[data-useragent*='Mobile'] .mobile {
display:block
}

41
docs/render/bookmarklet.js
View file

@ -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 <a target="_blank" href="https://en.wikipedia.org/wiki/Bookmarklet">bookmarklet</a>.`}),
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:"`}),
)
);

19
netlify/edge-functions/index.js
View file

@ -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(`<title>${info.t}</title>`,`<meta property="og:title" content="${info.t}"/>`); }
if (info.title) { content.push(`<title>${info.t}</title>`,`<meta property="og:title" content="${info.t}"/>`); }
if (info.s) { content.push(`<meta property="og:site_name" content="${info.s}"/>`); }
if (info.t) { content.push(`<meta property="og:type" content="${info.t}"/>`); }
if (info.d) { content.push(`<meta property="og:description" content="${info.d}"/>`,`<meta name="description" content="${info.d}"/>`); }
if (info.i) { content.push(`<meta property="og:image" content="${info.i}"/>`); }
if (info.i) {
if (!info.i.startsWith("http")) info.i = atob(info.i);
content.push(`<meta property="og:image" content="${info.i}"/>`);
if (info.iw) content.push(`<meta property="og:image:width" content="${info.iw}"/>`);
if (info.ih) content.push(`<meta property="og:image:width" content="${info.ih}"/>`);
}
if (info.v) {
if (!info.v.startsWith("http")) info.v = atob(info.v);
content.push(`<meta property="og:video" content="${info.v}"/>`);
if (info.vw) content.push(`<meta property="og:image:width" content="${info.vw}"/>`);
if (info.vh) content.push(`<meta property="og:image:width" content="${info.vh}"/>`);
}
if (info.f) {
if (info.f.length > 9){
if (!info.f.startsWith("http")) info.f = atob(info.f);
content.push(`<link rel="icon" type="image/png" href="${info.f}">`);
} else {
let codepoints = Array.from(info.f).map(c => c.codePointAt(0).toString(16));