| 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 } |
|
|