mirror of
https://github.com/arfct/itty-bitty.git
synced 2026-03-11 08:54:33 +00:00
Add Menu
This commit is contained in:
Nicholas Jitkoff
parent
6b45bc13bf
commit
a6fbef9efe
5 changed files with 401 additions and 27 deletions
174
docs/bitty-menu.js
Normal file
174
docs/bitty-menu.js
Normal file
|
|
@ -0,0 +1,174 @@
|
|||
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": `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><g id="qr_code"><mask id="mask0_1400_318" width="24" height="24" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path id="Bounding box" d="M0 0h24v24H0z"/></mask><g mask="url(#mask0_1400_318)"><path id="qr_code_2" d="M3 11V3h8v8H3Zm2-2h4V5H5v4ZM3 21v-8h8v8H3Zm2-2h4v-4H5v4Zm8-8V3h8v8h-8Zm2-2h4V5h-4v4Zm4 12v-2h2v2h-2Zm-6-6v-2h2v2h-2Zm2 2v-2h2v2h-2Zm-2 2v-2h2v2h-2Zm2 2v-2h2v2h-2Zm2-2v-2h2v2h-2Zm0-4v-2h2v2h-2Zm2 2v-2h2v2h-2Z"/></g></g></svg>`,
|
||||
"text": `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><g id="chat_bubble"><mask id="mask0_1406_423" width="24" height="24" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path id="Bounding box" d="M0 0h24v24H0z"/></mask><g mask="url(#mask0_1406_423)"><path id="chat_bubble_2" d="M1.2 23.05V3.55c0-.733.259-1.358.775-1.875A2.554 2.554 0 0 1 3.85.9h16.3a2.55 2.55 0 0 1 1.875.775c.517.517.775 1.142.775 1.875v12.2c0 .733-.258 1.358-.775 1.875a2.554 2.554 0 0 1-1.875.775H5.85L1.2 23.05Zm2.65-6.4.9-.9h15.4V3.55H3.85v13.1Z"/></g></g></svg>
|
||||
`,
|
||||
"email": `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><g id="mail"><mask id="mask0_1406_417" width="24" height="24" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path id="Bounding box" d="M0 0h24v24H0z"/></mask><g mask="url(#mask0_1406_417)"><path id="mail_2" d="M3.85 20.75a2.554 2.554 0 0 1-1.875-.775A2.554 2.554 0 0 1 1.2 18.1V5.9c0-.733.259-1.358.775-1.875A2.554 2.554 0 0 1 3.85 3.25h16.3a2.55 2.55 0 0 1 1.875.775c.517.517.775 1.142.775 1.875v12.2c0 .733-.258 1.358-.775 1.875a2.554 2.554 0 0 1-1.875.775H3.85ZM12 13.575 3.85 8.6v9.5h16.3V8.6L12 13.575ZM12 11l8.35-5.1H3.65L12 11Z"/></g></g></svg>
|
||||
`,
|
||||
"mastodon": `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><g id="mastodon 1"><path id="Vector" d="M20.606 13.912c-.281 1.35-2.419 2.813-4.781 3.15-4.837.62-7.706-.337-7.706-.337.168.731-.225 3.037 3.937 2.925 1.744 0 3.263-.394 3.263-.394l.112 1.519c-2.868 1.35-6.018.844-7.875.338C3.788 20.155 3.112 16.05 3 12V8.681c0-4.162 2.756-5.4 2.756-5.4 2.813-1.35 10.125-1.237 12.488 0 0 0 2.756 1.238 2.756 5.4 0 0 .056 3.094-.394 5.232Z"/><path id="Vector_2" d="M17.738 8.962v5.12h-1.97v-4.95c0-1.013-.45-1.52-1.293-1.52-1.012 0-1.519.62-1.519 1.857v2.644h-1.912V9.469c0-1.238-.506-1.857-1.519-1.857-.844 0-1.294.507-1.294 1.52v4.95H6.263v-5.12c0-1.012.28-3.375 2.925-3.375C11.38 5.587 12 7.67 12 7.67s.563-2.082 2.813-2.082c2.53 0 2.925 2.363 2.925 3.375Z"/></g></svg>
|
||||
`,
|
||||
"twitter": `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><g id="twitter 1"><path id="Vector" d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23Z"/></g></svg>
|
||||
`,
|
||||
}
|
||||
|
||||
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
|
||||
};
|
||||
|
|
@ -1,5 +1,9 @@
|
|||
const padForBase64 = (s, c = " ") => s.padEnd(s.length + (3 - s.length % 3) % 3, c)
|
||||
const HEAD_TAGS = () => btoa(padForBase64('<base target="_top">\n'));
|
||||
const HEAD_TAGS = (prefixes) => {
|
||||
let tags = ['<base target="_top">']
|
||||
prefixes?.split(" ").forEach((p) => tags.push(p.endsWith(".css") ? `<link rel="stylesheet" href="${p}">` : `<script src="${p}"></script>`))
|
||||
return btoa(padForBase64(tags.join("\n")));
|
||||
};
|
||||
const HEAD_TAGS_EXTENDED = () => btoa(padForBase64(`<meta charset="utf-8"><meta name="viewport" content="width=device-width"><base target="_top"><style type="text/css">body{margin:0 auto;padding:12vmin 10vmin;max-width:35em;line-height:1.5em;font-family:-apple-system,BlinkMacSystemFont,sans-serif;word-wrap:break-word;}@media(prefers-color-scheme: dark){body{color:white;background-color:black;}}</style>`));
|
||||
|
||||
const dataUrlRE =
|
||||
|
|
@ -132,8 +136,8 @@ class DataURL {
|
|||
}
|
||||
|
||||
compress = async (format = GZIP_MARKER) => {
|
||||
let rawData = this.encoding ? await base64ToByteArray(this.data) : stringToByteArray(this.data);
|
||||
let compressedData = await compressData(rawData, format);
|
||||
this.rawData = this.encoding ? await base64ToByteArray(this.data) : stringToByteArray(this.data);
|
||||
let compressedData = await compressData(this.rawData, format);
|
||||
|
||||
if (this.params.cipher && this.params._password) {
|
||||
let encryptedData = await encryptData(this.params.cipher, this.params._password, compressedData);
|
||||
|
|
@ -262,7 +266,7 @@ async function decompressDataGzip(data) {
|
|||
async function compressDataGzip(data) {
|
||||
if (typeof CompressionStream !== 'undefined') {
|
||||
let blob = new Blob([data])
|
||||
const stream = blob.stream().pipeThrough(new CompressionStream("gzip"));
|
||||
const stream = blob.stream().pipeThrough(new CompressionStream("deflate"));
|
||||
let response = await new Response (stream).arrayBuffer().catch(e => {console.error("CompressionStream error", e)})
|
||||
if (response) return response
|
||||
}
|
||||
|
|
|
|||
184
docs/index.css
184
docs/index.css
|
|
@ -3,10 +3,23 @@ body {
|
|||
margin:0;
|
||||
}
|
||||
|
||||
@media(prefers-color-scheme: dark){
|
||||
:root {
|
||||
--text-color: #16161d;
|
||||
--background-color: white;
|
||||
--shadow-color: var(--text-color);
|
||||
--backdrop-color: red;
|
||||
/* repeating-conic-gradient(rgba(255,255,255,1.0) 0% 25%, transparent 0% 50%) 50% / 4px 4px; */
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--text-color:white;
|
||||
--background-color: #16161d;
|
||||
--backdrop: repeating-conic-gradient(rgba(128,128,128,.5) 0% 25%, transparent 0% 50%) 50% / 4px 4px;
|
||||
|
||||
}
|
||||
body{
|
||||
color:white;
|
||||
background-color:#121212;
|
||||
color:var(--text-color);
|
||||
background-color:var(--background-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -18,6 +31,48 @@ body {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
#menu {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
top:0;
|
||||
right: 0;
|
||||
position:fixed;
|
||||
z-index:9;
|
||||
border:none;
|
||||
color: #16161d;
|
||||
opacity: .8;
|
||||
border-bottom-left-radius: 0;
|
||||
font-size: 18px;
|
||||
transition: font-size 100ms cubic-bezier(0.4, 0.0, 0.2, 1);;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#menu svg {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
#menu.open,
|
||||
#menu:hover {
|
||||
color:white;
|
||||
opacity:1.0;
|
||||
font-size: 48px;
|
||||
/* transition: font-size 1000ms ease-in; */
|
||||
}
|
||||
#menu:hover svg{
|
||||
background:#16161d;
|
||||
|
||||
}
|
||||
|
||||
#menu:hover svg .inner {
|
||||
fill:white;
|
||||
}
|
||||
#menu:hover svg .outer {
|
||||
fill:transparent;
|
||||
}
|
||||
|
||||
#edit {
|
||||
font-family: monospace;
|
||||
font-weight: bold;
|
||||
|
|
@ -216,21 +271,22 @@ body:not(.loading) #loader {
|
|||
}
|
||||
|
||||
|
||||
dialog {
|
||||
.dialog {
|
||||
border: 2px solid white;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 0 2px black, inset 0 0 0 3px black;
|
||||
min-width: 320px;
|
||||
min-width: 300px;
|
||||
padding: 1.2em;
|
||||
}
|
||||
dialog, dialog button {font-size: 18px;font-weight: 600;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}
|
||||
.dialog, .dialog button {font-size: 18px;font-weight: 600;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}
|
||||
|
||||
dialog::backdrop {
|
||||
background: repeating-conic-gradient(rgba(128,128,128,.5) 0% 25%, transparent 0% 50%) 50% / 4px 4px;
|
||||
background: rgba(255,255,255,0.5);
|
||||
/* repeating-conic-gradient(rgba(255,255,255,.5) 0% 25%, transparent 0% 50%) 50% / 4px 4px; */
|
||||
}
|
||||
|
||||
|
||||
dialog button {
|
||||
.dialog button {
|
||||
border: 1px solid white;
|
||||
border-radius: 9px;
|
||||
box-shadow: inset 0 0 0 2px black;
|
||||
|
|
@ -239,13 +295,121 @@ dialog button {
|
|||
background-color: white;
|
||||
margin-left:1em;
|
||||
padding: 0 0.8em;
|
||||
color:currentColor;
|
||||
}
|
||||
dialog button:last-child {
|
||||
|
||||
.dialog button:last-child {
|
||||
box-shadow: 0 0 0 4px black, inset 0 0 0 2px black;
|
||||
}
|
||||
|
||||
dialog form {
|
||||
.dialog form {
|
||||
text-align: right;
|
||||
margin-top: 1em;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
dialog.menu {
|
||||
top: 48px;
|
||||
right: 0;
|
||||
position: fixed;
|
||||
margin: 0;
|
||||
left: auto;
|
||||
padding:0;
|
||||
bottom: 0;
|
||||
max-width:16em;
|
||||
font-weight:bold;
|
||||
padding-bottom:.8em;
|
||||
}
|
||||
|
||||
.menu-container {
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
|
||||
}
|
||||
|
||||
.menu .url {
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space: nowrap;
|
||||
opacity: 0.5;
|
||||
padding: 0.2em 0.8em;
|
||||
width:auto;
|
||||
border: 1.9px solid black;
|
||||
flex: 1 1 auto;
|
||||
margin: 2px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.menu hr {
|
||||
background-color:var(--text-color);
|
||||
height:2px;
|
||||
width: 100%;
|
||||
}
|
||||
.menu .url:focus {
|
||||
}
|
||||
.menu .url:focus-within {
|
||||
}
|
||||
|
||||
.menu .menu-icons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
cursor:default;
|
||||
}
|
||||
|
||||
.menu .menu-icons .menu-item {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
padding: 12px;
|
||||
/* display:flex; */
|
||||
/* justify-content: center; */
|
||||
}
|
||||
.menu .menu-icons .menu-item svg{
|
||||
width:2em;
|
||||
height:2em;
|
||||
font-size:12px;
|
||||
}
|
||||
|
||||
.menu .menu-item {
|
||||
padding: 0.65em 1em;
|
||||
cursor:default;
|
||||
}
|
||||
|
||||
.menu .menu-item:hover {
|
||||
background-color:black;
|
||||
color:white;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.menu {
|
||||
/* width: auto; */
|
||||
color: var(--text-color);
|
||||
/* background-color: var(--background-color); */
|
||||
border: 2px solid currentColor;
|
||||
padding: 0.5em 0;
|
||||
box-shadow: 2px 2px var(--shadow-color);
|
||||
margin-right: 2px;
|
||||
border-radius: 2px;
|
||||
margin-top: -2px;
|
||||
z-index: 300;
|
||||
/* top: 100px; */
|
||||
/* text-align: left; */
|
||||
/* float: right; */
|
||||
/* width: 10rem; */
|
||||
position: absolute;
|
||||
/* right: 1rem; */
|
||||
background-color:var(--background-color);
|
||||
}
|
||||
|
||||
|
||||
.menu .menu-item {
|
||||
color: var(--text-color);
|
||||
text-decoration: none;
|
||||
line-height: 2em;
|
||||
text-align: left;
|
||||
display: block;
|
||||
padding: 0 1em;
|
||||
cursor: default;
|
||||
}
|
||||
|
|
@ -4,16 +4,14 @@
|
|||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, viewport-fit=cover">
|
||||
<meta name="description" content="itty bitty things can be conveyed in a link.">
|
||||
<link id="favicon" rel="icon" href="/favicon.svg">
|
||||
<link rel="stylesheet" href="/index.css" inline>
|
||||
<meta id="themeColor" name="theme-color" content="white" media="(prefers-color-scheme: light)">
|
||||
<meta id="themeColorDark" name="theme-color" content="#121212" media="(prefers-color-scheme: dark)">
|
||||
<!-- <link rel="manifest" href="/manifest.json"> -->
|
||||
<script src="/js/lzma/lzma-d-min.js" inline></script>
|
||||
<link rel="icon" href="/favicon.svg" id="favicon">
|
||||
<link rel="stylesheet" href="/index.css" inline>
|
||||
<meta id="themeColor" name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
|
||||
<meta id="themeColorDark" name="theme-color" content="#16161D" media="(prefers-color-scheme: dark)">
|
||||
<script type="module" src="/bitty.js" inline></script>
|
||||
<script type="module" src="/index.js" inline></script>
|
||||
<script nomodule> location.href = "/v1/" + location.hash </script>
|
||||
<noscript>itty.bitty requires JavaScript.</noscript>
|
||||
</head>
|
||||
<iframe id="iframe"></iframe>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import * as bitty from '/bitty.js';
|
||||
import * as bitty_menu from '/bitty-menu.js';
|
||||
|
||||
window.bitty = bitty;
|
||||
|
||||
|
|
@ -22,7 +23,35 @@
|
|||
// if (document.getElementById("never").checked) window.localStorage.setItem('toasted', true);
|
||||
// document.body.classList.remove("toasting")
|
||||
// }
|
||||
|
||||
|
||||
function getIframe() {
|
||||
if (!document.iframe) {
|
||||
let iframe = document.createElement('iframe');
|
||||
iframe.id = "iframe";
|
||||
iframe.sandbox = "allow-same-origin allow-scripts allow-forms allow-top-navigation allow-popups allow-modals allow-popups-to-escape-sandbox";
|
||||
if (iframe.sandbox.supports('allow-downloads')) iframe.sandbox.add('allow-downloads');
|
||||
document.body.appendChild(iframe);
|
||||
document.iframe = iframe;
|
||||
}
|
||||
return document.iframe;
|
||||
}
|
||||
|
||||
async function getMenu() {
|
||||
if (!document.menuButton) {
|
||||
let menuButton = document.createElement('div');
|
||||
menuButton.id = "menu";
|
||||
menuButton.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><g fill-rule="evenodd" class="logo" clip-rule="evenodd"><path fill="#fff" d="M6.5 19.5a2 2 0 0 1-2-2v-11a2 2 0 0 1 2-2h8a5 5 0 0 1 4.33 7.5 5 5 0 0 1-4.33 7.5h-8Z" class="outer"/><path fill="#16161D" d="M6.5 5.5a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h2v-13h-2Zm8 3h-2v2h2a1 1 0 1 0 0-2Zm-5 0v10h5a4 4 0 0 0 3.123-6.5A4 4 0 0 0 14.5 5.5h-5v3Zm3 5h2a1 1 0 1 1 0 2h-2v-2Z" class="inner"/></g></svg>`
|
||||
menuButton.onclick = () => {
|
||||
let menu = new bitty_menu.Menu(menuButton);
|
||||
console.log("men", menu)
|
||||
menu.show()
|
||||
}
|
||||
document.body.appendChild(menuButton);
|
||||
document.menuButton = menuButton;
|
||||
}
|
||||
return document.menuButton;
|
||||
}
|
||||
getMenu()
|
||||
let autohideTimeout;
|
||||
function showLoader(state) {
|
||||
let loader = document.getElementById("loader");
|
||||
|
|
@ -79,6 +108,13 @@
|
|||
|
||||
|
||||
function share(info) { // {title, text, url}
|
||||
|
||||
let menu = new bitty_menu.Menu();
|
||||
console.log("men", menu)
|
||||
menu.show(info)
|
||||
return;
|
||||
}
|
||||
function systemShare(info) {
|
||||
if (!info.url) info = {title:document.title, text:document.title, url:location.href};
|
||||
|
||||
if (navigator.share) {
|
||||
|
|
@ -155,7 +191,7 @@
|
|||
|
||||
|
||||
window.addEventListener("message", function(e) {
|
||||
console.debug("Message:", e.origin, e.data)
|
||||
console.debug("Message:", e.origin, e.data, e)
|
||||
showLoader(false);
|
||||
if (e.data.loading != undefined) showLoader(e.data.loading);
|
||||
|
||||
|
|
@ -200,7 +236,7 @@
|
|||
|
||||
function showError(error) {
|
||||
console.warn("🛑", error)
|
||||
let dialog = el("dialog",
|
||||
let dialog = el("dialog.dialog",
|
||||
el("div", {}, error),
|
||||
el("form", {method: "dialog"},
|
||||
|
||||
|
|
@ -244,7 +280,7 @@
|
|||
|
||||
// if (!window.localStorage.getItem('toasted')) document.body.classList.add("toasting");
|
||||
|
||||
var iframe = document.getElementById("iframe");
|
||||
var iframe = getIframe();
|
||||
var dataPrefix = undefined;
|
||||
var renderMode = "data";
|
||||
var renderer;
|
||||
|
|
@ -286,7 +322,7 @@
|
|||
//if (render.script == "parse") renderer.sandbox = "none"
|
||||
type = "data:" + durl.mediaype;
|
||||
if (durl.mediatype == "text/html") {
|
||||
dataPrefix = bitty.HEAD_TAGS();
|
||||
dataPrefix = bitty.HEAD_TAGS(durl.params?.prefix);
|
||||
} else if (durl.mediatype == "text/plain" || durl.mediatype == undefined) {
|
||||
|
||||
dataPrefix = bitty.HEAD_TAGS_EXTENDED();
|
||||
|
|
@ -352,8 +388,6 @@
|
|||
let dataContent = durl.rawData;
|
||||
|
||||
if (!dataURL) return;
|
||||
iframe.sandbox = "allow-same-origin allow-scripts allow-forms allow-top-navigation allow-popups allow-modals allow-popups-to-escape-sandbox";
|
||||
if (iframe.sandbox.supports('allow-downloads')) iframe.sandbox.add('allow-downloads');
|
||||
|
||||
if (isIE && renderMode == "data") renderMode = "frame";
|
||||
let overwriteSelf = isWatch && !params.script.endsWith(".html");
|
||||
|
|
|
|||
Loading…
Reference in a new issue