/**
|
* @fileoverview flash上传按钮
|
* @author: 紫英(橘子)<daxingplay@gmail.com>, 剑平（明河）<minghe36@126.com>
|
**/
|
KISSY.add('gallery/form/1.3/uploader/button/swfButton', function (S, Node, Base, SwfUploader) {
|
var EMPTY = '', $ = Node.all,
|
SWF_WRAPPER_ID_PREVFIX = 'swf-uploader-wrapper-';
|
|
/**
|
* @name SwfButton
|
* @class flash上传按钮，基于龙藏的AJBrige。只有使用flash上传方式时候才会实例化这个类
|
* @constructor
|
* @extends Base
|
*/
|
function SwfButton(target, config) {
|
var self = this;
|
config = S.merge({target:$(target)}, config);
|
//调用父类构造函数
|
SwfButton.superclass.constructor.call(self, config);
|
}
|
|
S.mix(SwfButton, /** @lends SwfButton*/{
|
/**
|
* 支持的事件
|
*/
|
event:{
|
//组件运行后事件
|
RENDER : 'render',
|
//选择文件后事件
|
CHANGE:'change',
|
//鼠标在swf中滑过事件
|
MOUSE_OVER:'mouseOver',
|
//鼠标在swf中按下事件
|
MOUSE_DOWN:'mouseDown',
|
//鼠标在swf中弹起事件
|
MOUSE_UP:'mouseUp',
|
//鼠标在swf中移开事件
|
MOUSE_OUT:'mouseOut',
|
//鼠标单击事件
|
CLICK:'click'
|
}
|
});
|
S.extend(SwfButton, Base, /** @lends SwfButton.prototype*/{
|
/**
|
* 运行，会实例化AJBrige的Uploader，存储为swfUploader属性
|
*/
|
render:function () {
|
var self = this,
|
$target = self.get('target'),
|
swfUploader,
|
multiple = self.get('multiple'),
|
fileFilters = self.get('fileFilters') ;
|
$target.css('position', 'relative');
|
self.set('swfWrapper',self._createSwfWrapper());
|
self._setFlashSizeConfig();
|
swfUploader = self._initSwfUploader();
|
//SWF 内容准备就绪
|
swfUploader.on('contentReady', function(ev){
|
//多选和文件过滤控制
|
swfUploader.browse(multiple, fileFilters);
|
//监听鼠标事件
|
self._bindBtnEvent();
|
//监听选择文件后事件
|
swfUploader.on('fileSelect', self._changeHandler, self);
|
self._setDisabled(self.get('disabled'));
|
self.fire(SwfButton.event.RENDER);
|
}, self);
|
},
|
/**
|
* 创建flash容器
|
*/
|
_createSwfWrapper:function () {
|
var self = this,
|
target = self.get('target'),
|
tpl = self.get('tpl'),
|
//容器id
|
id = self.get('swfWrapperId') != EMPTY && self.get('swfWrapperId') || SWF_WRAPPER_ID_PREVFIX + S.guid(),
|
//容器html
|
html = S.substitute(tpl, {id:id});
|
self.set('swfWrapperId', id);
|
return $(html).appendTo(target);
|
},
|
/**
|
* 初始化ajbridge的uploader
|
* @return {SwfUploader}
|
*/
|
_initSwfUploader:function () {
|
var self = this, flash = self.get('flash'),
|
id = self.get('swfWrapperId'),
|
swfUploader;
|
S.mix(flash,{id:'swfUploader'+S.guid()});
|
try {
|
//实例化AJBridge.Uploader
|
swfUploader = new SwfUploader(id, flash);
|
self.set('swfUploader', swfUploader);
|
} catch (err) {
|
|
}
|
return swfUploader;
|
},
|
/**
|
* 监听swf的各个鼠标事件
|
* @return {SwfButton}
|
*/
|
_bindBtnEvent:function () {
|
var self = this, event = SwfButton.event,
|
swfUploader = self.get('swfUploader');
|
if (!swfUploader) return false;
|
S.each(event, function (ev) {
|
swfUploader.on(ev, function (e) {
|
self.fire(ev);
|
}, self);
|
});
|
return self;
|
},
|
/**
|
* 设置flash配置参数
|
*/
|
_setFlashSizeConfig:function () {
|
var self = this, flash = self.get('flash'),
|
target = self.get('target'),
|
size = self.get('size');
|
if(!S.isEmptyObject(size)){
|
S.mix(flash.attrs, size);
|
}else{
|
S.mix(flash.attrs, {
|
width:target.innerWidth(),
|
height:target.innerHeight()
|
});
|
}
|
self.set('flash', flash);
|
},
|
/**
|
* flash中选择完文件后触发的事件
|
*/
|
_changeHandler:function (ev) {
|
var self = this, files = ev.fileList;
|
self.fire(SwfButton.event.CHANGE, {files:files});
|
},
|
/**
|
* 设置上传组件的禁用
|
* @param {Boolean} disabled 是否禁用
|
* @return {Boolean}
|
*/
|
_setDisabled : function(disabled){
|
var self = this,
|
swfUploader = self.get('swfUploader'),
|
cls = self.get('cls'),disabledCls = cls.disabled,
|
$target = self.get('target'),
|
$swfWrapper = self.get('swfWrapper');
|
if(!swfUploader || !S.isBoolean(disabled)) return false;
|
if(!disabled){
|
$target.removeClass(disabledCls);
|
//显示swf容器
|
$swfWrapper.css('top',0);
|
//TODO:之所以不使用更简单的unlock()方法，因为这个方法应用无效，有可能是bug
|
//swfUploader.unlock();
|
}else{
|
$target.addClass(disabledCls);
|
//隐藏swf容器
|
$swfWrapper.css('top','-3000px');
|
//swfUploader.lock();
|
}
|
return disabled;
|
},
|
/**
|
* 显示按钮
|
*/
|
show:function(){
|
var self = this,
|
$target = self.get('target');
|
$target.show();
|
},
|
/**
|
* 隐藏按钮
|
*/
|
hide:function(){
|
var self = this,
|
$target = self.get('target');
|
$target.hide();
|
}
|
}, {ATTRS:/** @lends SwfButton.prototype*/{
|
/**
|
* 按钮目标元素
|
* @type KISSY.Node
|
* @default ""
|
*/
|
target:{value:EMPTY},
|
/**
|
* swf容器
|
* @type KISSY.Node
|
* @default ""
|
*/
|
swfWrapper : {value : EMPTY},
|
/**
|
* swf容器的id，如果不指定将使用随机id
|
* @type Number
|
* @default ""
|
*/
|
swfWrapperId:{value:EMPTY},
|
/**
|
* flash容器模板
|
* @type String
|
*/
|
tpl:{
|
value:'<div id="{id}" class="uploader-button-swf" style="position: absolute;top:0;left:0;z-index:2000;"></div>'
|
},
|
/**
|
* 是否开启多选支持
|
* @type Boolean
|
* @default true
|
*/
|
multiple:{
|
value:true,
|
setter:function (v) {
|
var self = this, swfUploader = self.get('swfUploader');
|
if (swfUploader) {
|
swfUploader.multifile(v);
|
}
|
return v;
|
}
|
},
|
/**
|
* 文件过滤，格式类似[{desc:"JPG,JPEG,PNG,GIF,BMP",ext:"*.jpg;*.jpeg;*.png;*.gif;*.bmp"}]
|
* @type Array
|
* @default []
|
*/
|
fileFilters:{
|
value:[],
|
setter:function (v) {
|
var self = this, swfUploader = self.get('swfUploader');
|
if(S.isObject(v)) v = [v];
|
if (swfUploader && S.isArray(v)) {
|
S.later(function(){
|
swfUploader.filter(v);
|
},800);
|
}
|
return v;
|
}
|
},
|
/**
|
* 禁用按钮
|
* @type Boolean
|
* @default false
|
*/
|
disabled : {
|
value : false,
|
setter : function(v){
|
var self = this, swfUploader = self.get('swfUploader');
|
if (swfUploader) {
|
self._setDisabled(v);
|
}
|
return v;
|
}
|
},
|
/**
|
* 样式
|
* @type Object
|
* @default { disabled:'uploader-button-disabled' }
|
*/
|
cls : {
|
value : { disabled:'uploader-button-disabled' }
|
},
|
/**
|
* 强制设置flash的尺寸，比如{width:100,height:100}，默认为自适应按钮容器尺寸
|
* @type Object
|
* @default {}
|
*/
|
size : {value:{} },
|
/**
|
* flash配置，对于swf文件配路径配置非常关键，使用默认cdn上的路径就好
|
* @type Object
|
* @default { src:'http://a.tbcdn.cn/s/kissy/gallery/form/1.3/uploader/plugins/ajbridge/uploader.swf', id:'swfUploader', params:{ bgcolor:"#fff", wmode:"transparent" }, attrs:{ }, hand:true, btn:true }
|
}
|
*/
|
flash:{
|
value:{
|
src:'/Content/js/kissy/gallery/form/1.3/uploader/plugins/ajbridge/uploader.swf', //mod by liuhuisheng
|
id:'swfUploader',
|
params:{
|
bgcolor:"#fff",
|
wmode:"transparent"
|
},
|
//属性
|
attrs:{ },
|
//手型
|
hand:true,
|
//启用按钮模式,激发鼠标事件
|
btn:true
|
}
|
},
|
/**
|
* ajbridge的uploader的实例
|
* @type SwfUploader
|
* @default ""
|
*/
|
swfUploader:{value:EMPTY}
|
}});
|
return SwfButton;
|
}, {requires:['node', 'base', '../plugins/ajbridge/uploader']});
|
