/* global $ */

// 自定义扩展一个新的工具栏元件 newTextbox
var newTextbox = {// eslint-disable-line
    title: "newtextbox",
    icon: "text.png",
    design: function () {
        var textbox = $("<input />")
            .attr({
                type: this.options.type,
                name: this.options.name,
                placeholder: this.options.placeholder,
                "data-regex": this.options.regex,
            })
            .addClass(this.className)
            .val(this.options.value);

        this.container.append(textbox);
        return textbox;
    },
    applying: function () {
        var elem = this.design();
        elem.removeAttr("readonly");

        return elem;
    },
    getValue: function () {
        return this.elem.val() || "";
    },
    setValue: function (value) {
        this.options.value = value;
    },
    updateEvent: function () {
        return [{
            name: "change",
            filter: ""
        }];
    },
    className: "formbuilder-control-textbox",
    options: {
        label: "",
        required: false,
        placeholder: "",
        name: "",
        value: "",
        type: "text",
        className: "",
        width: 60,
        regex: ""
    },
    property: {
        "name": {
            "text": "name",
            "type": "textbox",
            update: function (value) {
                this.elem.attr("name", value);
            }
        },
        "placeholder": {
            "text": "placeholder",
            "type": "textbox",
            update: function (value) {
                this.elem.attr("placeholder", value);
            }
        },
        "regex": {
            "text": "regex",
            "type": "textbox",
        },
        value: {
            "text": "value",
            type: "textbox",
            update: function (value) {
                this.elem.val(value);
            }
        },
        width: {
            width: "width",
            type: "textbox",
            source: {
                readonly: true
            },
            update: function (value) {
                this.elem.width(value);
            }
        }
    }
};