@orcden/od-modal

A set of modals to display information to the user

<od-modal> is a simple component that can be given custom content. Can either hijack the user experience or not. <od-modal-alert> is a simple component that can be given custom content. It will hijack the user experience until the ok button is clicked. <od-modal-confirm> is a simple component that can be given custom message content. It will hijack the user experience until the ok button is clicked and return the users decision.

Installation

• Install with npm

npm i @orcden/od-modal

Usage

import '@orcden/od-modal';

<od-modal id="modal" scoped><p>Test</p></od-modal>
<od-modal-alert id="alert" scoped><p>Test 2</p></od-modal-alert>
<od-modal-confirm id="confirm" scoped><p>Test 3</p></od-modal-confirm>

document.querySelector( "#alert" ).alert( 'This is an alert' ); //displays the alert
document.querySelector( "#confirm" ).confirm( 'This is a confirm' ); //displays the confirm

Attributes

Attribute	Type	Default	Description
scoped	Boolean	false	Can be set to tell the modal to scope itself to the next parent element with relative position (in CSS)
active	Boolean	false	Controls CSS to show/hide the modal.
hijack	Boolean	false	Can be set to hijack the user experience until stated otherwise in JS. This is always true in alerts and confirms

Properties

OD-Modal

Attribute	Type	Default	Description
scoped	Boolean	false	Can be set to tell the modal to scope itself to the next parent element with relative position (in CSS)
active	Boolean	false	Controls CSS to show/hide the modal.
hijack	Boolean	false	Can be set to hijack the user experience until stated otherwise in JS.

OD-Modal-Alert & OD-Modal-Confirm

Attribute	Type	Default	Description
scoped	Boolean	false	Can be set to tell the modal to scope itself to the next parent element with relative position (in CSS)
active	Boolean	false	Controls CSS to show/hide the modal.
message	String	''	Can be used to set the displayed message of the modal

Functions

OD-Modal

Name	Parameters	Description
toggleModal	None	Toggles the modal on and off

OD-Modal-Alert

Name	Parameters	Description
toggleAlert	None	Toggles the alert on and off
alert	message	Async. Displays the alert and waits for the user input. Displays the given string to the user

OD-Modal-Confirm

Name	Parameters	Description
toggleConfirm	None	Toggles the alert on and off
confirm	message	Async. Displays the confirm and waits for the user input. Displays the given string to the user. Returns the Users input choice

Styling

• CSS variables are available to alter the default styling provided

Shadow Parts	Description
modal	The inner div used for the modal
content-box	On alerts and confirms this is the div that holds the buttons and message
mesage	On alerts and confirms this is the div that holds the text message
buttons-container	On alerts and confirms this is the div that holds the buttons
confirm-button	On alerts and confirms this is the OK button
confirm-button	On confirms this is the CANCEL button

Development

Run development server and show demo

npm run demo

Run linter

npm run lint

Fix linter errors

npm run fix

Run tests

npm run test

Build for production

npm run build