You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
93 lines
2.6 KiB
93 lines
2.6 KiB
const Spacer = require('./Spacer.js'); |
|
const theme = require('../theme.js'); |
|
|
|
/** |
|
* @typedef {Object} RuntimeErrorFooterProps |
|
* @property {string} [initialFocus] |
|
* @property {boolean} multiple |
|
* @property {function(MouseEvent): void} onClickCloseButton |
|
* @property {function(MouseEvent): void} onClickNextButton |
|
* @property {function(MouseEvent): void} onClickPrevButton |
|
*/ |
|
|
|
/** |
|
* A fixed footer that handles pagination of runtime errors. |
|
* @param {Document} document |
|
* @param {HTMLElement} root |
|
* @param {RuntimeErrorFooterProps} props |
|
* @returns {void} |
|
*/ |
|
function RuntimeErrorFooter(document, root, props) { |
|
const footer = document.createElement('div'); |
|
footer.style.backgroundColor = '#' + theme.dimgrey; |
|
footer.style.bottom = '0'; |
|
footer.style.boxShadow = '0 -1px 4px rgba(0, 0, 0, 0.3)'; |
|
footer.style.height = '2.5rem'; |
|
footer.style.left = '0'; |
|
footer.style.right = '0'; |
|
footer.style.lineHeight = '2.5rem'; |
|
footer.style.paddingBottom = '0'; |
|
footer.style.paddingBottom = 'env(safe-area-inset-bottom)'; |
|
footer.style.position = 'fixed'; |
|
footer.style.textAlign = 'center'; |
|
footer.style.zIndex = '2'; |
|
|
|
const BUTTON_CONFIGS = { |
|
prev: { |
|
id: 'prev', |
|
label: '◀ Prev', |
|
onClick: props.onClickPrevButton, |
|
}, |
|
close: { |
|
id: 'close', |
|
label: '× Close', |
|
onClick: props.onClickCloseButton, |
|
}, |
|
next: { |
|
id: 'next', |
|
label: 'Next ▶', |
|
onClick: props.onClickNextButton, |
|
}, |
|
}; |
|
|
|
let buttons = [BUTTON_CONFIGS.close]; |
|
if (props.multiple) { |
|
buttons = [BUTTON_CONFIGS.prev, BUTTON_CONFIGS.close, BUTTON_CONFIGS.next]; |
|
} |
|
|
|
/** @type {HTMLButtonElement | undefined} */ |
|
let initialFocusButton; |
|
for (let i = 0; i < buttons.length; i += 1) { |
|
const buttonConfig = buttons[i]; |
|
|
|
const button = document.createElement('button'); |
|
button.id = buttonConfig.id; |
|
button.innerHTML = buttonConfig.label; |
|
button.tabIndex = 1; |
|
button.style.backgroundColor = '#' + theme.dimgrey; |
|
button.style.border = 'none'; |
|
button.style.color = '#' + theme.white; |
|
button.style.cursor = 'pointer'; |
|
button.style.fontSize = 'inherit'; |
|
button.style.height = '100%'; |
|
button.style.padding = '0.5rem 0.75rem'; |
|
button.style.width = (100 / buttons.length).toString(10) + '%'; |
|
button.addEventListener('click', buttonConfig.onClick); |
|
|
|
if (buttonConfig.id === props.initialFocus) { |
|
initialFocusButton = button; |
|
} |
|
|
|
footer.appendChild(button); |
|
} |
|
|
|
root.appendChild(footer); |
|
|
|
Spacer(document, root, { space: '2.5rem' }); |
|
|
|
if (initialFocusButton) { |
|
initialFocusButton.focus(); |
|
} |
|
} |
|
|
|
module.exports = RuntimeErrorFooter;
|
|
|