/*
* Created with Sublime Text 2.
* license: http://www.lovewebgames.com/jsmodule/index.html
* User: 田想兵
* Date: 2015-03-16
* Time: 20:27:54
* Contact: 55342775@qq.com
*/
;
(function(root, factory) {
//amd
if (typeof define === 'function' && define.amd) {
define(['$'], factory);
} else if (typeof exports === 'object') { //umd
module.exports = factory();
} else {
root.Dialog = factory(window.Zepto || window.jQuery || $);
}
})(this, function($) {
$.fn.Dialog = function(settings) {
var list = [];
$(this).each(function() {
var dialog = new Dialog();
var options = $.extend({
trigger: $(this)
}, settings);
dialog.init(options);
list.push(dialog);
});
return list;
};
$.Dialog = function(settings) {
if (settings.type === "alert") {
var alert = new Dialog();
var html = '
' + settings.content + '
';
var action = '';
if (settings.button) {
if (typeof settings.button == 'boolean') {
settings.button = '确定';
};
action = '';
} else if (!settings.timer) {
settings.timer = 3000;
}
html += action;
var alertOptions = $.extend({
target: html,
animate: true,
show: true,
mask: true,
className: "ui-alert",
afterHide: function(c) {
this.dispose();
settings.callback && settings.callback();
}
}, settings);
alert.init(alertOptions);
if (settings.timer) {
setTimeout(function() {
alert.dispose();
settings.callback && settings.callback();
}, settings.timer);
}
alert.touch(alert.mask, function() {
alert.hide();
settings.callback && settings.callback();
});
}
if (settings.type === "confirm") {
var dialog = new Dialog();
var html = '' + settings.content + '
';
var action = '';
if (!settings.buttons) {
settings.buttons = [{
'yes': '确定'
}, {
'no': '取消'
}];
};
var btnstr = '';
for (var i = 0, l = settings.buttons.length; i < l; i++) {
var item = settings.buttons[i];
if (item.yes) {
btnstr += ' | ';
}
if (item.no) {
btnstr += ' | ';
}
if (item.close) {
btnstr += ' | ';
}
}
action = '';
html += action;
var options = $.extend({
target: html,
animate: true,
show: true,
fixed:true,
mask: true,
className: "ui-alert",
afterHide: function(c) {
this.dispose();
},
beforeShow: function(c) {
dialog.touch($('.ui-confirm-submit', c), function() {
settings.callback && settings.callback.call(dialog, 'yes', c);
});
dialog.touch($('.ui-confirm-no', c), function() {
settings.callback && settings.callback.call(dialog, 'no', c);
});
dialog.touch($('.ui-confirm-close', c), function() {
settings.callback && settings.callback.call(dialog, 'close', c);
});
}
}, settings);
dialog.init(options);
}
};
/*alert*/
$.alert = function(content, button, callback, timer, settings) {
var options = {};
var defaults = {
zIndex: 100,
type: 'alert'
};
if (typeof content == 'object') {
options = $.extend(defaults, content);
} else {
options = $.extend(defaults, {
content: content,
button: button,
timer: timer,
callback: callback
});
}
$.Dialog($.extend(options, settings));
}
/*
buttons :[{yes:"确定"},{no:'取消'},{close:'关闭'}]
*/
$.confirm = function(content, buttons, callback, settings) {
var options = {};
var defaults = {
zIndex: 100,
type: 'confirm'
};
if (typeof content == 'object') {
options = $.extend(defaults, content);
} else {
options = $.extend(defaults, {
content: content,
buttons: buttons,
callback: callback
});
}
$.Dialog($.extend(options, settings));
}
var Dialog = function() {
var rnd = Math.random().toString().replace('.', '');
this.id = 'dialog_' + rnd;
this.settings = {};
this.settings.closeTpl = $('x');
this.settings.titleTpl = $('');
this.timer = null;
this.showed = false;
this.mask = $();
}
Dialog.prototype = {
init: function(settings) {
var _this = this;
this.settings = $.extend({
fixed: false//是否固定位置,
}, this.settings, settings);
if (this.settings.mask) {
this.mask = $('');
$('body').append(this.mask);
}
$('body').append('');
this.dialogContainer = $('#' + this.id);
var zIndex = this.settings.zIndex || 10;
this.dialogContainer.css({
'zIndex': zIndex
});
if (this.settings.className) {
this.dialogContainer.addClass(this.settings.className);
};
this.mask.css({
'zIndex': zIndex - 1
});
if (this.settings.closeTpl) {
this.dialogContainer.append(this.settings.closeTpl);
}
if (this.settings.title) {
this.dialogContainer.append(this.settings.titleTpl);
this.settings.titleTpl.html(this.settings.title);
}
this.bindEvent();
if (this.settings.show) {
this.show();
}
},
touch: function(obj, fn) {
var move;
$(obj).on('click', click);
function click(e) {
return fn.call(this, e);
}
$(obj).on('touchmove', function(e) {
move = true;
}).on('touchend', function(e) {
e.preventDefault();
if (!move) {
var returnvalue = fn.call(this, e, 'touch');
if (!returnvalue) {
e.preventDefault();
e.stopPropagation();
}
}
move = false;
});
},
bindEvent: function() {
var _this = this;
if (this.settings.trigger) {
$(this.settings.trigger).click(function() {
_this.show()
});
_this.touch($(this.settings.trigger), function() {
_this.show()
});
};
$(this.dialogContainer).on('click', '.js-dialog-close', function() {
_this.hide();
return false;
})
// $(window).resize(function() {
// _this.setPosition();
// });
// $(window).scroll(function() {
// _this.setPosition();
// })
$(document).keydown(function(e) {
if (e.keyCode === 27 && _this.showed) {
_this.hide();
}
});
$(this.dialogContainer).on('hide', function() {
_this.hide();
})
},
dispose: function() {
this.dialogContainer.remove();
this.mask.remove();
this.timer && clearInterval(this.timer);
},
hide: function() {
var _this = this;
if (_this.settings.beforeHide) {
_this.settings.beforeHide.call(_this, _this.dialogContainer);
}
this.showed = false;
this.mask.hide();
this.timer && clearInterval(this.timer);
if (this.settings.animate) {
this.dialogContainer.removeClass('zoomIn').addClass("zoomOut");
setTimeout(function() {
_this.dialogContainer.hide();
if (typeof _this.settings.target === "object") {
$('body').append(_this.dialogContainer.hide());
}
if (_this.settings.afterHide) {
_this.settings.afterHide.call(_this, _this.dialogContainer);
}
}, 500);
} else {
this.dialogContainer.hide();
if (typeof this.settings.target === "object") {
$('body').append(this.dialogContainer)
}
if (this.settings.afterHide) {
this.settings.afterHide.call(this, this.dialogContainer);
}
}
},
show: function() {
if (typeof this.settings.target === "string") {
if (/^(\.|\#\w+)/gi.test(this.settings.target)) {
this.dailogContent = $(this.settings.target);
} else {
this.dailogContent = $('' + this.settings.target + '
')
}
} else {
this.dailogContent = this.settings.target;
}
this.mask.show();
this.dailogContent.show();
this.height = this.settings.height || 'auto' //this.dialogContainer.height();
this.width = this.settings.width || 'auto' //this.dialogContainer.width();
this.dialogContainer.append(this.dailogContent).show().css({
height: this.height,
width: this.width
});
if (this.settings.beforeShow) {
this.settings.beforeShow.call(this, this.dialogContainer);
}
this.showed = true;
$(this.settings.trigger).blur();
this.setPosition();
var _this = this;
// $.alert(this.settings.clientWidth)
this.timer && clearInterval(this.timer);
if (this.settings.fixed) {
this.timer = setInterval(function() {
_this.setPosition();
}, 1000);
}
if (this.settings.animate) {
this.dialogContainer.addClass('zoomIn').removeClass('zoomOut').addClass('animated');
}
},
setPosition: function() {
if (this.showed) {
var _this = this;
this.dialogContainer.show();
this.height = this.settings.height;
this.width = this.settings.width;
if (isNaN(this.height)) {
this.height = (this.dialogContainer.outerHeight && this.dialogContainer.outerHeight()) || this.dialogContainer.height();
}
if (isNaN(this.width)) {
this.width = (this.dialogContainer.outerWidth && this.dialogContainer.outerWidth()) || this.dialogContainer.width();
}
var clientHeight = this.settings.clientHeight || document.documentElement.clientHeight || document.body.clientHeight;
var clientWidth = this.settings.clientWidth || document.documentElement.clientWidth || document.body.clientWidth;
var ml = this.width / 2;
var mt = this.height / 2;
var left = clientWidth / 2 - ml;
var top = clientHeight / 2 - mt;
left = Math.floor(Math.max(0, left));
top = Math.floor(Math.max(0, top));
var position = 'absolute';
if(_this.settings.fixed){
position='fixed';
}
_this.dialogContainer.css({
position: position,
top: top,
left: left
});
}
}
}
return Dialog;
});