|
|
/*
|
|
|
* @Description: dialog
|
|
|
* @Time: 2015/11/18
|
|
|
* @author: chenglong.wang
|
|
|
*/
|
|
|
|
|
|
var $ = require('yoho-jquery'),
|
|
|
Handlebars = require('yoho-handlebars'),
|
|
|
Hammer = require('yoho-hammer');
|
|
|
|
|
|
var $dialogWrapper,
|
|
|
dialogTpl,
|
|
|
dialogTemplate;
|
|
|
|
|
|
function getInstance() {
|
|
|
if (dialogTpl === undefined) {
|
|
|
dialogTpl = '<div id="dialog-wrapper" class="dialog-wrapper">' +
|
|
|
'<div class="dialog-box">' +
|
|
|
'{{# hasHeader}}' +
|
|
|
'{{/ hasHeader}}' +
|
|
|
'<div class="dialog-content">{{dialogText}}</div>' +
|
|
|
'{{# hasFooter}}' +
|
|
|
'<div class="dialog-footer">' +
|
|
|
'{{# leftBtnText}}' +
|
|
|
'<span class="dialog-left-btn tap-hightlight">{{.}}</span>' +
|
|
|
'{{/ leftBtnText}}' +
|
|
|
'{{# rightBtnText}}' +
|
|
|
'<span class="dialog-right-btn tap-hightlight">{{.}}</span>' +
|
|
|
'{{/ rightBtnText}}' +
|
|
|
'</div>' +
|
|
|
'{{/ hasFooter}}' +
|
|
|
'</div>' +
|
|
|
'</div>';
|
|
|
|
|
|
dialogTemplate = Handlebars.compile(dialogTpl);
|
|
|
}
|
|
|
return dialogTemplate;
|
|
|
}
|
|
|
|
|
|
// fullWithBtn是供详情页获取限购码使用的特殊参数
|
|
|
exports.showDialog = function(data, callback, callbackForLeft, fullWithBtn) {
|
|
|
|
|
|
var dialogTemplate = getInstance(),
|
|
|
dialogStr = dialogTemplate(data),
|
|
|
$dialogBox,
|
|
|
defaultHideDuraton,
|
|
|
dialogWrapperHammer;
|
|
|
|
|
|
$('.dialog-wrapper').remove();
|
|
|
|
|
|
$('body').append($(dialogStr));
|
|
|
|
|
|
$dialogBox = $('.dialog-box');
|
|
|
$dialogWrapper = $('.dialog-wrapper');
|
|
|
|
|
|
|
|
|
dialogWrapperHammer = new Hammer(document.getElementById('dialog-wrapper'));
|
|
|
|
|
|
// 显示
|
|
|
if (data.fast) {
|
|
|
$dialogWrapper.css({
|
|
|
display: 'block'
|
|
|
});
|
|
|
} else {
|
|
|
$dialogWrapper.fadeIn();
|
|
|
}
|
|
|
|
|
|
if (fullWithBtn) {
|
|
|
$('.dialog-wrapper .dialog-footer > span').css('width', '100%');
|
|
|
$('.dialog-wrapper .dialog-content').css({
|
|
|
'padding-left': '1.85rem',
|
|
|
'padding-right': '1.85rem'
|
|
|
});
|
|
|
$dialogWrapper.css('z-index', '10');
|
|
|
}
|
|
|
|
|
|
$dialogBox.css({
|
|
|
top: '50%',
|
|
|
marginTop: -($dialogBox.height() / 2)
|
|
|
});
|
|
|
|
|
|
// 隐藏
|
|
|
if (data.autoHide) {
|
|
|
defaultHideDuraton = 1000;
|
|
|
if (data.autoHide > 1) {
|
|
|
defaultHideDuraton = data.autoHide;
|
|
|
}
|
|
|
setTimeout(function() {
|
|
|
$dialogWrapper.fadeOut();
|
|
|
}, defaultHideDuraton);
|
|
|
}
|
|
|
|
|
|
// 禁止在dialog上可以上下滚动
|
|
|
$dialogWrapper.on('touchmove', function() {
|
|
|
return false;
|
|
|
});
|
|
|
|
|
|
dialogWrapperHammer.on('tap', function(event) {
|
|
|
|
|
|
if ($(event.target).hasClass('dialog-left-btn')) {
|
|
|
if (typeof callbackForLeft === 'function') {
|
|
|
callbackForLeft();
|
|
|
}
|
|
|
$dialogWrapper.fadeOut();
|
|
|
} else if ($(event.target).hasClass('dialog-right-btn')) {
|
|
|
callback();
|
|
|
}
|
|
|
|
|
|
// 防止出现点透问题
|
|
|
event.preventDefault();
|
|
|
event.srcEvent.stopPropagation();
|
|
|
});
|
|
|
};
|
|
|
|
|
|
exports.hideDialog = function() {
|
|
|
$('.dialog-wrapper').remove();
|
|
|
}; |