Have ideas to improve npm?Join in the discussion! »

@orcden/od-modal

3.1.0 • Public • Published

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

Install

npm i @orcden/od-modal

DownloadsWeekly Downloads

0

Version

3.1.0

License

MIT

Unpacked Size

25.4 kB

Total Files

3

Last publish

Collaborators

  • avatar