atm-command-generate
Version:
atm-command-generate
305 lines (261 loc) • 9.04 kB
JavaScript
// 来至原来的x-dialog，version 1.0.0
// 优化了部分代码以及提示icon，窗口参数没变
// 修改了节点className
/**
* @require popup.css
*/
var $ = require('../jquery.js'),
$doc = $(document),
$body = $(document.body),
$win = $(window),
prefix = 'x-popup',
ie6 = !window.XMLHttpRequest,
ie67 = ie6 || navigator.userAgent.indexOf('MSIE 7.0') > 0;
// POPUP HTML结构，table的结构是为了ie67能不加宽度自适应下
var POPUP_HTML = '<div class="' + prefix + '-main">'
+ '<a class="' + prefix + '-close" href="#" title="关闭窗口">×</a>'
+ (ie67 ? '<table class="' + prefix + '-table"><tr><td class="' + prefix + '-cell">' : '')
+ '<div class="' + prefix + '-title"></div>'
+ '<div class="' + prefix + '-content"></div>'
+ '<div class="' + prefix + '-footer"></div>'
+ (ie67 ? '</td></tr></table>' : '')
+'</div>';
var _INSTANCES = {};
function Popup() {
this._buildDOM();
this._bindEvents();
}
Popup.prototype = {
// 也用不上，去掉吧
// constructor: Popup,
init: function(config) {
var that = this,
_DOM = that.DOM;
_DOM.main.attr('id', config.id);
_DOM.main.css('border', config.border);
_DOM.content.css({'width': config.width, 'height': config.height});
_DOM.close[config.closeButton ? 'show' : 'hide']();
that.config = config;
that.title(config.title);
that.content(config.content);
that.button(config.button);
that._setMask(config.mask);
return that;
},
title: function(title) {
var $t = this.DOM.title;
title === false ? $t.empty().hide() : $t.html(title).show();
return this;
},
content: function(html) {
this.DOM.content.empty()[typeof html === 'object' ? 'append' : 'html'](html);
return this;
},
button: function(config) {
var that = this,
footer = that.DOM.footer,
config = config || [],
html = '';
that.config._callbacks = [];
footer[config.length ? 'show' : 'hide']();
if (typeof config === 'string') {
html = config;
} else {
$.each(config, function (i, val) {
that.config._callbacks[i] = val.callback || '';
var className = prefix + '-button' + (val.focus ? ' x-button-hilight' : '');
html += '<a href="javascript:;" class="' + className + '" data-index="'+ i +'">' + val.text + '</a>';
});
}
footer.html(html);
return that;
},
show: function() {
var _DOM = this.DOM;
_DOM.main.show();
this.config.mask && _DOM.mask && _DOM.mask.show();
this.position();
return this;
},
hide: function() {
var _DOM = this.DOM;
_DOM.main.hide();
_DOM.mask && _DOM.mask.fadeOut();
return this;
},
remove: function() {
var _DOM = this.DOM,
$main = _DOM.main;
$main.off().remove();
_DOM.mask && _DOM.mask.remove();
delete _INSTANCES[this.config.id];
},
position: function() {
var align = this.config.align,
align = $.isFunction(align) ? align.call(this) : align;
if ($.isArray(align) && align.length) {
this.setPosition(align[0], align[1]);
} else {
this.center();
}
return this;
},
setPosition: function(x, y) {
this.DOM.main.css({'left': x, 'top': y});
return this;
},
center: function() {
center(this.DOM.main);
return this;
},
_setMask: function(b) {
var _DOM = this.DOM;
// 需要遮罩的时候再创建遮罩
if (b) {
if (!_DOM.mask) {
_DOM.mask = createMask(prefix + '-mask');
}
_DOM.mask.show();
}
if (!b) {
_DOM.mask && _DOM.mask.fadeOut(); // ?????.hide()不起作用
}
},
_buildDOM: function() {
var _DOM = {};
_DOM['main'] = $(POPUP_HTML).appendTo($body);
$.each(['close', 'title', 'content', 'footer'], function(k, v) {
_DOM[v] = $('.' + prefix + '-' + v, _DOM['main']);
});
this.DOM = _DOM;
return this;
},
_bindEvents: function() {
var that = this,
$main = that.DOM.main;
$main.on('click', '.' + prefix + '-close', function(e) {
e.preventDefault();
that.hide();
});
$main.on('click', '.' + prefix + '-button', function(e) {
e.preventDefault();
var index = this.getAttribute('data-index');
that._trigger(index);
});
},
_trigger: function(i) {
var fn = this.config._callbacks[i];
return typeof fn !== 'function' || fn.call(this) !== false ? this.hide() : this;
}
};
var timer = null;
$win.on('resize', function() {
timer && clearTimeout(timer);
timer = setTimeout(function() {
$.each(_INSTANCES, function(k, v) {
v.config.fixed && v.position();
});
});
});
// ------------------------------------------------------------
// Helpers 遮罩和居中
function createMask(className) {
var className = className || '',
mask = $('<div class="' + className + '" />').appendTo($body);
mask.css({
'position': ie6 ? 'absolute' : 'fixed',
'width': '100%',
'height': ie6 ? $doc.outerHeight(true) : '100%',
'top': 0,
'left': 0,
'z-index': 5555,
'background-color': '#000',
'opacity': 0.2,
'filter': 'alpha(opacity: 20)'
});
return mask;
}
// 居中元素
function center(elem) {
var $elem = $(elem).eq(0).css('position', 'absolute'),
pw = $elem.outerWidth(),
ph = $elem.outerHeight(),
dl = $doc.scrollLeft(),
dt = $doc.scrollTop(),
ww = $win.width(),
wh = $win.height(),
left = (ww - pw) / 2 + dl,
top = (wh - ph) * 382 / 1000 + dt;// 黄金比例
$elem.css({
'left': Math.max(parseInt(left), dl) + 'px',
'top': Math.max(parseInt(top), dt) + 'px'
});
return $elem;
}
// 默认配置
var DEFAULTS = {
id: prefix + '-default', // 默认id，不设置也会自动生成一个
title: false, // 设置title，为false则不显示
mask: true, // 是否显示遮罩
closeButton: true, // 是否需要关闭按钮
content: '', // 设置显示内容，可以为一个jquery对象
//width: 'auto', // 设置内容部分宽度
//height: 'auto', // 设置内容部分高度
align: [], // 设置popop位置，留空则居中
//border: 0, // 设置边框，可以覆盖掉默认css中的设置: 1px solid #aeaeae
fixed: false, // 有需要自己开启
button: [] // 按钮配置，例：[{'text': '确 定', 'focus': true, 'callback': function() {}}, {'text': '取 消'}]
};
module.exports = {
// 缓存已创建的窗口
instances: _INSTANCES,
show: function(config) {
var _config = (typeof config === 'string' ? {'content': config} : config), // 可以传入一个字符串
config = $.extend({}, DEFAULTS, _config), // 跟默认配置合并
id = config.id || (config.id = 'P' + $.now()), // 没有id，则生成id
popup = this.getInstance(id) || (_INSTANCES[id] = new Popup()); // 查找或者新建
popup.init(config).show();
return popup;
},
alert: function(msg, type, dalay) {
var type = (typeof type === 'undefined' ? true : type),
className = type ? ' x-alert-ok' : ' x-alert-warn',
delay = dalay || 4000,
html = '<div class="x-alert-box' + className + '">'
+ '<div class="x-alert-icon"></div>'
+ '<div class="x-alert-inner">' + msg + '</div>'
+ '</div>';
this._timer && clearTimeout(this._timer);
var alert = this.show({
id: "x-dialog-alert",
closeButton: false,
border: 0,
content: html,
mask: true
});
this._timer = setTimeout(function() {
alert.hide();
}, delay);
return alert;
},
confirm: function(title, msg, ok_fn, config) {
var settings = {
id: "x-confirmBox",
title: title,
content: msg,
mask: true,
fixed: true,
button: [{'text': '确 定', 'focus': true, 'callback': ok_fn}, {'text': '取 消'}]
};
if (config && (typeof config === 'object')) {
settings = $.extend(settings, config);
}
var confirmBox = this.show(settings);
return confirmBox;
},
getInstance: function(id) {
return _INSTANCES[id];
},
showMask: createMask,
center: center
};