/*!
* zeroModal.js
* http://git.oschina.net/cylansad/zeroModal
*
* Copyright 2016, Sad
*/
(function(obj) {
if (typeof module !== 'undefined' && typeof exports === 'object' && define.cmd) {
module.exports = obj;
} else if (typeof define === 'function' && define.amd) {
define(function() {
return obj;
});
} else {
window.zeroModal = obj;
}
}((function($, undefined) {
var zeroModal = {};
/**
* 默认的参数
* @type {Object}
*/
var defaultOpt = {
unique: '', // 模态框的唯一值,默认系统生成UUID,不建议自定义
title: '', //标题
content: '', //显示内容
url: false, //如果输入url,将会根据url返回的内容显示在弹出层中
iframe: false, //是否需要嵌入iframe,默认false,该参数需要和url一起使用
width: '500px', //宽度(px、pt、%)
height: '300px', //高度(px、pt、%)
transition: false, //是否需要出场动画,默认false
opacity: 0.2, // 遮罩层的透明度
overlay: true, //是否需要显示遮罩层,默认true
overlayClose: false, //是否允许点击遮罩层直接关闭弹出层,默认否
max: false, // 是否允许最大化
resize: false, // 是否允许调整大小
resizeAfterFn: undefined, // 调整大小后触发的事件
ok: false, //是否启用“ok”按钮,默认false
okTitle: '确定', //“ok”按钮的显示值,默认为“确定”
okFn: false, //点击“ok”按钮触发的事件
cancel: false, //是否启用“cancel”按钮,默认false
cancelTitle: '关闭', //“cancel”按钮的显示值,默认为“取消”
cancelFn: true, //点击“cancel”按钮触发的事件
buttonTopLine: true,
buttons: [], //自定义的按钮,使用了自定义按钮ok与cancel按钮将不会生效;格式:[{ className: 'zeromodal-btn zeromodal-btn-primary', name: '开始导出' }]
esc: false, //是否需要按esc键退出弹出层,默认false
//callbacks
onOpen: false, //弹出层弹开前事件
onLoad: false, //弹出层加载显示内容前事件
onComplete: false, //弹出层加载显示内容后事件
onCleanup: false, //弹出层关闭前事件
onClosed: false //弹出层关闭后事件
};
// 临时变量,是否已显示
var _tmp_variate_ishow = false;
// 临时变量,最后的zindex值
var _tmp_last_zindex = 1000;
// 临时变量,记录打开的模态框参数
var _tmp_zemoModal_opt = {};
/**
* 显示模态框
* @param {[type]} opt [description]
* @return {[type]} [description]
*/
zeroModal.show = function(opt) {
// 初始化
var params = _initParams(opt);
// 渲染
_render(params);
// 重新定位
_tmp_variate_ishow = true;
$(window).resize(function() {
if (_tmp_variate_ishow) {
_resize(params);
}
});
return params.unique;
};
/**
* 关闭指定模态框
* @param {[type]} unique [description]
* @return {[type]} [description]
*/
zeroModal.close = function(unique) {
//_close({ unique: unique }); old code 2022.3.25
_close(_tmp_zemoModal_opt[unique]);
_tmp_variate_ishow = false;
delete _tmp_zemoModal_opt[unique];
};
/**
* 关闭全部模态框
* @return {[type]} [description]
*/
zeroModal.closeAll = function() {
$('[role="zeromodal-loading"]').remove();
$('.zeromodal-overlay').remove();
$('.zeromodal-container').each(function() {
var jobj = $(this);
var unique = jobj.attr("zero-unique-container");
if (unique !== undefined && _tmp_zemoModal_opt[unique] !== undefined) {
var opt = _tmp_zemoModal_opt[unique];
if (typeof opt.onCleanup === 'function') {
opt.onCleanup();
}
jobj.remove();
if (typeof opt.onClosed === 'function') {
opt.onClosed();
}
delete _tmp_zemoModal_opt[unique];
}
});
_tmp_variate_ishow = false;
};
/**
* 显示等待框
* @return {[type]} [description]
*/
zeroModal.loading = function(type) {
var params = _initParams();
_buildOverlay(params);
_tmp_last_zindex++;
// 重新定位top值
var _top = $(window).scrollTop() + Math.ceil($(window).height() / 3);
if (type === undefined) {
type = 1;
}
if (type === 1 || type === 2) {
var loadClass = 'zeromodal-loading' + type;
$('body').append('
');
} else if (_isIn([3, 4, 5, 6], type)) {
var loader = {};
switch (type) {
case 3:
loader.className = 'pacman';
loader.containerCount = 5;
break;
case 4:
loader.className = 'line-scale-pulse-out';
loader.containerCount = 5;
break;
case 5:
loader.className = 'line-spin-fade-loader';
loader.containerCount = 8;
break;
case 6:
loader.className = 'square-spin';
loader.containerCount = 1;
break;
}
var _html = '';
for (var i = 0; i < loader.containerCount; i++) {
_html += '
';
}
_html += '
';
$('body').append(_html);
}
return params.unique;
};
zeroModal.progress = function(type, opt) {
var params = _initParams();
_buildOverlay(params);
_tmp_last_zindex++;
if (type === undefined) {
type = 3;
}
// 重新定位top值
var _top = $(window).scrollTop() + Math.ceil($(window).height() / 3);
var loader = {};
switch (type) {
case 3:
loader.className = 'pacman';
loader.containerCount = 5;
break;
case 4:
loader.className = 'line-scale-pulse-out';
loader.containerCount = 5;
break;
case 5:
loader.className = 'line-spin-fade-loader';
loader.containerCount = 8;
break;
case 6:
loader.className = 'square-spin';
loader.containerCount = 1;
break;
}
var _html = '';
for (var i = 0; i < loader.containerCount; i++) {
_html += '
';
}
_html += '
';
_html += '
';
_html += '';
$('body').append(_html);
var _loadCount = 0;
var _timer = setInterval(function() {
$.ajax({
url: opt.getProgressUrl + "?_=" + new Date().getTime(),
dataType: 'json',
type: 'get',
success: function(data) {
$('#progess_content_' + params.unique).html(data.progress);
if (data.progress === 'finish') {
clearInterval(_timer);
$.get(opt.clearProgressUrl);
zeroModal.close(params.unique);
}
}
});
_loadCount++;
if (_loadCount >= 500) {
clearInterval(_timer);
//zeroModal.close(params.unique);
}
}, 500);
return params.unique;
};
/**
* 显示进度条
* @param {[type]} speed [description]
* @return {[type]} [description]
*/
zeroModal.progress_old = function(speed) {
var params = _initParams();
_buildOverlay(params);
_tmp_last_zindex++;
var _top = $(window).scrollTop() + Math.ceil($(window).height() / 3);
var _left = $(window).width() / 2 - 200;
var _speed = 1;
if (speed !== undefined && speed > _speed && speed < 10) {
_speed = speed;
}
var _html = '';
_html += '
';
_html += '
0%
';
_html += '
';
_html += '
';
$('body').append(_html);
var _progress = 0;
var jProgressBar = $('[zeromodal-progress-bar="' + params.unique + '"]');
var jProgressVal = $('[zeromodal-progress-val="' + params.unique + '"]');
var _timer = setInterval(function() {
_progress += 1;
jProgressBar.css("width", _progress + "%");
jProgressVal.html((_progress > 9 ? _progress : ' ' + _progress) + '%');
if (_progress >= 100) {
jProgressVal.html('');
clearInterval(_timer);
}
}, _speed * 100);
return params.unique;
};
/**
* 显示alert框
* @param {[type]} content [description]
* @return {[type]} [description]
*/
zeroModal.alert = function(content) {
var _opt = {
iconClass: 'show-zero2 zeromodal-icon-info',
iconText: '!'
};
var params = {};
$.extend(params, _opt);
if (typeof content === 'object') {
$.extend(params, content);
} else {
params.content = content;
}
_buildAlertInfo(params);
};
/**
* 显示错误alert框
* @param {[type]} content [description]
* @return {[type]} [description]
*/
zeroModal.error = function(content) {
var params = {
iconDisplay: '
'
};
if (typeof content === 'object') {
$.extend(params, content);
} else {
params.content = content;
}
_buildAlertInfo(params);
};
/**
* 显示正确alert框
* @param {[type]} content [description]
* @return {[type]} [description]
*/
zeroModal.success = function(content) {
var params = {
iconDisplay: ''
};
if (typeof content === 'object') {
$.extend(params, content);
} else {
params.content = content;
}
_buildAlertInfo(params);
};
/**
* 显示confirm框
* @param {[type]} content [description]
* @param {[type]} okFn [description]
* @return {[type]} [description]
*/
zeroModal.confirm = function(content, okFn) {
var _opt = {
iconClass: 'show-zero2 zeromodal-icon-question',
iconText: '?',
};
var params = {};
$.extend(params, _opt);
if (typeof okFn === 'function') {
params.okFn = okFn;
}
params.cancel = true;
if (typeof content === 'object') {
$.extend(params, content);
} else {
params.content = content;
}
_buildAlertInfo(params);
};
// 初始化
function _initParams(opt) {
var params = {};
$.extend(params, defaultOpt);
$.extend(params, opt);
if (typeof params.unique === 'undefined' || params.unique === '') {
params.unique = _getUuid();
}
// 将参数记录到临时变量中
_tmp_zemoModal_opt[params.unique] = params;
return params;
}
// 渲染
function _render(opt) {
if (typeof opt.onOpen === 'function') { opt.onOpen(); }
_buildOverlay(opt);
_buildModal(opt);
}
// 关闭
function _close(opt) {
if (typeof opt === 'object') {
if (typeof opt.onCleanup === 'function') {
opt.onCleanup();
}
$('[zero-unique-overlay="' + opt.unique + '"]').remove();
$('[zero-unique-container="' + opt.unique + '"]').remove();
$('[zero-unique-loading="' + opt.unique + '"]').remove();
if (typeof opt.onClosed === 'function') {
opt.onClosed();
}
}
}
/**
* 构建遮罩层
* @param {[type]} opt [description]
* @return {[type]} [description]
*/
function _buildOverlay(opt) {
_tmp_last_zindex++;
var _width = $(document).width();
var _height = $(document).height();
// 是否需要显示遮罩层
if (opt.overlay) {
//var _overlay = $('');
var _overlay = $('');
$('body').append(_overlay);
// 是否允许点击遮罩层关闭modal
if (opt.overlayClose) {
_overlay.css('cursor', 'pointer');
_overlay.click(function() {
_close(opt);
});
} else {
_overlay.click(function() {
_shock($('[zero-unique-container="' + opt.unique + '"]'));
});
}
}
}
/**
* 构建模态框
* @param {[type]} opt [description]
* @return {[type]} [description]
*/
function _buildModal(opt) {
_tmp_last_zindex++;
//// 获取modal的宽度和高度
var _width = opt.width.replace('px', '');
var _height = opt.height.replace('px', '');
var _wwidth = $(window).width();
var _wheight = $(window).height();
// 如果width为%值,则计算具体的width值
if (_width.indexOf('%') !== -1) {
_width = (_wwidth * parseInt(_width.replace('%', '')) / 100);
}
// 如果height为%值,则计算具体的height值
if (_height.indexOf('%') !== -1) {
_height = (_wheight * parseInt(_height.replace('%', '')) / 100);
}
if (typeof _width === 'string') _width = parseInt(_width);
if (typeof _height === 'string') _height = parseInt(_height);
//// 获取modal的位置
var _left = (_wwidth - _width) / 2;
var _top = $(window).scrollTop() + Math.ceil(($(window).height() - _height) / 3);
//// 构建容器
var _container = $('');
//// 构建头部
var _headerHtml = '';
var _header = $(_headerHtml);
_container.append(_header);
$('body').append(_container);
// 绑定关闭事件
$('[zero-close-unique="' + opt.unique + '"]').click(function() {
_close(_tmp_zemoModal_opt[$(this).attr('zero-close-unique')]);
});
// 绑定最大化事件
$('[zero-max-unique="' + opt.unique + '"]').click(function() {
if ($(this).attr('max') !== '1') {
_resize(_tmp_zemoModal_opt[$(this).attr('zero-max-unique')], '90%', '85%');
$(this).attr('max', '1');
} else {
_resize(_tmp_zemoModal_opt[$(this).attr('zero-max-unique')]);
$(this).attr('max', '0');
}
_resizeBodyHeight(opt); // 重置body的高度
});
// 出场动画
if (opt.transition) {
$('.zeromodal-container').animate({ top: _top }, 300);
}
//// 构建内容区
var _body = $('');
_container.append(_body);
_resizeBodyHeight(opt); // 重置body的高度
// 构建拖拽区
if (opt.resize) {
_container.append('');
_drag(opt.unique, opt); // 绑定拖拽事件
}
if (typeof opt.onLoad === 'function') { opt.onLoad(); }
// 如果url为空,则直接显示content的内容
if (!opt.url) {
// 如果是div方式,则设置overflow-y属性,同时通过ajax获取内容
$('[zero-unique-body="' + opt.unique + '"]').addClass('zeromodal-overflow-y');
_body.html(opt.content);
if (typeof opt.onComplete === 'function') { opt.onComplete(); }
} else {
_body.html('');
// 如果iframe为true,则通过iframe的方式加载需要显示的内容
if (opt.iframe) {
var _iframe = $('');
_body.append(_iframe);
_iframe.load(function() {
$('.zeromodal-loading1').remove();
if (typeof opt.onComplete === 'function') { opt.onComplete(); }
});
} else {
// 如果是div方式,则设置overflow-y属性,同时通过ajax获取内容
$('[zero-unique-body="' + opt.unique + '"]').addClass('zeromodal-overflow-y');
$.ajax({
url: opt.url,
dataType: "html",
type: "get",
success: function(data) {
_body.append(data);
$('.zeromodal-loading1').remove();
if (typeof opt.onComplete === 'function') { opt.onComplete(); }
}
});
}
}
//// 构建尾部区
_buildFooter(opt, _container);
if (opt.esc) {
$('body').one("keyup", function(e) {
if (e.keyCode === 27) {
_close(opt);
}
});
}
}
/**
* 构建尾部
* @param {[type]} opt [description]
* @param {[type]} _container [description]
* @return {[type]} [description]
*/
function _buildFooter(opt, _container) {
if (opt.ok || opt.cancel || (opt.buttons !== undefined && opt.buttons.length > 0)) {
var _footer = '';
_container.append(_footer);
if (opt.buttons !== undefined && opt.buttons.length > 0) {
// 显示自定义的按钮
var _buttonHtml = '';
for (var i = 0; i < opt.buttons.length; i++) {
var b = opt.buttons[i];
_buttonHtml += '';
}
$('[zeromodal-btn-container="' + opt.unique + '"]').append(_buttonHtml);
} else {
// 显示默认提供的按钮
if (opt.ok) {
var _ok = $('');
$('[zeromodal-btn-container="' + opt.unique + '"]').append(_ok);
_ok.click(function() {
if (typeof opt.okFn === 'function') {
var _r = opt.okFn();
if (typeof _r === 'undefined' || _r) {
_close(opt);
}
} else {
_close(opt);
}
});
}
if (opt.cancel) {
var _cancel = $('');
$('[zeromodal-btn-container="' + opt.unique + '"]').append(_cancel);
_cancel.click(function() {
if (typeof opt.cancelFn === 'function') {
var _r = opt.cancelFn();
if (typeof _r === 'undefined' || _r) {
_close(opt);
}
} else {
_close(opt);
}
});
}
}
}
}
/**
* 构建提示框、确认框等内容
*/
function _buildAlertInfo(opt) {
// 初始化
if (typeof opt === 'undefined' || typeof opt.cancelTitle === 'undefined') {
opt.cancelTitle = '取消';
}
var params = _initParams(opt);
params.width = opt.width||'360px';
params.height = opt.height||'300px';
params.esc = true;
params.ok = opt.ok!=null?opt.ok:true; //true
params.buttonTopLine = false;
if (typeof _okFn !== 'undefined') {
params.okFn = _okFn;
}
if (typeof cancelFn !== 'undefined') {
params.cancelFn = cancelFn;
}
var _content = params.content || '';
var _contentDetail = params.contentDetail || '';
params.content = '';
// 渲染
_render(params);
// 渲染内容
var icon;
if (typeof params.iconDisplay !== 'undefined') {
icon = $(params.iconDisplay);
} else {
icon = $('' + params.iconText + '
');
}
var text = $('' + _content + '
' + _contentDetail + '
');
$('[zero-unique-body="' + params.unique + '"]').append(icon);
$('[zero-unique-body="' + params.unique + '"]').append(text);
$('[zero-unique-body="' + params.unique + '"]').removeClass('zeromodal-overflow-y');
// 给按钮添加focus
$('[zeromodal-btn-ok="' + params.unique + '"]').focus();
// 重新定位
_tmp_variate_ishow = true;
$(window).resize(function() {
if (_tmp_variate_ishow) {
_resize(params);
}
});
}
/**
* 重新设置大小及位置
* @param {[type]} opt [description]
* @return {[type]} [description]
*/
function _resize(opt, width, height) {
// 遮罩层
$('[zero-unique-overlay="' + opt.unique + '"]').css("width", $(document).width() + 'px').css("height", $(document).height() + 'px');
// 弹出层
var _wwidth = $(window).width();
var _wheight = $(window).height();
var _width = width !== undefined ? width.replace('px', '') : opt.width.replace('px', '');
var _height = height !== undefined ? height.replace('px', '') : opt.height.replace('px', '');
if (_width.indexOf('%') !== -1) {
_width = (_wwidth * parseInt(_width.replace('%', '')) / 100);
}
if (_height.indexOf('%') !== -1) {
_height = (_wheight * parseInt(_height.replace('%', '')) / 100);
}
if (typeof _width === 'string') _width = parseInt(_width);
if (typeof _height === 'string') _height = parseInt(_height);
var _left = (_wwidth - _width) / 2;
var _top = $(window).scrollTop() + Math.ceil(($(window).height() - _height) / 3);
$('[zero-unique-container="' + opt.unique + '"]').css('width', _width + 'px').css('height', _height + 'px').css('left', _left + 'px').css('top', _top + 'px');
}
/**
* 重新设置位置
* @param {[type]} opt [description]
* @return {[type]} [description]
*/
function _resizePostion(opt) {
var _wwidth = $(window).width();
var _wheight = $(window).height();
var _width = parseInt($('[zero-unique-container="' + opt.unique + '"]').css('width').replace('px', ''));
var _height = parseInt($('[zero-unique-container="' + opt.unique + '"]').css('height').replace('px', ''));
var _left = (_wwidth - _width) / 2;
var _top = $(window).scrollTop() + Math.ceil(($(window).height() - _height) / 3);
$('[zero-unique-container="' + opt.unique + '"]').css('left', _left + 'px').css('top', _top + 'px');
}
/**
* 重置设置body的高度
* @param {[type]} opt [description]
* @return {[type]} [description]
*/
function _resizeBodyHeight(opt) {
var headerHeight = $('[zeromodal-unqiue-header="' + opt.unique + '"]').height();
var buttonHeight = (opt.ok || opt.cancel || (opt.buttons !== undefined && opt.buttons.length > 0)) ? 60 : 0;
var height = $('[zero-unique-container="' + opt.unique + '"]').height() - headerHeight - 10 - buttonHeight;
$('[zero-unique-body="' + opt.unique + '"]').css('height', height);
}
/**
* 元素左右晃动
* @param {[type]} jobj [description]
* @return {[type]} [description]
*/
function _shock(jobj) {
if (jobj.length === 0) {
return;
}
var left = jobj.position().left;
for (var i = 0; i < 2; i++) {
jobj.animate({ left: left - 2 }, 50);
jobj.animate({ left: left }, 50);
jobj.animate({ left: left + 2 }, 50);
}
jobj.animate({ left: left }, 50);
}
/**
* 判断基本类型的值是否存在于数组中
* @param {[type]} arr [description]
* @param {[type]} r [description]
* @return {Boolean} [description]
*/
function _isIn(arr, r) {
for (var i = 0; i < arr.length; i++) {
if (arr[i] === r) {
return true;
}
}
return false;
}
/**
* 获取uuid
* @returns {string}
*/
function _getUuid() {
var s = [];
var hexDigits = "0123456789abcdef";
for (var i = 0; i < 36; i++) {
s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
}
s[14] = "4";
s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
s[8] = s[13] = s[18] = s[23] = "";
var uuid = s.join("");
return uuid;
}
/**
* 拖动改变大小(改变container、body)
* @param {[type]} unique [description]
* @param {[type]} opt [description]
* @return {[type]} [description]
*/
function _drag(unique, opt) {
var timer;
var mouse_x;
var mouse_y;
var moved = false;
var item = $('[zero-unique-sweep-tee="' + unique + '"]')[0];
var itemBody = $('[zero-unique-body="' + unique + '"]')[0];
document.onmousemove = function(e) {
if ($('[zero-unique-container="' + opt.unique + '"]').size() === 0) {
return;
}
mouse_x = e.pageX;
mouse_y = e.pageY;
if (timer !== undefined) {
moved = true;
}
};
item.onmousedown = function() {
// 禁用允许选中
document.onselectstart = function() {
return false;
};
// offsetTop以及offsetTop必须要放在mousedown里面,每次都要计算
var margin_top = mouse_y - item.offsetTop;
var margin_left = mouse_x - item.offsetLeft;
timer = setInterval(function() {
if (timer && moved) {
var to_x = mouse_x - margin_left;
var to_y = mouse_y - margin_top;
$('.zeromodal-container').css('width', to_x + 3 + 'px').css('height', to_y + 3 + 'px');
}
}, 5);
};
document.onmouseup = function() {
if ($('[zero-unique-container="' + opt.unique + '"]').size() === 0) {
return;
}
// 启用允许选中
document.onselectstart = function() {
return true;
};
clearInterval(timer);
timer = undefined;
moved = false;
// 重新定位
_resizePostion(opt);
// 重新设置body高度
_resizeBodyHeight(opt);
// 重置大小后触发的事件
if (opt.resizeAfterFn !== undefined && typeof opt.resizeAfterFn === 'function') {
opt.resizeAfterFn(opt);
}
};
}
return zeroModal;
}(jQuery))));