dialog.js 9.8 KB
var $ = require('jquery');

var toast = function(options, ok, cancel) {
    options = options || {};
    if (typeof options == "string") {
        options = {
            content: options
        };
    }
    options = $.extend({}, toast.defaults, options);
    if (!$.isArray(options.button)) {
        options.button = [];
    }
    if (ok !== undefined) {
        options.ok = ok;
    }
    if (options.ok) {
        options.button.push({
            id: 'ok',
            value: options.okValue,
            callback: options.ok,
            css: "btn-primary"
        });
    }
    if (cancel !== undefined) {
        options.cancel = cancel;
    }
    if (options.cancel) {
        options.button.push({
            id: 'cancel',
            value: options.cancelValue,
            callback: options.cancel
        });
    }
    // toast.superclass.constructor.call(this, options);

    return new toast.prototype.init(options);
}
toast.list = {};
toast.prototype.constructor = toast;
toast.prototype.closed = true;
toast.prototype.destroyed = true;
toast.prototype.current = true;
toast.prototype.init = function(options) {
    var __self = this,
        _o = options;
    __self.options = options;
    __self.closed = false;
    __self.destroyed = false;
    var wrap = $('<div />')
        .css({
            display: 'none'
        })
        .addClass('modal')
        .html(_o.template)
        .appendTo('body');
    __self.dom = __self.dom || __self.__dom(wrap, _o.className);
    __self.dom.backdrop = $('<div />').addClass(_o.className + "backdrop");
    __self.dom.backdrop.insertAfter(__self.dom.wrap);
    __self
        .button(_o.button)
        .title(_o.title)
        .content(_o.content)
        .addclass(_o.addClass)
        .show().zIndex();

    if (__self.dom.close) {
        __self.dom.close[_o.show === false ? 'hide' : 'show']().attr('title', _o.cancelValue)
            .on('click', function(event) {
                __self._trigger('cancel');
                event.preventDefault();
            });
    }

    __self.dom.wrap.find('.modal-dialog').css({
        width: _o.width,
        height: _o.height
    });
    if(__self.dom.body){
        __self.dom.body.css({
            "max-height":($(window).height()-200) + "px",
            overflow: "auto"
        });
    }
    
    // mod by xueyin: 修改事件实现
    // __self.dom.wrap.on('click', '[data-id]', function(event) {
    __self.dom.wrap.find('.modal-content').on('click', '[data-id]', function(event) {

        var $this = $(this);
        if (!$this.attr('disabled')) {
            __self._trigger($this.data('id'));
        }
        event.preventDefault();
    });

    // mod by xueyin: 对话框上的事件不需要冒泡
    $(document).on('click', '.modal-content', function(event) {
            event.stopPropagation();
    });

    // add by xueyin: 增加点击背影关闭对话框功能
    if (_o.backdrop == true) {
        $(document).on('click', '.modal', function(event) {
            __self.close();
        });
    }

    return __self;
};
toast.prototype.addclass = function(css) {
    var __self = this,
        _o = __self.options;
    __self.dom.wrap.addClass(css);
    return __self;
};
toast.prototype.content = function(html) {
    var __self = this,
        _o = __self.options;
    if (!__self.dom.body) {
        return __self;
    }
    __self.dom.body.empty('')[typeof html === 'object' ? 'append' : 'html'](typeof html === 'object' ? html.innerHTML : html);

    return __self;
};
toast.prototype.title = function(text) {
    var __self = this,
        _o = __self.options;
    if (!__self.dom.title) {
        return __self;
    }
    __self.dom.title.html(text);
    __self.dom.title[text ? 'show' : 'hide']();
    return __self;
};
toast.prototype.button = function() {
    var __self = this,
        _o = __self.options;
    var html = '',
        args = _o.button;
    __self.callbacks = {};
    if (!__self.dom.button) {
        return this;
    }
    if (typeof args === 'string') {
        html = args;
    } else {
        $.each(args, function(i, val) {
            val.id = val.id || val.value;
            __self.callbacks[val.id] = val.callback;
            html +=
                '<button' + ' type="button"' + ' data-id="' + val.id + '"' + ' class="' + (_o.className + val.id) + ' btn ' + (val.css ? val.css : 'btn-default') + '"' + '>' + val.value + '</button>';
        });
    }
    if ($.trim(html) == "")
        __self.dom.button.hide();
    else
        __self.dom.button.html(html).show();
    return __self;
};
toast.prototype.time = function(second) {
    var __self = this,
        _o = __self.options;
    var cancel = _o.cancelValue,
        timer = __self._timer;
    timer && clearTimeout(timer);
    if (second) {
        __self._timer = setTimeout(function() {
            __self._click(cancel);
        }, 1000 * second);
    };
    return __self;
};
toast.prototype.zIndex = function () {
    var __self = this, _o = __self.options;
    // mod by xueyin  修改zindex,将对话框放到最上层
    var index = _o.zIndex + 2;
    __self.dom.wrap.find('.modal-content').css('zIndex', index);
    __self.dom.wrap.css('zIndex', index - 1);
    __self.dom.backdrop.css('zIndex', index - 2);
    _o.zIndex = index;
    return __self;
};
toast.prototype.show = function() {
    var __self = this,
        _o = __self.options;
    if (__self.destroyed) {
        return this;
    }
    __self.dom.wrap.show().addClass("fade in");
    __self.dom.backdrop.show().addClass("fade in");
    __self.open = true;
    return __self;
};
toast.prototype.close = function() {
    var __self = this,
        _o = __self.options;

    // add by xueyin: 关闭所注册过的事件
    $(document).off('click', '.modal-content');
    
    if (_o.backdrop == true) {
        $(document).off('click', '.modal');
    }

    if (!__self.destroyed && __self.open) {
        __self.dom.wrap.removeClass('in');
        setTimeout(function() {
            __self.dom.wrap.hide();
            __self.dom.backdrop.hide();
            __self.remove();
            __self.open = false;
        }, 200);
    }
    return this;
};
toast.prototype.remove = function() {
    var __self = this,
        _o = __self.options;
    if (__self.destroyed) {
        return g;
    }
    if (__self.current === this)
        __self.current = null;

    __self.dom.wrap.remove();
    __self.dom.backdrop.remove();
    for (var i in __self) {
        delete this[i];
    }
    return this;
};
toast.prototype._trigger = function(id) {
    var __self = this,
        _o = __self.options;
    var fn = __self.callbacks[id];
    return typeof fn !== 'function' || fn.call(__self) !== false ?
        __self.close() : __self;
};
toast.prototype._click = function(name) {
    var __self = this,
        _o = __self.options;
    var fn = __self.callbacks[name];
    return typeof fn !== 'function' || fn.call(__self, window) !== false ?
        __self.close() : __self;
};
toast.prototype.__dom = function($select, classCss) {
    var wrap = $select;
    var name, DOM = {
            wrap: $(wrap)
        },
        els = wrap[0].getElementsByTagName("*"),
        elsLen = els.length;
    for (var i = 0; i < elsLen; i++) {
        name = els[i].className;
        if (name.indexOf(classCss) > -1) {
            name = name.split(classCss)[1];
        }
        if (name) {
            DOM[name] = $(els[i], wrap)
        }
    }
    return DOM
};

