Source: fields/advanced/TokenField.js

(function($) {

    var Alpaca = $.alpaca;

    Alpaca.Fields.TokenField = Alpaca.Fields.TextField.extend(
    /**
     * @lends Alpaca.Fields.TokenField.prototype
     */
    {
        /**
         * @override
         */
        getFieldType: function() {
            return "token";
        },

        /**
         * @override
         */
        setup: function()
        {
            this.base();

            if (!this.options.separator)
            {
                this.options.separator = ",";
            }

            if (typeof(this.options.tokenfield) == "undefined")
            {
                this.options.tokenfield = {};
            }

            if (typeof(this.options.tokenfield.showAutocompleteOnFocus) === "undefined")
            {
                this.options.tokenfield.showAutocompleteOnFocus = true;
            }
        },

        /**
         * @override
         */
        getControlValue: function()
        {
            return this.base();
        },

        /**
         * @override
         */
        setValue: function(val)
        {
            this.base(val);
        },

        /**
         * @override
         */
        onBlur: function(e)
        {
            this.base(e);
        },

        afterRenderControl: function(model, callback)
        {
            var self = this;

            this.base(model, function() {

                // see if we can render CK Editor
                if (!self.isDisplayOnly() && self.control && typeof($.fn.tokenfield) !== "undefined")
                {
                    // wait for Alpaca to declare the DOM swapped and ready before we attempt to do anything
                    self.on("ready", function() {
                        $(self.control).tokenfield(self.options.tokenfield);
                    });
                }

                callback();
            });
        }



        /* builder_helpers */
        ,

        /**
         * @override
         */
        getTitle: function() {
            return "Token Field";
        },

        /**
         * @override
         */
        getDescription: function() {
            return "Token field for entering list of tokens separated by delimiter.";
        },

        /**
         * @override
         */
        getSchemaOfOptions: function() {
            return Alpaca.merge(this.base(), {
                "properties": {
                    "separator": {
                        "title": "Separator",
                        "description": "Separator used to split tokens.",
                        "type": "string",
                        "default":","
                    },
                    "tokenfield": {
                        "title": "Token Field options",
                        "description": "Settings to pass into the underlying bootstrap-tokenfield control",
                        "type": "object",
                        "default": undefined
                    }
                }
            });
        },

        /**
         * @override
         */
        getOptionsForOptions: function() {
            return Alpaca.merge(this.base(), {
                "fields": {
                    "separator": {
                        "type": "text"
                    }
                }
            });
        }

        /* end_builder_helpers */
    });

    Alpaca.registerFieldClass("token", Alpaca.Fields.TokenField);

})(jQuery);