diff --git a/README.md b/README.md index 3f90328..161f9ed 100644 --- a/README.md +++ b/README.md @@ -3,6 +3,9 @@ [![Docs on Github Pages](https://img.shields.io/badge/docs-github%20pages-3F51B5.svg?style=flat-square)](https://myfrom.github.io/Notifier) +🏗 **ALPHA BUILD! Bugs may occur** 🚧 + + # Notifier A lightweight library to show paper-toast and paper-dialog alerts easily. @@ -16,66 +19,37 @@ 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). +**You should also load styles helper to ensure compatibility**, check section ["Helper styles"](#helper-styles) + If you want to use non-module version, you should downgrade to version 1.x.x ### Custom options +To use Notifier with your options, you need to import `NotifierImpl` and initialise that class with your options object + 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'). +```javascript +import { NotiferImpl } from '@myfrom/notifier'; + +cosnt Notifier = new NotifierImpl({ "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()` - -
-
- `showDialog()` - -
-
- `askDialog()` - -
-
- Animations - -
- -They are also exported as an array from notifier module (`elementsToImport`). +Notifier relies on two MWC web components: [mwc-dialog](https://www.npmjs.com/package/@material/mwc-dialog) and [mwc-snackbar](https://www.npmjs.com/package/@material/mwc-snackbar). + +You need to ensure that the browser will be able to run Web Components, that means you need to manually load any necessary polyfills in older browsers. + +Differently to version 2 and earlier, those elements will always be imported with Notifier. ### 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. +For best experience, Notifier doesn't use custom buttons but relies on vanilla button implementation. To achieve Material Design look, the button is styled inside helper styles. + +If you already have styles for a Material Button, you can skip loading the file and apply those styles to button with `material-button` class. Otherwise you should import the [styles.css](./styles.css) stylesheet, either by a `` or by importing `import '@myfrom/notifier/styles-loader'` in your JavaScript. -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. \ No newline at end of file +Differently to version 2 and earlier, those styles are not loaded automatically. \ No newline at end of file diff --git a/banner.png b/banner.png index d807e03..7408f94 100644 Binary files a/banner.png and b/banner.png differ diff --git a/demo/demo.html b/demo/demo.html index 4d88490..ba4db18 100644 --- a/demo/demo.html +++ b/demo/demo.html @@ -15,14 +15,8 @@ - - - - + +