How to make use of it:

1. Install the library with NPM.

# NPM
$ npm i polipop

2. Import the Polipop.js.

import Polipop from 'polipop';
// Core stylesheet
@import "node_modules/polipop/src/sass/core";
// Default theme
@import "node_modules/polipop/src/sass/default";
// Minimal theme
@import "node_modules/polipop/src/sass/minimal";
// Compact theme
@import "node_modules/polipop/src/sass/compact";

3. Or insert the next JavaScript and CSS files into the doc.

// Core JavaScript
<script src="/polipop/dist/polipop.min.js"></script>
// Core stylesheet
<link rel="stylesheet" href="/polipop/dist/css/polipop.core.min.css" />
// Default theme
<link rel="stylesheet" href="/polipop/dist/css/polipop.default.min.css" />
// Minimal theme
<link rel="stylesheet" href="/polipop/dist/css/polipop.minimal.min.css" />
// Compact theme
<link rel="stylesheet" href="/polipop/dist/css/polipop.compact.min.css" />

4. Create a new instance of the Polipop and specify the id of the component on which you need to instantiate the Polipop instance.

var polipop = new Polipop('myContainer', {
    // options here
});

5. Display a primary notification on the web page.

polipop.add({

  // notification content
  content: 'Basic Notification.',

  // notification title
  title: 'Title',

  // default, info, success, warning or error
  type: 'default',

});

6. The default configuration options.

var polipop = new Polipop('myContainer', {
    /**
     * 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.
     *
     * @type {String}
     */
    appendTo: 'body',

    /**
     * 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.
     *
     * @type {String}
     */
    block: 'polipop',

    /**
     * The position of the wrapper element within the viewport. Can only be set on
     * class instantiation. Accepted values:
     * - 'top-left'
     * - 'center'
     * - 'top-right'
     * - 'inline'
     * - 'bottom-right'
     * - 'bottom-left'
     *
     * @type {String}
     */
    position: 'top-right',

    /**
     * The layout of the Polipop wrapper. Can only be set on class instantiation.
     * Accepted values:
     * - 'popups'
     * - 'panel'
     *
     * @type {String}
     */
    layout: 'popups',

    /**
     * The css theme of the Polipop wrapper. Can only be set on class instantiation.
     * Accepted values:
     * - 'default'
     * - 'compact'
     * - 'minimal'
     * - or any custom theme
     *
     * @type {String}
     */
    theme: 'default',

    /**
     * A boolean designating whether each notification element displays an icon,
     * according to the notification type.
     *
     * @type {Boolean}
     */
    icons: true,

    /**
     * Designates whether a notification element should be appended or prepended to the
     * notifications container. Accepted values:
     * - 'after'
     * - 'before'
     *
     * @type {String}
     */
    insert: 'after',

    /**
     * The vertical spacing between the notification elements. Can only be set on class
     * instantiation.
     *
     * @type {Number}
     */
    spacing: 10,

    /**
     * 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.
     *
     * @type {Number}
     */
    pool: 0,

    /**
     * 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.
     *
     * @type {Boolean}
     */
    sticky: false,

    /**
     * Expiration time for non-sticky notification elements in milliseconds.
     *
     * @type {Number}
     */
    life: 3000,

    /**
     * A boolean designating whether the life time progress bar will be displayed for
     * each notification element.
     *
     * @type {Boolean}
     */
    progressbar: false,

    /**
     * A boolean designating whether the notifications expiration control should pause
     * when hovering over the wrapper element. Can only be set on class instantiation.
     *
     * @type {Boolean}
     */
    pauseOnHover: true,

    /**
     * The text that is displayed inside the 'panel' layout header. Can only be set on
     * class instantiation.
     *
     * @type {String}
     */
    headerText: 'Messages',

    /**
     * A boolean designating whether the closer button element will be displayed when
     * there are rendered notification elements. Can only be set on class
     * instantiation.
     *
     * @type {Boolean}
     */
    closer: true,

    /**
     * The text that is displayed inside the closer button element when the
     * notifications queue is empty.
     *
     * @type {String}
     */
    closeText: 'Close',

    /**
     * The text that is displayed inside the closer button element when the
     * notifications queue contains queued notification objects.
     *
     * @type {String}
     */
    loadMoreText: 'Load more',

    /**
     * A boolean designating whether the 'panel' layout wrapper element will be hidden
     * when there are no rendered notification elements.
     *
     * @type {Boolean}
     */
    hideEmpty: false,

    /**
     * The time, in milliseconds, the timer should delay in between executions of the
     * _loop function. Can only be set on class instantiation.
     *
     * @type {Number}
     */
    interval: 250,

    /**
     * The animation effect when adding or removing notification elements.
     * Accepted values:
     * - 'fade'
     * - 'slide'
     *
     * @type {String}
     */
    effect: 'fade',

    /**
     * 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
     *
     * @type {String}
     */
    easing: 'linear',

    /**
     * The number of milliseconds each iteration of the animation takes to complete.
     *
     * @type {Number}
     */
    effectDuration: 250,
});

7. Callback capabilities.

var polipop = new Polipop('myContainer', {
    /**
     * A callback function invoked immediately after the wrapper element has been
     * rendered into the DOM.
     *
     * @type {function()}
     */
    ready: function () {},

    /**
     * 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.
     *
     * @type {function(object)}
     */
    add: function () {},

    /**
     * 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.
     *
     * @type {function(object, Element)}
     */
    beforeOpen: function () {},

    /**
     * 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.
     *
     * @type {function(object, Element)}
     */
    open: function () {},

    /**
     * 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.
     *
     * @type {function(object, Element)}
     */
    afterOpen: function () {},

    /**
     * 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.
     *
     * @type {function(object, Element)}
     */
    beforeClose: function () {},

    /**
     * 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.
     *
     * @type {function(object, Element)}
     */
    close: function () {},

    /**
     * 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.
     *
     * @type {function(MouseEvent, object, Element)}
     */
    click: function () {},
});

8. API strategies.

// update option
polipop.setOption(key, value);

// get option
polipop.getOption(key, value);

// enable
polipop.enable();

// disable
polipop.disable();

// pause
polipop.pause();

// unpause
polipop.unpause();

// close all
polipop.closeAll();

// delete all notification objects from the queue
polipop.emptyQueue();

// destroy
polipop.destroy();

Building

Build using NPM scripts. The following scripts are available:

• build:css – Builds CSS files from SCSS files.
• build:js – Builds JavaScript files.
• build – Builds all JavaScript and CSS files.
• lint – Lints source and built JavaScript files.

Configuration options

Properties

A Polipop instance has the following public properties:

options

Type: Object

Default: Default configuration options

The default configuration options merged with instance options.

queue

Type: Array

Default: []

An array containing the queued notification objects.

elements

Type: HTMLCollection | null

Default: null

An object containing a collection of rendered notification elements.

wrapperHeight

Type: Number

Default: 0

The height of the wrapper element.

Modern Notification Popup & Panel JavaScript Library, Polipop Plugin/Github

See Demo And Download