Notifier - Vaadin Add-on Directory
Easily show paper-dialog and paper-toast alerts[![Travis](https://img.shields.io/travis/myfrom/Notifier.svg?style=flat-square)](https://travis-ci.org/myfrom/Notifier)
[![Published on webcomponents.org](https://img.shields.io/badge/shared_on-webcomponents.org-blue.svg?style=flat-square)](https://www.webcomponents.org/element/@myfrom/Notifer)
[![Docs on Github Pages](https://img.shields.io/badge/docs-github%20pages-3F51B5.svg?style=flat-square)](https://myfrom.github.io/Notifier)
# Notifier
A lightweight library to show paper-toast and paper-dialog alerts easily.
![Header image](banner.png)
## Usage
To use it you have to import [notifier](notifier.js) module.
```javascript
import Notifier from '@myfrom/notifier';
```
The module returns an initialised Notifier class on which you can use methods described in [docs](https://myfrom.github.io/Notifier).
If you want to use non-module version, you should downgrade to version 1.x.x
### Custom options
You can set custom options before you load Notifier by setting `NotifierOptions` on `window`. Here are the default values:
```json
{
"elementsImported": false, // If set to true, Notifier won't attempt to load its dependencies (check 'Loading dependencies' section).
"stylesLoaded": false, // Same but it's about helper styles (check 'Helper styles section').
"mobileMediaQuery": ["(orientation: landscape) and (max-width: 960px)","(orientation: portrait) and (max-width: 600px)"] // To distinguish between phones and bigger devices. If changed you should also change it in styles.css
}
```
### Loading dependencies
Notifier relies on a few custom elements such as [paper-dialog](https://www.webcomponents.org/element/@Polymer/paper-dialog) and [paper-toast](https://www.webcomponents.org/element/@Polymer/paper-toast).
By default, they will be loaded using a dynamic import. You can ommit this loading attempt by setting `elementsImported` option to `true` (look above). However, if you do this and not import necessary files, Notifier will throw an error.
Here are all the necessary files for each function:
They are also exported as an array from notifier module (`elementsToImport`).
### Helper styles
Notifier relies on a few styles applied to paper-button in paper-toast. Those styles are not mandatory but ensure there are no weird bugs such as text overlapping with button, etc.
They're automatically loaded but you can skip that by setting `stylesLoaded` option to `true`). In such case you might want to manually add [styles.css](./styles.css) to your document.
`showToast()`
- paper-toast
- paper-button (if includes a button)
`showDialog()`
- paper-dialog
- paper-dialog-scrollable
`askDialog()`
- paper-dialog
- paper-dialog-scrollable
- paper-button
Animations
- neon-animation/web-animations.html
- neon-animation/animations/fade-in-animation.html
- neon-animation/animations/fade-out-animation.html
- neon-animation/animations/slide-from-bottom-animation.html
- neon-animation/animations/slide-down-animation.html