Showing
1 changed file
with
117 additions
and
0 deletions
public/js/plugin/dialog.js
0 → 100644
1 | +/* | ||
2 | + * @Description: dialog | ||
3 | + * @Time: 2015/11/18 | ||
4 | + * @author: chenglong.wang | ||
5 | + */ | ||
6 | + | ||
7 | +var $ = require('yoho-jquery'), | ||
8 | + Handlebars = require('yoho-handlebars'), | ||
9 | + Hammer = require('yoho-hammer'); | ||
10 | + | ||
11 | +var $dialogWrapper, | ||
12 | + dialogTpl, | ||
13 | + dialogTemplate; | ||
14 | + | ||
15 | +function getInstance() { | ||
16 | + if (dialogTpl === undefined) { | ||
17 | + dialogTpl = '<div id="dialog-wrapper" class="dialog-wrapper">' + | ||
18 | + '<div class="dialog-box">' + | ||
19 | + '{{# hasHeader}}' + | ||
20 | + '{{/ hasHeader}}' + | ||
21 | + '<div class="dialog-content">{{dialogText}}</div>' + | ||
22 | + '{{# hasFooter}}' + | ||
23 | + '<div class="dialog-footer">' + | ||
24 | + '{{# leftBtnText}}' + | ||
25 | + '<span class="dialog-left-btn tap-hightlight">{{.}}</span>' + | ||
26 | + '{{/ leftBtnText}}' + | ||
27 | + '{{# rightBtnText}}' + | ||
28 | + '<span class="dialog-right-btn tap-hightlight">{{.}}</span>' + | ||
29 | + '{{/ rightBtnText}}' + | ||
30 | + '</div>' + | ||
31 | + '{{/ hasFooter}}' + | ||
32 | + '</div>' + | ||
33 | + '</div>'; | ||
34 | + | ||
35 | + dialogTemplate = Handlebars.compile(dialogTpl); | ||
36 | + } | ||
37 | + return dialogTemplate; | ||
38 | +} | ||
39 | + | ||
40 | +// fullWithBtn是供详情页获取限购码使用的特殊参数 | ||
41 | +exports.showDialog = function(data, callback, callbackForLeft, fullWithBtn) { | ||
42 | + | ||
43 | + var dialogStr = dialogTemplate(data), | ||
44 | + $dialogBox, | ||
45 | + defaultHideDuraton, | ||
46 | + dialogWrapperHammer; | ||
47 | + | ||
48 | + dialogTemplate = getInstance(); | ||
49 | + $('.dialog-wrapper').remove(); | ||
50 | + | ||
51 | + $('body').append($(dialogStr)); | ||
52 | + | ||
53 | + $dialogBox = $('.dialog-box'); | ||
54 | + $dialogWrapper = $('.dialog-wrapper'); | ||
55 | + | ||
56 | + | ||
57 | + dialogWrapperHammer = new Hammer(document.getElementById('dialog-wrapper')); | ||
58 | + | ||
59 | + // 显示 | ||
60 | + if (data.fast) { | ||
61 | + $dialogWrapper.css({ | ||
62 | + display: 'block' | ||
63 | + }); | ||
64 | + } else { | ||
65 | + $dialogWrapper.fadeIn(); | ||
66 | + } | ||
67 | + | ||
68 | + if (fullWithBtn) { | ||
69 | + $('.dialog-wrapper .dialog-footer > span').css('width', '100%'); | ||
70 | + $('.dialog-wrapper .dialog-content').css({ | ||
71 | + 'padding-left': '1.85rem', | ||
72 | + 'padding-right': '1.85rem' | ||
73 | + }); | ||
74 | + $dialogWrapper.css('z-index', '10'); | ||
75 | + } | ||
76 | + | ||
77 | + $dialogBox.css({ | ||
78 | + top: '50%', | ||
79 | + marginTop: -($dialogBox.height() / 2) | ||
80 | + }); | ||
81 | + | ||
82 | + // 隐藏 | ||
83 | + if (data.autoHide) { | ||
84 | + defaultHideDuraton = 1000; | ||
85 | + if (data.autoHide > 1) { | ||
86 | + defaultHideDuraton = data.autoHide; | ||
87 | + } | ||
88 | + setTimeout(function() { | ||
89 | + $dialogWrapper.fadeOut(); | ||
90 | + }, defaultHideDuraton); | ||
91 | + } | ||
92 | + | ||
93 | + // 禁止在dialog上可以上下滚动 | ||
94 | + $dialogWrapper.on('touchmove', function() { | ||
95 | + return false; | ||
96 | + }); | ||
97 | + | ||
98 | + dialogWrapperHammer.on('tap', function(event) { | ||
99 | + | ||
100 | + if ($(event.target).hasClass('dialog-left-btn')) { | ||
101 | + if (typeof callbackForLeft === 'function') { | ||
102 | + callbackForLeft(); | ||
103 | + } | ||
104 | + $dialogWrapper.fadeOut(); | ||
105 | + } else if ($(event.target).hasClass('dialog-right-btn')) { | ||
106 | + callback; | ||
107 | + } | ||
108 | + | ||
109 | + // 防止出现点透问题 | ||
110 | + event.preventDefault(); | ||
111 | + event.srcEvent.stopPropagation(); | ||
112 | + }); | ||
113 | +}; | ||
114 | + | ||
115 | +exports.hideDialog = function() { | ||
116 | + $('.dialog-wrapper').remove(); | ||
117 | +}; |
-
Please register or login to post a comment