O2OA/o2web/source/x_component_MinderEditor/Dialog.js

MWF.xDesktop.requireApp("Template", "MForm", null, false);
MWF.require("MWF.widget.ImageClipper", null, false);

MWF.xApplication.MinderEditor.HyperLinkForm = new Class({
    Extends: MPopupForm,
    Implements: [Options, Events],
    options: {
        "style": "report",
        "width": 700,
        //"height": 300,
        "height": "300",
        "hasTop": true,
        "hasIcon": false,
        "draggable": true,
        "title" : "链接"
    },
    _createTableContent: function () {

        var html = "<table width='100%' bordr='0' cellpadding='7' cellspacing='0' styles='formTable' style='margin-top: 20px; '>" +
            "<tr><td styles='formTableTitle' lable='url' width='20%'></td>" +
            "    <td styles='formTableValue14' item='url' colspan='3'></td></tr>" +
            "<tr><td styles='formTableTitle' lable='title'></td>" +
            "    <td styles='formTableValue14' item='title' colspan='3'></td></tr>" +
            "</table>";
        this.formTableArea.set("html", html);

        var data = this.app.minder.queryCommandValue('HyperLink');

        this.form = new MForm(this.formTableArea, data, {
            isEdited: true,
            style : "report",
            hasColon : true,
            itemTemplate: {
                url: { text : "链接地址",  notEmpty : true,
                    validRule : { isInvalid : function( value, it ){
                        var urlRegex = '^(?!mailto:)(?:(?:http|https|ftp)://)(?:\\S+(?::\\S*)?@)?(?:(?:(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}(?:\\.(?:[0-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))|(?:(?:[a-z\\u00a1-\\uffff0-9]+-?)*[a-z\\u00a1-\\uffff0-9]+)(?:\\.(?:[a-z\\u00a1-\\uffff0-9]+-?)*[a-z\\u00a1-\\uffff0-9]+)*(?:\\.(?:[a-z\\u00a1-\\uffff]{2,})))|localhost)(?::\\d{2,5})?(?:(/|\\?|#)[^\\s]*)?$';
                        var R_URL = new RegExp(urlRegex, 'i');
                        return R_URL.test( value )
                    }.bind(this)},
                    validMessage : { isInvalid : "请输入正确的链接" },
                    attr : { placeholder : "必填：以 http(s):// 或 ftp:// 开头" }
                },
                title: { text : "提示文本", attr : { placeholder : "选填：鼠标在链接上悬停时提示的文本" } }
            }
        }, this.app);
        this.form.load();

    },
    _createBottomContent: function () {

        if (this.isNew || this.isEdited) {

            this.okActionNode = new Element("button.inputOkButton", {
                "styles": this.css.inputOkButton,
                "text": "确定"
            }).inject(this.formBottomNode);

            this.okActionNode.addEvent("click", function (e) {
                this.save(e);
            }.bind(this));
        }

        this.removeAction = new Element("button.inputCancelButton", {
            "styles": this.css.inputCancelButton,
            "text": "删除链接"
        }).inject(this.formBottomNode);

        this.removeAction.addEvent("click", function (e) {
            this.remove(e);
        }.bind(this));

        this.cancelActionNode = new Element("button.inputCancelButton", {
            "styles": (this.isEdited || this.isNew || this.getEditPermission() ) ? this.css.inputCancelButton : this.css.inputCancelButton_long,
            "text": "关闭"
        }).inject(this.formBottomNode);

        this.cancelActionNode.addEvent("click", function (e) {
            this.close(e);
        }.bind(this));

    },
    save: function(){
        var data = this.form.getResult(true,null,true,false,true);
        if( data ){
            this.app.minder.execCommand('HyperLink', data.url, data.title || '');
            this.close();
        }
    },
    remove: function( ev ){
        this.app.minder.execCommand('HyperLink', null );
        this.close();
    }
});