toast._through = function() {
    var __self = this,
        _o = __self.options;
    var api = new toast(arguments[0]);
    return api;
};
toast.open = function(options, callback) {
    // mod by xueyin: 这个参数传递很奇怪,不全,修改之
    // return this._through({
    //     title: options.title,
    //     addClass: options.addClass,
    //     width: options.width,
    //     content: options.content
    // });
    return this._through(options);
}
toast.alert = function(content, callback) {
    var __self = this,
        _o = __self.options;
    return __self._through({
        title: '提示',
        addClass: 'alert',
        icon: 'alert',
        width: 440,
        lock: true,
        content: content,
        ok: callback || true
    });
};
toast.confirm = function(title, content, yes, no) {
    var __self = this,
        _o = __self.options;
    return __self._through({
        title: title || '确认',
        icon: 'confirm',
        addClass: 'confirm',
        lock: true,
        show: false,
        content: content,
        ok: function(here) {
            return yes.call(this, here);
        },
        cancel: function(here) {
            return no && no.call(this, here);
        }
    });
};
toast.load = function() {
    var __self = this,
        _o = __self.options;

    return __self._through({
        addClass: 'load',
        template: ''
    });
};
toast.tip = function(content, time) {
    var __self = this,
        _o = __self.options;
    return __self._through({
        icon: 'tip',
        addClass: 'tip',
        content: content,
        show: false,
        time: time || 2
    });
}

toast.close = function() {
    /*var __self = this,
        _o = __self.options;
    var _api = __self.top().me.get(window.frameElement.name);
    _api.close();*/
}
toast.defaults = {
    init: null,
    zIndex: 50,
    lock: true,
    content: 'Loading...',
    title: '',
    show: true,
    button: null,
    ok: null,
    cancel: null,
    okValue: '确定',
    cancelValue: '取消',
    addClass: 'fade in',
    className: 'modal-',
    template: '<div class="modal-dialog">' + '<div class="modal-content">' + '<div class="modal-header">' + '<button type="button" class="close" ><span aria-hidden="true">&times;</span></button>' + '<h4 class="modal-title"></h4>' + '</div>' + '<div class="modal-body">' + '</div>' + '<div class="modal-footer">' + '<div class="modal-button">' + '</div>' + '</div>' + '</div>' + '</div>'
}
toast.prototype.init.prototype = toast.prototype;
module.exports = toast;