🌹 Bubble Notification (Javascript) 💯

notification.d.ts

declare interface WebNotificationConfig {
    icon?: string; // to be implemented
    caption?: string;
    content: any;
    shadow?: boolean;
    width?: string;
    height?: string;
    style?: boolean | NodeJS.Dict<any>; // {background: '', color: ''}
    position?: string; //right, left
    timeout?: number;
    keepOpen?: boolean;
    type: 'default' | 'success' | 'alert' | 'info' | 'warning';
    IsObjtype?: boolean;
    NotifyHide?: boolean;
}

notification.js

// @ts-check
/**
* Copyright (c) 2018, https://github.com/rajibchy  All rights reserved.
* @author {Rajib Chy}
* Copyrights licensed under the New BSD License.
* See the accompanying LICENSE file for terms.
*/
// 1:00 AM 7/19/2022
// by rajib chy
(function (exports, $) {
    if (!$) {
        throw new Error("JQuery did not initilized.")
    }
    /** @type {WebNotificationConfig} */
    const _defaultConfig = {
        icon: '', // to be implemented
        caption: '',
        content: '',
        shadow: true,
        width: 'auto',
        height: 'auto',
        style: false, // {background: '', color: ''}
        position: 'right', //right, left
        timeout: 10000,
        keepOpen: false,
        type: 'default', //default, success, alert, info, warning
        IsObjtype: false,
        NotifyHide: false
    };
    /** @type {()=>JQuery<HTMLElement>} */
    const _container = (function () {
        /** @type {JQuery<HTMLElement>} */
        var _nContainer = undefined;
        $(function () {
            _nContainer = $("#__Notify_container_");
            if (_nContainer.length === 0) {
                _nContainer = $("<div/>");
                _nContainer[0].id = '__Notify_container_';
                _nContainer.addClass("notify-container").appendTo('body');
            }
        });
        return function () {
            return _nContainer;
        }
    }());
    const _buckets = function () {
        /** @type {NodeJS.Dict<WebNotification>} */
        const _notifies = {};
        return {
            /**
             * 
             * @param {WebNotification} instance
             * @returns 
             */
            set: function (instance) {
                if (_notifies[instance.identity]) {
                    _notifies[instance.identity].isKeepAlive = instance.isKeepAlive;
                } else {
                    _notifies[instance.identity] = instance;
                }
                return;
            },
            /**
             * 
             * @param {string} identity 
             * @returns {WebNotification}
             */
            get: function (identity) {
                return _notifies[identity];
            },
            /**
             * 
             * @param {string} identity
             * @param {boolean|void} visible
             * @returns 
             */
            remove: function (identity, visible) {
                const instance = _notifies[identity];
                if (instance) {
                    if (typeof (visible) === "boolean") {
                        instance._visible = visible;
                    }
                    instance.dispose();
                    delete _notifies[identity];
                }
            },
            /**
             * 
             * @param {string} identity 
             * @returns {boolean}
             */
            isKeepAlive: function (identity) {
                if (!_notifies[identity]) return false;
                return _notifies[identity].isKeepAlive;
            },
            hide: function () {
                try {
                    for (let identity in _notifies) {
                        _notifies[identity].dispose();
                        delete _notifies[identity];
                    }
                    $("[data-notify]", _container()).each(function () {
                        $(this).hide('slow', function () {
                            if (typeof this.remove === 'function') this.remove();
                            return;
                        });
                    });
                } catch (ex) {
                    console.warn(ex.message);
                }
                return this;
            }
        };
    }();
    /**
     * 
     * @param {string} identity 
     * @returns {(e:JQuery.ClickEvent<HTMLElement, undefined, HTMLElement, HTMLElement>)=>void}
     */
    function _closer(identity) {
        return function (e) {
            e.preventDefault(); e.stopImmediatePropagation();
            const instance = _buckets.get(identity);
            if (!instance) return;
            instance.fadeOut();
            return;
        }
    }
    class WebNotification {
        /**
         * 
         * @param {WebNotificationConfig} options 
         */
        constructor(options) {
            /** @type {string} */
            this.identity = String(Math.floor((0x1 + Math.random()) * 0x10000));
            /** @type {JQuery<HTMLElement>} */
            this.$elem = undefined;
            /** @type {boolean} */
            this.isKeepAlive = false;
            /** @type {boolean} */
            this._isDisposed = false;
            /** @type {WebNotificationConfig} */
            this._options = options;
            /** @type {number} */
            this._thId = 0;
            this._visible = true;
        }
        exitThread() {
            if (this._thId <= 0) return;
            clearTimeout(this._thId);
            this._thId = -1;
        }
        mouseOver() {
            if (this._isDisposed || this.isKeepAlive) return;
            const identity = this.identity;
            this.$elem.on('mouseover', function () {
                const instance = _buckets.get(identity);
                if (!instance) return;
                instance.isKeepAlive = true;
                instance.exitThread();
            });
        }
        fadeOut() {
            if (this._isDisposed || !this.$elem) return _buckets.remove(this.identity);
            const identity = this.identity;
            this.$elem.fadeOut('slow', function () {
                if (typeof this.remove === 'function') this.remove();
                _buckets.remove(identity, false);
                return;
            });
        }
        hide() {
            if (this._visible && this.$elem) {
                this.$elem.hide('slow', function () {
                    if (typeof (this.remove) !== 'function') return;
                    this.remove();
                });
            }
        }
        create() {
            this.$elem = $("<div/>").addClass("notify bounceIn animated");
            this.$elem.attr('data-notify', 'show');
            return this;
        }
        /**
         * 
         * @param {string} property
         * @param {string} style
         * @returns {WebNotification}
         */
        css(property, style) {
            this.$elem.css(property, style); return this;
        }
        /**
         * 
         * @param {string} name 
         * @returns {WebNotification}
         */
        addClass(name) {
            this.$elem.addClass(name);
            return this;
        }
        /**
         * 
         * @param {string} name 
         * @returns {WebNotification}
         */
        icon(name) {
            $(name).addClass('notify-icon').appendTo(this.$elem);
            return this;
        }
        /**
         * 
         * @param {string} html 
         * @returns {WebNotification}
         */
        append(html) {
            this.$elem.append(html); return this;
        }
        /**
         * 
         * @param {string} cls 
         * @param {string} html 
         * @returns {WebNotification}
         */
        appendTo(cls, html) {
            $("<div/>").addClass(cls).html(html).appendTo(this.$elem);
            return this;
        }
        appendToContainer() {
            this.$elem.hide().appendTo(_container()).fadeIn('slow');
            return this;
        }
        height() {
            return this.$elem.height();
        }
        bind() {
            $("<span/>").addClass("notify-closer").appendTo(this.$elem).on('click', _closer(this.identity));
            this.mouseOver();
            return this;
        }
        createThread() {
            if (this._options.keepOpen || this._options.timeout <= 0) return;
            let identity = this.identity;
            this._thId = setTimeout(function () {
                _buckets.remove(identity);
            }, this._options.timeout);
        }
        dispose() {
            if (this._isDisposed) return;
            this._isDisposed = true;
            this.exitThread();
            if (this.$elem) {
                this.hide();
                delete this.$elem;
            }
            delete this._options;
            delete this.identity;
        }
        /**
         * 
         * @param {string} caption 
         * @param {NodeJS.Dict<any>[]} content 
         * @returns 
         */
        arryOfObjectImplimation(caption, content) {
            var htmlText = "", height, contentCaption;
            let colIndex = 0, rowIndex = 0;
            for (let i = 0, len = content.length; i < len; i++) {
                if (i > 99) {
                    htmlText += '<div class="notify-text"> & more then ' + len + ' Error occured. Please appraise your dataset...';
                    break;
                }
                if (content[i].caption) {
                    contentCaption = content[i].caption + '<br/>';
                    continue;
                }
                if (content[i].Row !== undefined && content[i].Col !== undefined) {
                    rowIndex = parseInt(content[i].Row) + 1;
                    colIndex = parseInt(content[i].Col) + 1;
                    htmlText += '<hr style="border-color: rgb(42, 141, 212); margin-bottom: 0px; margin-top: 0px;"/><div id="notify-textId' + rowIndex + '" class="notify-text">'
                        + '<a href="javascript:void(0)" onclick="Sow.Method.instance.ht.support.NotificationEventCall(2,' + content[i].Row + ',' + content[i].Col + ')"><span class="NotifyNormal" id="rowIndex' + rowIndex + colIndex + '">Row No: ' + rowIndex + ''
                        + '; ' + 'Column No: ' + colIndex + '; '
                        + '</span></a>Massege: '
                        + content[i].MSG + "</div>";
                    continue;
                }
                htmlText += '<hr style="border-color: rgb(42, 141, 212); margin-bottom: 0px; margin-top: 0px;"" />'
                    + '<div class="notify-text">'
                    + 'Massege: ' + content[i].MSG + "</div>";
            }
            this.appendTo("notify-title", caption + ' (Error occurred  : <b>' + content.length + '</b> field.) ').append(!contentCaption ? htmlText : contentCaption + htmlText);
            height = this.height();
            if (height > 600) {
                this.addClass('_scroll');
            }
            return;
        }
        /**
        * 
        * @param {string} caption 
        * @param {NodeJS.Dict<any>} content 
        * @returns 
        */
        plainObjectImplimation(caption, content) {
            var htmlText = "", c = 0;
            for (let i in content) {
                if (c > 99) {
                    htmlText += '<div class="notify-text"> & more then ' + (c).toString() + ' Error occured. Please appraise your dataset...';
                    break;
                }
                htmlText += '<hr style="border-color: rgb(42, 141, 212); margin-bottom: 0px; margin-top: 0px;"/>'
                    + '<div id="notify-textId' + c + '" class="notify-text">'
                    + 'Massege: '
                    + content[i] + "</div>";
                c++;
            }
            this.appendTo("notify-title", caption + ' (Error occurred  : <b>' + c + '</b> field.) ').append(htmlText);
        }
        build() {
            this.create();
            switch (this._options.type) {
                case "default": this.addClass('info'); break;
                case "alert": this.addClass('_alert'); break;
                default: this.addClass(this._options.type); break;
            }
            if (this._options.shadow) this.addClass("shadow");
            if (this._options.style && typeof (this._options.style) !== "boolean") {
                if (this._options.style.background !== undefined) this.css("background-color", this._options.style.background);
                if (this._options.style.color !== undefined) this.css("color", this._options.style.color);
            }
            if (this._options.width !== 'auto') this.css('min-width', this._options.width);
            if (this._options.height !== 'auto') this.css('min-height', this._options.height);
            if (this._options.icon) this.icon(this._options.icon);
            if (!this._options.IsObjtype) {
                this.appendTo("notify-title", this._options.caption).appendTo("notify-text", this._options.content);
            } else {
                if (typeof (this._options.content) === 'object') {
                    if (Array.isArray(this._options.content)) {
                        this.arryOfObjectImplimation(this._options.caption, this._options.content);
                    } else {
                        this.plainObjectImplimation(this._options.caption, this._options.content);
                    }
                } else {
                    this.appendTo("notify-text", "Invalid object type.....!");
                }
            }
            _buckets.set(this);
            this.appendToContainer().bind();
            this.createThread();
        }
    }
    /**
     * 
     * @param {WebNotificationConfig} options 
     */
    function _build(options) {
        options = Object.extend(_defaultConfig, options || {});
        if (!options.content) return false;
        if (options.NotifyHide) _buckets.hide();
        var notify = new WebNotification(options);
        notify.build();
    }
    exports.notification = {
        /**
         * 
         * @param {string|WebNotificationConfig} msg
         */
        i: function (msg) {
            if (typeof (msg) === 'object') {
                _build(msg);
                return this;
            }
            _build({ caption: 'Information', content: msg || 'Information...', type: 'info' });
            return this;
        },
        /**
         * 
         * @param {string|WebNotificationConfig} msg
         */
        e: function (msg) {
            if (typeof (msg) === 'object') {
                _build(msg);
                return this;
            }
            _build({ caption: 'Error', content: msg || 'Error found!!!', type: 'alert' });
            return this;
        },
        /**
         * 
         * @param {string|WebNotificationConfig} msg
         */
        s: function (msg) {
            if (typeof (msg) === 'object') {
                _build(msg);
                return this;
            }
            _build({ caption: 'Success', content: msg || 'Success!!!', type: 'success' });
            return this;
        },
        h: function () {
            _buckets.hide();
            return this;
        },
    }
}(this || window, jQuery || $));