hust-epi/admin-ui/yvanui/yvanui.dialog2_layer.js

/**
 * dialog2
 * @author luoyifan
 * 2018-11-22 17:32:00
 */
"use strict";
$.parser.auto = false;

(function ($) {

    $.parser.plugins.push("dialog2");
    $(function () {
        //构造方法
    });

    var resize = function (layero) {
        var me = layero.find('.easyui-layout');
        me.layout('resize', {
            height: layero[0].clientHeight - 43
        });
    };

    $.fn.dialog2 = function (options, param) {
        if (typeof options === 'string') {
            var method = $.fn.dialog2.methods[options];
            if (!method) {
                method = $.fn.power.methods[options];
            }
            return method(this, param);
        }
        return this.each(function () {
            var state = $.data(this, 'dialog2');
            if (state) {
                $.extend(state.options, options);
            } else {
                $.data(this, 'dialog2', {
                    options: options, //对话框内容（可能是函数）
                    param: param, //调用参数
                    runtime: { //运行时参数
                        domId: 'd_' + (new Date()).getTime()
                    },
                    context: null
                });
            }
        });
    };

    $.fn.dialog2.methods = {
        show: function (jq, context) {
            var target = jq[0];
            var opts = $.data(target, 'dialog2').options;
            //var param = $.extend({}, $.data(target, 'dialog2').param, context || {});
            var param = $.extend({}, context);
            var runtime = $.data(target, 'dialog2').runtime;

            if (runtime.layerindex) {
                console.error('对话框已经打开过了!');
                return;
            }
            if ($.type(opts) === 'function') {
                //dialog 内容是函数，则调用函数，并获取结果
                opts = opts(param);
            }

            //记录旧的 focus 控件
            var oldFocus = document.activeElement;

            //填充缺省参数
            opts = $.extend({}, $.fn.dialog2.defaults, opts);

            //执行 dom 的构建过程,并记录下 context 的数据
            var $target = $(target);
            var $dom = $('<div id="' + runtime.domId + '" tabindex="99"></div>');
            $.yvan.fillCommonProperties($dom, opts);
            $dom.attr('xtype', 'dialog');
            $target.append($dom);

            //dialog 是快捷键容器
            shortcut.createContainer($dom, param);
            $dom.power($.yvan.props(opts, ['north', 'center', 'west', 'east', 'south', 'xtype', 'attr', 'itemId', 'id', 'html', 'class', 'css', 'title']), param);
            var $shade;

            //打开对话框
            var layerOpts = {
                area: [
                    opts.width + ($.type(opts.width) === 'number' ? 'px' : ''),
                    opts.height + ($.type(opts.height) === 'number' ? 'px' : '')
                ],
                title: opts.title,
                type: 1,
                maxmin: 1,
                shade: false,
                shadeClose: false,
                resize: true,
                anim: 0,
                skin: 'layer-class',
                zIndex: layer.zIndex,
                content: $dom,
                success: function (layero, index) {
                    $.data(layero.down('dialog')[0], 'context', context);

                    shortcut.disableLayroTabIndex(layero);
                    shortcut.registe($dom, 'esc', function () {
                        layer.close(index);
                    });

                    layer.setTop(layero);
                    $.parser.parse($dom);
                    runtime.layerindex = index;

                    var zIndex = parseInt(layero.css('z-index')) - 1;
                    $shade = $('<div class="layui-layer-shade" id="layui-layer-shade2" times="2" style="z-index: ' + zIndex + '; background-color: rgb(0, 0, 0); opacity: 0.3;"></div>');
                    $target.append($shade);

                    resize(layero);
                    if (opts.onLoad) {
                        opts.onLoad(layero, context);
                    }
                    //将当前焦点放在 $dom 上
                    setTimeout(function () {
                        $dom[0].focus();
                    }, 10);
                },
                end: function () {
                    if (opts.onUnload) {
                        opts.onUnload(context);
                    }

                    $shade.remove();
                    $dom.remove();
                    delete runtime.layerindex;

                    //还原旧焦点
                    if (oldFocus) {
                        setTimeout(function () {
                            oldFocus.focus();
                        }, 10);
                    }
                },
                resizing: resize,
                full: resize,
                restore: resize
            };

            //构造 layer 的按钮
            if (opts.btn && $.type(opts.btn) === 'array') {
                layerOpts.btn = [];
                for (var i = 0; i < opts.btn.length; i++) {
                    layerOpts.btn.push(
                        (opts.btn[i].iconCls ? '<i class="' + opts.btn[i].iconCls + '"></i>&nbsp;' : '') +
                        (opts.btn[i].text ? opts.btn[i].text : '')
                    );
                    if (i === 0) {
                        layerOpts.yes = opts.btn[i].onClick;
                    } else {
                        layerOpts['btn' + (i + 1)] = opts.btn[i].onClick;
                    }
                }
            }

            layer.open(layerOpts);
            return $dom;
        },
        power: function (jq) {
            var target = jq[0];
            var opts = $.data(target, 'dialog2').options;
            return $('#' + opts.domId).power;
        },
        close: function (jq) {
            var target = jq[0];
            var runtime = $.data(target, 'dialog2').runtime;
            if (runtime.layerindex) {
                layer.close(runtime.layerindex);
            }
        }
    };

    $.fn.dialog2.defaults = {
        title: '未命名对话框',
        width: 300,
        height: 200
    };

})(jQuery);