render.richtextarea.js

一个ajax富客户端的ajax类库

            icon: icon,
            toolTipText: toolTipText
        });
        if (eventMethod) {
            button.addListener("action", Core.method(this, eventMethod));
        }
        return button;
    },
    
    getDomainElement: function() { 
        return this._mainDivElement;
    },
    
    _processCommand: function(e) {
        this._richTextInput.peer.doCommand(e.actionCommand);
    },
    
    _processMenuAction: function(e) {
        if (e.modelId.charAt(0) == '/') {
            var separatorIndex = e.modelId.indexOf("/", 1);
            if (separatorIndex == -1) {
                this._richTextInput.peer.doCommand(e.modelId.substring(1));
            } else {
                this._richTextInput.peer.doCommand(e.modelId.substring(1, separatorIndex),
                        e.modelId.substring(separatorIndex + 1));
            }
        } else {
            switch (e.modelId) {
            case "foreground":
                this._processSetForegroundDialog();
                break;
            case "background":
                this._processSetBackgroundDialog();
                break;
            case "inserttable":
                this._processInsertTableDialog();
                break;
            case "inserthyperlink":
                this._processInsertHyperlinkDialog();
                break;
            case "insertimage":
                this._processInsertImageDialog();
                break;
            case "cut":
            case "copy":
            case "paste":
            case "delete":
                try {
                    this._richTextInput.peer.doCommand(e.modelId);
                } catch (ex) {
                    this.baseComponent.add(new ExtrasRender.ComponentSync.RichTextArea.MessageDialog(this.component,
                            this._msg["Generic.Error"], this._msg["Error.ClipboardAccessDisabled"])); 
                }
            }
        }
    },
    
    /**
     * Event handler for color selection events from background ColorDialog.
     */
    _processSetBackground: function(e) {
        if (WebCore.Environment.BROWSER_INTERNET_EXPLORER) {
            this._richTextInput.peer.doCommand("backcolor", e.data);
        } else {
            this._richTextInput.peer.doCommand("hilitecolor", e.data);
        }
    },
    
    /**
     * Event handler for user request (from menu/toolbar) to set background color.
     */
    _processSetBackgroundDialog: function(e) {
        var colorDialog = new ExtrasRender.ComponentSync.RichTextArea.ColorDialog(this.component, true);
        colorDialog.addListener("colorSelect", Core.method(this, this._processSetBackground));
        this.baseComponent.add(colorDialog);
    },
    
    /**
     * Event handler for color selection events from foreground ColorDialog.
     */
    _processSetForeground: function(e) {
        this._richTextInput.peer.doCommand("forecolor", e.data);
    },
    
    /**
     * Event handler for user request (from menu/toolbar) to set foreground color.
     */
    _processSetForegroundDialog: function(e) {
        var colorDialog = new ExtrasRender.ComponentSync.RichTextArea.ColorDialog(this.component, false);
        colorDialog.addListener("colorSelect", Core.method(this, this._processSetForeground));
        this.baseComponent.add(colorDialog);
    },
    
    /**
     * Event handler for table insert events from foreground TableDialog.
     */
    _processInsertTable: function(e) {
        var rowHtml = "";
        for (var i = 0; i < e.data.columns; ++i) {
            rowHtml += "<td></td>";
        }
        rowHtml = "<tr>" + rowHtml + "</tr>";
        var tableHtml = "<table width=\"100%\" border=\"1\" cellspacing=\"0\" cellpadding=\"1\"><tbody>";
        for (var i = 0; i < e.data.rows; ++i) {
            tableHtml += rowHtml;
        }
        tableHtml += "</tbody></table>";
        this._richTextInput.peer._insertHtml(tableHtml);
    },
    
    /**
     * Event handler for user request (from menu/toolbar) to insert a table.
     */
    _processInsertTableDialog: function(e) {
        var tableDialog = new ExtrasRender.ComponentSync.RichTextArea.TableDialog(this.component);
        tableDialog.addListener("tableInsert", Core.method(this, this._processInsertTable));
        this.baseComponent.add(tableDialog);
    },
    
    _processInsertHyperlink: function(e) {
        this._richTextInput.peer._insertHtml("<a href=\"" + e.data.url + "\">"
                + (e.data.description ? e.data.description : e.data.url) + "</a>");
    },
    
    _processInsertHyperlinkDialog: function(e) {
        var hyperlinkDialog = new ExtrasRender.ComponentSync.RichTextArea.HyperlinkDialog(this.component);
        hyperlinkDialog.addListener("insertHyperlink", Core.method(this, this._processInsertHyperlink));
        this.baseComponent.add(hyperlinkDialog);
    },
    
    _processInsertImage: function(e) {
        this._richTextInput.peer._insertHtml("<img src=\"" + e.data.url + "\">");
    },
    
    _processInsertImageDialog: function(e) {
        var imageDialog = new ExtrasRender.ComponentSync.RichTextArea.ImageDialog(this.component);
        imageDialog.addListener("insertImage", Core.method(this, this._processInsertImage));
        this.baseComponent.add(imageDialog);
    },
    
    renderAdd: function(update, parentElement) {
        this._icons = this.getIcons();
        if (!this._icons) {
            this._icons = {};
        }
        
        this._paneRender = this.component.parent.pane;
        
        this._mainDivElement = document.createElement("div");

        if (this._paneRender) {
            this._mainDivElement.style.cssText = "position:absolute;top:0px;left:0px;right:0px;bottom:0px;";
        } else {
            this._mainDivElement.style.position = "relative";
            // FIXME. set height of component based on height setting.
            this._mainDivElement.style.height = "300px";
        }
        
        parentElement.appendChild(this._mainDivElement);
    },
    
    renderDispose: function(update) {
        EchoArc.ComponentSync.prototype.renderDispose.call(this, update);
        this._mainDivElement = null;
    },
    
    renderDisplay: function() {
        WebCore.VirtualPosition.redraw(this._mainDivElement);
        EchoArc.ComponentSync.prototype.renderDisplay.call(this);
    },
    
    renderUpdate: function(update) {
        if (update.isUpdatedPropertySetIn({text: true })) {
            if (update.getUpdatedProperty("text").newValue == this._richTextInput.peer._renderedHtml) {
                return;
            }
        }
    
        var element = this._mainDivElement;
        var containerElement = element.parentNode;
        EchoRender.renderComponentDispose(update, update.parent);
        containerElement.removeChild(element);
        this.renderAdd(update, containerElement);
    }
});

