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;