import * as bitty from '/bitty.js';
class Menu {
/**
* @constructor
*/
constructor(button) {
this.button = button;
}
makeTinyurl() {
console.log("url", location.href)
location.href='https://tinyurl.com/create.php?url=' + encodeURIComponent(location.href)
}
makeText() {
console.log("url", location.href)
location.href='imessage:&body=' + encodeURIComponent(location.href)
}
makeQR() {
bitty.loadScript('/js/qrious.min.js', null, "").then(() => {
console.log("qrious loaded", location.href);
let qrDialog = el("dialog#qr-dialog.dialog",
el("canvas", {id: "qr"}),
el("div", document.title)
);
qrDialog.onclick = () => {
qrDialog.close();
qrDialog.parentNode.removeChild(qrDialog)
}
document.body.append(qrDialog);
qrDialog.showModal();
var qr = new QRious({
element: document.getElementById("qr"),
background: 'transparent',
foreground: 'currentColor',
size: 500,
value: location.href,
});
})
}
sendEmail() {
console.log("url", location.href)
location.href='mailto:info@example.com?body=' + encodeURIComponent(location.href)
}
makeToot() {
return false;
}
makeTweet() {
var url =
"https://twitter.com/intent/tweet?url=" + encodeURIComponent(location.href);
window.open(url, "_blank");
return false;
}
showAbout() {
var url = "https://about.bitty.site";
window.open(url, "_blank");
return false;
}
copyLink() {
var text = location.href;
var dummy = document.createElement("input");
document.body.appendChild(dummy);
dummy.value = text;
dummy.select();
document.execCommand("copy");
document.body.removeChild(dummy);
document.body.classList.add("copied");
setTimeout(function() {
document.body.classList.remove("copied");
}, 2000);
}
systemShare( info) {
if (!info.url) info = {title:document.title, text:document.title, url:location.href};
if (navigator.share) {
navigator.share(info)
.then(() => { console.log('Shared!');})
.catch(console.error);
} else {
copyLink(info)
}
}
icons = {
"qr": ``,
"text": `
`,
"email": `
`,
"mastodon": `
`,
"twitter": `
`,
}
selectField(target) {
target.select();
target.scrollLeft = 0;
}
close(dialog) {
dialog.close();
dialog.parentNode.removeChild(dialog);
this.button?.classList.remove("open")
}
show(info) {
let url = location.href;
let fullMenu = !info;
this.button?.classList.add("open")
let urlField = el("input.url", {value:url, readonly:true});
urlField.onclick = (e) => this.selectField(urlField);
let menu = el("dialog.menu", {onclick: (e) => {
if (e.target.tagName == 'DIALOG') { this.close(menu); }
}}, el("div.menu-container", {},
urlField,
el("div.menu-icons",
el("div.menu-item", {id: "qrcode", onclick:this.makeQR, innerHTML:this.icons.qr} ),
el("div.menu-item", {id: "text", onclick:this.makeText, innerHTML:this.icons.text} ),
el("div.menu-item", {id: "email", onclick:this.sendEmail, innerHTML:this.icons.email} ),
// el("div.menu-item", {id: "mastodon", onclick:this.tootLink, innerHTML:this.icons.mastodon} ),
el("div.menu-item", {id: "twitter", onclick:this.makeTweet, innerHTML:this.icons.twitter} ),
),
el("div.menu-item", {onclick:this.copyLink}, "copy"),
el("div.menu-item", {onclick:this.systemShare}, "share…"),
// el("div.menu-item", {onclick:this.makeTinyurl}, "shorten"),
// el("div.menu-item", {onclick:this.makeTinyurl}, "edit…"),
fullMenu ? el("hr") : null,
fullMenu ? el("div.menu-item", {onclick:this.showAbout}, "itty bitty") : null,
)
)
document.body.appendChild(menu)
if (info) {
menu.style.display = "block";
let x = info.offset.left;
let y = info.offset.top;
let w = menu.offsetWidth;
let h = menu.offsetHeight
x -= w / 2;
y -= h / 2;
let overflowX = x + w - window.innerWidth + 8;
let overflowY = y + h - window.innerHeight + 8;
if (overflowX > 0) x -= overflowX;
if (overflowY > 0) y -= overflowY;
x = Math.round(Math.max(8, x));
y = Math.round(Math.max(8, y));
menu.style.left = x + "px";
menu.style.top = y + "px";
menu.style.removeProperty("display")
// if (window.innerWidth - info.offset.left > 300) {
// menu.style.left = info?.offset.left + "px";
// } else {
// menu.style.right = (window.innerWidth - info?.offset.right) + "px";
// }
// if (window.innerHeight - info.offset.bottom > 300) {
// menu.style.top = info?.offset.bottom + "px";
// } else {
// menu.style.top = "auto";
// menu.style.bottom = (window.innerHeight - info?.offset.top) + "px";
// }
// console.log("info", info, menu, window.innerWidth, window.innerHeight);
}
menu.showModal()
this.selectField(urlField)
}
}
export {
Menu
};