search

vitalets / x-editable

In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery
http://vitalets.github.io/x-editable
MIT License
6.51k stars 1.72k forks source link

Colorpicker type #124

Open kvpt opened 11 years ago

kvpt commented 11 years ago

Hello,

It is possible to add for the next release a color picker type. Like this : http://www.eyecon.ro/bootstrap-colorpicker/

Thanks.

vitalets commented 11 years ago

will add to roadmap. mark as new feature, thx!

jasonhjohnson commented 10 years ago

Any updates on this? Would be nice to have a color picker.

pchelintsev commented 10 years ago

up

osc2nuke commented 10 years ago

i googled for that, and end up here, go go go

Nevario commented 9 years ago

Just adding another vote for a color picker. Would be the icing on an already delicious cake!

mariorodriguespt commented 9 years ago

+1

iamduncan commented 9 years ago

+1

yhontar commented 9 years ago

+1

hugocabral commented 9 years ago

Any update? Without this I can't use X-Editable :(

lefty55104 commented 9 years ago

DEFINITELY could use this.

hazrpg commented 9 years ago

I would definitely appreciate this too.

Cojad commented 9 years ago

Add a branch which still maintain for future reference. This one looks very promising. http://mjolnic.com/bootstrap-colorpicker/

neketsushonen commented 9 years ago

