45 lines
2.7 KiB
JavaScript
45 lines
2.7 KiB
JavaScript
'use strict';
|
|
// ---- Bottom sheet (dialog on tablet/desktop). Body content is built by the caller from trusted/escaped HTML.
|
|
function openSheet(title, sub, bodyHtml) {
|
|
closeSheet();
|
|
const el = document.createElement('div');
|
|
el.id = 'sheet';
|
|
el.innerHTML = `<div class="scrim"></div><div class="sheet" role="dialog" aria-modal="true" aria-label="${esc(title)}">
|
|
<div class="grip"></div><h3>${esc(title)}</h3>${sub ? `<p class="sub">${esc(sub)}</p>` : ''}${bodyHtml}</div>`;
|
|
document.body.appendChild(el);
|
|
el.querySelector('.scrim').onclick = closeSheet;
|
|
requestAnimationFrame(() => el.classList.add('on'));
|
|
return el;
|
|
}
|
|
function closeSheet() { document.getElementById('sheet')?.remove(); }
|
|
addEventListener('keydown', e => { if (e.key === 'Escape') closeSheet(); });
|
|
|
|
function actionSheet(title, sub, actions) {
|
|
const el = openSheet(title, sub, `<div class="list">${actions.map((a, i) => `
|
|
<button class="row ${a.danger ? 'dng' : ''}" data-i="${i}">${icon(a.icon)}<span class="grow"><b>${esc(a.label)}</b></span></button>`).join('')}</div>
|
|
<div class="bar"><button class="btn ghost" id="sx" style="flex:1;justify-content:center">Cancel</button></div>`);
|
|
el.querySelector('#sx').onclick = closeSheet;
|
|
el.querySelectorAll('button.row').forEach(b => b.onclick = () => { closeSheet(); actions[b.dataset.i].run(); });
|
|
}
|
|
|
|
function textSheet(title, label, okLabel, onOk, initial = '', validate) {
|
|
const el = openSheet(title, '', `<form><label>${esc(label)}</label><input type="text" id="tv" autocapitalize="off" autocomplete="off" required value="${esc(initial)}">
|
|
<div class="err" id="te" style="margin-top:6px"></div>
|
|
<div class="bar"><button class="btn ghost" type="button" id="sx" style="flex:1;justify-content:center">Cancel</button>
|
|
<button class="btn" style="flex:1;justify-content:center">${esc(okLabel)}</button></div></form>`);
|
|
el.querySelector('#sx').onclick = closeSheet;
|
|
el.querySelector('form').onsubmit = e => {
|
|
e.preventDefault(); const v = el.querySelector('#tv').value.trim(); if (!v) return;
|
|
const bad = validate && validate(v); if (bad) { el.querySelector('#te').textContent = bad; return; }
|
|
closeSheet(); onOk(v);
|
|
};
|
|
setTimeout(() => { const t = el.querySelector('#tv'); t.focus(); const d = initial.lastIndexOf('.'); t.setSelectionRange(0, d > 0 ? d : initial.length); }, 50);
|
|
}
|
|
|
|
function confirmSheet(title, sub, okLabel, onOk) {
|
|
const el = openSheet(title, sub, `<div class="bar"><button class="btn ghost" id="sx" style="flex:1;justify-content:center">Cancel</button>
|
|
<button class="btn" id="so" style="flex:1;justify-content:center;background:var(--danger);color:#fff">${esc(okLabel)}</button></div>`);
|
|
el.querySelector('#sx').onclick = closeSheet;
|
|
el.querySelector('#so').onclick = () => { closeSheet(); onOk(); };
|
|
}
|