mwf.xdesktop.requireapp("process.xform", "$module", null, false);
/** @class imageclipper 图片编辑组件。
* @o2cn 图片编辑组件
* @example
* //可以在脚本中获取该组件
* //方法1：
* var imageclipper = this.form.get("name"); //获取组件
* //方法2
* var imageclipper = this.target; //在组件事件脚本中获取
* @extends mwf.xapplication.process.xform.$module
* @o2category formcomponents
* @o2range {process|cms}
* @hideconstructor
*/
mwf.xapplication.process.xform.imageclipper = mwf.appimageclipper = new class(
/** @lends mwf.xapplication.process.xform.imageclipper# */
{
implements: [events],
extends: mwf.app$module,
options: {
"moduleevents": ["change", "load", "queryload", "postload"]
},
initialize: function(node, json, form, options){
this.node = $(node);
this.node.store("module", this);
this.json = json;
this.form = form;
this.field = true;
this.fieldmoduleloaded = false;
},
/**
* @summary 重新加载组件。会执行postload事件。
* @example
* this.form.get("fieldid").reload(); //重新加载事件
*/
reload: function(){
this.node.empty();
this._loaduserinterface();
this._loadstyles();
this.fireevent("postload");
},
_loaduserinterface: function(){
this.field = true;
this.node.empty();
var data = this._getbusinessdata();
if( data ){
var img = new element("img",{
src : mwf.xdesktop.getimagesrc( data )
});
if (layout.mobile || common.browser.platform.ismobile) {
img.setstyles({
"max-width": "90%"
})
}else if( this.json.clippertype == "size" ){
var width = ( this.json.imagewidth ) ? this.json.imagewidth.toint() : 600;
var height = ( this.json.imageheight ) ? this.json.imageheight.toint() : 500;
if( width && height ){
img.setstyles({
width : width "px",
height : height "px"
})
}
}
if(this.json.imagestyles)img.setstyles(this.json.imagestyles);
img.inject( this.node );
}
if( this.isreadonly())return;
var divbottom = new element("div").inject( this.node );
var button = new element("button").inject(divbottom);
button.set({
//"id": this.json.id,
"text": this.json.name || this.json.id,
"styles": this.form.json.buttonstyle || this.form.css.buttonstyles,
"mwftype": this.json.type
});
if(this.json.buttonstyles){
button.setstyles( this.json.buttonstyles );
}
button.addevent("click", function(){
this.validationmode();
var d = this._getbusinessdata();
if (layout.mobile){
o2.imageclippercallback = function( str ){
var data = json.parse( str );
this.setdata( data ? data.fileid : "", true );
this.validation();
o2.imageclippercallback = null;
}.bind(this);
// 兼容cms编辑表单
var referencetype = "processplatformjob";
if(this.form.businessdata.work && this.form.businessdata.work.referencetype) {
referencetype = this.form.businessdata.work.referencetype
}
var imagebody = {
"mwfid" : this.json.id,
"callback" : "o2.imageclippercallback",
"referencetype": referencetype,
"reference": this.form.businessdata.work.job
};
if (window.o2android && window.o2android.postmessage) {
var body = {
type: "uploadimage2filestorage",
data: imagebody
};
window.o2android.postmessage(json.stringify(body));
} else if( window.o2android && window.o2android.uploadimage2filestorage ){
window.o2android.uploadimage2filestorage(json.stringify(imagebody));
}else if (window.webkit && window.webkit.messagehandlers && window.webkit.messagehandlers.uploadimage2filestorage){
window.webkit.messagehandlers.uploadimage2filestorage.postmessage(json.stringify(imagebody));
}else {
this.selectimage( d, function(data){
this.setdata( data ? data.id : "", true );
this.validation();
}.bind(this));
}
}else{
this.selectimage( d, function(data){
this.setdata( data ? data.id : "", true );
this.validation();
}.bind(this));
}
}.bind(this));
this.fieldmoduleloaded = true;
},
gettextdata : function(){
var value = this._getbusinessdata() || "";
return {"value": [value], "text": [value]};
},
/**
* @summary 判断组件值是否为空.
* @example
* if( this.form.get('fieldid').isempty() ){
* this.form.notice('请上传图片', 'warn');
* }
* @return {boolean} 值是否为空.
*/
isempty : function(){
return !this.getdata();
},
/**
* 获取上传的图片id。
* @summary 获取上传的图片id。
* @example
* var id = this.form.get('fieldid').getdata(); //获取上传的图片id
* var url = mwf.xdesktop.getimagesrc( id ); //获取图片的url
*/
getdata: function( data ){
return this._getbusinessdata() || "";
},
setdata: function( data, firechange ){
var old = this.getdata();
this._setbusinessdata(data);
var img = this.node.getelements("img");
if( img && img.length )img.destroy();
if( !data ){
if (firechange && old!==data) this.fireevent("change");
return;
}
var img = new element("img",{
src : mwf.xdesktop.getimagesrc( data )
}).inject( this.node, "top" );
if (layout.mobile || common.browser.platform.ismobile) {
img.setstyles({
"max-width": "90%"
})
}else if( this.json.clippertype == "size" ){
var width = (this.json.imagewidth) ? this.json.imagewidth.toint() : 600;
var height = (this.json.imageheight) ? this.json.imageheight.toint() : 500;
if (width && height) {
img.setstyles({
width: width "px",
height: height "px"
})
}
}
if(this.json.imagestyles)img.setstyles(this.json.imagestyles);
if (firechange && old!==data) this.fireevent("change");
},
selectimage: function(d, callback){
var clippertype = this.json.clippertype || "unrestricted";
var ratio = 1;
var description = "";
var maxsize = 800;
if( clippertype == "unrestricted" ){
ratio = 0;
}else if( clippertype == "size" ){
var width = (this.json.imagewidth) ? this.json.imagewidth.toint() : 600;
var height = (this.json.imageheight) ? this.json.imageheight.toint() : 500;
ratio = width / height;
maxsize = math.max( width, height );
if( !isnan( width ) && !isnan( height ) ){
description = mwf.lp.widget.picturesize.replace(/{width}/g, width).replace(/{height}/g, height);
}
}else if( clippertype == "ratio" ){
ratio = this.json.imageratio || 1;
description = mwf.lp.widget.pictureratio.replace(/{ratio}/g, ratio);
}
mwf.xdesktop.requireapp("process.xform", "widget.imageclipper", function(){
this.imageclipper = new mwf.xapplication.process.xform.widget.imageclipper(this.form.app, {
"style": "default",
"aspectratio" : ratio,
"description" : description,
"imageurl" : d ? mwf.xdesktop.getimagesrc( d ) : "",
"reference" : this.form.businessdata.work.job,
"referencetype": "processplatformjob",
"resultmaxsize" : maxsize,
"onchange" : function(){
callback( { src : this.imageclipper.imagesrc, id : this.imageclipper.imageid } );
}.bind(this)
});
this.imageclipper.load();
}.bind(this));
},
createerrornode: function(text){
var node = new element("div");
var iconnode = new element("div", {
"styles": {
"width": "20px",
"height": "20px",
"float": "left",
"background": " center center no-repeat"
}
}).inject(node);
var textnode = new element("div", {
"styles": {
"line-height": "20px",
"margin-left": "20px",
"color": "red",
"word-break": "keep-all"
},
"text": text
}).inject(node);
return node;
},
notvalidationmode: function(text){
if (!this.isnotvalidationmode){
this.isnotvalidationmode = true;
this.node.store("borderstyle", this.node.getstyles("border-left", "border-right", "border-top", "border-bottom"));
this.node.setstyle("border", "1px solid red");
this.errnode = this.createerrornode(text).inject(this.node, "after");
this.shownotvalidationmode(this.node);
if (!this.errnode.isintoview()) this.errnode.scrollintoview(false);
}
},
shownotvalidationmode: function(node){
var p = node.getparent("div");
if (p){
if (p.get("mwftype") == "tab$content"){
if (p.getparent("div").getstyle("display")=="none"){
var contentareanode = p.getparent("div").getparent("div");
var tabareanode = contentareanode.getprevious("div");
var idx = contentareanode.getchildren().indexof(p.getparent("div"));
var tabnode = tabareanode.getlast().getfirst().getchildren()[idx];
tabnode.click();
p = tabareanode.getparent("div");
}
}
this.shownotvalidationmode(p);
}
},
validationmode: function(){
if (this.isnotvalidationmode){
this.isnotvalidationmode = false;
this.node.setstyles(this.node.retrieve("borderstyle"));
if (this.errnode){
this.errnode.destroy();
this.errnode = null;
}
}
},
validationconfigitem: function(routename, data){
var flag = (data.status=="all") ? true: (routename == data.decision);
if (flag){
var n = this.getdata();
var v = (data.valuetype=="value") ? n : n.length;
switch (data.operateor){
case "isnull":
if (!v){
this.notvalidationmode(data.prompt);
return false;
}
break;
case "notnull":
if (v){
this.notvalidationmode(data.prompt);
return false;
}
break;
case "gt":
if (v>data.value){
this.notvalidationmode(data.prompt);
return false;
}
break;
case "lt":
if (v