Hello, I have implemented a simple combobox of color. May be a help for you. var colorsource = [ {value:'#000066',text:'#000066'}, {value:'#000099',text:'#000099'}, {value:'#0000CC',text:'#0000CC'}, {value:'#0000FF',text:'#0000FF'}, {value:'#003300',text:'#003300'}, {value:'#003399',text:'#003399'}, {value:'#0033CC',text:'#0033CC'}, {value:'#006600',text:'#006600'}, {value:'#006666',text:'#006666'}, {value:'#006699',text:'#006699'}, {value:'#0066CC',text:'#0066CC'}, {value:'#0066FF',text:'#0066FF'}, {value:'#009900',text:'#009900'}, {value:'#009933',text:'#009933'}, {value:'#009999',text:'#009999'}, {value:'#0099CC',text:'#0099CC'}, {value:'#0099FF',text:'#0099FF'}, {value:'#00CC00',text:'#00CC00'}, {value:'#00CC66',text:'#00CC66'}, {value:'#00CC99',text:'#00CC99'}, {value:'#00CCFF',text:'#00CCFF'}, {value:'#00FF00',text:'#00FF00'}, {value:'#00FF99',text:'#00FF99'}, {value:'#00FFCC',text:'#00FFCC'}, {value:'#00FFFF',text:'#00FFFF'}, {value:'#333300',text:'#333300'}, {value:'#333399',text:'#333399'}, {value:'#3333CC',text:'#3333CC'}, {value:'#3333FF',text:'#3333FF'}, {value:'#336600',text:'#336600'}, {value:'#336699',text:'#336699'}, {value:'#3366CC',text:'#3366CC'}, {value:'#3366FF',text:'#3366FF'}, {value:'#339933',text:'#339933'}, {value:'#339966',text:'#339966'}, {value:'#3399FF',text:'#3399FF'}, {value:'#33CC33',text:'#33CC33'}, {value:'#33CCCC',text:'#33CCCC'}, {value:'#33CCFF',text:'#33CCFF'}, {value:'#660033',text:'#660033'}, {value:'#660066',text:'#660066'}, {value:'#6600CC',text:'#6600CC'}, {value:'#6600FF',text:'#6600FF'}, {value:'#663300',text:'#663300'}, {value:'#666633',text:'#666633'}, {value:'#666699',text:'#666699'}, {value:'#6666FF',text:'#6666FF'}, {value:'#669900',text:'#669900'}, {value:'#669999',text:'#669999'}, {value:'#6699FF',text:'#6699FF'}, {value:'#66CCFF',text:'#66CCFF'}, {value:'#66FF33',text:'#66FF33'}, {value:'#66FF66',text:'#66FF66'}, {value:'#66FF99',text:'#66FF99'}, {value:'#66FFCC',text:'#66FFCC'}, {value:'#66FFFF',text:'#66FFFF'}, {value:'#800000',text:'#800000'}, {value:'#990000',text:'#990000'}, {value:'#990033',text:'#990033'}, {value:'#990099',text:'#990099'}, {value:'#9900CC',text:'#9900CC'}, {value:'#9900FF',text:'#9900FF'}, {value:'#993300',text:'#993300'}, {value:'#993333',text:'#993333'}, {value:'#993366',text:'#993366'}, {value:'#993399',text:'#993399'}, {value:'#9933FF',text:'#9933FF'}, {value:'#996600',text:'#996600'}, {value:'#996633',text:'#996633'}, {value:'#9966FF',text:'#9966FF'}, {value:'#999966',text:'#999966'}, {value:'#9999FF',text:'#9999FF'}, {value:'#99CC00',text:'#99CC00'}, {value:'#99CCFF',text:'#99CCFF'}, {value:'#99FF33',text:'#99FF33'}, {value:'#99FF66',text:'#99FF66'}, {value:'#99FF99',text:'#99FF99'}, {value:'#99FFCC',text:'#99FFCC'}, {value:'#CC0000',text:'#CC0000'}, {value:'#CC0066',text:'#CC0066'}, {value:'#CC0099',text:'#CC0099'}, {value:'#CC00CC',text:'#CC00CC'}, {value:'#CC00FF',text:'#CC00FF'}, {value:'#CC3300',text:'#CC3300'}, {value:'#CC3399',text:'#CC3399'}, {value:'#CC33FF',text:'#CC33FF'}, {value:'#CC6600',text:'#CC6600'}, {value:'#CC6699',text:'#CC6699'}, {value:'#CC66FF',text:'#CC66FF'}, {value:'#CC9900',text:'#CC9900'}, {value:'#CC99FF',text:'#CC99FF'}, {value:'#CCCC00',text:'#CCCC00'}, {value:'#CCCCFF',text:'#CCCCFF'}, {value:'#CCFF33',text:'#CCFF33'}, {value:'#CCFF66',text:'#CCFF66'}, {value:'#CCFF99',text:'#CCFF99'}, {value:'#CCFFCC',text:'#CCFFCC'}, {value:'#CCFFFF',text:'#CCFFFF'}, {value:'#FF0000',text:'#FF0000'}, {value:'#FF0066',text:'#FF0066'}, {value:'#FF00FF',text:'#FF00FF'}, {value:'#FF3300',text:'#FF3300'}, {value:'#FF3399',text:'#FF3399'}, {value:'#FF33CC',text:'#FF33CC'}, {value:'#FF5050',text:'#FF5050'}, {value:'#FF6600',text:'#FF6600'}, {value:'#FF6666',text:'#FF6666'}, {value:'#FF6699',text:'#FF6699'}, {value:'#FF66CC',text:'#FF66CC'}, {value:'#FF66FF',text:'#FF66FF'}, {value:'#FF9900',text:'#FF9900'}, {value:'#FF9933',text:'#FF9933'}, {value:'#FF9966',text:'#FF9966'}, {value:'#FF9999',text:'#FF9999'}, {value:'#FF99CC',text:'#FF99CC'}, {value:'#FF99FF',text:'#FF99FF'}, {value:'#FFCC00',text:'#FFCC00'}, {value:'#FFCC66',text:'#FFCC66'}, {value:'#FFCC99',text:'#FFCC99'}, {value:'#FFCCCC',text:'#FFCCCC'}, {value:'#FFCCFF',text:'#FFCCFF'}, {value:'#FFFF00',text:'#FFFF00'}, {value:'#FFFF66',text:'#FFFF66'}, {value:'#FFFF99',text:'#FFFF99'}, {value:'#FFFFCC',text:'#FFFFCC'}, {value:'#FFFFFF',text:'#FFFFFF'} ];

    $('#colordelfondo').editable({
        mode: this.state.mode, source:colorsource,
          select2: {
          width: 200,  placeholder: 'Selecccione un color',
          allowClear: true,
          formatResult: function (item) {  return "<span style='padding-left:20px;border-left: 20px solid "+item.text+"'>"+item.text+"</span>"; },
          formatSelection: function (item){  return item.text;}
      }
    });
