Readlebee/app/views/partials/modal.js

66 lines
2.2 KiB
JavaScript

import html from 'choo/html';
export const modal = (modalId, controller, contentHTML, options = {}) => {
/* Options:
* controller <class>: Pass the controller class with state; Requires get/set for openModal in state.
* buttonHTML <choo/html>: Displayed in place of the default button to open the modal
* buttonText <string>: Displayed if no buttonHTML is specified
* noHeader <bool>: Set to `true` and exclude headerHTML to not include a modal header
* headerHTML <choo/html>: Displayed in place of the default header; Recommended to use `<header>` tag
* headerText <string>: Displayed in an `<h3>` if no header is specified
* noFooter <bool>: Set to `true` and exclude footerHTML to not include a modal footer
* footerHTML <choo/html>: Displayed in place of the default footer; Recommended to use `<footer>` tag
*/
const isOpen = controller.openModal === modalId;
return [
(
typeof options.buttonHTML === 'undefined'
? html`<label for=${modalId} class="button">${options.buttonText}</label>`
: options.buttonHTML
),
// Modals in Picnic CSS uses pure CSS with clever usage of invisible checkboxes and labels
html`<div class="modal">
<input id=${modalId} type="checkbox" ${!isOpen ? null : 'checked'}
onchange=${() => controller.openModal = isOpen ? modalId : null }/>
<label for=${modalId} class="overlay"></label>
<article>
${typeof options.headerHTML === 'undefined'
? (
options.noHeader
? null
: html`<header>
<h3>${options.headerText}</h3>
<label for=${modalId} class="close">${'\u00d7'}</label>
</header>`
)
: options.headerHTML
}
<section class="content">
${typeof contentHTML === 'undefined'
? null
: contentHTML
}
</section>
${typeof options.footerHTML === 'undefined'
? (
options.noFooter
? null
: html`<footer>
<label for=${modalId} class="button dangerous">
Close
</label>
</footer>`
)
: options.footerHTML
}
</article>
</div>`,
];
}