dialog.js
2.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
/*
* @Description: dialog
* @Time: 2015/11/18
* @author: chenglong.wang
*/
var $ = require('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;
}
exports.showDialog = function(data, callback, callbackForLeft) {
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();
}
$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();
};