MWF.xApplication.MinderEditor.ImageForm = new Class({
    Extends: MPopupForm,
    Implements: [Options, Events],
    options: {
        "style": "report",
        "width": 800,
        "height": 640,
        "hasTop": true,
        "hasIcon": false,
        "draggable": true,
        "title" : "图片"
    },
    createContent: function () {

        this.createTab();

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

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

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

        this._createTableContent();
    },
    _createTableContent: function () {

        this.linkContainer = new Element("div.linkContainer").inject(this.formTableArea);

        var html = "<table width='100%' bordr='0' cellpadding='7' cellspacing='0' styles='formTable' style='margin-top: 20px; '>" +
            "<tr><td styles='formTableTitle' lable='url' width='20%'></td>" +
            "    <td styles='formTableValue14' item='url' colspan='3'></td></tr>" +
            "<tr><td styles='formTableTitle' lable='title'></td>" +
            "    <td styles='formTableValue14' item='title' colspan='3'></td></tr>" +
            "<tr><td styles='formTableTitle'>预览：</td>" +
            "    <td styles='formTableValue14' item='preview' colspan='3'></td></tr>" +
            "</table>";
        this.linkContainer.set("html", html);

        var data = this.app.minder.queryCommandValue('image');

        this.linkform = new MForm(this.linkContainer, data, {
            isEdited: true,
            style : "report",
            hasColon : true,
            itemTemplate: {
                url: { text : "图片地址",  notEmpty : true,
                    validRule : { isInvalid : function( value, it ){
                        var R_URL = /^https?\:\/\/\w+/;
                        return R_URL.test( value )
                    }.bind(this)},
                    validMessage : { isInvalid : "请输入正确的链接" },
                    attr : { placeholder : "必填：以 http(s):// 开始" },
                    event : { blur : function( it ){
                        if( it.getValue() )it.form.getItem("preview").setValue( it.getValue() )
                    }.bind(this)}
                },
                title: { text : "提示文本", attr : { placeholder : "选填：鼠标在图片上悬停时提示的文本" } },
                preview : { type : "img", defaultValue : data.url || "", style : { "max-width" : "400px", "max-height" : "260px" } }
            }
        }, this.app);
        this.linkform.load();



        this.uploadContainer = new Element("div.uploadContainer", { styles : {"display":"none"} }).inject( this.formTableArea );

        var html = "<table width='100%' bordr='0' cellpadding='0' cellspacing='0' styles='formTable' style='margin-top: 20px; '>" +
            "<tr><td item='image' colspan='4' style='padding-bottom: 10px;'></td></tr>" +
            "<tr><td styles='formTableTitle' lable='title2' width='20%'></td>" +
            "    <td styles='formTableValue14' item='title2' colspan='3'></td></tr>" +
            "</table>";
        this.uploadContainer.set("html", html);

        var data = this.app.minder.queryCommandValue('image');

        this.uploadform = new MForm(this.uploadContainer, data, {
            isEdited: true,
            style : "report",
            hasColon : true,
            itemTemplate: {
                title2: { text : "提示文本", attr : { placeholder : "选填：鼠标在图片上悬停时提示的文本" } }
            }
        }, this.app);
        this.uploadform.load();

        this.image = new MWF.widget.ImageClipper(this.uploadContainer.getElement("[item='image']"), {
            "aspectRatio": 0,
            "description" : "",
            "imageUrl" : "",
            "ratioAdjustedEnable" : true,
            "reference" : "1111",
            "referenceType": "forumDocument",
            "fromFileEnable" : false,
            "resetEnable" : true
        });
        this.image.load();

    },
    createTab: function(){
        var _self = this;

        this.tabContainer = new Element("div.formTabContainer",{
            styles : this.css.formTabContainer
        }).inject(this.formNode);

        var tabNode = new Element("div.formTabNode", {
            "styles": this.css.formTabNode,
            "text" : "外链图片"
        }).inject(this.tabContainer);
        tabNode.addEvents({
            "mouseover" : function(){ if( _self.currentTabNode != this.node)this.node.setStyles(_self.css.formTabNode_over) }.bind({node : tabNode }),
            "mouseout" : function(){ if( _self.currentTabNode != this.node)this.node.setStyles(_self.css.formTabNode) }.bind({node : tabNode }),
            "click":function(){
                if( _self.currentTabNode )_self.currentTabNode.setStyles(_self.css.formTabNode);
                _self.currentTabNode = this.node;
                this.node.setStyles(_self.css.formTabNode_current);
                _self.linkContainer.setStyle("display","");
                _self.uploadContainer.setStyle("display","none");
            }.bind({ node : tabNode })
        })
        tabNode.setStyles( this.css.formTabNode_current );
        _self.currentTabNode = tabNode;

        var tabNode = new Element("div.tabNode", {
            "styles": this.css.formTabNode,
            "text" : "上传图片"
        }).inject(this.tabContainer);
        tabNode.addEvents({
            "mouseover" : function(){ if( _self.currentTabNode != this.node)this.node.setStyles(_self.css.formTabNode_over) }.bind({node : tabNode }),
            "mouseout" : function(){ if( _self.currentTabNode != this.node)this.node.setStyles(_self.css.formTabNode) }.bind({node : tabNode }),
            "click":function(){
                if( _self.currentTabNode )_self.currentTabNode.setStyles(_self.css.formTabNode);
                _self.currentTabNode = this.node;
                this.node.setStyles(_self.css.formTabNode_current);
                _self.linkContainer.setStyle("display","none");
                _self.uploadContainer.setStyle("display","");
            }.bind({ node : tabNode })
        })
    },
    _createBottomContent: function () {

        if (this.isNew || this.isEdited) {

            this.okActionNode = new Element("button.inputOkButton", {
                "styles": this.css.inputOkButton,
                "text": "确定"
            }).inject(this.formBottomNode);

            this.okActionNode.addEvent("click", function (e) {
                this.save(e);
            }.bind(this));
        }

        this.removeAction = new Element("button.inputCancelButton", {
            "styles": this.css.inputCancelButton,
            "text": "删除图片"
        }).inject(this.formBottomNode);

        this.removeAction.addEvent("click", function (e) {
            this.remove(e);
        }.bind(this));

        this.cancelActionNode = new Element("button.inputCancelButton", {
            "styles": (this.isEdited || this.isNew || this.getEditPermission() ) ? this.css.inputCancelButton : this.css.inputCancelButton_long,
            "text": "关闭"
        }).inject(this.formBottomNode);

        this.cancelActionNode.addEvent("click", function (e) {
            this.close(e);
        }.bind(this));

    },
    save: function(){
        if( this.image.resizedImage ){
            this.image.uploadImage( function( json ){
                var data = {
                    url : MWF.xDesktop.getImageSrc( json.id ),
                    title :  this.uploadform.getResult(true,null,true,false,true)["title2"]
                };
                this.app.minder.execCommand('image', data.url, data.title || '');
                this.close();
            }.bind(this));
        }else{
            var data = this.linkform.getResult(true,null,true,false,true);
            if( data ){
                this.app.minder.execCommand('image', data.url, data.title || '');
                this.close();
            }
        }
    },
    remove: function( ev ){
        this.app.minder.execCommand('image', '' );
        this.close();
    },
    setFormNodeSize: function (width, height, top, left) {
        if (!width)width = this.options.width ? this.options.width : "50%";
        if (!height)height = this.options.height ? this.options.height : "50%";
        if (!top) top = this.options.top ? this.options.top : 0;
        if (!left) left = this.options.left ? this.options.left : 0;

        var containerSize = this.container.getSize();
        if( containerSize.x < width )width = containerSize.x;
        if( containerSize.y < height )height = containerSize.y;

        var allSize = this.app.content.getSize();
        var limitWidth = allSize.x; //window.screen.width
        var limitHeight = allSize.y; //window.screen.height

        "string" == typeof width && (1 < width.length && "%" == width.substr(width.length - 1, 1)) && (width = parseInt(limitWidth * parseInt(width, 10) / 100, 10));
        "string" == typeof height && (1 < height.length && "%" == height.substr(height.length - 1, 1)) && (height = parseInt(limitHeight * parseInt(height, 10) / 100, 10));
        300 > width && (width = 300);
        220 > height && (height = 220);

        top = top || parseInt((limitHeight - height) / 2, 10); //+appTitleSize.y);
        left = left || parseInt((limitWidth - width) / 2, 10);

        this.formAreaNode.setStyles({
            "width": "" + width + "px",
            "height": "" + height + "px",
            "top": "" + top + "px",
            "left": "" + left + "px"
        });

        this.formNode.setStyles({
            "width": "" + width + "px",
            "height": "" + height + "px"
        });

        var iconSize = this.formIconNode ? this.formIconNode.getSize() : {x: 0, y: 0};
        var topSize = this.formTopNode ? this.formTopNode.getSize() : {x: 0, y: 0};
        var bottomSize = this.formBottomNode ? this.formBottomNode.getSize() : {x: 0, y: 0};
        var tabSize = this.tabContainer ? this.tabContainer.getSize() : {x: 0, y: 0};

        var contentHeight = height - iconSize.y - topSize.y - bottomSize.y - tabSize.y;
        //var formMargin = formHeight -iconSize.y;
        this.formContentNode.setStyles({
            "height": "" + contentHeight + "px"
        });
        this.formTableContainer.setStyles({
            "height": "" + contentHeight + "px"
        });
    }
});

