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:
`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
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.
View on GitHub
View on NPM
Notifier version 1.0.0
### Dependencies
* paper-dialog#^2.1.1
* neon-animation#^2.2.1
* polymer#^2
* paper-button#^2.1.0
* paper-toast#^2.1.0
* paper-dialog-scrollable#^2.2.0
* web-animations-js#^2.3.1
Notifier version 1.0.1
### Dependencies
* paper-dialog#^2.1.1
* neon-animation#^2.2.1
* polymer#^2
* paper-button#^2.1.0
* paper-toast#^2.1.0
* paper-dialog-scrollable#^2.2.0
* web-animations-js#^2.3.1
Notifier version 1.0.2
### Dependencies
* paper-dialog#^2.1.1
* neon-animation#^2.2.1
* polymer#^2
* paper-button#^2.1.0
* paper-toast#^2.1.0
* paper-dialog-scrollable#^2.2.0
* web-animations-js#^2.3.1
Notifier version 2.0.0
### Dependencies
* @polymer/neon-animation#3
* @polymer/paper-button#3
* @polymer/paper-dialog#3
* @polymer/paper-dialog-scrollable#3
* @polymer/paper-toast#3
* @polymer/polymer#3
* babel-loader#^8.0.4
Notifier version 2.0.1
### Dependencies
* @polymer/neon-animation#3
* @polymer/paper-button#3
* @polymer/paper-dialog#3
* @polymer/paper-dialog-scrollable#3
* @polymer/paper-toast#3
* @polymer/polymer#3
* babel-loader#^8.0.4