Source: fields/advanced/ColorField.js

/**
 * Uses the spectrum plugin to provide a color picker.
 * This used to rely on HTML5 but no longer.
 */
(function($) {

    var Alpaca = $.alpaca;

    Alpaca.Fields.ColorField = Alpaca.Fields.TextField.extend(
    /**
     * @lends Alpaca.Fields.ColorField.prototype
     */
    {
        /**
         * @see Alpaca.Fields.TextField#setup
         */
        setup: function()
        {
            var self = this;

            this.spectrumAvailable = false;
            if (!self.isDisplayOnly() && typeof($.fn.spectrum) !== "undefined")
            {
                this.spectrumAvailable = true;
            }

            // default html5 input type = "color";
            if (typeof(this.options.spectrum) === "undefined" && self.spectrumAvailable)
            {
                this.inputType = "color";
            }

            this.base();

            // set up default spectrum settings
            if (typeof(this.options.spectrum) === "undefined")
            {
                this.options.spectrum = {};
            }
            if (typeof(this.options.spectrum.showInput) === "undefined")
            {
                this.options.spectrum.showInput = true;
            }
            if (typeof(this.options.spectrum.showPalette) === "undefined")
            {
                this.options.spectrum.showPalette = true;
            }
            if (typeof(this.options.spectrum.preferredFormat) === "undefined")
            {
                this.options.spectrum.preferredFormat = "hex3";
            }
            if (typeof(this.options.spectrum.clickoutFiresChange) === "undefined")
            {
                this.options.spectrum.clickoutFiresChange = true;
            }
        },

        /**
         * @see Alpaca.Fields.TextField#getFieldType
         */
        getFieldType: function() {
            return "color";
        },

        /**
         * @see Alpaca.Fields.TextField#getType
         */
        getType: function() {
            return "string";
        },

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

            this.base(model, function() {

                // if we can render the spectrum plugin...
                if (self.spectrumAvailable && self.control)
                {
                    setTimeout(function() {
                        $((self.control)[0]).spectrum(
                          $.extend({ color: this.data }, self.options.spectrum)
                        );
                    }, 100);

                    $(self.control).on('change.spectrum', function(e, tinycolor) {
                        self.setValue(tinycolor.toHexString());
                    });
                }

                callback();
            });
        },

        /* builder_helpers */

        /**
         * @see Alpaca.Fields.TextField#getTitle
         */
        getTitle: function() {
            return "Color Field";
        },

        /**
         * @see Alpaca.Fields.TextField#getDescription
         */
        getDescription: function() {
            return "A color picker for selecting hexadecimal color values";
        }

        /* end_builder_helpers */
    });

    Alpaca.registerFieldClass("color", Alpaca.Fields.ColorField);
    Alpaca.registerDefaultSchemaFieldMapping("color", "color");

})(jQuery);