1 /**
  2  *
  3  * Dialog.js
  4  *
  5  * @fileOverView Dialog对话框
  6  * @author  <a href="mailto:chenzheng.carl@snda.com">CarlChen</a>
  7  * @date    2012-09-27
  8  */
  9 define(["exports","core","component/mask"], function(exports) {
 10 
 11     /**
 12      * 按钮样式
 13      * @type {Object}
 14      * @private
 15      */
 16     var _ButtonClass={
 17         button:'we_button',
 18         cancel:'we_button_gray'
 19     };
 20 
 21     /**
 22      * 对话框显示层次
 23      * @type {Object}
 24      * @private
 25      */
 26     var _DialogLevel={
 27         'low':10000,
 28         'middle':20000,
 29         'high':30000
 30     };
 31 
 32     var _Default_Skin_Prefix='we_theme_';
 33 
 34     /**
 35      * Dialog Html模板
 36      * @type {String}
 37      */
 38     var DefaultTemplateHtml = [
 39         '<div class="we_popup $skin$" attr="inner:root" style="display: none;z-index: $zIndex$">',
 40             '<div class="we_pop_container">',
 41                 '<a href="javascript:void(0);" class="we_close" attr="inner:close;click:close"></a>',
 42                 '<h2 class="we_title" attr="inner:title" style="display: none;"></h2>',
 43                 '<h2 class="we_subtitle" attr="inner:subTitle" style="display: none;"></h2>',
 44                 '<div class="we_pop_content" attr="inner:content"></div>',
 45                 '<div class="we_cell_bottom_tips" attr="inner:bottom" style="display: none;"></div>',
 46             '</div>',
 47          '</div>'
 48     ].join('');
 49 
 50     var _fixedPosition = $.browser.msie ? false: true;
 51 
 52     /**
 53      * 对话框
 54      * @lends $we.widget.Dialog
 55      */
 56     $we.widget.reg("Dialog", {
 57         /**
 58          * 对话框接口
 59          *
 60          * @memberOf $we.widget.Dialog-
 61          */
 62         interfaces:{
 63             /**
 64              * 打开对话框
 65              *
 66              * @memberOf $we.widget.Dialog#
 67              */
 68             open:function ()
 69             {
 70                 var config = this.config;
 71                 if (config['mask']) {
 72                     this.mask.show();
 73                 }
 74                 // 如果浏览器支持fixed 的话，使用 fixed
 75                 if (_fixedPosition) {
 76                     $(this.node.root).css("position", "fixed");
 77                 }
 78                 this.position();
 79                 $(window).bind('resize',this.position);
 80                 $(window).bind('scroll',this.position);
 81                 $(document).bind('keyup',this.esc);
 82             },
 83 
 84             /**
 85              * 重新定位对话框
 86              *
 87              * @memberOf $we.widget.Dialog#
 88              */
 89             position:function(){
 90                 var top = _fixedPosition ? 0 : $(window).scrollTop();
 91                 $(this.node['root']).css('top',$(window).height()/2-$(this.node['root']).height()/2 + top);
 92                 $(this.node['root']).css('left',$(window).width()/2-$(this.node['root']).width()/2);
 93                 $(this.node['root']).css('display','block');
 94             },
 95 
 96             /**
 97              * 渲染对话框内容
 98              *
 99              * @param content
100              * @memberOf $we.widget.Dialog#
101              */
102             renderContent:function(content){
103                 if(content){
104                     $(this.node['content']).empty();
105                     this.append(this.node['content'],content);
106                 }
107             },
108 
109             /**
110              * 渲染标题
111              *
112              * @param title
113              * @memberOf $we.widget.Dialog#
114              */
115             renderTitle:function(title){
116                 if(title){
117                     $(this.node['title']).empty();
118                     this.append(this.node['title'],title);
119                     $(this.node['title']).show();
120                 }
121             },
122 
123             /**
124              * 渲染副标题
125              *
126              * @param subTitle
127              * @memberOf $we.widget.Dialog#
128              */
129             renderSubTitle:function(subTitle){
130                 if(subTitle){
131                     $(this.node['subTitle']).empty();
132                     this.append(this.node['subTitle'],subTitle);
133                     $(this.node['subTitle']).show();
134                 }
135             },
136 
137             /**
138              * 渲染底部内容
139              * @param bottom
140              */
141             renderBottom:function(bottom){
142                 if(bottom){
143                     $(this.node['bottom']).empty();
144                     this.append(this.node['bottom'],bottom);
145                     $(this.node['bottom']).show();
146                 }else{
147                     $(this.node['bottom']).hide();
148                 }
149             },
150 
151             /**
152              * ESC
153              * @param event
154              */
155             esc:function(event){
156                 if(event.keyCode==27){
157                     this.close();
158                 }
159             },
160 
161             /**
162              * 关闭对话框
163              *
164              * @memberOf $we.widget.Dialog#
165              */
166             close:function(){
167                 $(document).unbind('keyup',this.esc);
168                 var config = this.config;
169                 if (config['mask']) {
170                     this.mask.hide();
171                 }
172                 $(this.node['root']).css('display','none');
173                 $(window).unbind('resize',this.position);
174                 $(window).unbind('scroll',this.position);
175             },
176             /**
177              * 销毁这个对话框的Dom，以后再也不能用了
178              */
179             remove:function(){
180                 $(document).unbind('keyup',this.esc);
181                 $(this.node['root']).remove();
182                 var config = this.config;
183                 if (config['mask']) {
184                     this.mask.remove();
185                 }
186             }
187         },
188 
189         /**
190          * 事件
191          *
192          * @memberOf $we.widget.Dialog-
193          */
194         events: {
195             /**
196              * 关闭事件
197              *
198              * @memberOf $we.widget.Dialog#
199              */
200             close: function(){
201                 this.close();
202             }
203         },
204         /**
205          *  Config配置说明 <br/>
206          *  width:      对话框宽度<br/>
207          *  mask:       是否需要遮盖层,默认为false<br/>
208          *  title:      对话框标题<br/>
209          *  subTitle:   副标题<br/>
210          *  close:      是否需要关闭按钮，默认为false<br/>
211          *  content:    对话框内容配置<br/>
212          *  level:      对话框显示等级
213          *  bottom:     底部内容
214          *
215          * @param config
216          * @constructs
217          */
218         init:function (config)
219         {
220             this.config = config;
221 
222             var level=config['level'] || 'low';
223             var zIndex=_DialogLevel[level];
224             var skin = $we.conf.THEME;
225             if(skin){
226                 skin=_Default_Skin_Prefix+skin;
227             }else{
228                 skin="";
229             }
230 
231             //渲染
232             this.append(document.body,DefaultTemplateHtml,{zIndex:zIndex,skin:skin});
233             this.mask=$we.widget.add('Mask',{zIndex:zIndex-1});
234 
235             if(config['width']){
236                 $(this.node['root']).css('width',config['width']);
237             }
238             $(this.node['close']).css('display',config['close']?'block':'none');
239             if(config['content']){
240                 this.renderContent(config['content']);
241             }
242             if(config['title']){
243                 this.renderTitle(config['title']);
244             }
245             if(config['subTitle']){
246                 this.renderSubTitle(config['subTitle']);
247             }
248             if(config['bottom']){
249                 this.renderBottom(config['bottom']);
250             }
251         },
252 
253         /**
254          * Run
255          */
256         run:function ()
257         {
258         }
259     });
260 
261     /**
262      * Notice Dialog Template
263      * @type {String}
264      */
265     var Notice_Dialog_Template = [
266         '<div class="$class_notice_content$" attr="inner:notice_content"></div>',
267         '<div class="$class_notice_button$" attr="inner:notice_button"></div>'
268     ].join('');
269 
270     /**
271      * Notice Dialog
272      */
273     $we.widget.reg("NoticeDialog",{
274         interfaces:{
275             /**
276              * 渲染按钮
277              *
278              * @param buttonConfig
279              */
280             renderNoticeButtons:function(buttonConfig){
281                 var t = this;
282                 if(buttonConfig){
283                     var buttonArea = $(this.node['notice_button']);
284 
285                     buttonArea.empty();
286 
287                     $.each(buttonConfig,function(i,bConfig){
288                         var buttonType = bConfig['type'] || 'button';
289                         var buttonClass = _ButtonClass[buttonType];
290                         var buttonEle=$('<a href="javascript:void(0);" class="'+buttonClass+'" ><span>'+bConfig['name']+'</span></a>');
291                         if(bConfig['click']){
292                             buttonEle.click(function(e){
293                                 bConfig['click'].call(this,e,t);
294                             });
295                         }
296                         buttonArea.append(buttonEle);
297                     });
298                 }
299             },
300 
301             /**
302              * 渲染Notice Content
303              */
304             renderNoticeContent:function(noticeContent){
305                 if(noticeContent){
306                     $(this.node['notice_content']).empty();
307                     this.append(this.node['notice_content'],noticeContent);
308                 }
309             }
310         },
311         /**
312          * 初始化
313          *
314          * notice_content:提示内容
315          * notice_button_config:按钮配置
316          * class_notice_content:提示内容的css
317          * class_notice_button:提示按钮的css
318          *
319          * @param config
320          */
321         init:function (config)
322         {
323             config = config || {};
324             config['mask']=true;
325             config['close']=true;
326 
327             //渲染父容器
328             this.extend('Dialog', [config]);
329 
330             //渲染Notice容器
331             this.append(this.node['content'],Notice_Dialog_Template,{
332                 class_notice_content:config['class_notice_content']||'',
333                 class_notice_button:config['class_notice_button']||'we_cell_submit_box'
334             });
335 
336             //渲染Notice内容
337             var noticeContent = config['notice_content'];
338             if(noticeContent){
339                 this.renderNoticeContent(noticeContent);
340             }
341 
342             //渲染按钮
343             var buttonConfig=config['notice_button_config'];
344             if(buttonConfig){
345                 this.renderNoticeButtons(buttonConfig);
346             }
347         }
348     });
349 
350     var _Form_Dialog_Template = [
351         '<div class="we_cell_form_box" attr="inner:form_content"></div>'
352     ].join('');
353 
354     /**
355      * Confirm
356      */
357     $we.widget.reg("Confirm", {
358         interfaces:{
359         },
360         init:function ()
361         {
362             var t = this;
363             this.extend('NoticeDialog', [{
364                 level:'high',
365                 class_notice_content:'we_dialog_box',
366                 title:'确定操作？'
367             }]);
368         }
369     });
370 
371     /**
372      * Alert
373      */
374     $we.widget.reg("Alert", {
375         interfaces:{
376         },
377         init:function ()
378         {
379             var t = this;
380             this.extend('NoticeDialog', [
381                 {
382                     level:'high',
383                     class_notice_content:'we_dialog_box',
384                     title:'提示',
385                     width:300,
386                     notice_button_config:[{name:'确认',click:function(){t.close();}}]
387                 }
388             ]);
389         }
390     });
391 
392 
393     /**
394      * Alert实例对象
395      *
396      * @type {*}
397      * @private
398      */
399     var _alert = null;
400     $we.comp.alert = function (content)
401     {
402         if(!_alert){
403             _alert = $we.widget.add('Alert');
404         }
405         _alert.open();
406         _alert.renderNoticeContent('<p class="we_dialog_notice">'+content+'</p>');
407     };
408 
409     /**
410      * Confirm实例对象
411      *
412      * @type {*}
413      * @private
414      */
415     var _confirm = null;
416     $we.comp.confirm = function (content,yes,no)
417     {
418         if(!_confirm){
419             _confirm = $we.widget.add('Confirm');
420         }
421         _confirm.open();
422         _confirm.renderNoticeContent('<p class="we_dialog_notice">'+content+'</p>');
423         _confirm.renderNoticeButtons(
424                 [
425                     {name:'确定',click:function(e,t){_confirm.close();yes()}},
426                     {name:'取消',type:'cancel',click:function(){_confirm.close();no()}}
427                 ]
428         );
429     };
430 
431     exports.Dialog = $we.widget.amd("Dialog");
432     exports.NoticeDialog = $we.widget.amd("NoticeDialog");
433 });