1 /**
  2  *
  3  * 流程的各类组件，包括：
  4  * 流程开始组件
  5  * 流程结束组件
  6  * 流程进度条组件
  7  * 流程条状进度条组件
  8  * 流程提示组件
  9  *
 10  * @fileOverView 流程的各类组件
 11  * @author  <a href="mailto:zhang.gd@foxmail.com">Zhang Guangda</a>
 12  * @date    2012-10-25
 13  */
 14 define(["core"], function() {
 15 	return {
 16 		start: $we.widget.amd("process.start"),
 17 		end: $we.widget.amd("process.end"),
 18 		progress: $we.widget.amd("process.progress"),
 19 		stripeprogress: $we.widget.amd("process.stripeprogress"),
 20 		tips: {
 21 			small: $we.widget.amd("process.tips.small"),
 22 			big: $we.widget.amd("process.tips.big")
 23 		}
 24 	};
 25 });
 26 
 27 /**
 28  * 流程开始组件
 29  */	
 30 ;(function() {
 31 	/**
 32 	 * 业务流开始组件
 33 	 * @lends $we.widget.process.start
 34 	 * 
 35 	 */
 36 	var _html = '<div class="we_pop_content" attr="root"></div>';
 37 
 38 	$we.widget.reg("process.start", {
 39 		/**
 40 		 * @constructs
 41 		 * @param  {dom}   el     父节点
 42 		 * @param  {mixed} params 参数
 43 		 */
 44 		init: function(el, config) {
 45 			this.el = el;
 46 			this.config = config || {};
 47 
 48 			this.config.type = $we.utils.setValue(this.config.type, "alert");
 49 		},
 50 		/**
 51 		 * interfaces
 52 		 * @memberOf $we.widget.process.start#
 53 		 */
 54 		interfaces: {
 55 			/**
 56 			 * 渲染
 57 			 * @memberOf $we.widget.process.start#
 58 			 */
 59 			render: function() {
 60 				this.append(this.el, _html);
 61 				this.extend("process.tips.big", [this.node.root, this.config]);
 62 			}
 63 		},
 64 		/**
 65 		 * process
 66 		 * @memberOf $we.widget.process.start#
 67 		 */
 68 		process: {
 69 			/**
 70 			 * start
 71 			 * @memberOf $we.widget.process.start#
 72 			 */
 73 			start: function() { this.render(); },
 74 			/**
 75 			 * end
 76 			 * @memberOf $we.widget.process.start#
 77 			 */
 78 			end: function() { $(this.el).empty(); },
 79 			/**
 80 			 * checkSucc
 81 			 * @memberOf $we.widget.process.start#
 82 			 */
 83 			checkSucc: function() { this.notify("goNext"); }
 84 		}
 85 	});
 86 })();
 87 
 88 /**
 89  * 流程结束组件
 90  */	
 91 (function() {
 92 	/**
 93 	 * 业务流结束组件
 94 	 * @lends $we.widget.process.end
 95 	 * 
 96 	 */
 97 	var _html = '<div class="we_pop_content" attr="root"></div>';
 98 
 99 	$we.widget.reg("process.end", {
100 		/**
101 		 * @constructs
102 		 * @param  {dom}   el     父节点
103 		 * @param  {mixed} params 参数
104 		 */
105 		init: function(el, config) {
106 			this.el = el;
107 			this.config = config || {};
108 
109 			this.config.success = $we.utils.setValue(this.config.success, $we.emptyFunction);
110 			this.config.type = $we.utils.setValue(this.config.type, "success");
111 		},
112 		/**
113 		 * interfaces
114 		 * @memberOf $we.widget.process.end#
115 		 */
116 		interfaces: {
117 			/**
118 			 * 渲染
119 			 * @memberOf $we.widget.process.end#
120 			 */
121 			render: function() {
122 				this.append(this.el, _html);
123 				this.extend("process.tips.big", [this.node.root, this.config]);
124 			}
125 		},
126 		/**
127 		 * process
128 		 * @memberOf $we.widget.process.end#
129 		 */
130 		process: {
131 			/**
132 			 * start
133 			 * @memberOf $we.widget.process.end#
134 			 */
135 			start: function() { this.render(); },
136 			/**
137 			 * end
138 			 * @memberOf $we.widget.process.end#
139 			 */
140 			end: function() { this.config.success(); $(this.el).empty(); },
141 			/**
142 			 * checkSucc
143 			 * @memberOf $we.widget.process.end#
144 			 */
145 			checkSucc: function() { this.notify("close"); }
146 		}
147 	});
148 })();
149 
150 /**
151  * 流程进度条
152  */
153 (function() {
154 	var _html = [
155 			'<div attr="inner:root" class="we_cell_process">',
156 				'<ol attr="inner:process" class="we_process"></ol>',
157 			'</div>'
158 		].join(""),
159 		_itemHtml = [
160 			'<li attr="root"><div attr="item" class="we_process_info">',
161 				'<span>$index$</span>',
162 				'<p attr="name">$name$</p>',
163 			'</div></li>'
164 		].join(""),
165 		FULL_PERCENTAGE = 100,
166 		_leftMargin = 15, // percentage
167 		_itemWidth = 30; // 30px
168 
169 	$we.widget.reg("process.progress.item", {
170 		/**
171 		 * @constructs
172 		 * @param  {dom}   el     父节点
173 		 * @param  {mixed} params 参数
174 		 */
175 		init: function(el, config) {
176 			this.append(el, _itemHtml, {
177 				index: config.index,
178 				name: config.name
179 			});
180 			var l, n, m=$(this.node.name);
181 			if (config.index == 1) {
182 				$(this.node.item).css("left", _leftMargin+"%");
183 			} else if (config.index == config.total) {
184 				$(this.node.item).css("left", (FULL_PERCENTAGE - _leftMargin)+"%");
185 			} else {
186 				l =  _leftMargin + ((FULL_PERCENTAGE - 2*_leftMargin) / (config.total - 1)) * (config.index - 1);
187 				$(this.node.item).css("left", l + "%")
188 			}
189 			$(this.node.item).css("margin-left", -_itemWidth/2 + "px");
190 			setTimeout(function() {
191 				var w = m.width();
192 				n = (w - _itemWidth) / 2;
193 				m.css("position", "absolute").css("left", -n + "px").css("white-space", "nowrap");
194 			}, 0);
195 			
196 		},
197 		interfaces: {
198 			/**
199 			 * 设置当前进度
200 			 */
201 			setCur: function() {
202 				$(this.node.root).addClass("we_cur");
203 			},
204 			/**
205 			 * 去除当前进度
206 			 */
207 			removeCur: function() {
208 				$(this.node.root).removeClass("we_cur");
209 			}
210 		}
211 	});
212 
213 	/**
214 	 * 业务流进度条组件
215 	 * @lends $we.widget.process.progress
216 	 * 
217 	 */
218 	$we.widget.reg("process.progress", {
219 		/**
220 		 * Constructor
221 		 * @constructs
222 		 * @param  {Element} el        父节点
223 		 * @param  {Array} processes 流程配置
224 		 * @param  {Integer} cur       当前流程
225 		 */
226 		init: function(el, processes, cur) {
227 			if (typeof el == "string")
228 				el = $("#"+el)[0];
229 			this.el = el;
230 
231 			this.cur = cur || 0;
232 
233 			if (!$.isArray(processes)) return;
234 			this.processes = processes;
235 			this.steps = this.processes.length;
236 			this.items = [];
237 		},
238 		/**
239 		 * interfaces
240 		 * @memberOf $we.widget.process.progress#
241 		 */
242 		interfaces: {
243 			/**
244 			 * 设置当前进度
245 			 * @memberOf $we.widget.process.progress#
246 			 * @param {Integer} cur 当前进度
247 			 */
248 			setCur: function(cur) {
249 				// 去除之前的cur
250 				if (!this.items[this.cur]) return;
251 				this.items[this.cur].removeCur();
252 				this.cur = cur || 0;
253 				this.items[this.cur].setCur();
254 			},
255 			/**
256 			 * 渲染进度条
257 			 * @memberOf $we.widget.process.progress#
258 			 */
259 			render: function() {
260 				if (this.steps < 2 || ($we.process && $we.process.getData("independent"))) return;
261 
262 				if (this.node.root) $(this.node.root).remove();
263 				this.append(this.el, _html);
264 				if (this.steps == 2) {
265 					$(this.node.process).width("55%");
266 				} else {
267 					$(this.node.process).width("80%");
268 				}
269 
270 				var containerWidth = $(this.node.process).width();
271 
272 				this.items = [];
273 				for (var i = 0; i < this.steps; ++i) {
274 					this.items.push($we.widget.add("process.progress.item", this.node.process, {
275 						index: i+1,
276 						name:  this.processes[i],
277 						total: this.steps,
278 						width: containerWidth
279 					}));
280 				}
281 
282 				this.items[this.cur].setCur();
283 			},
284 			/**
285 			 * 隐藏进度条
286 			 * @memberOf $we.widget.process.progress#
287 			 */
288 			hide: function() {
289 				if (this.node.root)
290 					$(this.node.root).remove();
291 			}
292 		}
293 	});
294 })();
295 
296 /**
297  * 条形流程进度条
298  */
299 (function() {
300 	/**
301 	 * 业务流条状进度条组件
302 	 * @lends $we.widget.process.stripeprogress
303 	 * 
304 	 */
305 	var _stripeHtml = [
306 		'<div attr="inner:root" class="we_cell_flow_steps $num_class$">',
307 			'<ol class="we_flow_steps">$flow_str$</ol>',
308 		'</div>'
309 	].join("");
310 
311 	$we.widget.reg("process.stripeprogress", {
312 		/**
313 		 * Constructor
314 		 * @constructs
315 		 * @param  {Element} el        父节点
316 		 * @param  {Array} processes 流程配置
317 		 * @param  {Integer} cur       当前流程
318 		 */
319 		init: function(el, processes, cur) {
320 			if (typeof el == "string")
321 				el = $("#"+el)[0];
322 			this.el = el;
323 
324 			this.data = {};
325 
326 			this.cur = cur || 0;
327 
328 			if (!$.isArray(processes)) return;
329 			this.processes = processes;
330 			this.steps = this.processes.length;
331 			this.data.num_class = this.steps > 2 ? "we_cell_flow_steps_" + this.steps : "";
332 
333 			this.setProcesses();
334 		},
335 		/**
336 		 * interfaces
337 		 * @memberOf $we.widget.process.stripeprogress#
338 		 */
339 		interfaces: {
340 			/**
341 			 * 渲染进度条
342 			 * @memberOf $we.widget.process.stripeprogress#
343 			 * @param {Integer} cur 当前进度
344 			 */
345 			setCur: function(cur) {
346 				this.cur = cur || 0;
347 				this.setProcesses();
348 				this.render();
349 			},
350 			/**
351 			 * 重设流程
352 			 * @memberOf $we.widget.process.stripeprogress#
353 			 */
354 			setProcesses: function() {
355 				
356 				this.data.flow_str = "";
357 
358 				var cur, next, first, last;
359 				for (var i = 0; i < this.steps; ++i) {
360 					cur = next = first = last = "";
361 					if (i == 0)
362 						first = ' class="we_first"';
363 					if (i == this.steps - 1)
364 						last = ' class="we_last"';
365 					if (i == this.cur)
366 						cur = ' class="we_cur"';
367 					if (i == this.cur + 1)
368 						next = ' class="we_next"';
369 
370 					this.data.flow_str += '<li'+cur+next+'><span'+first+last+'>'+this.processes[i]+'</span></li>';
371 				}
372 
373 			},
374 			/**
375 			 * 渲染流程进度条
376 			 * @memberOf $we.widget.process.stripeprogress#
377 			 */
378 			render: function() {
379 				if (this.steps < 2 || $we.process.getData("independent")) return;
380 
381 				if (this.node.root)
382 					$(this.node.root).remove();
383 
384 				this.append(this.el, _stripeHtml, this.data);
385 			},
386 			/**
387 			 * 隐藏进度条
388 			 * @memberOf $we.widget.process.stripeprogress#
389 			 */
390 			hide: function() {
391 				if (this.node.root)
392 					$(this.node.root).remove();
393 			}
394 		}
395 	});
396 })();
397 
398 /**
399  * tips组件
400  */
401 (function() {
402 	var _bigHtml = [
403 		'<p attr="tipsRoot" class="$type_class$">',
404 			'<strong attr="tipsTitle" class="we_cell_title">$title$</strong>',
405 			'$content$',
406 		'</p>'
407 		].join(""),
408 		_smallHtml = [
409 		'<p class="$type_class$ $mt$" attr="tipsRoot">',
410 			'<i class="$icon_class$"></i>$content$',
411 		'</p>'
412 		].join(""),
413 		_bigClass = {
414 			error: "we_cell_error_tips_b",
415 			alert: "we_cell_alert_tips_b",
416 			success: "we_cell_suc_tips_b"
417 		},
418 		_smallClass = {
419 			error: "we_cell_error_tips",
420 			alert: "we_cell_alert_tips",
421 			success: "we_cell_suc_tips"
422 		},
423 		_smallIcon = {
424 			error: "we_icon_error",
425 			alert: "we_icon_alarm",
426 			success: "we_icon_suc"
427 		},
428 		_defaultTitle = '温馨提示:',
429 		_defaultType = 'alert';
430 
431 	/**
432 	 * 流程提示-接口
433 	 * @lends $we.widget.process.tips.main
434 	 */
435 	$we.widget.reg("process.tips.main", {
436 		/**
437 		 * interfaces
438 		 * @memberOf $we.widget.process.tips.main#
439 		 */
440 		interfaces: {
441 			/**
442 			 * 展示
443 			 * @memberOf $we.widget.process.tips.main#
444 			 */
445 			show: function() {
446 				$(this.node.tipsRoot).show();
447 			},
448 			/**
449 			 * 隐藏
450 			 * @memberOf $we.widget.process.tips.main#
451 			 */
452 			hide: function() {
453 				$(this.node.tipsRoot).hide();
454 			},
455 			/**
456 			 * 删除
457 			 * @memberOf $we.widget.process.tips.main#
458 			 */
459 			remove: function() {
460 				$(this.node.tipsRoot).remove();
461 			},
462 			/**
463 			 * 设置内容 TODO
464 			 * @memberOf $we.widget.process.tips.main#
465 			 */
466 			setContent: function() {}
467 		}
468 	});
469 	
470 	/**
471 	 * 流程提示-大
472 	 * @lends $we.widget.process.tips.big
473 	 */
474 	$we.widget.reg("process.tips.big", {
475 		/**
476 		 * @constructs
477 		 * @param  {dom}   el     父节点
478 		 * @param  {mixed} params 参数
479 		 */
480 		init: function(el, config) {
481 			config = config || {};
482 			if (typeof config.title == "function") config.title = config.title();
483 			if (typeof config.content == "function") config.content = config.content();
484 			config.type = $we.utils.setValue(config.type, _defaultType);
485 			config.title = $we.utils.setValue(config.title, _defaultTitle);
486 			config.content = $we.utils.setValue(config.content, "");
487 
488 			this.append(el, _bigHtml, {
489 				type_class: _bigClass[config.type],
490 				title: config.title,
491 				content: config.content
492 			});
493 
494 			if (!config.content) {
495 				$(this.node.tipsTitle).css("padding-top", "9px");
496 			}
497 
498 			this.extend("process.tips.main");
499 		}
500 	});
501 
502 	/**
503 	 * 流程提示-小
504 	 * @lends $we.widget.process.tips.small
505 	 */
506 	$we.widget.reg("process.tips.small", {
507 		/**
508 		 * @constructs
509 		 * @param  {dom}   el     父节点
510 		 * @param  {mixed} params 参数
511 		 */
512 		init: function(el, config) {
513 			config = config || {};
514 			if (typeof config.title == "function") config.title = config.title();
515 			if (typeof config.content == "function") config.content = config.content();
516 			config.type = $we.utils.setValue(config.type, _defaultType);
517 			config.icon = $we.utils.setValue(config.icon, _defaultType);
518 			config.content = $we.utils.setValue(config.content, "");
519 			var mt = config.noMt ? "" : "we_mt15";
520 
521 			this.append(el, _smallHtml, {
522 				type_class: _smallClass[config.type],
523 				icon_class: _smallIcon[config.icon],
524 				content: config.content,
525 				mt: mt
526 			});
527 
528 			this.extend("process.tips.main");
529 		}
530 	});
531 })();