oaup9/o2web/source/x_component_process_Xform/Opinion.js

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.createObjectURL(audioFile)
                        }).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)
                });
            }
        }

    });