{"_id":"polipop","_rev":"1-656ae950d47f70ab4f9b2bcbcd7e1cb6","name":"polipop","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"polipop","version":"1.0.0","description":"A dependency-free JavaScript library for creating discreet pop-up notifications.","author":{"name":"Yannis Maragos"},"license":"GPL-3.0","homepage":"https://github.com/minitek/polipop#readme","main":"dist/polipop.min.js","unpkg":"dist/polipop.min.js","directories":{"doc":"docs"},"repository":{"type":"git","url":"git+https://github.com/minitek/polipop.git"},"bugs":{"url":"https://github.com/minitek/polipop/issues"},"scripts":{"dev":"webpack serve --open --config webpack.dev.js","delete:css.js":"rm -rf dist/css/*.js && rm -rf dist/css/*.js.map","license:min.js":"cat src/license.txt dist/polipop.min.js > dist/polipop.min.js.tmp && mv dist/polipop.min.js.tmp dist/polipop.min.js","license:js":"cat src/license.txt dist/polipop.js > dist/polipop.js.tmp && mv dist/polipop.js.tmp dist/polipop.js","license":"npm run license:js && npm run license:min.js","min:js":"MIN_POLIPOP=1 webpack --config webpack.prod.js","min:css":"MIN_POLIPOP=1 webpack --config webpack.css.js && npm run delete:css.js","min:all":"npm run min:js && npm run min:css","format:dist":"./bash/format-dist.sh","build:js":"MIN_POLIPOP=0 webpack --config webpack.prod.js","build:css":"MIN_POLIPOP=0 webpack --config webpack.css.js && npm run delete:css.js","copy:docs":"cp -r dist/* docs/dist/","build:all":"npm run build:js && npm run build:css","build":"npm run clean && npm run build:all && npm run min:all && npm run format:dist && npm run license && npm run copy:docs","clean:dist":"find dist/ -type f -delete","clean:docs":"find docs/dist/ -type f -delete","clean":"npm run clean:dist && npm run clean:docs","lint":"eslint {src}/**/*.js","prepare":"husky install","test":"jest"},"keywords":["DOM","browser","notification","growl","popup","queue","message","log","notice","warning","error"],"devDependencies":{"@babel/core":"^7.13.16","@babel/preset-env":"^7.13.15","autoprefixer":"^10.2.5","babel-jest":"^26.6.3","babel-loader":"^8.2.2","compression-webpack-plugin":"^7.1.2","css-loader":"^5.2.4","css-minimizer-webpack-plugin":"^2.0.0","eslint":"^7.25.0","eslint-config-prettier":"^8.3.0","eslint-config-standard":"^16.0.2","eslint-plugin-import":"^2.22.1","eslint-plugin-jest":"^24.3.6","eslint-plugin-node":"^11.1.0","eslint-plugin-prettier":"^3.4.0","eslint-plugin-promise":"^4.3.1","husky":"^6.0.0","jest":"^26.6.3","lint-staged":"^10.5.4","mini-css-extract-plugin":"^1.5.1","postcss":"^8.2.13","postcss-discard-comments":"^5.0.0","postcss-loader":"^5.2.0","prettier":"^2.2.1","sass":"^1.32.11","sass-loader":"^11.0.1","style-loader":"^2.0.0","webpack":"^5.36.0","webpack-cli":"^4.6.0","webpack-dev-server":"^3.11.2"},"lint-staged":{"./src/**/*.js":["prettier --write","eslint --fix-dry-run"],"./src/sass/*.scss":"prettier --write","./dist/!(*min).css":"prettier --write"},"jest":{"collectCoverage":true,"coverageReporters":["html"]},"gitHead":"cadcb7ce7277b5843d901d4b349d3397436c48e6","_id":"polipop@1.0.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-qo82JXAyN+/GlMMTq2ZVErljGfu3B/sU5ExeuSLNkPe1CbE76bD3u1t/mNnZLSXnC04+ahGNro0FOF2Bcdd3yQ==","shasum":"694ac03d257745924714c891303137c3743bd9fa","tarball":"https://registry.npmjs.org/polipop/-/polipop-1.0.0.tgz","fileCount":35,"unpackedSize":304408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgoTr2CRA9TVsSAnZWagAAH0AP+wReovUGrkol9hQdqjnD\n5bw9OrQBQJacCDa37hwOsHAUYHrQyJd9w8+TUscYSdFL18Urt7A3b2QATwxb\nB7c6Skdvq3m0sVaCRAd0hSw3nQF34oP9dmLoYH1vc+LwkfTKGHg4XbgaMGRt\nUbVB92VW5hADl6WjJzR02icI/4rLVWk5XnZSUXaw94c6ZgdaHpXHDf5hCN6J\nzlsxdSqpeL4HWA4w+2fCcTf7hFGU5sMkQJD3o17gDfYGRIMTYSVUTOgFO4xW\ngHaSrjRsayuxt9JAR6qgA3OporCO/g4seI1eieHRf6OGLWwqlthlafvrX7uj\nfXw/flpQ6Nj+0F+QcBUL+7w3ud2OjJ9NH2kML65TUuZ2WEICJrxS3DI4t/UR\n8oYWPdHA6PXWPYS2AavqPOxNJfzw6gWPpCNiMUElgiMyNXNAkp3Xz1buC9dN\nSrgMpM/JzmNkkZQHjfZ3aFmgMYV2ahTYMDYFOWh9bl9Z+WV8xH8ZMW2qKo1N\nz89vrCVdhA/FDmqOojKLQAUd07H8uqRaUJYhGKJQ5CeTxKVYzudDM5sAk0EG\n4dBqhesOKxMUswTiOr1tsM2Gkc7yllWe8nAKauCfMd9yfuVzuM6nZ5bYp3OT\ni9FjUgDlmji/QlvSn637YpleNJCR1Z9gEWMHKjW9Y+vI5NbxZVKaA6zb3Mu7\nz0er\r\n=2pJ5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC55g1NgpapVC/dbMHJ/l1rPFDEldP5mEMFGn/AjXgoUAiBvFnuptH9vbuaL12KdmjYQlk1ld+oRj6SeIRMOMtULVA=="}]},"_npmUser":{"name":"minitek","email":"ioannismaragos@gmail.com"},"maintainers":[{"name":"minitek","email":"ioannismaragos@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/polipop_1.0.0_1621179126131_0.1392324795598039"},"_hasShrinkwrap":false}},"time":{"created":"2021-05-16T15:32:06.130Z","1.0.0":"2021-05-16T15:32:06.256Z","modified":"2022-05-13T04:19:02.109Z"},"maintainers":[{"name":"minitek","email":"ioannismaragos@gmail.com"}],"description":"A dependency-free JavaScript library for creating discreet pop-up notifications.","homepage":"https://github.com/minitek/polipop#readme","keywords":["DOM","browser","notification","growl","popup","queue","message","log","notice","warning","error"],"repository":{"type":"git","url":"git+https://github.com/minitek/polipop.git"},"author":{"name":"Yannis Maragos"},"bugs":{"url":"https://github.com/minitek/polipop/issues"},"license":"GPL-3.0","readme":"# Polipop\n\n\n\n\nA dependency-free JavaScript library for creating discreet pop-up notifications.\n\n## Demo\n\nSee demo at [minitek.github.io/polipop/](https://minitek.github.io/polipop/).\n\n## Documentation\n\nSee documentation at [minitek.gr/support/documentation/javascript/polipop](https://www.minitek.gr/support/documentation/javascript/polipop).\n\n## Installation\n\nThere are several ways to install Polipop into your project:\n\n1. Download the latest release\n2. Use a CDN service\n3. Install via NPM\n\n### 1. Download the latest release\n\nLink to **dist/polipop.min.js**:\n\n```html\n\n```\n\nInclude the core stylesheet:\n\n```html\n\n```\n\nInclude a theme stylesheet (eg. default):\n\n```html\n\n```\n\n### 2. Use a CDN Service\n\n#### UNPKG\n\nLink to **dist/polipop.min.js**:\n\n```html\n\n```\n\nInclude the core stylesheet:\n\n```html\n\n```\n\nInclude a theme stylesheet (eg. default):\n\n```html\n\n```\n\n#### jsDelivr\n\nLink to **dist/polipop.min.js**:\n\n```html\n\n```\n\nInclude the core stylesheet:\n\n```html\n\n```\n\nInclude a theme stylesheet (eg. default):\n\n```html\n\n```\n\n### 3. Install via NPM\n\n```console\nnpm install polipop\n```\n\n#### Include distribution files\n\nLink to **dist/polipop.min.js**:\n\n```html\n\n```\n\nInclude the core stylesheet:\n\n```html\n\n```\n\nInclude a theme stylesheet (eg. default):\n\n```html\n\n```\n\n#### Import source files\n\nImport ES module:\n\n```js\nimport Polipop from 'polipop';\n```\n\nImport the core stylesheet:\n\n```css\n@import 'node_modules/polipop/src/sass/core';\n```\n\nImport a theme stylesheet (eg. default):\n\n```css\n@import 'node_modules/polipop/src/sass/default';\n```\n\n## Building\n\nThe following NPM scripts are available:\n\n- `build:css` - Builds CSS files from SCSS files.\n- `build:js` - Builds JavaScript files.\n- `build` - Builds all JavaScript and CSS files.\n- `lint` - Lints source JavaScript files.\n\n## Initialization\n\n### Creating a new Polipop instance\n\n```js\nvar polipop = new Polipop(selector, options);\n```\n\n#### `selector`\n\nType: `String`\n\nA selector `representing the id of the element on which to instantiate Polipop.\n\n#### `options`\n\nType: `Object`\n\nThe [Configuration options](#configuration-options).\n\nFor example:\n\n```js\nvar polipop = new Polipop('mypolipop', {\n layout: 'popups',\n insert: 'before',\n pool: 5,\n sticky: true,\n});\n```\n\n### Adding a notification to the queue\n\nNotifications are added into a queue. Queued notifications are then rendered automatically into the DOM at a specific time interval.\n\n```js\npolipop.add({\n content: 'This is the message content.',\n title: 'Message',\n type: 'success',\n});\n```\n\nSee [add](#add) method.\n\n## Configuration options\n\nThe display and behavior of Polipop can be adjusted via the configuration options. The options are passed as an object when initializing a new instance.\n\n```js\nvar polipop = new Polipop('mypolipop', {\n // Configuration options\n layout: 'popups',\n insert: 'before',\n pool: 5,\n sticky: true,\n});\n```\n\n| Option | Type | Description |\n| ---------------- | --------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `appendTo` | `String` | Default: `body` A DOM element or selector string representing the element where the Polipop wrapper element will be appended to. Can only be set on class instantiation. |\n| `block` | `String` | Default: `polipop` The BEM block name which is used for generating css classes for all elements within the wrapper element. Can only be set on class instantiation. |\n| `position` | `String` | Default: `top-right` The position of the wrapper element within the viewport. Can only be set on class instantiation. Accepted values: `top-left`, `center`, `top-right`, `bottom-right`, `bottom-left` or `inline`. |\n| `layout` | `String` | Default: `popups` The layout of the Polipop wrapper. Can only be set on class instantiation. Accepted values: `popups` or `panel`. |\n| `theme` | `String` | Default: `default` The css theme of the Polipop wrapper. Accepted values: `default`, `compact`, `minimal` or any custom theme. Can only be set on class instantiation. |\n| `icons` | `Boolean` | Default: `true` A boolean designating whether each notification element displays an icon, according to the notification type. Can only be set on class instantiation. |\n| `insert` | `String` | Default: `after` Designates whether a notification element should be appended or prepended to the notifications container. Accepted values: `after` or `before`. |\n| `spacing` | `Number` | Default: `10` The vertical spacing between the notification elements. Can only be set on class instantiation. |\n| `pool` | `Number` | Default: `0` Limits the number of concurrent notification elements that can be rendered within the notifications container at any given time. A value of `0` means that there is no limit. |\n| `sticky` | `Boolean` | Default: `false` A boolean designating whether the notification elements should be removed automatically when they expire or whether they should stay in the DOM until they are removed manually. |\n| `life` | `Number` | Default: `3000` Expiration time for non-sticky notification elements in milliseconds. |\n| `progressbar` | `Boolean` | Default: `false` A boolean designating whether the life time progress bar will be displayed for each notification element. |\n| `pauseOnHover` | `Boolean` | Default: `true` A boolean designating whether the notifications expiration control should pause when hovering over the wrapper element. Can only be set on class instantiation. |\n| `headerText` | `String` | Default: `Messages` The text that is displayed inside the `panel` layout header. Can only be set on class instantiation. |\n| `closer` | `Boolean` | Default: `true` A boolean designating whether the closer button element will be displayed when there are rendered notification elements. Can only be set on class instantiation. |\n| `closeText` | `String` | Default: `Close` The text that is displayed inside the closer button element when the notifications queue is empty. |\n| `loadMoreText` | `String` | Default: `Load more` The text that is displayed inside the closer button element when the notifications queue contains queued notification objects. |\n| `hideEmpty` | `Boolean` | Default: `false` A boolean designating whether the 'panel' layout wrapper element will be hidden when there are no rendered notification elements. |\n| `interval` | `Number` | Default: `250` The time, in milliseconds, the timer should delay in between executions of the `_loop` function. Can only be set on class instantiation. |\n| `effect` | `String` | Default: `fade` The animation effect when adding or removing notification elements. Accepted values: `fade` or `slide`. |\n| `easing` | `String` | Default: `linear` The rate of the animation's change over time. Accepted values: `linear`, `ease`, `ease-in`, `ease-out`, `ease-in-out` or a custom `cubic-bezier` value. |\n| `effectDuration` | `Number` | Default: `250` The number of milliseconds each iteration of the animation takes to complete. |\n| `ready` | `function()` | A callback function invoked immediately after the wrapper element has been rendered into the DOM. |\n| `add` | `function(object)` | A callback function invoked immediately after a notification object has been added into the queue. The notification object is passed to the function as argument. |\n| `beforeOpen` | `function(object, Element)` | A callback function invoked immediately before a notification element has been rendered into the DOM. The notification object and the notification element are passed to the function as arguments. |\n| `open` | `function(object, Element)` | A callback function invoked immediately after a notification element has been rendered into the DOM but before the element's opening animation has started. The notification object and the notification element are passed to the function as arguments. |\n| `afterOpen` | `function(object, Element)` | A callback function invoked immediately after a notification element has been rendered into the DOM and the element's animation has finished. The notification object and the notification element are passed to the function as arguments. |\n| `beforeClose` | `function(object, Element)` | A callback function invoked immediately after the `Polipop.beforeClose` event has been triggered on an element but before the element's closing animation has started. The notification object and the notification element are passed to the function as arguments. |\n| `close` | `function(object, Element)` | A callback function invoked immediately after the element's closing animation has finished, immediately before the element has been removed from the DOM. The notification object and the notification element are passed to the function as arguments. |\n| `click` | `function(MouseEvent, object, Element)` | A callback function invoked immediately after a notification element has been clicked. The MouseEvent, the notification object and the notification element are passed to the function as arguments. |\n\n## Properties\n\nA Polipop instance has the following public properties:\n\n### `options`\n\nType: `Object`\n\nDefault: Default configuration options\n\nThe default configuration options merged with instance options.\n\n```js\nvar options = polipop.options;\n```\n\n### `queue`\n\nType: `Array`\n\nDefault: `[]`\n\nAn array containing the queued notification objects.\n\n```js\nvar queue = polipop.queue;\n```\n\n### `elements`\n\nType: `HTMLCollection | null`\n\nDefault: `null`\n\nAn object containing a collection of rendered notification elements.\n\n```js\nvar elements = polipop.elements;\n```\n\n### `wrapperHeight`\n\nType: `Number`\n\nDefault: `0`\n\nThe height of the wrapper element.\n\n```js\nvar wrapperHeight = polipop.wrapperHeight;\n```\n\n## Methods\n\nA Polipop instance has the following public methods:\n\n### `getOption(key)`\n\nRetrieves the value of a property within the configuration options object. Accepts the argument:\n\n`{String} key` - The property or method name.\n\nFor example:\n\n```js\nvar theme = polipop.getOption('theme');\n```\n\n### `setOption(key, value)`\n\nSets the value of a property within the configuration options object. Accepts the arguments:\n\n`{String} key` - The property or method name.\n`{String|Number|Boolean|Function} value` - The property or method value.\n\n```js\npolipop.setOption('pool', 5);\n```\n\n### `add(notification)`\n\nAdds a notification object to the queue. Accepts the argument:\n\n`{Object} notification` - A notification object.\n\nThe notification object has the following properties:\n\n| Option | Type | Description |\n| --------- | -------- | ------------------------------------------------------------------------------------------------ |\n| `type` | `String` | The notification type. Accepted values: `default`, `info`, `success`, `warning` or `error`. |\n| `title` | `String` | The notification title. |\n| `content` | `String` | The notification content. |\n\nFor example:\n\n```js\npolipop.add({\n type: 'success',\n title: 'Message',\n content: 'This is the message content.',\n});\n```\n\n### `enable()`\n\nEnables adding notification objects to the queue.\n\n```js\npolipop.enable();\n```\n\n### `disable()`\n\nDisables adding notification objects to the queue.\n\n```js\npolipop.disable();\n```\n\n### `pause()`\n\nPauses the rendering and the expiration of notification elements.\n\n```js\npolipop.pause();\n```\n\n### `unpause()`\n\nUnpauses the rendering and the expiration of notification elements.\n\n```js\npolipop.unpause();\n```\n\n### `closeAll()`\n\nRemoves all rendered notification elements from the DOM.\n\n```js\npolipop.closeAll();\n```\n\n### `emptyQueue()`\n\nDeletes all notification objects from the queue.\n\n```js\npolipop.emptyQueue();\n```\n\n### `destroy()`\n\nRemoves the wrapper element from the DOM and stops the main loop that starts in the `_init` function.\n\n```js\npolipop.destroy();\n```\n\n## Events\n\nA Polipop instance dispatches the following events:\n\n### `ready`\n\nA callback function invoked immediately after the wrapper element has been rendered into the DOM.\n\n```js\nvar polipop = new Polipop('polipop', {\n ready: function () {\n ...\n },\n});\n```\n\n### `add`\n\nA callback function invoked immediately after a notification object has been added into the queue. Accepts the argument:\n\n`{Object} notification` - A notification object.\n\n```js\nvar polipop = new Polipop('polipop', {\n add: function (notification) {\n ...\n }\n});\n```\n\n```js\npolipop.add({\n type: 'success',\n title: 'Message',\n content: 'This is the message content.',\n add: function (notification) {\n ...\n }\n});\n```\n\n### `beforeOpen`\n\nA callback function invoked immediately before a notification element has been rendered into the DOM. Accepts the arguments:\n\n`{Object} notification` - A notification object.\n`{Element} element` - A notification element.\n\n```js\nvar polipop = new Polipop('polipop', {\n beforeOpen: function (notification, element) {\n ...\n }\n});\n```\n\n```js\npolipop.add({\n type: 'success',\n title: 'Message',\n content: 'This is the message content.',\n beforeOpen: function (notification, element) {\n ...\n }\n});\n```\n\n### `open`\n\nA callback function invoked immediately after a notification element has been rendered into the DOM but before the element's opening animation has started. Accepts the arguments:\n\n`{Object} notification` - A notification object.\n`{Element} element` - A notification element.\n\n```js\nvar polipop = new Polipop('polipop', {\n open: function (notification, element) {\n ...\n }\n});\n```\n\n```js\npolipop.add({\n type: 'success',\n title: 'Message',\n content: 'This is the message content.',\n open: function (notification, element) {\n ...\n }\n});\n```\n\n### `afterOpen`\n\nA callback function invoked immediately after a notification element has been rendered into the DOM and the element's animation has finished. Accepts the arguments:\n\n`{Object} notification` - A notification object.\n`{Element} element` - A notification element.\n\n```js\nvar polipop = new Polipop('polipop', {\n afterOpen: function (notification, element) {\n ...\n }\n});\n```\n\n```js\npolipop.add({\n type: 'success',\n title: 'Message',\n content: 'This is the message content.',\n afterOpen: function (notification, element) {\n ...\n }\n});\n```\n\n### `beforeClose`\n\nA callback function invoked immediately after the `Polipop.beforeClose` event has been triggered on an element but before the element's closing animation has started. Accepts the arguments:\n\n`{Object} notification` - A notification object.\n`{Element} element` - A notification element.\n\n```js\nvar polipop = new Polipop('polipop', {\n beforeClose: function (notification, element) {\n ...\n }\n});\n```\n\n```js\npolipop.add({\n type: 'success',\n title: 'Message',\n content: 'This is the message content.',\n beforeClose: function (notification, element) {\n ...\n }\n});\n```\n\n### `close`\n\nA callback function invoked immediately after the element's closing animation has finished, immediately before the element has been removed from the DOM. Accepts the arguments:\n\n`{Object} notification` - A notification object.\n`{Element} element` - A notification element.\n\n```js\nvar polipop = new Polipop('polipop', {\n close: function (notification, element) {\n ...\n }\n});\n```\n\n```js\npolipop.add({\n type: 'success',\n title: 'Message',\n content: 'This is the message content.',\n close: function (notification, element) {\n ...\n }\n});\n```\n\n### `click`\n\nA callback function invoked immediately after a notification element has been clicked. Accepts the arguments:\n\n`{MouseEvent}` event - The click event.\n`{Object}` notification - A notification object.\n`{Element}` element - A notification element.\n\n```js\nvar polipop = new Polipop('polipop', {\n click: function (event, notification, element) {\n ...\n }\n});\n```\n\n```js\npolipop.add({\n type: 'success',\n title: 'Message',\n content: 'This is the message content.',\n click: function (event, notification, element) {\n ...\n }\n});\n```\n\n## Credits\n\n- Yannis Maragos - Author\n\n## License\n\nPolipop is dual-licensed under the GNU General Public License (GPL) and the [Polipop Commercial License](https://www.minitek.gr/license#polipop).\n\n### Open source license\n\nIf you are creating an open source application under a license compatible with the GNU GPL license v3, you may use the library under the terms of the GPLv3.\n\n### Commercial license\n\nIf you want to use Polipop in a commercial project or product, you'll need to [purchase a commercial license](https://www.minitek.gr/javascript/polipop#license).\n","readmeFilename":"README.md"}