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() {
}
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() {
let menu = document.querySelector("dialog.menu");
menu?.close();
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') {
e.target.close();
this.button?.classList.remove("open")
}
}}, 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
};