michiweber commented 9 years ago

As I stranded here after searching the net for a solution I would like to present to you my solution for a X-Editable Color Picker (http://mjolnic.com/bootstrap-colorpicker/)

This goes to your HTML page. The important thing is the attribute "data-type" that says use the type color

<a href="#" class="editable" data-type="color">#ff0000</a>

This goes to your JS file where you define or assign your $().editable() (just put it anywhere in the script)

(function ($) {
    "use strict";
    var Color = function (options) {
        this.init('color', options, Color.defaults);
    };
    $.fn.editableutils.inherit(Color, $.fn.editabletypes.abstractinput);
    $.extend(Color.prototype, {
        render: function() {
            this.$input = this.$tpl.find('input');
            this.$input.parent().colorpicker({
                container: this.$tpl,
                inline: true
            });
        },
        autosubmit: function() {
            this.$input.keydown(function (e) {
                if (e.which === 13) {
                    $(this).closest('form').submit();
                }
            });
        }   
    });

    Color.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
        tpl: '<div class="editable-color"><input type="hidden" class="form-control" value="" /></div>'
    });
    $.fn.editabletypes.color = Color;

}(window.jQuery));

To make it a little bit prettier I removed the shadow and the arrow on the top as in my code this already exists from the x-editable popover

.editable-input .colorpicker {
    box-shadow: none;
}
.editable-input .colorpicker:before,
.editable-input .colorpicker:after {
    display: none;
}
ZAZmaster commented 9 years ago

michiweber can you show jsfiddle example?

RobinRadic commented 9 years ago

@michiweber @ZAZmaster I had to add the following code to make it work:

$('.the-editable-element')
.on('shown', function(event, editable){
    editable.input.$input.parent().colorpicker('setValue', editable.value);
}).editable({url: url});

Otherwise it wouldnt jump to the right color.

Other then that, @michiweber it works perfect. Thanks

ZAZmaster commented 9 years ago

@RobinRadic thank you so much!

michiweber commented 9 years ago

@RobinRadic good point missed that part in my code as well. So far no one argued about that ;-) Thanks

jakeholland commented 8 years ago

@RobinRadic I ended up adding this line to the render function to select the color on open.

this.$input.parent().colorpicker('setValue', $('.editable-open').text());
noelc10 commented 7 years ago

does anyone has have a jsfiddle on @RobinRadic's and @michiweber's examples?

Mopster commented 7 years ago

Any progress on this ? :-)

MarQuisKnox commented 7 years ago

@Mopster: This feature is not planned at this time.

noelc10 commented 7 years ago

I tried some code with the based on the bootstrap colorpicker's "standard" declaration: feel free to correct my code :)