ExtrasRender.ComponentSync.RichTextArea.AbstractDialog = Core.extend(EchoApp.WindowPane, {

    $static: {
        TYPE_OK: 0,
        TYPE_OK_CANCEL: 1
    },

    $construct: function(richTextArea, type, properties, content) {
        this._richTextArea = richTextArea;
    
        var controlPaneSplitPaneStyleName = richTextArea.render("controlPaneSplitPaneStyleName");
        var controlPaneRowStyleName = richTextArea.render("controlPaneRowStyleName");
        var controlPaneButtonStyleName = richTextArea.render("controlPaneButtonStyleName"); 
        
        EchoApp.WindowPane.call(this, {
            styleName: richTextArea.render("windowPaneStyleName"),
            iconInsets: "6px 10px",
            width: 280,
            height: 200,
            resizable: false,
            events: {
                close: Core.method(this, this.processCancel)
            },
            children: [
                new EchoApp.SplitPane({
                    styleName: controlPaneSplitPaneStyleName,
                    style: controlPaneSplitPaneStyleName ? null : ExtrasRender.DEFAULT_CONTROL_PANE_SPLIT_PANE_STYLE,
                    children: [
                        this.controlsRow = new EchoApp.Row({
                            styleName: controlPaneRowStyleName,
                            style: controlPaneRowStyleName ? null : ExtrasRender.DEFAULT_CONTROL_PANE_ROW_STYLE
                        }),
                        content
                    ]
                })
            ]
        });
        
        this.controlsRow.add(new EchoApp.Button({
            styleName: controlPaneButtonStyleName,
            style: controlPaneButtonStyleName ? null : ExtrasRender.DEFAULT_CONTROL_PANE_BUTTON_STYLE,
            text: richTextArea.peer._msg["Generic.Ok"],
            icon: richTextArea.peer._icons.ok,
            events: {
                action: Core.method(this, this.processOk)
            }
        }));
        
        if (type == ExtrasRender.ComponentSync.RichTextArea.AbstractDialog.TYPE_OK_CANCEL) {
            this.controlsRow.add(new EchoApp.Button({
                styleName: controlPaneButtonStyleName,
                style: controlPaneButtonStyleName ? null : ExtrasRender.DEFAULT_CONTROL_PANE_BUTTON_STYLE,
                text: richTextArea.peer._msg["Generic.Cancel"],
                icon: richTextArea.peer._icons.cancel,
                events: {
                    action: Core.method(this, this.processCancel)
                }
            }));
        }
        
        for (var x in properties) {
            this.set(x, properties[x]);
        }
    },
    
    $virtual: {
        
        processCancel: function(e) {
            this.parent.remove(this);
        },
        
        processOk: function(e) {
            this.parent.remove(this);
        }
    }
});

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

    $construct: function(richTextArea, setBackground) {
        ExtrasRender.ComponentSync.RichTextArea.AbstractDialog.call(this, richTextArea,
                ExtrasRender.ComponentSync.RichTextArea.AbstractDialog.TYPE_OK_CANCEL, 
                {
                    title: richTextArea.peer._msg[setBackground ? 
                            "ColorDialog.Title.Background" : "ColorDialog.Title.Foreground"],
                    icon: setBackground ? richTextArea.peer._icons.background : richTextArea.peer._icons.foreground,
                    width: 280,
                    height: 320
                },
                new EchoApp.Column({
                    insets: 10,
                    children: [
                        new EchoApp.Label({
                            text: richTextArea.peer._msg[
                                    setBackground ? "ColorDialog.PromptBackground" : "ColorDialog.PromptForeground"]
                        }),
                        this._colorSelect = new ExtrasApp.ColorSelect({
                            displayValue: true
                        })
                    ]
                }));
    },
    
    processOk: function(e) {
        var color = this._colorSelect.get("color");
        this.parent.remove(this);
        this.fireEvent({type: "colorSelect", source: this, data : color});
    }
});

ExtrasRender.ComponentSync.RichTextArea.HyperlinkDialog = 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["HyperlinkDialog.Title"], 
                    icon: richTextArea.peer._icons.hyperlink
                },
                new EchoApp.Column({
                    insets: 10,
                    children: [
                        new EchoApp.Label({
                            text: richTextArea.peer._msg["HyperlinkDialog.PromptURL"]
                        }),
                        this._urlField = new EchoApp.TextField({
                            width: "100%"
                        }),
                        new EchoApp.Label({
                            text: richTextArea.peer._msg["HyperlinkDialog.PromptDescription"]
                        }),
                        this._descriptionField = new EchoApp.TextField({
                            width: "100%"
                        })
                    ]
                }));
    },