fineui/src/base/single/editor/editor.textarea.js

/**
 *
 * Created by GUY on 2016/1/18.
 * @class BI.TextAreaEditor
 * @extends BI.Single
 */
BI.TextAreaEditor = BI.inherit(BI.Single, {
    _defaultConfig: function (conf) {
        return BI.extend(BI.TextAreaEditor.superclass._defaultConfig.apply(), {
            baseCls: "bi-textarea-editor",
            value: "",
            errorText: "",
            adjustYOffset: conf.simple ? 0 : 2,
            adjustXOffset: 0,
            offsetStyle: "left",
            validationChecker: function () {
                return true;
            },
            scrolly: true,
        });
    },

    render: function () {
        var o = this.options, self = this;
        this.content = BI.createWidget({
            type: "bi.layout",
            tagName: "textarea",
            width: "100%",
            height: "100%",
            cls: "bi-textarea textarea-editor-content display-block",
            css: o.scrolly ? null : {
                overflowY: "hidden",
            },
        });
        this.content.element.css({ resize: "none" });
        BI.createWidget({
            type: "bi.absolute",
            element: this,
            items: [{
                el: {
                    type: "bi.adaptive",
                    items: [this.content]
                },
                left: 4,
                right: 4,
                top: 2,
                bottom: 2
            }]
        });

        this.content.element.on("input propertychange", function (e) {
            self._checkError();
            self._checkWaterMark();
            self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.CHANGE, self.getValue(), self);
            self.fireEvent(BI.TextAreaEditor.EVENT_CHANGE);
            if (BI.isEmptyString(self.getValue())) {
                self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.EMPTY, self.getValue(), self);
            }
        });

        this.content.element.focus(function () {
            self._checkError();
            self._focus();
            self.fireEvent(BI.TextAreaEditor.EVENT_FOCUS);
            BI.Widget._renderEngine.createElement(document).bind("mousedown." + self.getName(), function (e) {
                if (BI.DOM.isExist(self) && !self.element.__isMouseInBounds__(e)) {
                    BI.Widget._renderEngine.createElement(document).unbind("mousedown." + self.getName());
                    self.content.element.blur();
                }
            });
        });
        this.content.element.blur(function () {
            self._setErrorVisible(false);
            self._blur();
            if (!self._isError()) {
                self.fireEvent(BI.TextAreaEditor.EVENT_CONFIRM);
            }
            self.fireEvent(BI.TextAreaEditor.EVENT_BLUR);
            BI.Widget._renderEngine.createElement(document).unbind("mousedown." + self.getName());
        });
        this.content.element.keydown(function () {
           // 水印快速消失
            self._checkWaterMark();
        });
        this.content.element.keyup(function (e) {
            self.fireEvent(BI.TextAreaEditor.EVENT_KEY_DOWN, e.keyCode);
        });
        this.content.element.click(function (e) {
            e.stopPropagation();
        });
        if (BI.isKey(o.value)) {
            this.setValue(o.value);
        }
        if (BI.isNotNull(o.style)) {
            this.setStyle(o.style);
        }
        this._checkWaterMark();
    },

    _checkWaterMark: function () {
        var self = this, o = this.options;
        var val = this.getValue();
        if (BI.isNotEmptyString(val)) {
            this.watermark && this.watermark.destroy();
            this.watermark = null;
        } else {
            if (BI.isNotEmptyString(o.watermark)) {
                if (!this.watermark) {
                    this.watermark = BI.createWidget({
                        type: "bi.label",
                        cls: "bi-water-mark textarea-watermark",
                        textAlign: "left",
                        whiteSpace: o.scrolly ? "normal" : "nowrap",
                        title: o.watermark,
                        text: o.watermark,
                        invalid: o.invalid,
                        disabled: o.disabled,
                        hgap: 6,
                        vgap: o.height > 24 ? 4 : 2,
                        height: o.height > 24 ? "" : o.height,
                    });
                    this.watermark.element.bind({
                        mousedown: function (e) {
                            if (self.isEnabled()) {
                                self.focus();
                            } else {
                                self.blur();
                            }
                            e.stopEvent();
                        },
                        click: function (e) {
                            e.stopPropagation();
                        },
                    });
                    BI.createWidget({
                        type: "bi.absolute",
                        element: this,
                        items: [{
                            el: this.watermark,
                            left: 0,
                            top: 0,
                            right: 0
                        }]
                    });
                } else {
                    this.watermark.setText(o.watermark);
                    this.watermark.setValid(!o.invalid);
                    this.watermark.setEnable(!o.disabled);
                }
            }
        }
    },

    _isError: function () {
        return this.isEnabled() && !this.options.validationChecker(this.getValue());
    },

    _checkError: function () {
        var isError = this._isError();
        this._setErrorVisible(isError);
        this.element[isError ? "addClass" : "removeClass"]("error");
    },

    _focus: function () {
        this.content.element.addClass("textarea-editor-focus");
        this._checkWaterMark();
        if (BI.isEmptyString(this.getValue())) {
            this.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.EMPTY, this.getValue(), this);
        }
    },

    _blur: function () {
        this.content.element.removeClass("textarea-editor-focus");
        this._checkWaterMark();
    },

    _setErrorVisible: function (b) {
        var o = this.options;
        var errorText = o.errorText;
        if (BI.isFunction(errorText)) {
            errorText = errorText(BI.trim(this.getValue()));
        }
        if (!this.disabledError && BI.isKey(errorText)) {
            BI.Bubbles[b ? "show" : "hide"](this.getName(), errorText, this, {
                adjustYOffset: o.adjustYOffset,
                adjustXOffset: o.adjustXOffset,
                offsetStyle: o.offsetStyle,
            });
        }
    },

    _defaultState: function () {
        if (BI.isEmptyString(this.getValue())) {
            this.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.EMPTY, this.getValue(), this);
            this.fireEvent(BI.TextAreaEditor.EVENT_EMPTY);
        }
    },

    focus: function () {
        this._focus();
        this.content.element.focus();
    },

    blur: function () {
        this._blur();
        this.content.element.blur();
    },

    getValue: function () {
        return this.content.element.val();
    },

    setValue: function (value) {
        this.content.element.val(value);
        this._checkError();
        this._checkWaterMark();
        this._defaultState();
    },

    setStyle: function (style) {
        this.style = style;
        this.element.css(style);
        this.content.element.css(BI.extend({}, style, {
            color: style.color || BI.DOM.getContrastColor(BI.DOM.isRGBColor(style.backgroundColor) ? BI.DOM.rgb2hex(style.backgroundColor) : style.backgroundColor)
        }));
    },

    getStyle: function () {
        return this.style;
    },

    setWatermark: function (v) {
        this.options.watermark = v;
        this._checkWaterMark();
    },

    _setValid: function (b) {
        BI.TextAreaEditor.superclass._setValid.apply(this, arguments);
        // this.content.setValid(b);
        // this.watermark && this.watermark.setValid(b);
    },

    _setEnable: function (b) {
        BI.TextAreaEditor.superclass._setEnable.apply(this, [b]);
        this.content && (this.content.element[0].disabled = !b);
    }
});
BI.TextAreaEditor.EVENT_CHANGE = "EVENT_CHANGE";
BI.TextAreaEditor.EVENT_BLUR = "EVENT_BLUR";
BI.TextAreaEditor.EVENT_FOCUS = "EVENT_FOCUS";
BI.TextAreaEditor.EVENT_CONFIRM = "EVENT_CONFIRM";
BI.TextAreaEditor.EVENT_EMPTY = "EVENT_EMPTY";
BI.TextAreaEditor.EVENT_KEY_DOWN = "EVENT_KEY_DOWN";
BI.shortcut("bi.textarea_editor", BI.TextAreaEditor);