AntColorPicker jQuery plug in

Office customization of AntColorPicker

In this sample, you can see how to customise CSS and content of an AntColorPicker to obtain an office like color picker. You can specify your hues. However, be careful, I don't recommend usage of name of colors to define the palette.

Source Code

JavaScript used

                    //function to replace tags
                    function TagConvertor(chaine, TagList, joker) {
                        var _mask = (joker == undefined)? "#":joker;
                        for (var val in TagList) chaine = chaine.replace(new RegExp(_mask+val+_mask, "g"), TagList[val]);
                        return chaine;
                    }

                    var mycontentTemplate = "<div id='AntColorPicker' class=''AntColorPicker'>";
                    mycontentTemplate += '<div id="AntColorPickerHeader" class="AntColorPickerHeader">';
                    mycontentTemplate += '<ul><li><a id="current-color"></a></li></ul>Current';
                    mycontentTemplate += '</div>';
                    mycontentTemplate += '<div id="AntColorPickerContent" class="AntColorPickerContent">';
                    mycontentTemplate += '<p>Theme Colors</p>';
                    mycontentTemplate += '<div>';
                    mycontentTemplate += '<ul class="horizontalHueList">';
                    mycontentTemplate += '#mainLineTemplate#';
                    mycontentTemplate += '</ul>';
                    mycontentTemplate += '</div>';
                    mycontentTemplate += '#contentLineTemplate#';
                    mycontentTemplate += '</div>';
                    mycontentTemplate += '<div id="AntColorPickerStd" class="AntColorPickerStd">';
                    mycontentTemplate += '<ul class="horizontalHueList">';
                    mycontentTemplate += '<p>Standard Colors</p>';
                    mycontentTemplate += '#standardLineTemplate#';
                    mycontentTemplate += '</ul>';
                    mycontentTemplate += '</div>';

                    //initialisation of AntColorPicker with customisation of labels
                    $("#colorPicker").AntColorPicker(
                    {//Custom parameters
                        "labelClose":"Close color picker",
                        "labelRAZColor":"Clear field",
                        "contentTemplate": mycontentTemplate,
                        "$BGColorTarget":"#current-color",
                        "hues":{
                            standard:['#c00','#f00','#FFA500','#ff0','#ADFF2F','#0f0','rgb(0,176,240)','#00f','#00008B','#800080'],
                            others: {
                                "#fff": ['#eee', '#ddd','#ccc','#bbb','#aaa']
                                ,"#000": ['#AAA', '#888','#666','#444','#222']
                                ,"#F5F5DC": ['#E5E5CC', '#C5C5AC','#A5A58C','#85856C','#65654C']
                                ,"#00008B": ['#4040ff', '#0000ff','#0000AB','#00005B','#00003B']
                                ,"#69f": ['#c0d0ff', '#90a0ff', '#6090CC', '#306099','#103066']
                                ,"#f00": ['#ff9090', '#ff3030', '#CC0000', '#990000','#660000']
                                ,"#0f0": ['#90ff90', '#30ff30', '#00CC00', '#009900','#006600']
                                ,"#800080": ['#f0f', '#D800D8','#C000C0','#900090','#600060']
                                ,"#00CED1": ['#AFEEEE', '#40E0D0','#48D1CC','#009EA1','#006E71']
                                ,"#FFA500": ['#FFC590', '#FFA560','#FF8C00','#994500','#663300']
                            }
                        },
                        "builder":function(contentTemplateLine, contentTemplate) { //méthode construisant la palette
                            var content = ""
                            var main =""
                            var tmp = ""
                            var buffer = ""
                            var hues = this.hues;

                            for(var hue in hues.others) {
                                main += TagConvertor(contentTemplateLine,{"color":hue});

                                for (i = 0; i < hues.others[hue].length; i++) {
                                    tmp += TagConvertor(contentTemplateLine,{"color":hues.others[hue][i]});
                                }

                                buffer += '<ul class="verticalHueList">'+tmp+'</ul>';
                                tmp = "";
                            }

                            for (i = 0; i < hues.standard.length; i++) {
                                tmp += TagConvertor(contentTemplateLine,{"color":hues.standard[i]});
                            }

                            //Warning : tag starts and ends with #
                            content = contentTemplate.replace("#contentLineTemplate#",buffer);
                            content = content.replace("#mainLineTemplate#",main);
                            content = content.replace("#standardLineTemplate#",tmp);
                            return content;
                        }
                    }
                
					

CSS used

    #AntColorPicker {
        background-color: #fff;
        border: none;
        border-radius: 4px;
        box-shadow: 2px 2px 2px #444;
        padding: 5px;
        width: 144px !important;
    }
    #AntColorPicker li
    {
        box-shadow: 0.5px 0.5px 0.5px #C0DDDD;
    }
    #AntColorPicker #AntColorPickerHeader
    {
        display: block;
        font-size: 0.8em;
        color: #00008b;
        margin-bottom: 3px;
    }
    #AntColorPicker #AntColorPickerHeader ul {
        display: inline-block;
        margin-right: 5px;
    }
    #AntColorPicker #AntColorPickerHeader li, #AntColorPicker #AntColorPickerHeader a
    {
        display: inline-block;
        float: none;
        width: 10px;
        height: 10px;
    }
    #AntColorPicker p {
        background-color: LightCyan;
        color: #00008b;
        font-weight: bold;
        font-size: 0.85em;
        text-align: center;
        margin-bottom: 3px;
        box-shadow: 0px 0.5px 0.5px #C0DDDD;
    }
    #AntColorPicker ul.verticalHueList, #AntColorPicker ul.horizontalHueList {
        display: inline-block;
        margin: 0px;
    }
    #AntColorPicker ul.horizontalHueList li, #AntColorPicker ul.verticalHueList li {
        list-style: none;
        padding: 0;
        margin: 0px 2px;
    }
    #AntColorPicker ul.verticalHueList li {
        float: none;
        display: block;
    }