|
async function prompt( |
|
heading, |
|
body, |
|
buttons = ['Cancel', 'Ok'], |
|
options = { title: heading, size: { width: 360, height: 280 } } |
|
) { |
|
const [dlgEl, formEl, headingEl, dividerEl, bodyEl, footerEl] = [ |
|
'dialog', |
|
'form', |
|
'sp-heading', |
|
'sp-divider', |
|
'sp-body', |
|
'footer', |
|
].map((tag) => document.createElement(tag)) |
|
;[headingEl, dividerEl, bodyEl, footerEl].forEach((el) => { |
|
el.style.margin = '6px' |
|
el.style.width = 'calc(100% - 12px)' |
|
}) |
|
|
|
formEl.setAttribute('method', 'dialog') |
|
formEl.addEventListener('submit', () => dlgEl.close()) |
|
|
|
footerEl.style.marginTop = '26px' |
|
|
|
dividerEl.setAttribute('size', 'large') |
|
|
|
headingEl.textContent = heading |
|
|
|
bodyEl.textContent = body |
|
|
|
buttons.forEach((btnText, idx) => { |
|
const btnEl = document.createElement('sp-button') |
|
btnEl.setAttribute( |
|
'variant', |
|
idx === buttons.length - 1 ? btnText.variant || 'cta' : 'secondary' |
|
) |
|
if (idx === buttons.length - 1) |
|
btnEl.setAttribute('autofocus', 'autofocus') |
|
if (idx < buttons.length - 1) btnEl.setAttribute('quiet') |
|
btnEl.textContent = btnText.text || btnText |
|
btnEl.style.marginLeft = '12px' |
|
btnEl.addEventListener('click', () => |
|
dlgEl.close(btnText.text || btnText) |
|
) |
|
footerEl.appendChild(btnEl) |
|
}) |
|
;[headingEl, dividerEl, bodyEl, footerEl].forEach((el) => |
|
formEl.appendChild(el) |
|
) |
|
dlgEl.appendChild(formEl) |
|
document.body.appendChild(dlgEl) |
|
|
|
return dlgEl.uxpShowModal(options) |
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
module.exports = { prompt } |
|
|