MWF.xApplication.MinderEditor.NoteForm = new Class({
    Extends: MPopupForm,
    Implements: [Options, Events],
    options: {
        "style": "report",
        "width": 300,
        "height": "100%",
        "right" : 0,
        "hasTop": true,
        "hasIcon": false,
        "hasMask" : false,
        "hasBottom" : false,
        "draggable": true,
        "resizeable": true,
        "maxAction" : true,
        "title" : "备注"
    },
    _createTableContent: function () {
        this.formTableContainer.setStyle("width","100%");
        this.formTableArea.setStyle("height","100%");

        var html = "<div item='content' style='height: 100%;'></div>";
        this.formTableArea.set("html", html);

        MWF.xDesktop.requireApp("Template", "MForm", function () {
            this.form = new MForm(this.formTableArea, {}, {
                style: "report",
                isEdited: true,
                itemTemplate: {
                    content: { type : "rtf", RTFConfig : {
                        //skin : "bootstrapck",
                        "resize_enabled": false,
                        toolbar : [
                            { name: 'document', items : [ 'Preview' ] },
                            //{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
                            { name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','-','RemoveFormat' ] },
                            //{ name: 'paragraph', items : [ 'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock' ] },
                            { name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
                            { name: 'colors', items : [ 'TextColor','BGColor' ] },
                            { name: 'links', items : [ 'Link','Unlink' ] },
                            //{ name: 'insert', items : [ 'Image' ] },
                            { name: 'tools', items : [ 'Maximize','-','About' ] }
                        ]
                    }}
                }
            }, this.app);
            this.form.load();
        }.bind(this), true);
    },
    _setNodesSize : function( width, height, formContentHeight, formTableHeight ){
        this.form.getItem("content").editor.resize(null,formTableHeight );
    }
});

//MWF.xApplication.MinderEditor.NoteForm = new Class({
//    Extends: MPopupForm,
//    Implements: [Options, Events],
//    options: {
//        "style": "report",
//        "width": 300,
//        "height": "100%",
//        "right" : 0,
//        "hasTop": true,
//        "hasIcon": false,
//        "hasMask" : false,
//        "hasBottom" : false,
//        "draggable": true,
//        "resizeable": true,
//        "maxAction" : true,
//        "title" : "备注"
//    },
//    _createTableContent: function () {
//        this.formTableContainer.setStyle("width","100%");
//        this.formTableArea.setStyle("height","100%");
//        var codeMirrorPath = COMMON.contentPath+"/res/framework/codemirror";
//        var markedPath = COMMON.contentPath+"/res/framework/marked";
//
//        var jsModules = [
//            codeMirrorPath + "/lib/codemirror.js",
//            codeMirrorPath + "/mode/xml/xml.js",
//            codeMirrorPath + "/mode/javascript/javascript.js",
//            codeMirrorPath + "/mode/css/css.js",
//            codeMirrorPath + "/mode/htmlmixed/htmlmixed.js",
//            codeMirrorPath + "/mode/markdown/markdown.js",
//            codeMirrorPath + "/addon/mode/overlay.js",
//            codeMirrorPath + "/mode/gfm/gfm.js",
//            markedPath + "/lib/marked.js"
//        ];
//
//        COMMON.AjaxModule.loadCss( codeMirrorPath + "/lib/codemirror.css", function () {
//            COMMON.AjaxModule.load( jsModules, function () {
//                this.textarea = new Element("textarea").inject(this.formTableArea);
//                var codeMirrorEditor = CodeMirror.fromTextArea(this.textarea, {
//                    theme: "default",
//                    gfm: true,
//                    breaks: true,
//                    lineWrapping : true,
//                    mode: 'gfm',
//                    dragDrop: false,
//                    lineNumbers:true
//                });
//                codeMirrorEditor.setSize("100%","50%");
//
//                this.previewer = new Element("div").inject(this.formTableArea);
//                marked.setOptions({
//                    gfm: true,
//                    tables: true,
//                    breaks: true,
//                    pedantic: false,
//                    sanitize: true,
//                    smartLists: true,
//                    smartypants: false
//                });
//                var str = "月份|收入|支出\n"+
//                    "----|----|---\n"+
//                    "8   |1000|500\n"+
//                    "9   |1200|600\n"+
//                    "10  |1400|650\n";
//                this.previewer.set("html",marked(str));
//            }.bind(this));
//        }.bind(this));
//    },
//    save: function(){
//
//        this.app.minder.execCommand('note', data.url, data.title || '');
//    },
//    remove: function( ev ){
//        this.app.minder.execCommand('note', null );
//    }
//});