modal.js 9.47 KB
define('modal', ['layer', 'components/common', 'css!layer_css'], function(layer, common) {
    var modal = layer;
    
    layer.config({
		skin: 'layer-e9'
	});
    
    var message = {
        modals: [],
        open: function (icon, content, duration, onClose) {
            if (common.isFunction(duration)) {
                onClose = duration;
                duration = 0;
            }

            var _end = function () {
                var modals = message.modals;
                var prevModal = modals[0];
                var index = 0;

                modals.remove(index);
                modals.forEach(function (m, i) {
                    if (i < index) return;

                    var $dom = $(m.dom);
                    var top = $dom.css("top");

                    $dom.animate({
                        top: parseInt(top) - 20 - prevModal.height
                    });
                });
            };
            var _close = function () { };
            var len = this.modals.length;
            var top = 20; // 20 为弹窗的间距
            var time = 2000;
            var closeBtn = false;
            var prevModal;

            if (len) {
                prevModal = this.modals[len - 1];
                top += len * (top + prevModal.height);
            }

            if (duration === 0) {
                _close = function (i) {
                    onClose && onClose();
                    message.remove(i);
                };
                _end = function () {};
                time = duration;
                closeBtn = 3;
            }

            return modal.open({
                type: 0,
                className: 'layer-e9-msg',
                time: time,
                icon: icon,
                shade: false,
                title: false,
                resize: false,
                fullresize: false,
                single: false,
                offset: top,
                maxWidth: 400,
                content: content,
                closeBtn: closeBtn,
                btn: false,
                anim: 7,
                success: function ($dom, i) {
                    message.modals.push({
                        dom: $dom[0],
                        index: i,
                        height: $dom.outerHeight()
                    });
                },
                cancel: _close,
                end: _end
            });
        },
        remove: function (index) {
            var modals = this.modals;

            modals.every(function (m, i) {
                if (m.index !== index) return true;

                modals.remove(i);
            });
        },
        close: function (index) {
            var len = this.modals.length;
            var dom = this.modals[len - 1].dom;

            index = index || parseInt(dom.id.replace("layui-layer", ""));

            modal.close(index);
            this.remove(index);
        }
    };

    ["info", "success", "error", "warn", "loading"].forEach(function (type) {
        message[type] = function (content, duration, onClose) {
            if (type === "loading") {
                duration = 0;
            }

            return message.open(type, content, duration, onClose);
        };
    });

    return {
        list: {},
        open: function(settings, onOpen, onClose) { // 内嵌组件形式,html片段
            var that = this,
                id = settings.mId, // 针对需要单例的窗口 设置mId 通过restore方法打开原窗口
                mIndex = that.list[id],
                de = {
                    type: 1, // 允许嵌入html的模态窗
                    maxmin: true, //放大缩小窗口
                    scrollbar: false,
                    success: function(m, index) {
                        id && (that.list[id] = index);
                        onOpen && onOpen.apply(null, arguments);
                        $(document).on('keydown.openmodal' + index, function (event) {
                            if (event.keyCode === 27) {   //ESC 退出弹框
                                modal.close(index);
                                return false;
                            }
                        });
                    }, 
                    end: function() {
                        onClose && onClose.apply(null, arguments);
                        id && delete that.list[id];
                        $(document).off('keydown.openmodal' + modal.index);
                    }
                };

            if(mIndex >= 0  ) return modal.restore(mIndex);

            settings = $.extend(de, settings);

            return modal.open(settings);
        },
        restore: function(index) {
            modal.restore(index || modal.index);
        },
        tips: function(content, el, placement) {
            var settings = {};
            var getPlacement = function(placement) {
                switch (placement) {
                    case 'right':
                        return 2;
                    case 'left':
                    	return 4;    
                    default:
                        return 3;
                }
            };
            
            if(common.isObject(placement)) {
                settings = placement;
                placement = settings.placement;
            }

            return layer.tips(content, el, $.extend({
                tips: [getPlacement(placement), settings.bgColor || '#111'], // 表示出现方向为下 背景色为#111
                time: 0, //表示不自动关闭
                shift: 7, // 表示不使用动画
                tipsMore: (settings.tipsMore === undefined) ? true : settings.tipsMore // 支持与错误提示框共同存在
            }, settings));
        },
        errorTips: function(content, el, placement) {
            return this.tips(content, el, {
                className: 'wea-mm-has-error',
                placement: 'right' || placement,
                bgColor: '#ffc6c6',
                tipsMore: true // 支持多个错误提示存在
            });
        },
        iframe: function(src, settings) {
            settings = settings || {};
            settings.content = [src, 'no'];
            settings.type = 2;

            return modal.open(settings);
        },
        getModalUIId: function(id) {
            return "layui-layer" + this.list[id];
        },
        getModal$Dom: function (index) {
            return $("#layui-layer" + index);
        },
        initFore9: function (){
            layer.config({
                lang: common.getLanguage(),
                skin: 'layer-e9'
            });
        },
        close: function(index) {
            index = index || modal.index; // 默认关闭当前窗口
            modal.close(index);
        },
        closeAll: modal.closeAll,
        confirm: function () {
            var that = this;
            var args = [].slice.call(arguments);
            var options = {
                success: function (layero, index) {
                    $(document).on('keydown.confirm' + index, function (event) {
                        if (event.keyCode === 13 || event.keyCode === 32) {
                            that.getModal$Dom(index).find(".layui-layer-btn0").click();
                            return false; //阻止系统默认回车事件
                        }
                        if (event.keyCode === 27) {   //ESC 退出弹框
                            that.close(index);
                        }
                    }); 
                },
                end: function () {
                    $(document).off('keydown.confirm' + modal.index);
                }
            };

            if (common.isObject(args[1])) {
                args[1] = $.extend(options, args[1]);
            }else{
                args.splice(1,0,options);
            }

            modal.confirm.apply(null, args);
        },
        alert: function(msg, yes, cancel) {
            var that = this;
            var options = {
                success: function (layero, index) {
                    $(document).on('keydown.alert' + index, function (event) {
                        if (event.keyCode === 27) {   //ESC 退出弹框
                            that.close(index);
                        }
                    });
                },
                end: function () {
                    $(document).off('keydown.alert' + modal.index);
                },
                cancel: cancel
            };
            modal.alert(msg, options, yes);
        },
        load: function(type) {
            modal.load(type, {
                shade: [0.5, '#111'],
                btn: false,
                icon: false
            });
        },
        index: modal.index,
        prompt: function(value, title,fn) {
            var op = {};

            if(common.isString(value)) {
                op.value = value;
                op.title = title;
            } else {
                op = value;
            }
            return modal.prompt(op, function(value, index) {
                if (common.isFunction(fn)) {
                    fn.apply(this, arguments);
                }
                modal.close(index);
            });
        },
        changeScope: function(scope) {
            modal = scope.layer;
        },
        info: message.info,
        success: message.success,
        error: message.error,
        warn: message.warn,
        closeMsg: message.close.bind(message),
        loading: message.loading,
        getFrameIndex: modal.getFrameIndex, // 指定iframe层自适应
        iframeSrc: modal.iframeSrc // 重置iframe的url
    }
});