forked from bitcoinafterlife/bal-welist-website
add share invoice button with Web Share API / clipboard fallback
This commit is contained in:
19
index.html
19
index.html
@@ -139,6 +139,11 @@ tbody tr:hover{background:color-mix(in srgb,var(--accent-soft) 50%,transparent)}
|
|||||||
.btn:disabled{opacity:.45;cursor:not-allowed;filter:none}
|
.btn:disabled{opacity:.45;cursor:not-allowed;filter:none}
|
||||||
.note{font-size:13px;color:var(--muted);margin-top:16px;line-height:1.55}
|
.note{font-size:13px;color:var(--muted);margin-top:16px;line-height:1.55}
|
||||||
.note strong{color:var(--ink)}
|
.note strong{color:var(--ink)}
|
||||||
|
.btn-share{
|
||||||
|
display:block;margin:0 auto 8px;font:inherit;font-size:13px;cursor:pointer;
|
||||||
|
padding:8px 16px;border-radius:8px;border:1px solid var(--line-strong);
|
||||||
|
background:var(--panel);color:var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
.invoice{display:none}
|
.invoice{display:none}
|
||||||
.invoice.show{display:block}
|
.invoice.show{display:block}
|
||||||
@@ -301,6 +306,7 @@ footer a{color:var(--accent);text-decoration:none}
|
|||||||
<div class="row"><span>Status</span><span id="iv-status2">—</span></div>
|
<div class="row"><span>Status</span><span id="iv-status2">—</span></div>
|
||||||
<div class="row"><span>Server</span><span id="iv-url">—</span></div>
|
<div class="row"><span>Server</span><span id="iv-url">—</span></div>
|
||||||
<div id="qrcode"></div>
|
<div id="qrcode"></div>
|
||||||
|
<button class="btn-share" id="share-btn">Share invoice</button>
|
||||||
<p class="note">
|
<p class="note">
|
||||||
<strong>Please make sure your server is online before you attempt to add it.</strong>
|
<strong>Please make sure your server is online before you attempt to add it.</strong>
|
||||||
</p>
|
</p>
|
||||||
@@ -493,6 +499,7 @@ document.getElementById('submit').addEventListener('click', async () => {
|
|||||||
document.getElementById('iv-status2').textContent = '—';
|
document.getElementById('iv-status2').textContent = '—';
|
||||||
document.getElementById('iv-url').textContent = '—';
|
document.getElementById('iv-url').textContent = '—';
|
||||||
document.getElementById('qrcode').innerHTML = '';
|
document.getElementById('qrcode').innerHTML = '';
|
||||||
|
document.getElementById('share-btn').textContent = 'Share invoice';
|
||||||
document.getElementById('terms-box').classList.remove('show');
|
document.getElementById('terms-box').classList.remove('show');
|
||||||
document.getElementById('terms-check').checked = false;
|
document.getElementById('terms-check').checked = false;
|
||||||
document.getElementById('terms-accept').disabled = true;
|
document.getElementById('terms-accept').disabled = true;
|
||||||
@@ -519,6 +526,18 @@ document.getElementById('submit').addEventListener('click', async () => {
|
|||||||
const qrEl = document.getElementById('qrcode');
|
const qrEl = document.getElementById('qrcode');
|
||||||
qrEl.innerHTML = '';
|
qrEl.innerHTML = '';
|
||||||
new QRCode(qrEl, invoiceuri);
|
new QRCode(qrEl, invoiceuri);
|
||||||
|
const shareBtn = document.getElementById('share-btn');
|
||||||
|
shareBtn.textContent = 'Share invoice';
|
||||||
|
shareBtn.onclick = function () {
|
||||||
|
if (navigator.share) {
|
||||||
|
navigator.share({ title: 'BAL Invoice', text: invoiceuri });
|
||||||
|
} else {
|
||||||
|
navigator.clipboard.writeText(invoiceuri).then(() => {
|
||||||
|
this.textContent = 'Copied!';
|
||||||
|
setTimeout(() => this.textContent = 'Share invoice', 2000);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
const serverUrl = result.url || url;
|
const serverUrl = result.url || url;
|
||||||
const infoUrl = serverUrl + '/' + (result.chain || chain) + '/info';
|
const infoUrl = serverUrl + '/' + (result.chain || chain) + '/info';
|
||||||
document.getElementById('iv-url').textContent = serverUrl;
|
document.getElementById('iv-url').textContent = serverUrl;
|
||||||
|
|||||||
Reference in New Issue
Block a user