` $(document).on('click', '.editable-status-color', function(e) { e.stopImmediatePropagation(); // avoid duplicate of triggering event

    // Some sort of initialization and settings for the data to be used below
    var d = new $.Deferred(); // In my own understanding, this will be based as a prefetch event(sort of) of the editable, where the processed action in editable can be avoid or not (feel free to correct this)
    var row = $('table#statusTable');
    var isHex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/i; // Hex value checker with the # sign and in case-insensitive
    var prevColor = $(this).css('background-color');
    var thisPk = $(this).data('pk');
    var hexString = CRMActivity.rgb2hex(prevColor); // to check if the previous state of editable's background color is in hex value
    var checkStatusData = CRM.getCacheByKey('cache_status', 'ticket/status/all?orgId=' + ORG_ID); // variable to be parsed if the new value is already exist in the status cache
    var errorCheck = []; // data arrays to verify if the one of errors are present

    $('.editable-status-color').editable({
        validate: function(value) {
            /**
             * 
             * Data validation whether the new value is null, exist or in a hex value
             * 
             */
            if ($.trim(value) === '' || $.trim(value) === null) {
                try {
                    $('span.editable-status-color[data-pk="'+thisPk+'"]').css('background-color', hexString);
                    $('span.editable-status-color[data-pk="'+thisPk+'"]').html('<i class="hidden">'+hexString+'</i>');
                    $('span.editable-status-color[data-pk="'+thisPk+'"]').removeClass('editable-empty');
                    $.growl.error({ title: 'Error', message: 'Please enter Status Color.' });
                    d.reject();
                } catch (error) {
                    $.growl.error({ title: 'Error', message: 'Please enter Status Color.' });
                    d.reject();
                    errorCheck['validFormat'] = false;
                    errorCheck['empty'] = true;
                    errorCheck['exist'] = false;
                }

                return false;
            } else if (!isHex.test(value)) {
                $('span.editable-status-color[data-pk="'+thisPk+'"]').css('background-color', hexString);
                $('span.editable-status-color[data-pk="'+thisPk+'"]').html('<i class="hidden">'+hexString+'</i>');
                $('span.editable-status-color[data-pk="'+thisPk+'"]').removeClass('editable-empty');
                $('span.editable-status-color[data-pk="'+thisPk+'"]').replaceWith('<span class="badge editable editable-status-color enable-tooltip" id="editableStatusColor" data-inputclass="editableStatusColor" data-table="ticket_status" data-name="color" data-pk="'+thisPk+'" data-cache-key="cache_status" title="'+hexString+'" data-value="'+hexString+'" value="'+hexString+'" style="background-color: '+hexString+'; width: 25px; height: 25px; border: 1px solid #d2d6de; border-radius: 25px !important;"><i class="hidden">'+hexString+'</i></span>');
                $.growl.error({ title: 'Error', message: 'Invalid Status Color format.' });
                d.reject();
                errorCheck['validFormat'] = false;
                errorCheck['empty'] = false;
                errorCheck['exist'] = false;

                return false;
            } else {
                do {
                    checkStatusData.complete(function(response) {
                        if (typeof(response.responseJSON) !== 'undefined' || response.responseJSON.length !== 0) {
                            $.each(response.responseJSON, function(i, statusCheck) {
                                if (statusCheck['color'].toLowerCase() == $.trim(value).toLowerCase()) {
                                    $('span.editable-status-color[data-pk="'+thisPk+'"]').css('background-color', hexString);
                                    $('span.editable-status-color[data-pk="'+thisPk+'"]').html('<i class="hidden">'+hexString+'</i>');
                                    $('span.editable-status-color[data-pk="'+thisPk+'"]').removeClass('editable-empty');
                                    $('span.editable-status-color[data-pk="'+thisPk+'"]').replaceWith('<span class="badge editable editable-status-color enable-tooltip" id="editableStatusColor" data-inputclass="editableStatusColor" data-table="ticket_status" data-name="color" data-pk="'+thisPk+'" data-cache-key="cache_status" title="'+hexString+'" data-value="'+hexString+'" value="'+hexString+'" style="background-color: '+hexString+'; width: 25px; height: 25px; border: 1px solid #d2d6de; border-radius: 25px !important;"><i class="hidden">'+hexString+'</i></span>');
                                    $.growl.error({ title: 'Error', message: 'Status Color exist.' });
                                    d.reject();
                                    errorCheck['validFormat'] = true;
                                    errorCheck['empty'] = false;
                                    errorCheck['exist'] = true;

                                    return false;
                                }
                            });
                        }
                    });

                    break;
                } while (typeof(checkStatusData) !== 'undefined' || checkStatusData.complete.responseJSON !== 0);
            }
        },
        url: API_URL + 'ticket/data',
        params: function(params) {
            params.userId = USER_LOGGED_ID;
            params.table = ('ticket_status');
            params.orgId = ORG_ID;                 
            params.query = (params.pk !== '') ? 'update' : 'insert';

            return params;
        },
        success: function(response, newValue) {
            // this wil be process when validation is done, revalidating it to avoid critical error updating editable with colorpicker
            if (newValue === null || newValue === '') {
                return false;
            } else {
                checkStatusData.complete(function(response) {
                    if (response.data_exist === true) {
                        $('span.editable-status-color[data-value="'+hexString+'"]').replaceWith('<span class="badge editable editable-status-color enable-tooltip" id="editableStatusColor" data-inputclass="editableStatusColor" data-table="ticket_status" data-name="color" data-pk="'+thisPk+'" data-cache-key="cache_status" title="'+hexString+'" data-value="'+hexString+'" value="'+hexString+'" style="background-color: '+hexString+'; width: 25px; height: 25px; border: 1px solid #d2d6de; border-radius: 25px !important;"><i class="hidden">'+hexString+'</i></span>');
                        d.reject();

                        return false;
                    } else {
                        if (typeof(response.responseJSON) !== 'undefined' || response.responseJSON.length !== 0) {
                            $.each(response.responseJSON, function(i, statusCheck) {
                                if (statusCheck['color'].toLowerCase() == $.trim(newValue).toLowerCase()) {
                                    $('span.editable-status-color[data-value="'+hexString+'"]').replaceWith('<span class="badge editable editable-status-color enable-tooltip" id="editableStatusColor" data-inputclass="editableStatusColor" data-table="ticket_status" data-name="color" data-pk="'+thisPk+'" data-cache-key="cache_status" title="'+hexString+'" data-value="'+hexString+'" value="'+hexString+'" style="background-color: '+hexString+'; width: 25px; height: 25px; border: 1px solid #d2d6de; border-radius: 25px !important;"><i class="hidden">'+hexString+'</i></span>');
                                    d.reject();

                                    return false;
                                } else if (!isHex.test(newValue)) {
                                    $('span.editable-status-color[data-value="'+hexString+'"]').replaceWith('<span class="badge editable editable-status-color enable-tooltip" id="editableStatusColor" data-inputclass="editableStatusColor" data-table="ticket_status" data-name="color" data-pk="'+thisPk+'" data-cache-key="cache_status" title="'+hexString+'" data-value="'+hexString+'" value="'+hexString+'" style="background-color: '+hexString+'; width: 25px; height: 25px; border: 1px solid #d2d6de; border-radius: 25px !important;"><i class="hidden">'+hexString+'</i></span>');
                                    d.reject();

                                    return false;
                                } else {
                                    errorCheck['validFormat'] = true;
                                    errorCheck['empty'] = false;
                                    errorCheck['exist'] = false;
                                    console.log(errorCheck);
                                }
                            });
                        } else {
                            var cache_key = ('cache_status');
                            if (cache_key) {
                                $('span.editable-status-color[data-pk="'+thisPk+'"]').replaceWith('<span class="badge editable editable-status-color enable-tooltip" id="editableStatusColor" data-inputclass="editableStatusColor" data-table="ticket_status" data-name="color" data-pk="'+thisPk+'" data-cache-key="cache_status" title="'+hexString+'" data-value="'+hexString+'" value="'+hexString+'" style="background-color: '+hexString+'; width: 25px; height: 25px; border: 1px solid #d2d6de; border-radius: 25px !important;"><i class="hidden">'+hexString+'</i></span>');
                                CRM.removeCacheByKey(cache_key, false);
                                CRM.getCacheByKey(cache_key, 'ticket/status/all?orgId=' + ORG_ID);                            
                                // _init();
                            }
                            d.promise();

                            return false;
                        }
                    }
                });
            }

            if (errorCheck['empty'] === false && errorCheck['validFormat'] === true && errorCheck['exist'] === false) {
                console.log(errorCheck);

                var cache_key = ('cache_status');
                if (cache_key) {
                    $('span.editable-status-color[data-pk="'+thisPk+'"]').replaceWith('<span class="badge editable editable-status-color enable-tooltip" id="editableStatusColor" data-inputclass="editableStatusColor" data-table="ticket_status" data-name="color" data-pk="'+thisPk+'" data-cache-key="cache_status" title="'+newValue+'" data-value="'+newValue+'" value="'+newValue+'" style="background-color: '+newValue+'; width: 25px; height: 25px; border: 1px solid #d2d6de; border-radius: 25px !important;"><i class="hidden">'+newValue+'</i></span>');
                    CRM.removeCacheByKey(cache_key, false);
                    CRM.getCacheByKey(cache_key, 'ticket/status/all?orgId=' + ORG_ID);                            
                    // _init();
                }
                d.resolve();
            }
        },
        error: function(err) {
            console.log(err);
            d.resolve(err);
            return false;
        },
        mode: 'inline',
        showbuttons: false,
        emptytext: '<i class="hidden">' + $(this).data('value') + '</i>'
    });

    /**
     * Colorpicker function within editable element
     */
    $(this).on('shown', function(e, editable) {
        $('.editableStatusColor').parent().colorpicker({
            format: "hex",
            container: true,
            inline: true,
            customClass: 'colorpicker-2x',
            colorSelectors: {
                'black': '#000000',
                'white': '#ffffff',
                'red': '#FF0000',
                'default': '#777777',
                'primary': '#337ab7',
                'success': '#5cb85c',
                'info': '#5bc0de',
                'warning': '#f0ad4e',
                'danger': '#d9534f'
            },
            sliders: {
                saturation: {
                    maxLeft: 200,
                    maxTop: 200
                },
                hue: {
                    maxTop: 200
                },
                alpha: {
                    maxTop: 200
                }
            }
        });
    });
});`
maaz-rashid commented 5 years ago

