mirror of
https://github.com/amaterasusan/notification.git
synced 2026-06-11 16:13:29 +03:00
154 lines
3.8 KiB
Markdown
154 lines
3.8 KiB
Markdown
# Notification
|
|
\
|
|
**Popup notifications** is a lightweight Javascript library for popup messages on a web page. Pure javascript and css, any dependencies. You can use it as toast messages or a single notification.
|
|
|
|
## Live Demo
|
|
[Click here](https://amaterasusan.github.io/notification/)
|
|
|
|
## Getting Started
|
|
### Just include files in the HTML:
|
|
`<link href="path/to/notification.css" rel="stylesheet"/>`\
|
|
`<script src="path/to/notification.js"></script>`
|
|
|
|
### Or use it as an ES module in your project:
|
|
```javascript
|
|
import Notification from 'path/to/notification-es.js';
|
|
```
|
|
|
|
## options
|
|
All options are optional
|
|
* **position**\
|
|
top-right (default value)\
|
|
bottom-right\
|
|
top-left\
|
|
bottom-left\
|
|
center
|
|
* **duration**\
|
|
default 5000\
|
|
time in milliseconds the notification will be displayed\
|
|
if duration is 0 - popup notification will be displayed all the time
|
|
* **isHidePrev**\
|
|
default false\
|
|
hide previous popup(s) or not
|
|
* **isHideTitle**\
|
|
default false\
|
|
hide title block or not\
|
|
if it is set to true and the duration is 0,\
|
|
an X close button will appear on the right side of the notification body to allow the popup to close.
|
|
* **maxOpened**\
|
|
default 5, the maximum value can be set to 10
|
|
|
|
## Usage
|
|
```
|
|
const popup = Notification({
|
|
position: 'top-left',
|
|
duration: 4000,
|
|
isHidePrev: false,
|
|
isHideTitle: false,
|
|
maxOpened: 3,
|
|
});
|
|
|
|
// or
|
|
const popup = Notification(); // options will be set by default
|
|
|
|
// then later you can set any options like
|
|
popup.setProperty({
|
|
duration: 5000,
|
|
isHidePrev: true,
|
|
});
|
|
```
|
|
|
|
### the following popup methods are available:
|
|
* error
|
|
* warning
|
|
* info
|
|
* success
|
|
* dialog
|
|
* setProperty
|
|
* hide
|
|
|
|
```
|
|
// error
|
|
popup.error({
|
|
title: 'Oops',
|
|
message: `An error has occurred"`,
|
|
});
|
|
|
|
// or even insert HTML
|
|
popup.error({
|
|
title: `<div class="title-cust title-error">Oops</div>`,
|
|
message: `<div class="wrapper-notification">
|
|
<div class="icons icon-error"></div>
|
|
<div class="message message-text-error">An error has occurred</div></div>`,
|
|
});
|
|
|
|
// info
|
|
popup.info({
|
|
title: 'Info',
|
|
message: 'Info message'
|
|
});
|
|
|
|
// warning
|
|
popup.warning({
|
|
title: 'Warning',
|
|
message: 'Warning message'
|
|
});
|
|
|
|
// success
|
|
popup.success({
|
|
title: 'Success',
|
|
message: 'Success message'
|
|
});
|
|
```
|
|
|
|
### Dialog
|
|
If use "Confirmation dialog" two buttons are available [Ok] and [Cancel].\
|
|
The popup display time here will not matter even if it has been set,\
|
|
callback function is called when any of the buttons is pressed.\
|
|
You can also insert HTML.
|
|
```
|
|
popup.dialog({
|
|
title: 'Confirm',
|
|
message: 'Confirm message',
|
|
callback: (result) => {
|
|
console.log('result = ', result)
|
|
}
|
|
});
|
|
|
|
/*
|
|
Example with HTML
|
|
you can pass a validation function to be able to check the filled fields in the form and
|
|
not to close the popup immediately after clicking [Ok]
|
|
*/
|
|
const validTextarea = () => {
|
|
let valid = true;
|
|
const textarea = document.querySelector('textarea[name="your_mess"]');
|
|
if (textarea.value.trim() === '') {
|
|
valid = false;
|
|
textarea.focus();
|
|
}
|
|
return valid;
|
|
};
|
|
|
|
popup.dialog({
|
|
title: <div class="title-cust title-dialog">Send</div>',
|
|
message: `<div class="label-message">Your message<span class="asterisk">*</span>:</div>
|
|
<textarea name="your_mess" rows="3"></textarea>`,
|
|
callback:(result) => {
|
|
console.log('result = ', result)
|
|
},
|
|
validFunc: validTextarea,
|
|
});
|
|
```
|
|
|
|
## Authors
|
|
|
|
👤 **Helen Nikitina**
|
|
|
|
- Twitter: [@twitterhandle](https://twitter.com/@HelenNikit1ina )
|
|
|
|
## License
|
|
[](https://github.com/amaterasusan/notification/blob/master/LICENSE)
|
|
|
|
[](https://www.buymeacoffee.com/amaterasu.san)
|