pathfinder/js/app/pnotify.loader.js

define([
    'PNotify',
    'PNotifyDesktop',
    'PNotifyCallbacks',
    'NonBlock'
], (PNotify) => {
    'use strict';

    let stackConfig = {
        bottomRight: {
            stack: {
                dir1: 'up',
                dir2: 'left',
                firstpos1: 32,
                firstpos2: 10,
                spacing1: 5,
                spacing2: 5,
                push: 'bottom',
                context: document.body
            }
        },
        barBottom: {
            stack: {
                dir1: 'up',
                firstpos1: 32,
                spacing1: 0,
                context: document.querySelector(`.pf-site`)
            },
            addclass: 'stack-bar-bottom'
        }
    };

    let initDefaultPNotifyConfig = () => {
        PNotify.defaults.styling = 'bootstrap3';
        PNotify.defaults.icons = 'fontawesome5';
        PNotify.defaults.addClass = 'nonblock';
        PNotify.defaults.delay = 5000;
        PNotify.defaults.width = '250px';
        PNotify.defaults.animateSpeed = 'fast';

        PNotify.defaults.stack = stackConfig.bottomRight.stack;

        PNotify.modules.Desktop.defaults.icon = '/public/img/notifications/logo.png';
    };

    /**
     * show browser/desktop notification
     * @param config
     * @param options
     */
    let showNotify = (config = {}, options = {}) => {

        if(options.desktop){
            config.modules = {
                Desktop: Object.assign({}, {desktop: true}, options.desktop)
            };
            startTabBlink(config.title); // make browser tab blink
        }

        switch(config.type){
            case 'info':
                config.icon = 'fas fa-info fa-fw fa-lg';
                break;
            case 'success':
                config.icon = 'fas fa-check fa-fw fa-lg';
                break;
            case 'notice':
            case 'warning':
                config.icon = 'fas fa-exclamation-triangle fa-fw fa-lg';
                config.type = 'notice';
                break;
            case 'error':
                config.icon = 'fas fa-times fa-fw fa-lg';
                break;
            case 'lock':
                config.icon = 'fas fa-lock fa-fw fa-lg';
                config.type = 'success';
                break;
            case 'unlock':
                config.icon = 'fas fa-unlock fa-fw fa-lg';
                config.type = 'info';
                break;
            default:
                config.icon = false;
        }

        if(options.stack){
            config.stack = stackConfig[options.stack].stack;
            config.addClass = stackConfig[options.stack].addclass;
        }

        let notice = PNotify.alert(config);

        if(typeof options.click === 'function'){
            notice.refs.elem.style.cursor = 'pointer';
            notice.on('click', options.click);
        }
    };

    initDefaultPNotifyConfig();

    // browser tab blink ==============================================================================================
    // initial page title (cached)
    let initialPageTitle = document.title;

    // global blink timeout cache
    let blinkTimer;

    /**
     * change document.title and make the browsers tab blink
     * @param blinkTitle
     */
    let startTabBlink = blinkTitle => {
        let initBlink = (function(){
            // count blinks if tab is currently active
            let activeTabBlinkCount = 0;

            let blink = (blinkTitle) => {
                // number of "blinks" should be limited if tab is currently active
                if(window.isVisible){
                    activeTabBlinkCount++;
                }

                // toggle page title
                document.title = (document.title === blinkTitle) ? initialPageTitle : blinkTitle;

                if(activeTabBlinkCount > 10){
                    stopTabBlink();
                }
            };

            return () => {
                if(!blinkTimer){
                    blinkTimer = setInterval(blink, 1000, blinkTitle);
                }
            };
        }(blinkTitle));

        initBlink();
    };

    /**
     * stop blinking document.title
     */
    let stopTabBlink = () => {
        if(blinkTimer){
            clearInterval(blinkTimer);
            document.title = initialPageTitle;
            blinkTimer = null;
        }
    };

    return {
        showNotify: showNotify,
        startTabBlink: startTabBlink,
        stopTabBlink: stopTabBlink
    };
});