Update content for v5 pre-alpha.

Author: hperrin

MIGRATING.md

@@ -1,27 +1,12 @@
-# Migrating from PNotify 3
-
-**PNotify 4** came along with some huge changes:
-
-* **jQuery is no longer required.** v4 doesn't require any libraries, actually.
-* It's built using [Svelte](http://svelte.technology), which means it compiles down to vanilla JS.
-* Has an ES module build.
-* Options are in camelCase instead of snake_case.
-* `text_escape`/`title_escape` replaced by `textTrusted`/`titleTrusted`, and default behavior changed.
-* `insert_brs` went away. (Now uses `white-space: pre-line;`.)
-* Default width raised to 360px.
-* NonBlock module spun off into its own project, [NonBlock.js](https://github.com/sciactive/nonblockjs).
-* There is a Compat module available to allow you to run PNotify 3 code with PNotify 4.
-
-## Running PNotify 3 Code with PNotifyCompat
-
-You can use `PNotifyCompat` instead of `PNotify` in order to run PNotify 3 code. Check out `demo/compat-*.html` for more examples.
-
-```js
-import PNotify from 'pnotify/dist/es/PNotifyCompat';
-
-new PNotify({
-  title: 'Regular Notice',
-  text: 'Check me out! I\'m a notice.',
-  text_escape: true // <-- old options work
-});
-```
+# Migrating from PNotify 4
+
+**PNotify 5** has some breaking changes:
+
+* It's built using [Svelte](http://svelte.technology) 3, which has a slightly different component API than Svelte 2.
+* Methods are no longer chainable.
+* The deprecated `remove()`, `removeAll()`, `cancelRemove()`, etc. methods have been removed.
+* The deprecated NonBlock module has been removed.
+* There is no longer a Compat module for running PNotify 3 code.
+* `notice.get()` is no longer available.
+* `PNotify.styling` renamed to `PNotify.styles`. (Only relevant for creating modules.)
+* In v5, using the factory functions is required. Using the `new` keyword will break your notice.

README.md

@@ -11,7 +11,7 @@ PNotify is a vanilla JavaScript notification and [confirmation/prompt](http://sc
 
 <!-- TOC START min:1 max:3 link:true asterisk:false update:true -->
 - [Getting Started](#getting-started)
-  - [Migrating from PNotify 3](#migrating-from-pnotify-3)
+  - [Migrating from PNotify 4](#migrating-from-pnotify-4)
 - [Installation](#installation)
   - [Svelte](#svelte)
   - [React](#react)
@@ -32,7 +32,6 @@ PNotify is a vanilla JavaScript notification and [confirmation/prompt](http://sc
 - [Module Options](#module-options)
   - [Desktop Module](#desktop-module)
   - [Buttons Module](#buttons-module)
-  - [NonBlock Module](#nonblock-module)
   - [Mobile Module](#mobile-module)
   - [Animate Module](#animate-module)
   - [Confirm Module](#confirm-module)
@@ -61,7 +60,7 @@ npm install --save material-design-icons
 # If you plan to use the Animate module:
 npm install --save animate.css
 
-# If you plan to use the NonBlock module:
+# If you plan to use NonBlock.js for non-blocking notices:
 npm install --save nonblockjs
 ```
 
@@ -76,7 +75,7 @@ Inside the pnotify module directory:
 * `dist/umd` compressed UMD modules.liz
 * `dist/iife` compressed IIFE scripts.
 
-## [Migrating from PNotify 3](MIGRATING.md)
+## [Migrating from PNotify 4](MIGRATING.md)
 
 # Installation
 
@@ -273,7 +272,7 @@ PNotify.defaults.icons = 'fontawesome5'; // Font Awesome 5
 
 # Creating Notices
 
-To make a notice, use the helper functions:
+To make a notice, use the factory functions:
 
 ```js
 // Manually set the type.
@@ -297,18 +296,6 @@ PNotify.error({
 });
 ```
 
-Or you can manually create a new notice with Svelte's component API (if you know what you're doing):
-
-```js
-new PNotify({
-  target: document.body,
-  data: {
-    text: "I'm an alert.",
-    type: 'notice'
-  }
-});
-```
-
 # Options
 
 PNotify options and default values.
@@ -438,20 +425,6 @@ PNotify.defaults.modules = {
 
 `}`
 
-> :information_source: In v4, it's no longer possible to show closer/sticker buttons when the notice is nonblocking.
-
-## NonBlock Module
-
-Requires [NonBlock.js](https://github.com/sciactive/nonblockjs) 1.0.8 or higher.
-
-**It is also deprecated and unnecessary in v4.** All it does is add the 'nonblock' class to your notice. You can do the same yourself with `addClass: 'nonblock'`.
-
-`NonBlock: {`
-* `nonblock: false`<br>
-  Use NonBlock.js to create a non-blocking notice. It lets the user click elements underneath it.
-
-`}`
-
 ## Mobile Module
 
 `Mobile: {`
@@ -600,12 +573,8 @@ The callback options all expect the value to be a callback function. If the func
   Create a notice with 'error' type.
 * `PNotify.closeAll()`<br>
   Close all notices.
-* `PNotify.removeAll()`<br>
-  Alias for closeAll(). (Deprecated)
 * `PNotify.closeStack(stack)`<br>
   Close all the notices in a stack.
-* `PNotify.removeStack(stack)`<br>
-  Alias for closeStack(stack). (Deprecated)
 * `PNotify.positionAll()`<br>
   Reposition all notices.
 * `PNotify.VERSION`<br>
@@ -617,18 +586,18 @@ The callback options all expect the value to be a callback function. If the func
 * `PNotify.notices`<br>
   An array of all active notices.
 * `PNotify.modules`<br>
-  This object holds all the PNotify modules.
-* `PNotify.styling`<br>
-  Styling objects.
+  This object holds all the PNotify module constructors.
+* `PNotify.styles`<br>
+  Styles objects.
+* `PNotify.icons`<br>
+  Icons objects.
 
 # Instance Methods and Properties
 
 * `notice.open()`<br>
   Open the notice.
 * `notice.close()`<br>
   Close the notice.
-* `notice.remove()`<br>
-  Alias for close(). (Deprecated)
 * `notice.update(options)`<br>
   Update the notice with new options.
 * `notice.addModuleClass(...classNames)`<br>
@@ -650,19 +619,15 @@ The callback options all expect the value to be a callback function. If the func
 
 ## From the [Svelte Component API](https://svelte.technology/guide#component-api)
 
-* `notice.get(option)`<br>
-  Get the value of an option.
-* `notice.set(options)`<br>
-  You probably want to use `update(options)` instead. It has some special PNotify secret sauce to make sure your notice doesn't break.
-* `notice.observe(key, callback[, options])`<br>
-  Observe an option. See the Svelte docs for more info.
-* `notice.destroy()`<br>
-  Removes the component from the DOM and any observers/event listeners. You probably want to use `close()` instead. It will animate the notice out and you can open it again. Once you destroy it, you can't open it again.
+* `notice.$set(options)`<br>
+  You probably want to use `update(options)` instead. The Svelte API may change.
+* `notice.$destroy()`<br>
+  Removes the component from the DOM and any observers/event listeners. You probably want to use `close()` with `destroy: true` instead. It will animate the notice out.
 
 ## Events
 
 * `notice.on(eventName, callback)`<br>
-  Assign a callback to an event. Callback receives an `event` argument.
+  Assign a callback to an event. Callback receives an `event` argument with a `detail` prop.
 * `notice.fire(eventName, event)`<br>
   Fire an event.
 

devnote.css

@@ -1,8 +1,3 @@
 .dev-note {
   display: block !important;
-  position: fixed;
-  z-index: -1;
-  bottom: 20px;
-  left: 20px;
-  opacity: .4;
 }

index.html

@@ -121,36 +121,36 @@
   <script type="text/javascript">
     /* eslint-env browser, jquery */
     /* globals PNotify */
-    // $(function () {
-    //   // ---
-    //   // Notice that opens when the page opens.
-    //   // ---
-    //   PNotify.notice({
-    //     title: 'PNotify',
-    //     text: "Welcome. Try hovering over me. You can click things behind me, because I'm non-blocking.",
-    //     delay: 12000,
-    //     addClass: 'nonblock',
-    //     modules: {
-    //       Callbacks: {
-    //         beforeClose: function (notice) {
-    //           // You can access the notice's options like this.
-    //           // notice.get('text');
-    //
-    //           // You can change the notice's options like this:
-    //           // notice.update({
-    //           //   title: notice.get('title') + ' - Enjoy your Stay',
-    //           //   modules: {
-    //           //     Callbacks: {}
-    //           //   }
-    //           // });
-    //
-    //           // notice.queueClose();
-    //           // return false;
-    //         }
-    //       }
-    //     }
-    //   });
-    // });
+    $(function () {
+      // ---
+      // Notice that opens when the page opens.
+      // ---
+      PNotify.notice({
+        title: 'PNotify',
+        text: "Welcome. Try hovering over me. You can click things behind me, because I'm non-blocking.",
+        delay: 12000,
+        addClass: 'nonblock',
+        modules: {
+          Callbacks: {
+            beforeClose: function (notice) {
+              // You can access the notice's options like this.
+              // notice.get('text');
+
+              // You can change the notice's options like this:
+              // notice.update({
+              //   title: notice.get('title') + ' - Enjoy your Stay',
+              //   modules: {
+              //     Callbacks: {}
+              //   }
+              // });
+
+              // notice.queueClose();
+              // return false;
+            }
+          }
+        }
+      });
+    });
   </script>
 </head>
 <body id="page" data-spy="scroll" data-target=".navbar" data-offset="0" style="position: relative;">
@@ -246,8 +246,11 @@
   </div>
 
   <section class="container page-banner">
-    <h1>PNotify</h1>
+    <h1>PNotify <small>v5 pre-alpha</small></h1>
     <p id="description">Beautiful <a href="demo/nodependencies.html" target="_blank">dependency free</a> notifications and prompts.</p>
+    <p class="dev-note" style="display: none;">
+      You probably want to go to the <a href="https://sciactive.com/pnotify/">production site</a>, cause nearly everything here is broken.
+    </p>
     <div class="row align-items-stretch">
       <div class="col-md-4 my-3">
         <div class="card" style="height: 100%;">
@@ -280,7 +283,7 @@ <h5 class="card-header"><i class="fas fa-gift"></i> Open Source</h5>
     <div class="text-md-right">
       <a class="btn btn-primary btn-lg" href="https://github.com/sciactive/pnotify/blob/master/README.md#getting-started">Get Started with PNotify</a>
     </div>
-    <div class="dev-note" style="display: none;">
+    <div class="dev-note" style="display: none; position: fixed; z-index: -1; bottom: 20px; left: 20px; opacity: .4;">
       <div class="alert alert-danger">
         <h5 style="margin-top: 0;"><i class="fas fa-exclamation-triangle"></i> Caution warning danger attention!</h5>
         <p class="mb-0">This is the development site. It demos bleeding edge features that may not work.</p>
@@ -399,6 +402,14 @@ <h5 class="card-header">PNotify Core</h5>
           });
         ">No Icon</button>
         <hr />
+        <button class="btn btn-outline-dark my-1 source" onclick="
+          PNotify.notice({
+            title: 'Non-Blocking Notice',
+            text: 'I\'m a special kind of notice called &quot;non-blocking&quot;. When you hover over me I\'ll fade to show the elements underneath. Feel free to click any of them just like I wasn\'t even here.\n\nNote: HTML links don\'t trigger in some very old browsers, due to security settings.',
+            addClass: 'nonblock'
+          });
+        ">Using NonBlock.js</button> <small>(Click through to things underneath the notice.)</small>
+        <hr />
         <button class="btn btn-outline-dark my-1 source" onclick="
           PNotify.notice({
             title: 'See Through Notice',
@@ -993,28 +1004,6 @@ <h5 class="card-header">Buttons Module <small>Sticker and a closer buttons.</sma
         ">Close Permanotice</button>
       </div>
 
-      <h5 class="card-header">NonBlock Module (Deprecated, Replaced with <a href="https://github.com/sciactive/nonblockjs" target="_blank">NonBlock.js</a>) <small>Click through to things underneath the notice.</small></h5>
-      <div class="card-body">
-        <button class="btn btn-outline-dark my-1 source" onclick="
-          PNotify.notice({
-            title: 'Non-Blocking Notice with Class',
-            text: 'You can still use the NonBlock module, but all it does is add the &quot;nonblock&quot; class for you. You can do that yourself with &quot;addClass: \'nonblock\'&quot;.',
-            addClass: 'nonblock'
-          });
-        ">Easier Now That NonBlock.js is a Thing</button>
-        <button class="btn btn-outline-dark my-1 source" onclick="
-          PNotify.notice({
-            title: 'Non-Blocking Notice',
-            text: 'I\'m a special kind of notice called &quot;non-blocking&quot;. When you hover over me I\'ll fade to show the elements underneath. Feel free to click any of them just like I wasn\'t even here.\n\nNote: HTML links don\'t trigger in some browsers, due to security settings.',
-            modules: {
-              NonBlock: {
-                nonblock: true
-              }
-            }
-          });
-        ">Non-Blocking (The Old Way)</button>
-      </div>
-
       <h5 class="card-header">Mobile Module <small>Notices on mobile phones and tablets.</small></h5>
       <div class="card-body">
         <div class="alert alert-info">Since the Mobile module provides support by default, most of the demos on this page work on mobile.</div>

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "pnotify",
-  "version": "4.0.0",
+  "version": "5.0.0-dev",
   "description": "Beautiful dependency free notifications and prompts.",
   "keywords": [
     "notice",