o2oa-cairong/o2web/source/x_component_process_ProcessDesigner/widget/ScriptText.js

MWF.xApplication.process.ProcessDesigner.widget = MWF.xApplication.process.ProcessDesigner.widget || {};
MWF.xApplication.process.ProcessDesigner.widget.ScriptText = new Class({
    Implements: [Options, Events],
    Extends: MWF.widget.Common,
    options: {
        "style": "default",
        "maskNode": $(document.body),
        "height": null,
        "maxObj": null,
        "forceType": null,
        "type": "service"   //web or service
    },
    initialize: function(node, code, app, options){
        this.setOptions(options);
        this.node = $(node);
        this.app = app;
        this.code = code;

        this.path = "../x_component_process_ProcessDesigner/widget/$ScriptText/";
        this.cssPath = "../x_component_process_ProcessDesigner/widget/$ScriptText/"+this.options.style+"/css.wcss";
        this._loadCss();

        this.createEditor();
    },

    createEditor: function(){
        var codeIcon = (this.options.type!=="web") ? "code.png" : "web_code.png";
        var codeEmptyIcon = (this.options.type!=="web") ? "code_empty.png" : "web_code_empty.png";
        this.areaNode = new Element("div", {"styles": this.css.areaNode}).inject(this.node);
        if (this.options.height) this.areaNode.setStyle("height", ""+this.options.height+"px");

        this.titleNode = new Element("div", {"styles": this.css.titleNode}).inject(this.areaNode);

        this.referenceNode = new Element("div", {"styles": this.css.actionReferenceNode}).inject(this.titleNode);
        if (!this.code){
            this.referenceNode.setStyle("background", "url("+"../x_component_process_ProcessDesigner/widget/$ScriptText/"+this.options.style+"/icon/"+codeEmptyIcon+") no-repeat center center");
        }else{
            this.referenceNode.setStyle("background", "url("+"../x_component_process_ProcessDesigner/widget/$ScriptText/"+this.options.style+"/icon/"+codeIcon+") no-repeat center center")
        }
        this.referenceNode.addEvent("click", this.openApi.bind(this));
        this.maxNode = new Element("div", {"styles": this.css.actionMaxNode}).inject(this.titleNode);

        this.returnNode = new Element("div", {"styles": this.css.actionReturnNode}).inject(this.titleNode);
        this.editorNode = new Element("div", {"styles": this.css.editorNode}).inject(this.areaNode);
        if (this.options.height){
            var height = this.options.height.toInt()-20;
            this.editorNode.setStyle("height", ""+height+"px");
        }

        this.inforNode = new Element("div", {"styles": this.css.inforNode, "text": this.app.lp.intoScript}).inject(this.editorNode);
        var _self = this;
        this.inforNode.addEvent("click", function(){
            //this.destroy();
            //_self.inforNode = null;
            _self.loadEditor();
        });
    },
    openApi: function(){
        o2.openWindow(this.options.api || "../api")
    },

    loadEditor: function(callback){
        if (this.inforNode){
            this.inforNode.destroy();
            this.inforNode = null;
        }
        MWF.require("MWF.widget.JavascriptEditor", function(){
            this.editor = new MWF.widget.JavascriptEditor(this.editorNode, {
                "runtime": "server",
                "forceType": this.options.forceType,
                "option": {"value": this.code, "lineNumbers": false},
                "onSave": function(){
                    var value = this.editor.getValue();
                    this.fireEvent("change", [value]);
                    this.app.saveProcess();
                }.bind(this)
            });
            debugger;
            this.editor.load(function(){

                this.editor.addEditorEvent("blur", function(){
                    var value = this.editor.getValue();
                    this.fireEvent("change", [value]);
                }.bind(this));

                // this.editor.editor.on("blur", function(){
                //     var value = this.editor.editor.getValue();
                //     this.fireEvent("change", [value]);
                // }.bind(this));

                // this.createScriptReferenceMenu();
                //
                // this.editor.addEvent("reference", function(editor, e, e1){
                //     if (!this.scriptReferenceMenu){
                //         this.createScriptReferenceMenu(this.showReferenceMenu.bind(this));
                //     }else{
                //         this.showReferenceMenu();
                //     }
                // }.bind(this));

                if (callback) callback();

            }.bind(this));
        }.bind(this));
        this.maxNode.addEvent("click", function(){this.maxSize();}.bind(this));
        this.returnNode.addEvent("click", function(){this.returnSize();}.bind(this))
    },
    createScriptReferenceMenu: function(callback){
        MWF.require("MWF.widget.ScriptHelp", function(){
            this.scriptReferenceMenu = new MWF.widget.ScriptHelp(this.referenceNode, this.editor.editor, {
                "code": "code_background.json",
                "event": "click",
                "onPostLoad": function(){
                    if (callback) callback();
                }.bind(this)
            });
            this.scriptReferenceMenu.getEditor = function(){return this.editor.editor;}.bind(this)
        }.bind(this));
    },
    showReferenceMenu: function(){
        var pos = this.editor.getCursorPixelPosition();
        var e = {"page": {}};
        e.page.x = pos.left;
        e.page.y = pos.top;
        this.scriptReferenceMenu.menu.showIm(e);
    },
    maxSize: function() {
        var areaSize = this.areaNode.getSize();
        this.originAreaWidth = areaSize.x;
        this.originAreaHeight = areaSize.y;
        if (!this.options.maxObj){
            this.areaNode.setStyles({
                "width": "100%",
                "height": "100%",
                "position": "absolute",
                "z-index": "50001",
                "top": "0px",
                "left": "0px"
            });
            this.areaNode.inject(this.app.content);
        }else{
            var size = this.options.maxObj.getSize();
            this.areaNode.inject(this.options.maxObj);
            this.areaNode.setStyles({
                "width": ""+size.x+"px",
                "height": ""+size.y+"px",
                "position": "absolute",
                "z-index": "50001"
            });
            this.areaNode.position({
                "relativeTo": this.options.maxObj,
                "position": "upperLeft",
                "edge": "upperLeft"
            });
        }


        this.resizeEditor();
        this.resizeEditorFun = this.resizeEditor.bind(this);
        this.app.addEvent("resize", this.resizeEditorFun);

        this.maxNode.setStyle("display", "none");
        this.returnNode.setStyle("display", "block");

        if (this.editor) this.editor.showLineNumbers();
    },
    resizeEditor: function(){
        var size = this.areaNode.getSize();
        var y = size.y-20;
        this.editorNode.setStyle("height", ""+y+"px");
        if (this.editor) this.editor.resize();
        if (this.editor) this.editor.hideLineNumbers();
    },

    returnSize: function(){
        this.areaNode.setStyles(this.css.areaNode);
        this.areaNode.inject(this.node);

        this.areaNode.setStyle("width", ""+this.originAreaWidth+"px");
        if (this.options.height) {
            this.areaNode.setStyle("height", ""+this.options.height+"px");
        }else{
            this.areaNode.setStyle("height", ""+this.originAreaHeight+"px");
        }

        this.resizeEditor();

        this.app.removeEvent("resize", this.resizeEditorFun);
        this.maxNode.setStyle("display", "block");
        this.returnNode.setStyle("display", "none");
    }

    //getValue()


});