V3: Moving from paper to mwc elements

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:
-
-<details>
-  <summary>`showToast()`</summary>
-  <ul>
-    <li>paper-toast</li>
-    <li>paper-button</li> (if includes a button)
-  </ul>
-</details>
-<details>
-  <summary>`showDialog()`</summary>
-  <ul>
-    <li>paper-dialog</li>
-    <li>paper-dialog-scrollable</li>
-  </ul>
-</details>
-<details>
-  <summary>`askDialog()`</summary>
-  <ul>
-    <li>paper-dialog</li>
-    <li>paper-dialog-scrollable</li>
-    <li>paper-button</li> 
-  </ul>
-</details>
-<details>
-  <summary>Animations</summary>
-  <ul>
-    <li>neon-animation/web-animations.html</li>
-    <li>neon-animation/animations/fade-in-animation.html</li>
-    <li>neon-animation/animations/fade-out-animation.html</li>
-    <li>neon-animation/animations/slide-from-bottom-animation.html</li>
-    <li>neon-animation/animations/slide-down-animation.html</li>
-  </ul>
-</details>
-
-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 `<link rel="stylesheet" href="node_modules/@myfrom/notifier/styles.css">` 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.
+Differently to version 2 and earlier, those styles are not loaded automatically.

demo/demo.html

@@ -15,14 +15,8 @@
 
     <link rel="stylesheet" href="docs-styles.css">
 
-    <!-- WebAnimations polyfill for paper-dialog -->
-    <script src="https://unpkg.com/web-animations-js/web-animations-next-lite.min.js"></script>
-
-    <style>
-      #formatted-dialog .first {
-        margin-right: auto;
-      }
-    </style>
+
+    <link rel="stylesheet" href="../styles.css">
 
     <script>
 
@@ -78,16 +72,14 @@ <h1 class="page-title">Demo</h1>
     <pre class="prettyprint source lang-js"><code>
 btnFormattedDialog.addEventListener('click', () =>
   Notifier.showDialog('I\'m so well formatted', `
-    &lt;paper-dialog-scrollable&gt;
+    &lt;div&gt;
       Such a nice content here.
       &lt;hr noshadow&gt;
       And there's even our banner!
       &lt;img src="banner.png"&gt;
-    &lt;/paper-dialog-scrollable&gt;
-    &lt;div class="buttons"&gt;
-      &lt;paper-button class="first"&gt;First, lol&lt;/paper-button&gt;
-      &lt;paper-button dialog-dismiss&gt;Meh&lt;/paper-button&gt;
-      &lt;paper-button autofocus dialog-confirm&gt;I'm amazed&lt;/paper-button&gt;
+    &lt;/div&gt;
+    &lt;button slot="secondaryAction" class="material-button first"&gt;First, lol&lt;/button&gt;
+    &lt;button slot="primaryAction" class="material-button" dialogAction="close"&gt;I'm amazed&lt;/button&gt;
     &lt;/div&gt;
   `, {
     attributes: {
@@ -142,16 +134,14 @@ <h1 class="page-title">Demo</h1>
 
     btnFormattedDialog.addEventListener('click', () =>
       Notifier.showDialog('I\'m so well formatted', `
-        <paper-dialog-scrollable>
+        <div>
           Such a nice content here.
           <hr noshadow>
           And there's even our banner!
           <img src="banner.png">
-        </paper-dialog-scrollable>
-        <div class="buttons">
-          <paper-button class="first">First, lol</paper-button>
-          <paper-button dialog-dismiss>Meh</paper-button>
-          <paper-button autofocus dialog-confirm>I'm amazed</paper-button>
+        </div>
+        <button slot="secondaryAction" class="material-button first">First, lol</button>
+        <button slot="primaryAction" class="material-button" dialogAction="close">I'm amazed</button>
         </div>
       `, {
         attributes: {

demo/imports.js

@@ -1,12 +1,3 @@
-import "@babel/polyfill";
-import '@polymer/paper-dialog/paper-dialog.js';
-import '@polymer/paper-dialog-scrollable/paper-dialog-scrollable.js';
-import '@polymer/paper-button/paper-button.js';
-import '@polymer/paper-toast/paper-toast.js';
-import '@polymer/neon-animation/animations/fade-in-animation.js';
-import '@polymer/neon-animation/animations/fade-out-animation.js';
-import '@polymer/neon-animation/animations/slide-from-bottom-animation.js';
-import '@polymer/neon-animation/animations/slide-down-animation.js';
-import { default as notifierClass } from '../notifier';
+import Notifier from '../notifier';
 
-window.Notifier = notifierClass;
+window.Notifier = Notifier;

docs-template/docs-styles.css

@@ -94,7 +94,7 @@ header {
   letter-spacing: -0.5px;
 }
 
-button {
+button:not(.material-button) {
   position: relative;
   display: inline-block;
   margin: 4px;