JavaScript Alert Web Component

Autonomous open source alert component with RTL support built on Custom Elements and Shadow DOM specifications.

Build	GitHub pages	NPM

How to use

Installation

• Install with npm

$ npm install zino-alert

• Install with bower

$ bower install zino-alert

Using zino-alert

• HTML way

<zino-alert id="alert-1"
    heading="HTML"
    text="Lorem ipsum dolor sit amet."
    type="success"></zino-alert>

<script type="module" src="../zino-alert.js"></script>

Alert customizations are possible via data-* attributes.

• using the DOM API

<script type="module" src="../zino-alert.js"></script>

<script>
const alert = document.createElement("zino-alert");
alert.heading = "DOM API";
alert.type = "success";
alert.text = "Autonomous WAI-ARIA accessible alert dialog.";
document.body.appendChild(alert);
alert.open();
</script>

• using the constructor

<script type="module">
import {ZinoAlert} from "../zino-alert.js";

const alert = new ZinoAlert({
    heading: "Constructor",
    type: "success",
    text: "A web component build on Custom Elements and Shadow DOM APIs.",
    showCancelButton: "true",
    allowEscapeKey: "true"
});
document.body.appendChild(alert);
alert.open();
</script>

Styling

:root {
  --background-head: #fff;
  --color-head: #FA4251;
  --color-head-active: #FA4251;
  --background-foot: #fff;
  --color-foot: #222;
  --background-odd: #fff;
  --background-even: #fff;
  --color-odd: #333;
  --color-even: #222;
}
zino-grid {
  margin: 20px auto 0;
  width: 100%;
  max-width: 1024px;
}

Options

Option	Required	Type	Default	Description
allowEscapeKey	No	Boolean	true	Whether to close the alert when the Escape key is pressed
animation	No	Boolean	true	Whether to use an animation when show the alert
backdrop	No	Boolean	true	Whether to use a backdrop
background	No	String	#fff	The alert's background color
cancelButtonAriaLabel	No	String	Cancel	The cancel button's aria-label attribute
cancelButtonColor	No	String	#aaa	The cancel button's background color
cancelButtonText	No	String	Cancel	The cancel button's text
closeButtonAriaLabel	No	String	Close	The close button's aria-label attribute
confirmButtonAriaLabel	No	String	OK	The confirm button's aria-label attribute
confirmButtonColor	No	String	#3085d6	The confirm button's background color
confirmButtonText	No	String	OK	The confirm button's text
debug	No	Boolean	false	If true will log events into console
focusCancel	No	Boolean	false	Whether to focus on cancel button when alert show
focusConfirm	No	Boolean	true	Whether to focus on confirm button when alert show
footer	No	String	(empty)	If not empty will show it's content at the alert's footer
header	No	String	(empty)	If not empty will show it's content at the alert's header
heading	No	String	(empty)	The alert's heading text
position	No	String	center	The alert's position. Accepts: top, top-start, top-left, top-end, top-right, center, center-start, center-left, center-end, center-right, bottom, bottom-start, bottom-left, bottom-end, bottom-right
showCancelButton	No	Boolean	false	Whether to show the cancel button
showCloseButton	No	Boolean	false	Whether to show the close button
showConfirmButton	No	Boolean	true	Whether to show the confirm button
text	No	String	(empty)	The alert's text
type	Yes	String	(empty)	The alert's icon. Accepts: success, error

Methods

Method	Description
cancel	Manually triggers the cancel.alert event.
close	Manually closes an alert and triggers the close.alert event.
confirm	Manually triggers the confirm.alert event.
open	Manually opens an alert and triggers the open.alert event.

document.querySelector("zino-alert").open();

Events

Event	Description
cancel.alert	This event is fired immediately when the Cancel button has been clicked.
close.alert	This event is fired immediately when the close instance method has been called.
confirm.alert	This event is fired immediately when the Confirm button has been clicked.
open.alert	This event is fired immediately when the open instance method has been called.

document.querySelector("zino-alert").addEventListener("close.alert", function(event) {
    // do something...    
});

Browser Support

Polyfill	Edge	IE11+	Chrome 54+	Firefox 63+	Safari 10.1+	Opera 41+
Yes	✓	✓	✓	✓	✓	✓
No	✗	✗	✓	✓	✓	✓

License

zino-alert is licensed under the MIT license.

Copyright (c) 2019-2020 Dimitar Ivanov