responsivewebframework/src/js/toast.js

Jalasoft Foundation Front End Framework ========================================

frameworkObject.toast = new function () {
    var Toast = function (idWindows,newIndex,data) {
        var index = 10000+parseInt(newIndex);
        var widthPixel = 200;
        /*
        *   initialize values
        * */
        {
            var title = data.title || "";

            var text = data.text || "";

            var lifetime = data.lifeTime || 0;

            var icon = data.icon || "";

            var width = data.width || 250;

            var newPosition = data.position || "bottomright";

            if(data.button){
                if( Object.prototype.toString.call( data.button ) === '[object Array]' ) {
                    var button = "";
                    var counter=0;
                    data.button.forEach( function( item ) {
                        var idButton = "toastidbutton"+counter;
                        var onClick = 'onclick="';
                        if(item.close) {
                            if(item.close == true) {
                                onClick += ' frameworkObject.toast.remove(' + "'#" + idWindows + "'" + '); ';
                            }
                        }
                        if(item.buttonOnClick){
                            onClick += item.buttonOnClick;
                        }
                        onClick += '" ';
                        if(item.caption) {
                            button += ' <button class="toastbutton" '+onClick+' >' + item.caption + '</button> '
                        }
                    });
                    if(button.length > 5 ) {
                        button = "<div class='toastcontainerbutton' >" + button + "</div>";
                    }
                }
            } else {
                var button="";
            }
        }
        var nextPosition={bottom: 0};
        var position = 'bottomright';
        if(newPosition == "bottomright" || newPosition == "bottomleft" || newPosition == "bottomcenter") {
            position = newPosition;
            nextPosition={bottom: 0};
        }
        if(newPosition == "topright" || newPosition == "topleft" || newPosition == "topcenter") {
            position = newPosition;
            nextPosition={top: 0};
        }
        var iconEquis = '<div class="icon-equis" onclick="frameworkObject.toast.remove(' + "'#" + idWindows + "'" + ');" style="cursor:pointer;"></div>';
        if(width>256) {
            width=width-12;
            widthPixel = width;
        }
        var iconWidth = 0;
        if(icon.trim()=="") {
            var iconText='<div class="toasticon" style="width: 0;">' +
                '</div>';
            iconWidth = 30;
        } else {
            var iconText='<div class="toasticon">' +
                '<div class="icon'+icon+' "></div>' +
                '</div>';
        }
        var styleWidth = "width: "+widthPixel+"px;";
        this.showToast = function () {
            var popup = [
                '<div class="toastcontainer '+position+'" id="'+idWindows+'" style="'+styleWidth+' z-index:'+index+';">',
                    iconText,
                    '<div class="toastinfo">',
                        '<div class="toasttitle">',
                        title,
                        '</div>',
                        '<div class="toasttext">',
                        text,
                        '</div>',
                        button,
                    '</div>',
                    '<div class="toastexit">',
                        iconEquis,
                    '</div>',
                '</div>'
                ];
            popup = popup.join(" ");
            $("body").prepend(popup);
            widthPixel+=iconWidth;
            $('#'+idWindows).find('.toastinfo').css("width","calc("+widthPixel+"px - 50px)");
            if(newPosition == "bottomcenter" || newPosition == "topcenter") {
                widthPixel=widthPixel/2;
                $('#'+idWindows).css("left","calc(50% - "+widthPixel+"px)");
            }
            $('#'+idWindows).animate(nextPosition, 10);
            if(lifetime>999) {
                setTimeout(function () {
                    frameworkObject.toast.remove("#" + idWindows);
                }, lifetime);
            }
        };
        this.showToast();
        this.remove = function() {
            $('#'+idWindows).remove();
        }
    };
    var listToast = [];
    var index = 0;
    this.add = function(data) {
        var idWindows;
        idWindows = "frameworkidtoast" +index;
        index++;
        listToast[idWindows] = new Toast(idWindows,index,data);
    };
    this.remove = function(id) {
        id = id.substring(1,id.length);
        listToast[id].remove();
    }
};