mwf.xdesktop.requireapp("process.xform", "$input", null, false);
mwf.xdesktop.requireapp("process.work", "lp." o2.language, null, false);
/** @class opinion 意见输入框。
* @o2cn 意见输入框
* @example
* //可以在脚本中获取该组件
* //方法1：
* var field = this.form.get("fieldid"); //获取组件对象
* //方法2
* var field = this.target; //在组件本身的脚本中获取，比如事件脚本、默认值脚本、校验脚本等等
*
* var data = field.getdata(); //获取值
* field.setdata("字符串值"); //设置值
* field.hide(); //隐藏字段
* var id = field.json.id; //获取字段标识
* var flag = field.isempty(); //字段是否为空
* @extends mwf.xapplication.process.xform.$input
* @o2category formcomponents
* @o2range {process}
* @hideconstructor
*/
mwf.xapplication.process.xform.opinion = mwf.appopinion = new class(
/** @lends mwf.xapplication.process.xform.opinion# */
{
implements: [events],
extends: mwf.app$input,
_loaduserinterface: function () {
this._loadnode();
if (this.json.compute == "show") {
this._setvalue(this._computevalue());
} else {
this._loadvalue();
}
},
_loadnode: function () {
if (this.readonly) {
this._loadnoderead();
} else {
this._loadnodeedit();
}
},
_loadnoderead: function () {
this.node.empty();
this.node.set({
"nodeid": this.json.id,
"mwftype": this.json.type
});
this.node.setstyle("display", "none");
},
validationconfigitem: function (routename, data) {
var flag = (data.status === "all") ? true : (routename === data.decision);
if (flag) {
var n = this.getinputdata();
var v = (data.valuetype === "value") ? n : n.length;
switch (data.operateor) {
case "isnull":
if (!v && !(this.handwritingfile && this.handwritingfile[layout.session.user.distinguishedname])) {
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 < data.value) {
this.notvalidationmode(data.prompt);
return false;
}
break;
case "equal":
if (v == data.value) {
this.notvalidationmode(data.prompt);
return false;
}
break;
case "neq":
if (v != data.value) {
this.notvalidationmode(data.prompt);
return false;
}
break;
case "contain":
if (v.indexof(data.value) != -1) {
this.notvalidationmode(data.prompt);
return false;
}
break;
case "notcontain":
if (v.indexof(data.value) == -1) {
this.notvalidationmode(data.prompt);
return false;
}
break;
}
}
return true;
},
_resetnodeedit: function () {
var input = new element("textarea", {
"styles": {
"background": "transparent",
"width": "100%",
"border": "0px"
}
});
input.set(this.json.properties);
this.textarea = input;
var node = new element("div", {
"styles": {
"ovwrflow": "hidden",
"position": "relative",
"padding-right": "2px"
}
}).inject(this.node, "after");
input.inject(node);
this.node.destroy();
this.node = node;
},
_loadnodeedit: function () {
if (!this.json.preprocessing) {
this._resetnodeedit();
}else{
this.textarea = this.node.getelement("textarea");
}
var input = this.node.getfirst();
if( !input && this.nodehtml ){
this.node.set("html", this.nodehtml);
input = this.node.getfirst();
}
input.set(this.json.properties);
//this.node = input;
this.node.set({
"id": this.json.id,
"mwftype": this.json.type
});
this.input = input;
if( this.json.isselectidea === "yes" ){
this.selectideanode = new element("div", {"styles": this.form.css.selectideanode}).inject(this.node);
this.underlinenode = new element("div", {"styles": {
"border-top": "1px solid #ccc",
"clear": "both"
}}).inject(this.node);
this.loadselectidea()
}
this.mediaactionarea = new element("div", {"styles": this.form.css.inputopinionmediaactionarea}).inject(this.node);
if (this.json.ishandwriting !== "no") {
/**
* @summary 手写意见按钮按钮。
* @member {element}
*/
this.handwritingaction = new element("div", {
"styles": this.form.css.inputopinionhandwritingaction,
"text": mwf.xapplication.process.work.lp.handwriting
}).inject(this.mediaactionarea);
this.handwritingaction.addevent("click", function () {
this.handwriting();
}.bind(this));
}
if (this.json.isaudio !== "no") {
if (navigator.getusermedia || navigator.webkitgetusermedia || navigator.mozgetusermedia || navigator.msgetusermedia) {
/**
* @summary 音频按钮.在浏览器支持html5的getusermedia才可用。
* @member {element}
*/
this.audiorecordaction = new element("div", {
"styles": this.form.css.inputopinionaudiorecordaction,
"text": mwf.xapplication.process.work.lp.audiorecord
}).inject(this.mediaactionarea);
this.audiorecordaction.addevent("click", function () {
this.audiorecord();
}.bind(this));
}
}
this.node.addevent("change", function () {
this._setbusinessdata(this.getinputdata());
this.fireevent("change");
}.bind(this));
this.node.getfirst().addevent("blur", function () {
this.validation();
this.hideselectopinionnode();
}.bind(this));
this.node.getfirst().addevent("keyup", function () {
this.validationmode();
}.bind(this));
this.node.getfirst().addevent("keydown", function (e) {
if (this.selectopinionnode && (this.selectopinionnode.getstyle("display") != "none") && this.selectopinionnode.getfirst()) {
if (e.code == 38) { //up
if (this.selectedopinionnode) {
var node = this.selectedopinionnode.getprevious();
if (!node) node = this.selectopinionnode.getlast();
this.unselectedopinion(this.selectedopinionnode);
this.selectedopinion(node)
} else {
node = this.selectopinionnode.getlast();
this.selectedopinion(node)
}
}
if (e.code == 40) { //down
if (this.selectedopinionnode) {
var node = this.selectedopinionnode.getnext();
if (!node) node = this.selectopinionnode.getfirst();
this.unselectedopinion(this.selectedopinionnode);
this.selectedopinion(node)
} else {
node = this.selectopinionnode.getfirst();
this.selectedopinion(node)
}
}
if (e.code == 27) { //esc
this.hideselectopinionnode();
e.preventdefault();
}
if (e.code == 32 || e.code == 13) { //space
if (this.selectedopinionnode) {
this.setopinion(this.selectedopinionnode.get("text"));
e.preventdefault();
}
}
}
}.bind(this));
if (!this.form.json.notloaduseropinion) {
mwf.ud.getdatajson("useropinion", function (json) {
this.useropinions = json;
}.bind(this), false);
}
this.node.getfirst().addevent("input", function (e) {
this.startsearchopinion();
}.bind(this));
this.node.getfirst().addevent("focus", function () {
this.startsearchopinion();
}.bind(this));
},
_afterloaded: function(){
if (!this.isreadonly()){
this.setnodesize();
this.loaddescription();
}
},
setnodesize: function(){
if( this.textarea ){
var x = 0;
if( this.selectideanode ){
var size = this.selectideanode.getsize();
x = size.x 5;
this.textarea.setstyles({
"height": ( size.y - 6 ) "px",
"resize":"none",
"border-bottom": "0px",
"padding-right": "0px",
"width": "calc( 100% - " x "px )"
});
this.node.setstyles({
"min-height": size.y "px",
"height": "auto",
"overflow":"hidden",
"width": "100%"
});
this.mediaactionarea.setstyle("right", x "px");
}
}
},
loadselectidea: function(){
this.selectideascrollnode = new element("div", {"styles": this.form.css.selectideascrollnode}).inject(this.selectideanode);
this.selectideaareanode = new element("div", {
"styles": {
"overflow": "hidden"
}
}).inject(this.selectideascrollnode);
mwf.require("mwf.widget.scrollbar", function () {
new mwf.widget.scrollbar(this.selectideascrollnode, {
"style": "small",
"where": "before",
"distance": 30,
"friction": 4,
"indent": false,
"axis": {"x": false, "y": true}
});
}.bind(this));
mwf.ud.getdatajson("idea", function (json) {
if (json) {
if (json.ideas) {
this.setidealist(json.ideas);
}
} else {
mwf.ud.getpublicdata("idea", function (pjson) {
if (pjson) {
if (pjson.ideas) {
this.setidealist(pjson.ideas);
}
}
}.bind(this));
}
}.bind(this));
},
setidealist: function (ideas) {
var _self = this;
ideas.each(function (idea) {
if (!idea) return;
new element("div", {
"styles": this.form.css.selectideaitemnode,
"text": idea,
"events": {
"click": function () {
if(_self.descriptionnode)_self.descriptionnode.setstyle("display", "none");
if ( !_self.textarea.get("value") ) {
_self.textarea.set("value", this.get("text"));
} else {
_self.textarea.set("value", _self.textarea.get("value") ", " this.get("text"));
}
},
"mouseover": function () {
this.setstyles(_self.form.css.selectideaitemnode_over);
},
"mouseout": function () {
this.setstyles(_self.form.css.selectideaitemnode);
}
}
}).inject(this.selectideaareanode);
}.bind(this));
},
audiorecord: function () {
if (!this.audiorecordnode) this.createaudiorecordnode();
this.audiorecordnode.show();
this.audiorecordnode.position({
"relativeto": this.node,
"position": "center",
"edge": "center"
});
var p = this.audiorecordnode.getposition(this.form.app.content);
var top = p.y;
var left = p.x;
if (p.y < 0) top = 10;
if (p.x < 0) left = 10;
this.audiorecordnode.setstyles({
"top": "" top "px",
"left": "" left "px"
});
this.soundfile = {};
mwf.require("mwf.widget.audiorecorder", function () {
/**
* @summary 音频意见组件.
* @member {o2.widget.audiorecorder}
*/
this.audiorecorder = new mwf.widget.audiorecorder(this.audiorecordnode, {
"onsave": function (audiofile) {
this.soundfile[layout.session.user.distinguishedname] = audiofile;
if (this.previewnode) {
this.previewnode.destroy();
this.previewnode = null;
}
this.previewnode = new element("audio", {
"controls": true,
"src": window.url.createobject
}).inject(this.node);
this.audiorecordnode.hide();
// this.page.get("div_image").node.set("src",base64image);
}.bind(this),
"oncancel": function () {
this.soundfile[layout.session.user.distinguishedname] = null;
delete this.soundfile[layout.session.user.distinguishedname];
if (this.previewnode) {
this.previewnode.destroy();
this.previewnode = null;
}
this.audiorecordnode.hide();
}.bind(this)
}, null);
}.bind(this));
},
createaudiorecordnode: function () {
this.audiorecordnode = new element("div", {"styles": this.form.css.handwritingnode}).inject(this.node, "after");
var size = this.node.getsize();
var y = math.max(size.y, 320);
var x = math.max(size.x, 400);
x = math.min(x, 600);
y = 320;
x = 500;
var zidx = this.node.getstyle("z-index").toint() || 0;
zidx = (zidx < 1000) ? 1000 : zidx;
this.audiorecordnode.setstyles({
"height": "" y "px",
"width": "" x "px",
"z-index": zidx 1
});
// this.audiorecordnode.position({
// "relativeto": this.node,
// "position": "center",
// "edge": "center"
// });
},
/**
* @summary 弹出手写板.
* @example
* this.form.get("fieldid").handwriting();
*/
handwriting: function () {
if (!this.handwritingnode) this.createhandwriting();
this.handwritingnode.show();
if (layout.mobile) {
this.handwritingnode.setstyles({
"top": "0px",
"left": "0px"
});
} else {
this.handwritingnode.position({
"relativeto": this.form.app.content || this.form.container,
"position": "center",
"edge": "center"
});
//var p = this.handwritingnode.getposition(this.form.app.content);
var p = this.handwritingnode.getposition(this.handwritingnode.getoffsetparent());
var top = p.y;
var left = p.x;
if (p.y < 0) top = 10;
if (p.x < 0) left = 10;
this.handwritingnode.setstyles({
"top": "" top "px",
"left": "" left "px"
});
}
},
createhandwriting: function () {
/**
* @summary 手写板容器.
* @member {element}
*/
this.handwritingnode = new element("div", {"styles": this.form.css.handwritingnode}).inject(this.node, "after");
var x, y;
if (layout.mobile) {
var bodysize = $(document.body).getsize();
x = bodysize.x;
y = bodysize.y;
this.json.tabletwidth = 0;
this.json.tabletheight = 0;
} else {
var size = this.node.getsize();
x = math.max(this.json.tabletwidth || size.x, 600);
this.json.tabletwidth = x;
y = math.max(this.json.tabletheight ? (parseint(this.json.tabletheight) 110) : size.y, 320);
}
var zidx = this.node.getstyle("z-index").toint() || 0;
zidx = (zidx < 1000) ? 1000 : zidx;
this.handwritingnode.setstyles({
"height": "" y "px",
"width": "" x "px",
"z-index": zidx 1
});
if (layout.mobile) {
this.handwritingnode.addevent('touchmove', function (e) {
e.preventdefault();
});
this.handwritingnode.setstyles({
"top": "0px",
"left": "0px"
}).inject($(document.body));
} else {
this.handwritingnode.position({
"relativeto": this.node,
"position": "center",
"edge": "center"
});
}
this.handwritingareanode = new element("div", {"styles": this.form.css.handwritingareanode}).inject(this.handwritingnode);
if (!layout.mobile) {
this.handwritingactionnode = new element("div", {
"styles": this.form.css.handwritingactionnode,
"text": mwf.xapplication.process.work.lp.savewrite
}).inject(this.handwritingnode);
var h = this.handwritingactionnode.getsize().y this.handwritingactionnode.getstyle("margin-top").toint() this.handwritingactionnode.getstyle("margin-bottom").toint();
h = y - h;
this.handwritingareanode.setstyle("height", "" h "px");
} else {
this.handwritingareanode.setstyle("height", "" y "px");
}
this.handwritingfile = {};
mwf.require("mwf.widget.tablet", function () {
/**
* @summary 手写板组件.
* @member {o2.widget.tablet}
*/
this.tablet = new mwf.widget.tablet(this.handwritingareanode, {
"style": "default",
"toolhidden": this.json.toolhidden || [],
"contentwidth": this.json.tabletwidth || 0,
"contentheight": this.json.tabletheight || 0,
"onsave": function (base64code, base64image, imagefile) {
this.handwritingfile[layout.session.user.distinguishedname] = imagefile;
if (this.previewnode) {
this.previewnode.destroy();
this.previewnode = null;
}
if (this.json.ishandwritingpreview !== "no") {
this.previewnode = new element("img", {"src": base64image}).inject(this.node);
this.previewnode.setstyles({
"max-width": "90%"
})
}
this.handwritingnode.hide();
this.validation();
this.fireevent("change");
// this.page.get("div_image").node.set("src",base64image);
}.bind(this),
"oncancel": function () {
this.handwritingfile[layout.session.user.distinguishedname] = null;
delete this.handwritingfile[layout.session.user.distinguishedname];
if (this.previewnode) {
this.previewnode.destroy();
this.previewnode = null;
}
this.handwritingnode.hide();
}.bind(this)
}, null);
this.tablet.load();
}.bind(this));
if (layout.mobile) {
opt.tools = [
"save", "|",
"undo",
"redo", "|",
"reset", "|",
"cancel"
]
}
if (this.handwritingactionnode) {
this.handwritingactionnode.addevent("click", function () {
//this.handwritingnode.hide();
if (this.tablet) this.tablet.save();
}.bind(this));
}
},
unselectedopinion: function (node) {
node.setstyle("background-color", "#ffffff");
this.selectedopinionnode = null;
},
selectedopinion: function (node) {
node.setstyle("background-color", "#d2ddf5");
this.selectedopinionnode = node;
},
startsearchopinion: function () {
var t = this.input.get("value");
var arr = t.split(/(,\s*){1}|(;\s*){1}|\s /g);
t = arr[arr.length - 1];
if (t.length) {
this.clearsearcheopinionid();
this.searcheopinionid = window.settimeout(function () {
this.searchopinions(t);
}.bind(this), 500);
} else {
this.clearsearcheopinionid();
}
},
clearsearcheopinionid: function () {
if (this.searcheopinionid) {
window.cleartimeout(this.searcheopinionid);
this.searcheopinionid = "";
}
},
searchopinions: function (t) {
var value = this.input.get("value");
var arr = value.split(/[\n\r]/g);
lines = arr.length;
value = arr[arr.length - 1];
var offsetvalue = value;
//var offsetvalue = value.substr(0, value.length-t.length);
if (this.useropinions) {
var ops = this.useropinions.filter(function (v, i) {
return v.contains(t) && (v != t);
}.bind(this));
if (ops.length) {
this.showselectopinionnode(ops, offsetvalue, lines);
} else {
this.hideselectopinionnode(ops);
}
}
},
hideselectopinionnode: function () {
if (this.selectopinionnode) this.selectopinionnode.setstyle("display", "none");
},
showselectopinionnode: function (ops, offsetvalue, lines) {
if (!this.selectopinionnode) this.createselectopinionnode();
this.selectopinionnode.empty();
ops.each(function (op) {
this.createselectopinionoption(op);
}.bind(this));
var inputsize = this.input.getsize();
var size = mwf.gettextsize(offsetvalue, this.json.inputstyles);
var offy = ((size.y - 3) * lines) 3;
if (offy > inputsize.y) offy = inputsize.y;
this.selectopinionnode.setstyle("display", "block");
this.selectopinionnode.position({
"relativeto": this.node,
"position": "lefttop",
"edge": "lefttop",
"offset": {"x": size.x, "y": offy}
});
},
createselectopinionnode: function () {
this.selectopinionnode = new element("div", {"styles": this.form.css.opinionselectnode}).inject(this.node);
},
createselectopinionoption: function (op) {
var option = new element("div", {
"styles": this.form.css.opinionselectoption,
"text": op
}).inject(this.selectopinionnode);
if (this.json.selectitemstyles) option.setstyles(this.json.selectitemstyles);
option.addevents({
"mouseover": function () {
this.setstyle("background-color", "#d2ddf5")
},
"mouseout": function () {
this.setstyle("background-color", "#ffffff")
},
"mousedown": function () {
this.setopinion(op)
}.bind(this)
});
},
setopinion: function (op) {
var v = this.input.get("value");
var arr = v.split(/(,\s*){1}|(;\s*){1}|\s /g);
t = arr[arr.length - 1];
var leftstr = v.substr(0, v.length - t.length);
this.input.set("value", leftstr op);
this.hideselectopinionnode();
this._setbusinessdata(this.getinputdata());
},
loaddescription: function () {
if (this.isreadonly()) return;
var v = this._getbusinessdata();
if (!v) {
if (this.json.description) {
var size = this.node.getfirst().getsize();
var w = size.x - 3
if (this.json.showicon != 'no' && !this.form.json.hidemoduleicon) {
w = size.x - 23;
}
if( this.handwritingaction ){
w = w - this.handwritingaction.getsize().x
}
if( this.audiorecordaction ){
w = w - this.audiorecordaction.getsize().x
}
this.descriptionnode = new element("div", {
"styles": this.form.css.descriptionnode,
"text": this.json.description
}).inject(this.node);
this.descriptionnode.setstyles({
"width": "" w "px",
"height": "" size.y "px",
"line-height": "" size.y "px"
});
this.setdescriptionevent();
}
}
},
setdescriptionevent: function () {
if (this.descriptionnode) {
if (common.browser.platform.name === "ios") {
this.descriptionnode.addevents({
"click": function () {
this.descriptionnode.setstyle("display", "none");
this.node.getfirst().focus();
}.bind(this)
});
} else if (common.browser.platform.name === "android") {
this.descriptionnode.addevents({
"click": function () {
this.descriptionnode.setstyle("display", "none");
this.node.getfirst().focus();
}.bind(this)
});
} else {
this.descriptionnode.addevents({
"click": function () {
this.descriptionnode.setstyle("display", "none");
this.node.getfirst().focus();
}.bind(this)
});
}
this.node.getfirst().addevents({
"focus": function () {
this.descriptionnode.setstyle("display", "none");
}.bind(this),
"blur": function () {
if (!this.node.getfirst().get("value")) this.descriptionnode.setstyle("display", "block");
}.bind(this)
});
}
}
});
source