let bs4pop = {};
(function(pop){
pop.dialog = function(opts){
opts = $.extend( true, {
id: '',//'#xxx',对话框ID,
title: '',
content: '', //可以是 string、element,$object
className: '', //自定义样式
width: 500,
height: '',
target: 'body',//在什么dom内创建dialog
closeBtn: true, //是否有关闭按钮
hideRemove: true,//关闭时移除dom
escape: true, //Esc 退出
autoFocus: true,//初始化时自动获得焦点
show: true,//是否在一开始时就显示对话框
backdrop: true,//模态背景 true: 显示模态,false: 没有模态,'static': 显示模态,单击模态不关闭对话框
btns: [], //footer按钮 [{label: 'Button', className: 'btn-primary',onClick(cb){}}]
drag: true,//是否启用拖拽
onShowStart:function(){},
onShowEnd:function(){},
onHideStart:function(){},
onHideEnd:function(){},
onClose:function(){},
onDragStart:function(){},
onDragEnd:function(){},
onDrag:function(){}
}, opts);
//得到 $el
let $el = opts.id !== '' ? $('#'+opts.id) : undefined;
if(!$el || !$el.length){
$el = $('
');
}
//得到 $body
let $body = $el.find('.modal-body');
//创建 header
if(opts.closeBtn || opts.title){
let $header = $('');
if(opts.title){
$header.append(''+opts.title+'
');
}
if(opts.closeBtn){
$header.append('');
}
$body.before($header);
}
//创建 footer
if(opts.btns.length){
let $footer = $('');
opts.btns.forEach(function(btn) {
btn = $.extend(true, {
label: 'Button',
className: 'btn-primary',
onClick:function(cb){},
}, btn);
let $btn = $('');
$btn.on('click', function(evt) {
//提供手动关闭对话框的方法,以便于对话框延迟关闭
evt.hide = function(){
$el.modal('hide');
};
//如果返回不是false就自动隐藏dialog
if(btn.onClick(evt) !== false){
$el.modal('hide');
}
});
$footer.append($btn);
});
$body.after($footer);
}
//创建内容
if(typeof opts.content === 'string'){
$body.html(opts.content);
}else if(typeof opts.content === 'object'){
$body.empty();
$(opts.content).contents().appendTo($body);//移动dom到 modal-body下
}
//设置属性
opts.id && $el.attr('id', opts.id);
opts.className && $el.addClass(opts.className);
opts.width && $el.find('.modal-dialog').width(opts.width).css('max-width', opts.width);
opts.height && $el.find('.modal-dialog').height(opts.height);
opts.isCenter && $el.find('.modal-dialog').addClass('modal-dialog-centered');//对话框屏幕居中
//绑定事件
opts.hideRemove && $el.on('hidden.bs.modal', function(){
$el.modal('dispose').remove();//移除dom
});
$el.on('show.bs.modal', opts.onShowStart);
$el.on('shown.bs.modal', opts.onShowEnd);
$el.on('hide.bs.modal', opts.onHideStart);
$el.on('hidden.bs.modal', opts.onHideEnd);
opts.closeBtn && $el.find('.close').on('click', function(){
return opts.onClose();
});
//拖拽
if(opts.drag){
$el.attr('data-drag', 'drag');
drag({
el: $el.find('.modal-content'),
handle: $el.find('.modal-header'),
onDragStart:function(){
$el.attr('data-drag', 'draged');
opts.onDragStart();
},
onDragEnd:function(){
opts.onDragEnd();
},
onDraging:function(){
opts.onDrag();
}
});
}
$(opts.target).append($el);
$el.modal({
backdrop: opts.backdrop, //boolean or the string 'static'.Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click.
keyboard: opts.escape, //Closes the modal when escape key is pressed
focus: opts.autoFocus, //Puts the focus on the modal when initialized.
show: opts.show //Shows the modal when initialized.
});
let result = {
$el: $el,
show:function(){
$el.modal('show');
},
hide:function(){
$el.modal('hide');
},
toggle:function(){
$el.modal('toggle');
},
destory:function(){
$el.modal('dispose');
}
};
return result;
};
pop.removeAll = function(){
$('[role="dialog"],.modal-backdrop').remove();
};
//拖拽
function drag(opts){
opts = $.extend(true, {
el: '',
handle: '',
onDragStart:function(){},
onDraging:function(){},
onDragEnd:function(){}
}, opts);
opts.el = $(opts.el);
opts.handle = $(opts.handle);
let $root = $(document);
let isFirstDrag = true;
$(opts.handle).on('touchstart mousedown', function(startEvt){
startEvt.preventDefault();
let pointEvt = startEvt;
if(startEvt.type === 'touchstart'){
pointEvt = startEvt.touches[0];
}
let startData = {
pageX: pointEvt.pageX,
pageY: pointEvt.pageY,
targetPageX: opts.el.offset().left, //当前dom的位置信息
targetPageY: opts.el.offset().top,
};
let move = function(moveEvt) {
let pointEvt = moveEvt;
if(moveEvt.type === 'touchmove'){
pointEvt = moveEvt.touches[0];
}
let moveData = {
pageX: pointEvt.pageX, //对于整个页面来说,包括了被卷去的body部分的长度
pageY: pointEvt.pageY,
moveX: pointEvt.pageX - startData.pageX,
moveY: pointEvt.pageY - startData.pageY,
};
if(isFirstDrag){
opts.onDragStart(startData);
isFirstDrag = false;
}else{
opts.onDraging();
}
opts.el.css({
left: startData.targetPageX + moveData.moveX,
top: startData.targetPageY + moveData.moveY,
});
};
let up = function(){
$root.off('touchmove mousemove', move);
$root.off('touchend mouseup', up);
opts.onDragEnd();
};
$root.on('touchmove mousemove', move).on('touchend mouseup', up);
});
}
})(bs4pop);
(function(pop){
//对话框
pop.alert = function(content, cb, opts){
let dialogOpts = $.extend(true, {
title: '对话框',
content: content,
hideRemove: true,
width: 500,
btns: [
{
label: '确定',
onClick:function(){
if(cb){
return cb();
}
}
}
]
}, opts);
return pop.dialog(dialogOpts);
};
//确认框
pop.confirm = function(content, cb, opts){
let dialogOpts = $.extend(true, {
title: '选择框',
content: content,
hideRemove: true,
btns: [
{
label: '确定',
onClick:function(){
if(cb){
return cb(true);
}
}
},
{
label: '取消',
className: 'btn-default',
onClick:function(){
if(cb){
return cb(false);
}
}
}
]
}, opts);
return this.dialog(dialogOpts);
};
//输入框
pop.prompt = function(content, value, cb, opts){
let $content = $('');
let $input = $content.find('input');
let dialogOpts = $.extend(true, {
title: '输入框',
content: $content,
hideRemove: true,
width: 500,
btns: [
{
label: '确定',
onClick:function(){
if(cb){
return cb(true, $input.val());
}
}
},
{
label: '取消',
className: 'btn-default',
onClick:function(){
if(cb){
return cb(false, $input.val());
}
}
}
]
}, opts);
return pop.dialog(dialogOpts);
};
// 消息框
pop.notice = function(content, opts){
opts = $.extend( true, {
type: 'primary', //primary, secondary, success, danger, warning, info, light, dark
position: 'topcenter', //topleft, topcenter, topright, bottomleft, bottomcenter, bottonright, center,
appendType: 'append', //append, prepend
closeBtn: false,
autoClose: 2000,
className: '',
}, opts);
// 得到容器 $container
let $container = $('#alert-container-'+ opts.position);
if(!$container.length){
$container = $('');
$('body').append($container);
}
// alert $el
let $el = $('' + content + '
');
// 关闭按钮
if(opts.autoClose){
$el
.append('')
.addClass('alert-dismissible');
}
//定时关闭
if(opts.autoClose){
let t = setTimeout(function(){
$el.alert('close');
}, opts.autoClose);
}
opts.appendType === 'append' ? $container.append($el) : $container.prepend($el);
setTimeout(function(){
$el.addClass('show');
}, 50);
return;
};
})(bs4pop);
if( typeof module === "object" && typeof module.exports === "object" ){
module.exports = bs4pop;
}