/**
* @description 支持单个图片选择控件，仅支持【本地选择图片】，不支持【从服务端选择图片】
* @description 本控件不支持上传，通过属性file和方法getFile,将已选择的文件返回给使用者
* */
Rsd.define('Rsd.form.Image', {
extend: 'Rsd.control.Component',
xtype: 'image',
ctrlTagName: 'div',
ctrlCls: 'x-control-image',
dataIndex:'',
/**
* 图地址,与value的区别是：src不做任何转换，直接将值设在img元素的src属性上， value 值可通过formatString进行格式化后设置到img元素的src属性上
* */
src: '',
/**
* @description 是否是只读模式：在只读模式下不能用于上传图片。
* */
readOnly:true,
/**
* @description image/jpeg, image/x-png, image/gif
* */
accept:'images/*',
/**
*
*/
border:false,
/**
* 控件的背景图片，false 或者 none 表示不设置背景图片
*/
backgroundImage:false,
/**
* @description 允许看大图
* */
zoomView:true,
/**
* value is :server or local
*/
from:'server',
/**
* 仅from == 'server'，时有效
*/
selectorServices:null,
/**
* @description 图片剪裁属性
* 取消注释 代码编辑会报错
*/
//clip,
/**
* 自定义选择事件
*/
onselect:null,
/**
* 自定义删除事件
*/
ondelete:null,
/**
* @description 选择的文件发生改变
*/
onchange:null,
/**
* 点击查看时发生
*/
onview:null,
/**
*
*/
file:null,
/*
* */
constructor: function Image(config) {
this.apply(config||{});
},
/**
* */
initComponentEx: function initComponentEx() {
this.callParent();
var _img = document.createElement('img');
this.image = _img;
if(this.border)
{
var _border = document.createElement('div');
_border.classList.add('x-border');
_border.classList.add('x-control-image');
this.ctrl.element.appendChild(_border);
_border.appendChild(_img);
}
else
{
this.ctrl.element.appendChild(_img);
}
var me = this;
me.image.style.maxWidth = '100%';
me.image.style.maxHeight = '100%';
if(this.zoomView==undefined || this.zoomView)
{
this.image.onclick = function (evt) {
if(me.onview)
{
me.funApplyByIOC(me.onview,[me,evt]);
return;
}
//console.log(me.src);
if(Rsd.isEmpty(me.src)|| me.src == '#')
{
return;
}
var _view = Rsd.create('Rsd.widget.ImageViewer',{title:me.title});
_view.showDialog(this.parent).loadData([{src:me.src,text: me.label.content}]);
}
}
this.image.onload = function () {
me.image.style.display='inline-block';
me.closeLoading();
};
this.image.onerror = function () {
me.image.style.display='inline-block';
me.closeLoading();
};
if(!this.readOnly)
{
var _close = document.createElement('span');
this.btnClose = _close;
_close.appendChild(document.createTextNode('X'));
_close.classList.add('x-close');
_close.onclick = function (e) {
me.setSrc('#');
e.stopPropagation();
me.funApplyByIOC(me.ondelete,[me,e]);
}
this.ctrl.element.appendChild(_close);
var _add = document.createElement('div');
this.btnAdd = _add;
_add.classList.add('x-add');
_add.style.top = this.ctrl.element.style.top;
_add.style.right = this.ctrl.element.style.right;
_add.style.bottom = this.ctrl.element.style.bottom;
_add.style.left = this.ctrl.element.style.left;
_add.style.width = this.ctrl.element.width;
_add.style.height = this.ctrl.element.height;
//自定义select 实现
if(this.onselect)
{
_add.onclick = function(evt){
me.funApplyByIOC(me.onselect,[me,evt]);
}
}
else
{
if(this.from == 'local')
{
var _file = document.createElement('input');
_file.type = 'file';
_file.style.width = "99%";
_file.style.height = "99%";
_file.style.opacity = 0;
_file.accept = this.accept||'images/*';
_file.multiple = false;
_file.onchange =function (e) {
if(_file.files.length > 0)
{
var reader = new FileReader();
reader.onload = function(evt) {
var src = evt.target.result;
me.setSrc(src);
}
reader.readAsDataURL(_file.files[0]);
//设置文件对象
me.file = _file.files[0];
me.funApplyByIOC(me.onchange,[me,e]);
}
}
_add.appendChild(_file);
}
else
{
_add.onclick = function(evt){
var _d = Rsd.create('Rsd.tool.ImageSelector', {
title:'图片选择',
mode:'dialog',
closeBtn:true,
draggable:true,
readOnly: false,
parent: me,
services:me.selectorServices,
//选择图片后回调处理
callback: function(item){
me.setValue(item["Url"]);
} });
_d.showDialog().load();
}
}
}
this.ctrl.element.appendChild(_add);
}
if(this.backgroundImage == false || this.backgroundImage =='none')
{
this.ctrl.element.classList.add('x-control-image-none-bg');
}
else
{
this.ctrl.element.style.backgroundImage = this.backgroundImage ;
}
},
/*
*
* */
onAfterInit: function onAfterInit() {
this.callParent();
//必须在此设置src
this.setSrc(this.src)
if (this.clip) {
this.image.style.clip = this.clip;
}
},
/*
* */
setSrc: function (src) {
var me = this;
me.src = (Rsd.isEmpty(src)? "#" :src);
if (me.image) {
me.image.style.display = 'none';
me.showLoading('加载中...',null);
setTimeout(function () {
me.image.src = me.src;
},20);
}
if(Rsd.isEmpty(me.src)|| me.src=='#')
{
this.image.style.display = 'none';
if(this.btnClose)
{
this.btnClose.style.display = 'none';
}
if(this.btnAdd)
{
this.btnAdd.style.display = 'inline-block';
}
}
else {
this.image.style.display = 'inline-block';
if (this.btnClose) {
this.btnClose.style.display = 'inline-block';
}
if (this.btnAdd) {
this.btnAdd.style.display = 'none';
}
}
},
/*
* */
getSrc: function () {
return this.src;
},
/*
* */
setValue:function setValue(value) {
this.value = value;
var me = this;
if(Rsd.isEmpty(value)|| value == 'null')
{
this.setSrc('#');
return this;
}
function formatTemplateString(str)
{ //debugger;
var html = "";
var arr = str.split('#');
var _c_str = null;
var _n_str = null;
for(var i=0 ;i< arr.length;i++)
{
_c_str = arr[i];
if(_c_str == undefined)
{
continue;
}
if( _c_str.startWith('=') && _c_str.endWith('='))
{
if(_c_str.replaceByRegExp("=","")==me.dataIndex)
{
html += me.value ;
}
else
{
if(Rsd.app.hasOwnProperty(_c_str.replaceByRegExp("=","")))
{
html += Rsd.app[_c_str.replaceByRegExp("=","")] ;
}
}
continue;
}
html += _c_str;
if(i < (arr.length -1) )
{
_n_str = arr[i+1];
if(_n_str == undefined || !( _n_str.startWith('=') && _n_str.endWith('=')))
{
html +='#';
}
}
}
return html;
}
if((this.value && this.value.startWith('http://')) || Rsd.isEmpty(this.formatString))
{
this.setSrc(this.value);
}
else
{
var _src = formatTemplateString(this.formatString||'');
this.setSrc(_src);
}
return this;
},
/*
* */
getValue:function getValue() {
return this.value;
},
/**
* 单文件上传 ，所以只有一个文件返回
*/
getFile: function () {
return this.file;
},
/*
*
* */
makeControl:function makeControl(config,row)
{
function formatTemplateString(str,row)
{ //debugger;
var html = "";
var arr = str.split('#');
var _c_str = null;
var _n_str = null;
for(var i=0 ;i< arr.length;i++)
{
_c_str = arr[i];
if(_c_str == undefined)
{
continue;
}
if( _c_str.startWith('=') && _c_str.endWith('='))
{
if(row.hasOwnProperty(_c_str.replaceByRegExp("=","")))
{
html += row[_c_str.replaceByRegExp("=","")] ;
}
else
{
if(Rsd.app.hasOwnProperty(_c_str.replaceByRegExp("=","")))
{
html += Rsd.app[_c_str.replaceByRegExp("=","")] ;
}
}
continue;
}
html += _c_str;
if(i < (arr.length -1) )
{
_n_str = arr[i+1];
if(_n_str == undefined || !( _n_str.startWith('=') && _n_str.endWith('=')))
{
html +='#';
}
}
}
return html;
}
var me = this;
me.timer = (me.timer||10) + 0;
if(me.timer > 3000)
{
me.timer=10;
}
var _config = config ||{};
//var _editable = _config.editable;
var _value = row[_config.dataIndex||_config.name];
var _h = _config.height || 50;
var _w = _config.width || 50;
var _ctrl = document.createElement('img');
setTimeout(function () {
var _src = '';
if(_value &&_value.startWith('http://'))
{
_src = _value;
}else
{
_src = formatTemplateString(_config.formatString,row);
}
var list = _src.split('http://');
if(list.length > 2)
{
_ctrl.src = list[list.length -1];
}else {
_ctrl.src = _src;
}
},me.timer);
if(_config.clip)
{
_ctrl.style.clip = _config.clip;
}
_ctrl.width =_w;
_ctrl.height = _h;
return _ctrl;
}
});