/**
|
* @fileoverview 进度条
|
* @author 剑平（明河）<minghe36@126.com>
|
**/
|
KISSY.add('gallery/form/1.3/uploader/plugins/progressBar/progressBar',function(S, Node, Base) {
|
var EMPTY = '',$ = Node.all,
|
PROGRESS_BAR = 'progressbar',ROLE = 'role',
|
ARIA_VALUEMIN = 'aria-valuemin',ARIA_VALUEMAX = 'aria-valuemax',ARIA_VALUENOW = 'aria-valuenow',
|
DATA_VALUE = 'data-value';
|
/**
|
* @name ProgressBar
|
* @class 进度条
|
* @constructor
|
* @extends Base
|
* @requires Node
|
*/
|
function ProgressBar(wrapper, config) {
|
var self = this;
|
config = S.merge({wrapper:$(wrapper)}, config);
|
//调用父类构造函数
|
ProgressBar.superclass.constructor.call(self, config);
|
}
|
S.mix(ProgressBar, /** @lends ProgressBar.prototype*/{
|
/**
|
* 模板
|
*/
|
tpl : {
|
DEFAULT:'<div class="ks-progress-bar-value" data-value="{value}"></div>'
|
},
|
/**
|
* 组件用到的样式
|
*/
|
cls : {
|
PROGRESS_BAR : 'ks-progress-bar',
|
VALUE : 'ks-progress-bar-value'
|
},
|
/**
|
* 组件支持的事件
|
*/
|
event : {
|
RENDER : 'render',
|
CHANGE : 'change',
|
SHOW : 'show',
|
HIDE : 'hide'
|
}
|
});
|
//继承于Base，属性getter和setter委托于Base处理
|
S.extend(ProgressBar, Base, /** @lends ProgressBar.prototype*/{
|
/**
|
* 运行
|
*/
|
render : function() {
|
var self = this,$wrapper = self.get('wrapper'),
|
width = self.get('width');
|
if(!$wrapper.length) return false;
|
//给容器添加ks-progress-bar样式名
|
$wrapper.addClass(ProgressBar.cls.PROGRESS_BAR)
|
.width(width);
|
self._addAttr();
|
!self.get('visible') && self.hide();
|
self.set('bar',self._create());
|
self.fire(ProgressBar.event.RENDER);
|
},
|
/**
|
* 显示进度条
|
*/
|
show : function(){
|
var self = this,$wrapper = self.get('wrapper');
|
$wrapper.fadeIn(self.get('duration'),function(){
|
self.set('visible',true);
|
self.fire(ProgressBar.event.SHOW,{visible : true});
|
});
|
},
|
/**
|
* 隐藏进度条
|
*/
|
hide : function(){
|
var self = this,$wrapper = self.get('wrapper');
|
$wrapper.fadeOut(self.get('duration'),function(){
|
self.set('visible',false);
|
self.fire(ProgressBar.event.HIDE,{visible : false});
|
});
|
},
|
/**
|
* 创建进度条
|
* @return {NodeList}
|
*/
|
_create : function(){
|
var self = this,
|
$wrapper = self.get('wrapper'),
|
value = self.get('value'),tpl = self.get('tpl'),
|
html = S.substitute(tpl, {value : value}) ;
|
$wrapper.html('');
|
return $(html).appendTo($wrapper);
|
|
},
|
/**
|
* 给进度条容器添加一些属性
|
* @return {Object} ProgressBar的实例
|
*/
|
_addAttr : function() {
|
var self = this,$wrapper = self.get('wrapper'),value = self.get('value');
|
$wrapper.attr(ROLE, PROGRESS_BAR);
|
$wrapper.attr(ARIA_VALUEMIN, 0);
|
$wrapper.attr(ARIA_VALUEMAX, 100);
|
$wrapper.attr(ARIA_VALUENOW, value);
|
return self;
|
}
|
}, {ATTRS : /** @lends ProgressBar*/{
|
/**
|
* 容器
|
*/
|
wrapper : {value : EMPTY},
|
/**
|
* 进度条元素
|
*/
|
bar : {value : EMPTY},
|
/**
|
* 进度条宽度
|
*/
|
width : { value:'auto' },
|
/**
|
* 当前进度
|
*/
|
value : {
|
value : 0,
|
setter : function(v) {
|
var self = this,$wrapper = self.get('wrapper'),$bar = self.get('bar'),
|
speed = self.get('speed'),
|
width;
|
if (v > 100) v = 100;
|
if (v < 0) v = 0;
|
//将百分比宽度换算成像素值
|
width = $wrapper.width() * (v / 100);
|
$bar.animate({'width':width + 'px'},speed,'none',function(){
|
$wrapper.attr(ARIA_VALUENOW,v);
|
$bar.attr(DATA_VALUE,v);
|
self.fire(ProgressBar.event.CHANGE,{value : v,width : width});
|
});
|
return v;
|
}
|
},
|
/**
|
* 控制进度条的可见性
|
*/
|
visible : { value:true },
|
/**
|
* 显隐动画的速度
|
*/
|
duration : {
|
value : 0.3
|
},
|
/**
|
* 模板
|
*/
|
tpl : {
|
value : ProgressBar.tpl.DEFAULT
|
},
|
speed : {value : 0.2}
|
}});
|
return ProgressBar;
|
}, {requires : ['node','base']});
|
