update deps
This commit is contained in:
400
node_modules/pnotify/README.md
generated
vendored
400
node_modules/pnotify/README.md
generated
vendored
@@ -1,18 +1,17 @@
|
||||
[](https://www.npmjs.com/package/pnotify) [](https://waffle.io/sciactive/pnotify) [](https://www.jsdelivr.com/package/npm/pnotify)
|
||||
|
||||
PNotify is a vanilla JavaScript notification library. PNotify can provide [desktop notifications](http://sciactive.com/pnotify/#web-notifications) based on the [Web Notifications spec](http://www.w3.org/TR/notifications/) with fall back to an in-browser notice.
|
||||
PNotify is a vanilla JavaScript notification and [confirmation/prompt](http://sciactive.com/pnotify/#confirm-module) library. PNotify can provide [desktop notifications](http://sciactive.com/pnotify/#web-notifications) based on the [Web Notifications spec](http://www.w3.org/TR/notifications/) with fall back to an in-browser notice.
|
||||
|
||||
<h1>Demos</h1>
|
||||
|
||||
* http://sciactive.com/pnotify/ for the latest release (v3)
|
||||
* https://sciactive.github.io/pnotify/ for what's in development (v4-beta)
|
||||
* http://sciactive.com/pnotify/ for the latest release
|
||||
* https://sciactive.github.io/pnotify/ for what's in development
|
||||
|
||||
<h1>Table of Contents</h1>
|
||||
|
||||
<!-- TOC START min:1 max:3 link:true update:true -->
|
||||
- [Whoa there!](#whoa-there)
|
||||
- [Running PNotify 3 Code with the Compat Module](#running-pnotify-3-code-with-the-compat-module)
|
||||
<!-- TOC START min:1 max:3 link:true asterisk:false update:true -->
|
||||
- [Getting Started](#getting-started)
|
||||
- [Migrating from PNotify 3](#migrating-from-pnotify-3)
|
||||
- [Installation](#installation)
|
||||
- [Svelte](#svelte)
|
||||
- [React](#react)
|
||||
@@ -30,6 +29,7 @@ PNotify is a vanilla JavaScript notification library. PNotify can provide [deskt
|
||||
- [Creating Notices](#creating-notices)
|
||||
- [Options](#options)
|
||||
- [Changing Defaults](#changing-defaults)
|
||||
- [Module Options](#module-options)
|
||||
- [Desktop Module](#desktop-module)
|
||||
- [Buttons Module](#buttons-module)
|
||||
- [NonBlock Module](#nonblock-module)
|
||||
@@ -46,41 +46,8 @@ PNotify is a vanilla JavaScript notification library. PNotify can provide [deskt
|
||||
- [Example Stack](#example-stack)
|
||||
- [Features](#features)
|
||||
- [Licensing and Additional Info](#licensing-and-additional-info)
|
||||
|
||||
<!-- TOC END -->
|
||||
|
||||
# Whoa there!
|
||||
|
||||
Unless you're a beta tester, **none of this README applies to you!** You want to check out the **[README on the master branch](https://github.com/sciactive/pnotify/blob/master/README.md)**.
|
||||
|
||||
This README is for **PNotify 4**. v4 is in beta stage, but it's got 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.
|
||||
|
||||
It should be safe to use in production code, but please report any issues you run into.
|
||||
|
||||
## Running PNotify 3 Code with the Compat Module
|
||||
|
||||
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
|
||||
});
|
||||
```
|
||||
|
||||
# Getting Started
|
||||
|
||||
You can get PNotify using NPM. (You can also use [jsDelivr](https://www.jsdelivr.com/package/npm/pnotify) or [UNPKG](https://unpkg.com/pnotify/).)
|
||||
@@ -109,6 +76,8 @@ Inside the pnotify module directory:
|
||||
* `dist/umd` compressed UMD modules.liz
|
||||
* `dist/iife` compressed IIFE scripts.
|
||||
|
||||
## [Migrating from PNotify 3](MIGRATING.md)
|
||||
|
||||
# Installation
|
||||
|
||||
In addition to the JS, be sure to [include a PNotify style](#styles).
|
||||
@@ -328,7 +297,7 @@ PNotify.error({
|
||||
});
|
||||
```
|
||||
|
||||
Or you can manually create a new notice (if you know what you're doing):
|
||||
Or you can manually create a new notice with Svelte's component API (if you know what you're doing):
|
||||
|
||||
```js
|
||||
new PNotify({
|
||||
@@ -344,29 +313,55 @@ new PNotify({
|
||||
|
||||
PNotify options and default values.
|
||||
|
||||
* `title: false` - The notice's title.
|
||||
* `titleTrusted: false` - Whether to trust the title or escape its contents. (Not allow HTML.)
|
||||
* `text: false` - The notice's text.
|
||||
* `textTrusted: false` - Whether to trust the text or escape its contents. (Not allow HTML.)
|
||||
* `styling: 'brighttheme'` - What styling classes to use. (Can be 'brighttheme', 'bootstrap3', 'bootstrap4', or a styling object. See the source in PNotifyStyleMaterial.html for the properties in a style object.)
|
||||
* `icons: 'brighttheme'` - What icons classes to use (Can be 'brighttheme', 'bootstrap3', 'fontawesome4', 'fontawesome5', or an icon object. See the source in PNotifyStyleMaterial.html for the properties in an icon object.)
|
||||
* `addClass: ''` - Additional classes to be added to the notice. (For custom styling.)
|
||||
* `cornerClass: ''` - Class to be added to the notice for corner styling.
|
||||
* `autoDisplay: true` - Display the notice when it is created. Turn this off to add notifications to the history without displaying them.
|
||||
* `width: '360px'` - Width of the notice.
|
||||
* `minHeight: '16px'` - Minimum height of the notice. It will expand to fit content.
|
||||
* `type: 'notice'` - Type of the notice. 'notice', 'info', 'success', or 'error'.
|
||||
* `icon: true` - Set icon to true to use the default icon for the selected style/type, false for no icon, or a string for your own icon class.
|
||||
* `animation: 'fade'` - The animation to use when displaying and hiding the notice. 'none' and 'fade' are supported through CSS. Others are supported through the Animate module and Animate.css.
|
||||
* `animateSpeed: 'normal'` - Speed at which the notice animates in and out. 'slow', 'normal', or 'fast'. Respectively, 400ms, 250ms, 100ms.
|
||||
* `shadow: true` - Display a drop shadow.
|
||||
* `hide: true` - After a delay, close the notice.
|
||||
* `delay: 8000` - Delay in milliseconds before the notice is closed.
|
||||
* `mouseReset: true` - Reset the hide timer if the mouse moves over the notice.
|
||||
* `remove: true` - Remove the notice's elements from the DOM after it is closed.
|
||||
* `destroy: true` - Whether to remove the notice from the global array when it is closed.
|
||||
* `stack: PNotify.defaultStack` - The stack on which the notices will be placed. Also controls the direction the notices stack.
|
||||
* `modules: {}` - This is where options for modules should be defined.
|
||||
`PNotify.defaults = {`
|
||||
* `title: false`<br>
|
||||
The notice's title.
|
||||
* `titleTrusted: false`<br>
|
||||
Whether to trust the title or escape its contents. (Not allow HTML.)
|
||||
* `text: false`<br>
|
||||
The notice's text.
|
||||
* `textTrusted: false`<br>
|
||||
Whether to trust the text or escape its contents. (Not allow HTML.)
|
||||
* `styling: 'brighttheme'`<br>
|
||||
What styling classes to use. (Can be 'brighttheme', 'bootstrap3', 'bootstrap4', or a styling object. See the source in PNotifyStyleMaterial.html for the properties in a style object.)
|
||||
* `icons: 'brighttheme'`<br>
|
||||
What icons classes to use (Can be 'brighttheme', 'bootstrap3', 'fontawesome4', 'fontawesome5', or an icon object. See the source in PNotifyStyleMaterial.html for the properties in an icon object.)
|
||||
* `addClass: ''`<br>
|
||||
Additional classes to be added to the notice. (For custom styling.)
|
||||
* `cornerClass: ''`<br>
|
||||
Class to be added to the notice for corner styling.
|
||||
* `autoDisplay: true`<br>
|
||||
Display the notice when it is created. Turn this off to add notifications to the history without displaying them.
|
||||
* `width: '360px'`<br>
|
||||
Width of the notice.
|
||||
* `minHeight: '16px'`<br>
|
||||
Minimum height of the notice. It will expand to fit content.
|
||||
* `type: 'notice'`<br>
|
||||
Type of the notice. 'notice', 'info', 'success', or 'error'.
|
||||
* `icon: true`<br>
|
||||
Set icon to true to use the default icon for the selected style/type, false for no icon, or a string for your own icon class.
|
||||
* `animation: 'fade'`<br>
|
||||
The animation to use when displaying and hiding the notice. 'none' and 'fade' are supported through CSS. Others are supported through the Animate module and Animate.css.
|
||||
* `animateSpeed: 'normal'`<br>
|
||||
Speed at which the notice animates in and out. 'slow', 'normal', or 'fast'. Respectively, 400ms, 250ms, 100ms.
|
||||
* `shadow: true`<br>
|
||||
Display a drop shadow.
|
||||
* `hide: true`<br>
|
||||
After a delay, close the notice.
|
||||
* `delay: 8000`<br>
|
||||
Delay in milliseconds before the notice is closed.
|
||||
* `mouseReset: true`<br>
|
||||
Reset the hide timer if the mouse moves over the notice.
|
||||
* `remove: true`<br>
|
||||
Remove the notice's elements from the DOM after it is closed.
|
||||
* `destroy: true`<br>
|
||||
Whether to remove the notice from the global array when it is closed.
|
||||
* `stack: PNotify.defaultStack`<br>
|
||||
The stack on which the notices will be placed. Also controls the direction the notices stack.
|
||||
* `modules: {}`<br>
|
||||
This is where options for modules should be defined.
|
||||
|
||||
`}`
|
||||
|
||||
```js
|
||||
PNotify.defaultStack = {
|
||||
@@ -381,6 +376,8 @@ PNotify.defaultStack = {
|
||||
}
|
||||
```
|
||||
|
||||
[Learn more about stacks.](#Stacks)
|
||||
|
||||
## Changing Defaults
|
||||
|
||||
```js
|
||||
@@ -390,10 +387,10 @@ PNotify.defaults.width = '400px';
|
||||
Changing a default for modules can be done in a couple ways.
|
||||
|
||||
```js
|
||||
// This will change the default for every notice and is the recommended way.
|
||||
// This will change the default for every notice, and is the recommended way.
|
||||
PNotify.modules.History.defaults.maxInStack = 10;
|
||||
|
||||
// This will change the default only for notices that don't have a module option.
|
||||
// This will change the default only for notices that don't have a `modules` option.
|
||||
PNotify.defaults.modules = {
|
||||
History: {
|
||||
maxInStack: 10
|
||||
@@ -401,28 +398,43 @@ PNotify.defaults.modules = {
|
||||
};
|
||||
```
|
||||
|
||||
# Module Options
|
||||
|
||||
## Desktop Module
|
||||
|
||||
`Desktop: {`
|
||||
* `desktop: false` - Display the notification as a desktop notification.
|
||||
* `fallback: true` - If desktop notifications are not supported or allowed, fall back to a regular notice.
|
||||
* `icon: null` - The URL of the icon to display. If false, no icon will show. If null, a default icon will show.
|
||||
* `tag: null` - Using a tag lets you update an existing notice, or keep from duplicating notices between tabs. If you leave tag null, one will be generated, facilitating the `update` function.
|
||||
* `title: null` - Optionally display a different title for the desktop.
|
||||
* `text: null` - Optionally display different text for the desktop.
|
||||
* `options: {}` - Any additional options to be passed to the Notification constructor.
|
||||
* `desktop: false`<br>
|
||||
Display the notification as a desktop notification.
|
||||
* `fallback: true`<br>
|
||||
If desktop notifications are not supported or allowed, fall back to a regular notice.
|
||||
* `icon: null`<br>
|
||||
The URL of the icon to display. If false, no icon will show. If null, a default icon will show.
|
||||
* `tag: null`<br>
|
||||
Using a tag lets you update an existing notice, or keep from duplicating notices between tabs. If you leave tag null, one will be generated, facilitating the `update` function.
|
||||
* `title: null`<br>
|
||||
Optionally display a different title for the desktop.
|
||||
* `text: null`<br>
|
||||
Optionally display different text for the desktop.
|
||||
* `options: {}`<br>
|
||||
Any additional options to be passed to the Notification constructor.
|
||||
|
||||
`}`
|
||||
|
||||
## Buttons Module
|
||||
|
||||
`Buttons: {`
|
||||
* `closer: true` - Provide a button for the user to manually close the notice.
|
||||
* `closerHover: true` - Only show the closer button on hover.
|
||||
* `sticker: true` - Provide a button for the user to manually stick the notice.
|
||||
* `stickerHover: true` - Only show the sticker button on hover.
|
||||
* `labels: {close: 'Close', stick: 'Stick', unstick: 'Unstick'}` - Lets you change the displayed text, facilitating internationalization.
|
||||
* `classes: {closer: null, pinUp: null, pinDown: null}` - The classes to use for button icons. Leave them null to use the classes from the styling you're using.
|
||||
* `closer: true`<br>
|
||||
Provide a button for the user to manually close the notice.
|
||||
* `closerHover: true`<br>
|
||||
Only show the closer button on hover.
|
||||
* `sticker: true`<br>
|
||||
Provide a button for the user to manually stick the notice.
|
||||
* `stickerHover: true`<br>
|
||||
Only show the sticker button on hover.
|
||||
* `labels: {close: 'Close', stick: 'Stick', unstick: 'Unstick'}`<br>
|
||||
Lets you change the displayed text, facilitating internationalization.
|
||||
* `classes: {closer: null, pinUp: null, pinDown: null}`<br>
|
||||
The classes to use for button icons. Leave them null to use the classes from the styling you're using.
|
||||
|
||||
`}`
|
||||
|
||||
@@ -435,15 +447,18 @@ 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` - Use NonBlock.js to create a non-blocking notice. It lets the user click elements underneath it.
|
||||
* `nonblock: false`<br>
|
||||
Use NonBlock.js to create a non-blocking notice. It lets the user click elements underneath it.
|
||||
|
||||
`}`
|
||||
|
||||
## Mobile Module
|
||||
|
||||
`Mobile: {`
|
||||
* `swipeDismiss: true` - Let the user swipe the notice away.
|
||||
* `styling: true` - Styles the notice to look good on mobile.
|
||||
* `swipeDismiss: true`<br>
|
||||
Let the user swipe the notice away.
|
||||
* `styling: true`<br>
|
||||
Styles the notice to look good on mobile.
|
||||
|
||||
`}`
|
||||
|
||||
@@ -452,9 +467,12 @@ Requires [NonBlock.js](https://github.com/sciactive/nonblockjs) 1.0.8 or higher.
|
||||
Requires [Animate.css](https://daneden.github.io/animate.css/).
|
||||
|
||||
`Animate: {`
|
||||
* `animate: false` - Use animate.css to animate the notice.
|
||||
* `inClass: ''` - The class to use to animate the notice in.
|
||||
* `outClass: ''` - The class to use to animate the notice out.
|
||||
* `animate: false`<br>
|
||||
Use animate.css to animate the notice.
|
||||
* `inClass: ''`<br>
|
||||
The class to use to animate the notice in.
|
||||
* `outClass: ''`<br>
|
||||
The class to use to animate the notice out.
|
||||
|
||||
`}`
|
||||
|
||||
@@ -463,12 +481,20 @@ The Animate module also creates a method, `attention`, on notices which accepts
|
||||
## Confirm Module
|
||||
|
||||
`Confirm: {`
|
||||
* `confirm: false` - Make a confirmation box.
|
||||
* `prompt: false` - Make a prompt.
|
||||
* `promptClass: ''` - Classes to add to the input element of the prompt.
|
||||
* `promptValue: ''` - The value of the prompt. (Note that this is two-way bound to the input.)
|
||||
* `promptMultiLine: false` - Whether the prompt should accept multiple lines of text.
|
||||
* `align: 'right'` - Where to align the buttons. (right, center, left, justify)
|
||||
* `confirm: false`<br>
|
||||
Make a confirmation box.
|
||||
* `focus: null`<br>
|
||||
For confirmation boxes, true means the first button or the button with promptTrigger will be focused, and null means focus will change only for modal notices. For prompts, true or null means focus the prompt. When false, focus will not change.
|
||||
* `prompt: false`<br>
|
||||
Make a prompt.
|
||||
* `promptClass: ''`<br>
|
||||
Classes to add to the input element of the prompt.
|
||||
* `promptValue: ''`<br>
|
||||
The value of the prompt. (Note that this is two-way bound to the input.)
|
||||
* `promptMultiLine: false`<br>
|
||||
Whether the prompt should accept multiple lines of text.
|
||||
* `align: 'right'`<br>
|
||||
Where to align the buttons. (right, center, left, justify)
|
||||
|
||||
```js
|
||||
buttons: [
|
||||
@@ -524,15 +550,19 @@ notice.on('pnotify.cancel', () => {
|
||||
## History Module
|
||||
|
||||
`History: {`
|
||||
* `history: true` - Place the notice in the history.
|
||||
* `maxInStack: Infinity` - Maximum number of notices to have open in its stack.
|
||||
* `history: true`<br>
|
||||
Place the notice in the history.
|
||||
* `maxInStack: Infinity`<br>
|
||||
Maximum number of notices to have open in its stack.
|
||||
|
||||
`}`
|
||||
|
||||
The History module also has two methods:
|
||||
|
||||
* `PNotify.modules.History.showLast(stack)` - Reopen the last closed notice from a stack that was placed in the history. If no stack is provided, it will use the default stack.
|
||||
* `PNotify.modules.History.showAll(stack)` - Reopen all notices from a stack that were placed in the history. If no stack is provided, it will also use the default stack. If stack is `true`, it will reopen all notices from every stack.
|
||||
* `PNotify.modules.History.showLast(stack)`<br>
|
||||
Reopen the last closed notice from a stack that was placed in the history. If no stack is provided, it will use the default stack.
|
||||
* `PNotify.modules.History.showAll(stack)`<br>
|
||||
Reopen all notices from a stack that were placed in the history. If no stack is provided, it will also use the default stack. If stack is `true`, it will reopen all notices from every stack.
|
||||
|
||||
> :information_source: In v4, the History module can no longer make a dropdown for you. But hey, it's smaller now.
|
||||
|
||||
@@ -541,60 +571,100 @@ The History module also has two methods:
|
||||
The callback options all expect the value to be a callback function. If the function returns false on the `beforeOpen` or `beforeClose` callback, that event will be canceled. `beforeInit` and `afterInit` will only work for notices created with the helper functions.
|
||||
|
||||
`Callbacks: {`
|
||||
* `beforeInit` - Called before the notice has been initialized. Given one argument, the options object.
|
||||
* `afterInit` - Called after the notice has been initialized. Given one argument, the notice object.
|
||||
* `beforeOpen` - Called before the notice opens. Given one argument, the notice object.
|
||||
* `afterOpen` - Called after the notice opens. Given one argument, the notice object.
|
||||
* `beforeClose` - Called before the notice closes. Given one argument, the notice object.
|
||||
* `afterClose` - Called after the notice closes. Given one argument, the notice object.
|
||||
* `beforeInit`<br>
|
||||
Called before the notice has been initialized. Given one argument, the options object.
|
||||
* `afterInit`<br>
|
||||
Called after the notice has been initialized. Given one argument, the notice object.
|
||||
* `beforeOpen`<br>
|
||||
Called before the notice opens. Given one argument, the notice object.
|
||||
* `afterOpen`<br>
|
||||
Called after the notice opens. Given one argument, the notice object.
|
||||
* `beforeClose`<br>
|
||||
Called before the notice closes. Given one argument, the notice object.
|
||||
* `afterClose`<br>
|
||||
Called after the notice closes. Given one argument, the notice object.
|
||||
|
||||
`}`
|
||||
|
||||
# Static Methods and Properties
|
||||
|
||||
* `PNotify.alert(options)` - Create a notice.
|
||||
* `PNotify.notice(options)` - Create a notice with 'notice' type.
|
||||
* `PNotify.info(options)` - Create a notice with 'info' type.
|
||||
* `PNotify.success(options)` - Create a notice with 'success' type.
|
||||
* `PNotify.error(options)` - Create a notice with 'error' type.
|
||||
* `PNotify.closeAll()` - Close all notices.
|
||||
* `PNotify.removeAll()` - Alias for closeAll(). (Deprecated)
|
||||
* `PNotify.closeStack(stack)` - Close all the notices in a stack.
|
||||
* `PNotify.removeStack(stack)` - Alias for closeStack(stack). (Deprecated)
|
||||
* `PNotify.positionAll()` - Reposition all notices.
|
||||
* `PNotify.VERSION` - PNotify version number.
|
||||
* `PNotify.defaults` - Defaults for options.
|
||||
* `PNotify.defaultStack` - The default stack object.
|
||||
* `PNotify.notices` - An array of all active notices.
|
||||
* `PNotify.modules` - This object holds all the PNotify modules.
|
||||
* `PNotify.styling` - Styling objects.
|
||||
* `PNotify.alert(options)`<br>
|
||||
Create a notice.
|
||||
* `PNotify.notice(options)`<br>
|
||||
Create a notice with 'notice' type.
|
||||
* `PNotify.info(options)`<br>
|
||||
Create a notice with 'info' type.
|
||||
* `PNotify.success(options)`<br>
|
||||
Create a notice with 'success' type.
|
||||
* `PNotify.error(options)`<br>
|
||||
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>
|
||||
PNotify version number.
|
||||
* `PNotify.defaults`<br>
|
||||
Defaults for options.
|
||||
* `PNotify.defaultStack`<br>
|
||||
The default stack object.
|
||||
* `PNotify.notices`<br>
|
||||
An array of all active notices.
|
||||
* `PNotify.modules`<br>
|
||||
This object holds all the PNotify modules.
|
||||
* `PNotify.styling`<br>
|
||||
Styling objects.
|
||||
|
||||
# Instance Methods and Properties
|
||||
|
||||
* `notice.open()` - Open the notice.
|
||||
* `notice.close()` - Close the notice.
|
||||
* `notice.remove()` - Alias for close(). (Deprecated)
|
||||
* `notice.update(options)` - Update the notice with new options.
|
||||
* `notice.addModuleClass(...classNames)` - This is for modules to add classes to the notice.
|
||||
* `notice.removeModuleClass(...classNames)` - This is for modules to remove classes from the notice.
|
||||
* `notice.hasModuleClass(...classNames)` - This is for modules to test classes on the notice.
|
||||
* `notice.refs.elem` - The notice's DOM element.
|
||||
* `notice.refs.container` - The notice container DOM element.
|
||||
* `notice.refs.titleContainer` - The title container DOM element.
|
||||
* `notice.refs.textContainer` - The text container DOM element.
|
||||
* `notice.refs.iconContainer` - The icon container DOM element.
|
||||
* `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>
|
||||
This is for modules to add classes to the notice.
|
||||
* `notice.removeModuleClass(...classNames)`<br>
|
||||
This is for modules to remove classes from the notice.
|
||||
* `notice.hasModuleClass(...classNames)`<br>
|
||||
This is for modules to test classes on the notice.
|
||||
* `notice.refs.elem`<br>
|
||||
The notice's DOM element.
|
||||
* `notice.refs.container`<br>
|
||||
The notice container DOM element.
|
||||
* `notice.refs.titleContainer`<br>
|
||||
The title container DOM element.
|
||||
* `notice.refs.textContainer`<br>
|
||||
The text container DOM element.
|
||||
* `notice.refs.iconContainer`<br>
|
||||
The icon container DOM element.
|
||||
|
||||
## From the [Svelte Component API](https://svelte.technology/guide#component-api)
|
||||
|
||||
* `notice.get(option)` - Get the value of an option.
|
||||
* `notice.set(options)` - 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])` - Observe an option. See the Svelte docs for more info.
|
||||
* `notice.destroy()` - 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.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.
|
||||
|
||||
## Events
|
||||
|
||||
* `notice.on(eventName, callback)` - Assign a callback to an event. Callback receives an `event` argument.
|
||||
* `notice.fire(eventName, event)` - Fire an event.
|
||||
* `notice.on(eventName, callback)`<br>
|
||||
Assign a callback to an event. Callback receives an `event` argument.
|
||||
* `notice.fire(eventName, event)`<br>
|
||||
Fire an event.
|
||||
|
||||
# Stacks
|
||||
|
||||
@@ -602,26 +672,36 @@ A stack is an object used to determine where to position notices.
|
||||
|
||||
Stack properties:
|
||||
|
||||
* `dir1` - The primary stacking direction. Can be `'up'`, `'down'`, `'right'`, or `'left'`.
|
||||
* `firstpos1` - Number of pixels from the edge of the context, relative to `dir1`, the first notice will appear. If undefined, the current position of the notice, whatever that is, will be used.
|
||||
* `spacing1` - Number of pixels between notices along `dir1`. If undefined, `25` will be used.
|
||||
* `dir2` - The secondary stacking direction. Should be a perpendicular direction to `dir1`. The notices will continue in this direction when they reach the edge of the viewport along `dir1`.
|
||||
* `firstpos2` - Number of pixels from the edge of the context, relative to `dir2`, the first notice will appear. If undefined, the current position of the notice, whatever that is, will be used.
|
||||
* `spacing2` - Number of pixels between notices along `dir2`. If undefined, `25` will be used.
|
||||
* `push` - Where, in the stack, to push new notices. Can be `'top'` or `'bottom'`.
|
||||
* `modal` - Whether to create a modal overlay when this stack's notices are open.
|
||||
* `overlayClose` - Whether clicking on the modal overlay should close the stack's notices.
|
||||
* `context` - The DOM element this stack's notices should appear in. If undefined, `document.body` will be used.
|
||||
* `dir1`<br>
|
||||
The primary stacking direction. Can be `'up'`, `'down'`, `'right'`, or `'left'`.
|
||||
* `firstpos1`<br>
|
||||
Number of pixels from the edge of the context, relative to `dir1`, the first notice will appear. If undefined, the current position of the notice, whatever that is, will be used.
|
||||
* `spacing1`<br>
|
||||
Number of pixels between notices along `dir1`. If undefined, `25` will be used.
|
||||
* `dir2`<br>
|
||||
The secondary stacking direction. Should be a perpendicular direction to `dir1`. The notices will continue in this direction when they reach the edge of the viewport along `dir1`.
|
||||
* `firstpos2`<br>
|
||||
Number of pixels from the edge of the context, relative to `dir2`, the first notice will appear. If undefined, the current position of the notice, whatever that is, will be used.
|
||||
* `spacing2`<br>
|
||||
Number of pixels between notices along `dir2`. If undefined, `25` will be used.
|
||||
* `push`<br>
|
||||
Where, in the stack, to push new notices. Can be `'top'` or `'bottom'`.
|
||||
* `modal`<br>
|
||||
Whether to create a modal overlay when this stack's notices are open.
|
||||
* `overlayClose`<br>
|
||||
Whether clicking on the modal overlay should close the stack's notices.
|
||||
* `context`<br>
|
||||
The DOM element this stack's notices should appear in. If undefined, `document.body` will be used.
|
||||
|
||||
Stack behavior:
|
||||
|
||||
* If there is no `dir1` property, the notice will be centered in the context.
|
||||
* If there is a `dir1` and no `dir2`, the notices will be centered along the axis of `dir1`.
|
||||
* The `firstpos*` values are relative to an edge determined by the corresponding `dir*` value.
|
||||
* `dirX === 'up'` - `firstposX` is relative to the **bottom** edge.
|
||||
* `dirX === 'down'` - `firstposX` is relative to the **top** edge.
|
||||
* `dirX === 'left'` - `firstposX` is relative to the **right** edge.
|
||||
* `dirX === 'right'` - `firstposX` is relative to the **left** edge.
|
||||
* `dirX === 'up'` means `firstposX` is relative to the **bottom** edge.
|
||||
* `dirX === 'down'` means `firstposX` is relative to the **top** edge.
|
||||
* `dirX === 'left'` means `firstposX` is relative to the **right** edge.
|
||||
* `dirX === 'right'` means `firstposX` is relative to the **left** edge.
|
||||
* Stacks are independent of each other, so a stack doesn't know and doesn't care if it overlaps (and blocks) another stack.
|
||||
* Stack objects are used and manipulated by PNotify, and therefore, should be a variable when passed.
|
||||
|
||||
@@ -682,17 +762,25 @@ PNotify.alert({
|
||||
* Callbacks for lifespan events.
|
||||
* Notice history for reshowing old notices.
|
||||
* Universally compatible.
|
||||
* Works with any frontend library.
|
||||
* Works with any frontend library (React, Angular, Svelte, Vue, Ember, etc.).
|
||||
* Works well with bundlers (Webpack, Rollup, etc.).
|
||||
* No dependencies for most features.
|
||||
|
||||
# Licensing and Additional Info
|
||||
|
||||
PNotify is distributed under the [Apache License, Version 2.0](http://www.apache.org/licenses/LICENSE-2.0).
|
||||
Copyright 2009-2019 Hunter Perrin
|
||||
Copyright 2015 Google, Inc.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
|
||||
See http://sciactive.com/pnotify/ for more information, and demos.
|
||||
|
||||
<h2>Support on Beerpay</h2>
|
||||
|
||||
Hey dude! Help me out for a couple of :beers:!
|
||||
|
||||
[](https://beerpay.io/sciactive/pnotify) [](https://beerpay.io/sciactive/pnotify?focus=wish)
|
||||
|
||||
Reference in New Issue
Block a user