Notifications

Setup

First we need to create a new notification instance.

import Notification from 'BobjollNotifications'                  

    const notification = new Notification({
        fixed?: boolean; // if enabled timeout will be disabled and user has to close notification window.
        recurrent?: boolean; // if enabled notification will render until user closes notification and checks the hide for ever box.
        recurrentMax?: number; // Define max times an notification can be rendered if recurrent if user doesn't check hide for ever box.
        recurrentPrint?: boolean; // If you define recurrentMax set this to true to enable.
        timeout?: number; // Override default notification timeout.
        template?: Function; // Override default notifications template.
        position?: keyof Position; // Override default notifications position.
    });
Usage

Notifications can be used in multiple ways such as fixed elements over the screen or inserted before a dom element.

notifications.insert({
        id?: string; // Assign a unique id to the notification, this is required if we want a notification not to show up again or to use features like recurrent or fixed.
        class?: string; // Add custom classes.
        html: string; // Notification content
        target?: string | Element; // Add a fixed notification floating beside a element.
        insert?: {
            element: Element;
            position: 'beforeend' | 'beforebegin' | 'afterend' | 'afterbegin';
        } // Insert a static notification in dom.
        position?: keyof Position; // Set notification position
    });
Example 1

Standard use case where notification is fixed over content.

var example1 = document.getElementById('notification-example-1');
    var notifications = new Notifications({
        fixed: true,
        position: 'center',
    });

    if (example1) {
        example1.addEventListener('click', function() {
            notifications.insert({
                html: "...",
            });
        });
    }
Example 2

Notifications inserted before{start/end}/after{start/end} of a dom element.

var example2 = document.getElementById('notification-example-2');
    var notifications = new Notifications({
        id: 'example-2',
        class: 'mg-top-lv3',
        fixed: true,
        recurrent: true,
        insert: {
            element: example2,
            position: 'afterend',
        },
        position: 'static',
    });

    if (example2) {
        example2.addEventListener('click', function() {
            notifications.insert({
                html: "...",
            });
        });
    }

Definitions

Positions
export interface Position {
        'static';
        'bottom-center';
        'bottom-left';
        'bottom-right';
        'center';
        'top-center';
        'top-left';
        'top-right';
    };

Classes

Modifiers
Remove notification shadow for a static notification for instance.
.notification--no-shadow
Change styling to a alert.
.notification--alert.notification--{error|warning|success|neutral}
Hide disable checkbox.
.hide-disable
Hide close button.
.hide-close