render.richtextarea.js

一个ajax富客户端的ajax类库

    
    processOk: function(e) {
        var data = {
            url: this._urlField.get("text"),
            description: this._descriptionField.get("text")
        };
        if (!data.url) {
            this.parent.add(new ExtrasRender.ComponentSync.RichTextArea.MessageDialog(this._richTextArea, 
                    this._richTextArea.peer._msg["HyperlinkDialog.ErrorDialogTitle"], 
                    this._richTextArea.peer._msg["HyperlinkDialog.ErrorDialog.URL"]));
            return;
        }
        this.parent.remove(this);
        this.fireEvent({type: "insertHyperlink", source: this, data: data});
    }
});

ExtrasRender.ComponentSync.RichTextArea.ImageDialog = Core.extend(
        ExtrasRender.ComponentSync.RichTextArea.AbstractDialog, {

    $construct: function(richTextArea) {
        ExtrasRender.ComponentSync.RichTextArea.AbstractDialog.call(this, richTextArea,
                ExtrasRender.ComponentSync.RichTextArea.AbstractDialog.TYPE_OK_CANCEL,
                {
                    title: richTextArea.peer._msg["ImageDialog.Title"], 
                    image: richTextArea.peer._icons.image
                },
                new EchoApp.Column({
                    insets: 10,
                    children: [
                        new EchoApp.Label({
                            text: richTextArea.peer._msg["ImageDialog.PromptURL"]
                        }),
                        this._urlField = new EchoApp.TextField({
                            width: "100%"
                        })
                    ]
                }));
    },
    
    processOk: function(e) {
        var data = {
            url: this._urlField.get("text")
        };
        if (!data.url) {
            this.parent.add(new ExtrasRender.ComponentSync.RichTextArea.MessageDialog(this._richTextArea, 
                    this._richTextArea.peer._msg["ImageDialog.ErrorDialogTitle"], 
                    this._richTextArea.peer._msg["ImageDialog.ErrorDialog.URL"]));
            return;
        }
        this.parent.remove(this);
        this.fireEvent({type: "insertImage", source: this, data: data});
    }
});

ExtrasRender.ComponentSync.RichTextArea.InputComponent = Core.extend(EchoApp.Component, {

    /**
     * The containing RichTextArea component.
     */
    _richTextArea: null,

    $load: function() {
        EchoApp.ComponentFactory.registerType("ExtrasApp.RichTextInput", this);
    },
    
    componentType: "ExtrasApp.RichTextInput"
});

ExtrasRender.ComponentSync.RichTextArea.InputPeer = Core.extend(EchoRender.ComponentSync, {

    $load: function() {
        EchoRender.registerPeer("ExtrasApp.RichTextInput", this);
    },

    /**
     * {Boolean} Flag indicating whether the parent component of the associated RichTextArea is a pane, 
     * and thus whether the RichTextArea's input region should consume available vertical space.
     */
    _paneRender: false,
    
    //FIXME.  Calculate (rather than hardcode) trimHeight value.
    /**
     * Height of trim for RichTextArea, i.e., menu bar, toolbars, etc.
     */
    _trimHeight: 60,
    
    _renderedHtml: null,

    $construct: function() { },
    
    doCommand: function(command, value) {
        this._loadRange();
        this._iframeElement.contentWindow.document.execCommand(command, false, value);
        this._storeData();
    },
    
    _insertHtml: function(html) {
        if (WebCore.Environment.BROWSER_INTERNET_EXPLORER) {
            if (!this._selectionRange) {
                this._selectionRange = this._iframeElement.contentWindow.document.body.createTextRange();
            }
            this._selectionRange.select();
            this._selectionRange.pasteHTML(html);
        } else {
            this.doCommand("inserthtml", html);
        }
    },
    
    _loadRange: function() {
        if (WebCore.Environment.BROWSER_INTERNET_EXPLORER) {
            if (this._selectionRange) {
                this._selectionRange.select();
            }
        }
    },
    
    _processKeyPress: function(e) {
        if (!this.client.verifyInput(this.component)) {
            WebCore.DOM.preventEventDefault(e);
            return;
        }
    },
    
    _processKeyUp: function(e) {
        if (!this.client.verifyInput(this.component)) {
            WebCore.DOM.preventEventDefault(e);
            return;
        }
    
        this._storeData();
        this._storeRange();
    },
    
    _processMouseDown: function(e) {
        if (!this.client.verifyInput(this.component)) {
            WebCore.DOM.preventEventDefault(e);
            return;
        }
    },

    _processMouseUp: function(e) {
        if (!this.client.verifyInput(this.component)) {
            WebCore.DOM.preventEventDefault(e);
            return;
        }

        this._storeRange();
    },
    
    renderAdd: function(update, parentElement) {
        // Create IFRAME container DIV element.
        this._mainDivElement = document.createElement("div");
        this._mainDivElement.style.border = "1px inset";
        
        // Create IFRAME element.
        this._iframeElement = document.createElement("iframe");
        this._iframeElement.style.backgroundColor = "white";
        this._iframeElement.style.color = "black";
        this._iframeElement.style.width = this.width ? this.width : "100%";
        
        this._paneRender = this.component._richTextArea.peer._paneRender;
        
        if (this._paneRender) {
        //FIXME testing hack
            this._iframeElement.style.height = "400px";
        } else {
            this._iframeElement.style.height = this.height ? this.height : "200px";
        }
        this._iframeElement.style.border = "0px none";
        this._iframeElement.frameBorder = "0";
    
        this._mainDivElement.appendChild(this._iframeElement);
    
        parentElement.appendChild(this._mainDivElement);
    },
    
    _renderContentDocument: function() {
        var text = this.component._richTextArea.get("text");
        
        var contentDocument = this._iframeElement.contentWindow.document;
        contentDocument.open();
        contentDocument.write("<html><body>" + (text == null ? "" : text) + "</body></html>");
        contentDocument.close();
        if (WebCore.Environment.BROWSER_MOZILLA && !WebCore.Environment.BROWSER_FIREFOX) {
            // workaround for Mozilla (not Firefox)
            var setDesignModeOn = function() {
                contentDocument.designMode = "on";
            };
            setTimeout(setDesignModeOn, 0);
        } else {
            contentDocument.designMode = "on";
        }
        WebCore.EventProcessor.add(this._iframeElement.contentWindow.document, "keypress", 
                Core.method(this, this._processKeyPress), false);
        WebCore.EventProcessor.add(this._iframeElement.contentWindow.document, "keyup", 
                Core.method(this, this._processKeyUp), false);
        WebCore.EventProcessor.add(this._iframeElement.contentWindow.document, "mousedown", 
                Core.method(this, this._processMouseDown), false);
        WebCore.EventProcessor.add(this._iframeElement.contentWindow.document, "mouseup", 
                Core.method(this, this._processMouseUp), false);
        this._contentDocumentRendered = true;
    },
    
    renderDispose: function(update) {
        WebCore.EventProcessor.removeAll(this._iframeElement.contentWindow.document);
        this._mainDivElement = null;
        this._iframeElement = null;
        this._contentDocumentRendered = false;
        this._selectionRange = null;
    },
    
    renderDisplay: function() {
        if (!this._contentDocumentRendered) {
            this._renderContentDocument();
        }
        
        var rtaMainDivElement = this.component._richTextArea.peer._mainDivElement;
        var bounds = new WebCore.Measure.Bounds(rtaMainDivElement.parentNode);
        
        if (bounds.height) {
            var calculatedHeight = (bounds.height < this._trimHeight + 100 ? 100 : bounds.height - this._trimHeight) + "px";
            if (this._iframeElement.style.height != calculatedHeight) {
                this._iframeElement.style.height = calculatedHeight; 
            }
        }
    },
    
    renderUpdate: function(update) {
        // Not invoked.
    },
    
    _storeData: function() {
        var contentDocument = this._iframeElement.contentWindow.document;
        var html = contentDocument.body.innerHTML;
        this._renderedHtml = html;
        this.component._richTextArea.set("text", html);
    },
    
    _storeRange: function() {
        if (WebCore.Environment.BROWSER_INTERNET_EXPLORER) {
            this._selectionRange = this._iframeElement.contentWindow.document.selection.createRange();
        }
    }
});

