Directory

← Back

Notifier

Easily show paper-dialog and paper-toast alerts

Author

Rating

Popularity

<100

Travis Published on webcomponents.org Docs on Github Pages

Notifier

A lightweight library to show paper-toast and paper-dialog alerts easily.

Header image

Usage

To use it you have to import notifier module.

import Notifier from '@myfrom/notifier';

The module returns an initialised Notifier class on which you can use methods described in docs.

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:

{
  "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 and 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 to your document.

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

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
Released
2018-12-15
Maturity
IMPORTED
License
MIT License

Compatibility

Framework
Polymer 3.0+
Browser
Browser Independent

Notifier - Vaadin Add-on Directory

Easily show paper-dialog and paper-toast alerts Notifier - Vaadin Add-on Directory
[![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

Online