let script = window.script;
let fieldIcons = {
bday: '',
call: '',
tel: '',
url: '',
adr: '',
email: '',
note: '',
add: '',
vid: '',
}
let siteIcons = {
"twitter.com": {icon: "twitter", reformat:(a) => a.replace(/twitter.com\/(.*)/, "@$1")},
"facebook.com": {icon: "facebook"},
"instagram.com": {icon: "instagram", reformat:(a) => a.replace(/instagram.com\/(.*)/, "@$1")},
"linkedin.com": {icon: "linkedin", reformat:(a) => a.replace(/linkedin.com\/in\/(.*)/, "@$1")},
"read.cv": {icon: "readcv"},
"youtube.com": {icon: "youtube"},
"tiktok.com": {icon: "tiktok"},
"snapchat.com": {icon: "snapchat"},
"pinterest.com": {icon: "pinterest"},
"tumblr.com": {icon: "tumblr"},
"reddit.com": {icon: "reddit"},
"github.com": {icon: "github", reformat:(a) => a.replace(/github.com\/(.*)/, "@$1")},
"medium.com": {icon: "medium"},
"twitch.tv": {icon: "twitch"},
}
let spriteString = ``
//
var template = document.createElement('template');
template.innerHTML = spriteString;
console.log(template.content.firstChild);
let groups = Array.from(template.content.querySelector("svg .Symbols").children);
let sprite = el("svg", {xmlns:"http://www.w3.org/2000/svg"},
el("defs", {},groups.map(
(group,i) => el("symbol", {viewBox: 24 * i + " 0 24 24", id:"icon-" + group.getAttribute("class")}, group)
)
))
console.log("sprite", sprite);
// document.body.appendChild(sprite);
function share() {
parent.postMessage({share:{}}, "*");
}
function vcardVersion(data) {
if (data.vcard) return data.vcard;
return `BEGIN:VCARD
VERSION:3.0
N:NAME
END:VCARD`
}
function formatBday(date) {
const year = date.slice(0, 4);
const month = date.slice(4, 6) - 1; // months are zero-indexed in JavaScript
const day = date.slice(6, 8);
const options = { month: 'long', day: 'numeric' };
return new Date(year, month, day).toLocaleDateString(undefined, options)
}
function render() {
document.head.appendChild(el("base", {target:"_top"}))
document.head.appendChild(el("meta", {name:"viewport", content:"width=device-width, initial-scale=1.0"}))
let vcard = params.body.match(/BEGIN:VCARD/);
if (vcard) {
let data = parse(params.body)
console.log(data, params.body.split("\n"));
document.body.appendChild(
el("div.contact", {},
el("h1.header", {}, data.fn),
data.email.forEach(email => el("div.email", {}, email.value.pop())),
data.tel.forEach(tel => el("div.tel", {}, tel.value.pop())),
// array.map(line => el("div.line", {}, line)),
)
)
} else if (params.body.match(/MECARD:/)){
document.body.appendChild(el("#arc-theme"));
let queryString = params.body.substring(7);
queryString = queryString.split(";").map(line => line.replace(/\:/, "=")).join("&");
let searchParams = new URLSearchParams(queryString);
let headingElements = [];
let contentElements = [];
let imgElement = undefined;
searchParams.forEach((value, key) => {
key = key.toLowerCase();
value = decodeURIComponent(value);
console.log(value, key);
if (key == 'color') {
document.body.style.backgroundColor = value;
} else if (key == 'n') {
value = value.split(",").reverse().join(" ");
headingElements.push(el("h1", {}, value))
} else if (key == 'img') {
imgElement = (el("img.profile", {src:value}));
} else {
let href = undefined;
if (key == "email") {
href = "mailto:" + value;
}
if (key == "url") {
href = value;
value = value.replace(/https?:\/\/(www.)?/, "")
}
if (key == "bday") {
value = formatBday(value)
}
if (key == "tel") {
let actionrow = el("div.row." + key, {target:"top", href},
el("a.icon", {href:"facetime:" + value}, el.trust(fieldIcons["vid"])),
el("a.icon", {href:"tel:" + value}, el.trust(fieldIcons["call"])),
el("a.icon", {href:"add:" + value}, el.trust(fieldIcons["add"])),
)
headingElements.push(actionrow)
}
if (key == "nickname") { return; }
if (!fieldIcons[key]) {
headingElements.push(el("div", value));
} else {
let icon = el("div.icon", el.trust(fieldIcons[key]))
if (key == "url") {
let override = siteIcons[new URL(href).hostname];
if (override) {
let site = "#icon-" + override.icon;
if (override.reformat) value = override.reformat(value);
console.log(override.reformat, value)
icon.innerHTML = `