ExtrasRender.ComponentSync.RichTextArea.MessageDialog = Core.extend(
        ExtrasRender.ComponentSync.RichTextArea.AbstractDialog, {
    
    $construct: function(richTextArea, title, message) {
        ExtrasRender.ComponentSync.RichTextArea.AbstractDialog.call(this, richTextArea,
                ExtrasRender.ComponentSync.RichTextArea.AbstractDialog.TYPE_OK,
                {
                    title: title
                },
                new EchoApp.Label({
                    text: message,
                    layoutData: {
                        insets: 30 
                    }
                }));
    }
});

ExtrasRender.ComponentSync.RichTextArea.TableDialog = Core.extend(
        ExtrasRender.ComponentSync.RichTextArea.AbstractDialog, {

    $construct: function(richTextArea) {
        ExtrasRender.ComponentSync.RichTextArea.AbstractDialog.call(this, richTextArea,
                ExtrasRender.ComponentSync.RichTextArea.AbstractDialog.TYPE_OK_CANCEL,
                {
                    title: richTextArea.peer._msg["TableDialog.Title"], 
                    icon: richTextArea.peer._icons.table
                },
                new EchoApp.Grid({
                    insets: 10,
                    children: [
                        new EchoApp.Label({
                            text: richTextArea.peer._msg["TableDialog.PromptRows"],
                            layoutData: {
                                alignment: "trailing"
                            }
                        }),
                        this._rowsField = new EchoApp.TextField({
                            text: "2",
                            width: 100   
                        }),
                        new EchoApp.Label({
                            text: richTextArea.peer._msg["TableDialog.PromptColumns"],
                            layoutData: {
                                alignment: "trailing"
                            }
                        }),
                        this._columnsField = new EchoApp.TextField({
                            text: "3",
                            width: 100
                        })
                    ]
                }));
    },
    
    processOk: function(e) {
        var data = {
            rows: parseInt(this._rowsField.get("text")),
            columns: parseInt(this._columnsField.get("text"))
        };
        if (isNaN(data.rows) || data.rows < 1 || data.rows > 50) {
            this.parent.add(new ExtrasRender.ComponentSync.RichTextArea.MessageDialog(this._richTextArea, 
                    this._richTextArea.peer._msg["TableDialog.ErrorDialogTitle"], 
                    this._richTextArea.peer._msg["TableDialog.ErrorDialog.Rows"]));
            return;
        }
        if (isNaN(data.columns) || data.columns < 1 || data.columns > 50) {
            this.parent.add(new ExtrasRender.ComponentSync.RichTextArea.MessageDialog(this._richTextArea, 
                    this._richTextArea.peer._msg["TableDialog.ErrorDialogTitle"], 
                    this._richTextArea.peer._msg["TableDialog.ErrorDialog.Columns"]));
            return;
        }
        this.parent.remove(this);
        this.fireEvent({type: "tableInsert", source: this, data: data});
    }
});