Anything on this..?

mccarthysean commented 3 years ago

Hello, I have implemented a simple combobox of color. May be a help for you. var colorsource = [ {value:'#66',text:'#66'}, {value:'#99',text:'#99'}, {value:'#0000CC',text:'#0000CC'}, {value:'#0000FF',text:'#0000FF'}, {value:'#3300',text:'#3300'}, {value:'#3399',text:'#3399'}, {value:'#0033CC',text:'#0033CC'}, {value:'#6600',text:'#6600'}, {value:'#6666',text:'#6666'}, {value:'#6699',text:'#6699'}, {value:'#0066CC',text:'#0066CC'}, {value:'#0066FF',text:'#0066FF'}, {value:'#9900',text:'#9900'}, {value:'#9933',text:'#9933'}, {value:'#9999',text:'#9999'}, {value:'#0099CC',text:'#0099CC'}, {value:'#0099FF',text:'#0099FF'}, {value:'#00CC00',text:'#00CC00'}, {value:'#00CC66',text:'#00CC66'}, {value:'#00CC99',text:'#00CC99'}, {value:'#00CCFF',text:'#00CCFF'}, {value:'#00FF00',text:'#00FF00'}, {value:'#00FF99',text:'#00FF99'}, {value:'#00FFCC',text:'#00FFCC'}, {value:'#00FFFF',text:'#00FFFF'}, {value:'#333300',text:'#333300'}, {value:'#333399',text:'#333399'}, {value:'#3333CC',text:'#3333CC'}, {value:'#3333FF',text:'#3333FF'}, {value:'#336600',text:'#336600'}, {value:'#336699',text:'#336699'}, {value:'#3366CC',text:'#3366CC'}, {value:'#3366FF',text:'#3366FF'}, {value:'#339933',text:'#339933'}, {value:'#339966',text:'#339966'}, {value:'#3399FF',text:'#3399FF'}, {value:'#33CC33',text:'#33CC33'}, {value:'#33CCCC',text:'#33CCCC'}, {value:'#33CCFF',text:'#33CCFF'}, {value:'#660033',text:'#660033'}, {value:'#660066',text:'#660066'}, {value:'#6600CC',text:'#6600CC'}, {value:'#6600FF',text:'#6600FF'}, {value:'#663300',text:'#663300'}, {value:'#666633',text:'#666633'}, {value:'#666699',text:'#666699'}, {value:'#6666FF',text:'#6666FF'}, {value:'#669900',text:'#669900'}, {value:'#669999',text:'#669999'}, {value:'#6699FF',text:'#6699FF'}, {value:'#66CCFF',text:'#66CCFF'}, {value:'#66FF33',text:'#66FF33'}, {value:'#66FF66',text:'#66FF66'}, {value:'#66FF99',text:'#66FF99'}, {value:'#66FFCC',text:'#66FFCC'}, {value:'#66FFFF',text:'#66FFFF'}, {value:'#800000',text:'#800000'}, {value:'#990000',text:'#990000'}, {value:'#990033',text:'#990033'}, {value:'#990099',text:'#990099'}, {value:'#9900CC',text:'#9900CC'}, {value:'#9900FF',text:'#9900FF'}, {value:'#993300',text:'#993300'}, {value:'#993333',text:'#993333'}, {value:'#993366',text:'#993366'}, {value:'#993399',text:'#993399'}, {value:'#9933FF',text:'#9933FF'}, {value:'#996600',text:'#996600'}, {value:'#996633',text:'#996633'}, {value:'#9966FF',text:'#9966FF'}, {value:'#999966',text:'#999966'}, {value:'#9999FF',text:'#9999FF'}, {value:'#99CC00',text:'#99CC00'}, {value:'#99CCFF',text:'#99CCFF'}, {value:'#99FF33',text:'#99FF33'}, {value:'#99FF66',text:'#99FF66'}, {value:'#99FF99',text:'#99FF99'}, {value:'#99FFCC',text:'#99FFCC'}, {value:'#CC0000',text:'#CC0000'}, {value:'#CC0066',text:'#CC0066'}, {value:'#CC0099',text:'#CC0099'}, {value:'#CC00CC',text:'#CC00CC'}, {value:'#CC00FF',text:'#CC00FF'}, {value:'#CC3300',text:'#CC3300'}, {value:'#CC3399',text:'#CC3399'}, {value:'#CC33FF',text:'#CC33FF'}, {value:'#CC6600',text:'#CC6600'}, {value:'#CC6699',text:'#CC6699'}, {value:'#CC66FF',text:'#CC66FF'}, {value:'#CC9900',text:'#CC9900'}, {value:'#CC99FF',text:'#CC99FF'}, {value:'#CCCC00',text:'#CCCC00'}, {value:'#CCCCFF',text:'#CCCCFF'}, {value:'#CCFF33',text:'#CCFF33'}, {value:'#CCFF66',text:'#CCFF66'}, {value:'#CCFF99',text:'#CCFF99'}, {value:'#CCFFCC',text:'#CCFFCC'}, {value:'#CCFFFF',text:'#CCFFFF'}, {value:'#FF0000',text:'#FF0000'}, {value:'#FF0066',text:'#FF0066'}, {value:'#FF00FF',text:'#FF00FF'}, {value:'#FF3300',text:'#FF3300'}, {value:'#FF3399',text:'#FF3399'}, {value:'#FF33CC',text:'#FF33CC'}, {value:'#FF5050',text:'#FF5050'}, {value:'#FF6600',text:'#FF6600'}, {value:'#FF6666',text:'#FF6666'}, {value:'#FF6699',text:'#FF6699'}, {value:'#FF66CC',text:'#FF66CC'}, {value:'#FF66FF',text:'#FF66FF'}, {value:'#FF9900',text:'#FF9900'}, {value:'#FF9933',text:'#FF9933'}, {value:'#FF9966',text:'#FF9966'}, {value:'#FF9999',text:'#FF9999'}, {value:'#FF99CC',text:'#FF99CC'}, {value:'#FF99FF',text:'#FF99FF'}, {value:'#FFCC00',text:'#FFCC00'}, {value:'#FFCC66',text:'#FFCC66'}, {value:'#FFCC99',text:'#FFCC99'}, {value:'#FFCCCC',text:'#FFCCCC'}, {value:'#FFCCFF',text:'#FFCCFF'}, {value:'#FFFF00',text:'#FFFF00'}, {value:'#FFFF66',text:'#FFFF66'}, {value:'#FFFF99',text:'#FFFF99'}, {value:'#FFFFCC',text:'#FFFFCC'}, {value:'#FFFFFF',text:'#FFFFFF'} ];

    $('#colordelfondo').editable({
        mode: this.state.mode, source:colorsource,
          select2: {
          width: 200,  placeholder: 'Selecccione un color',
          allowClear: true,
          formatResult: function (item) {  return "<span style='padding-left:20px;border-left: 20px solid "+item.text+"'>"+item.text+"</span>"; },
          formatSelection: function (item){  return item.text;}
      }
    });

This seems to be the simplest solution, which just uses predefined colors. It uses a regular, fully-supported select2 dropdown, which it custom-formats to display the actual color to the left of the hexadecimal color. Nice work!

image

jasonhjohnson commented 3 years ago

Wo, I posted about this 7 years ago and the struggle is still ongoing... :-)