How to extend dijit/ColorPalette with custom color (particular with transparent)

Question

I use standard digit ColorPalette in my widget. It is simple tool and it works fine.

But I need to expand it with transparent or none color. I can deal with it in few ways:

1. Add just a button near the Palette to clear the color
2. Copy all code from dijit/ColorPalette to make custom Palette in my module
3. Extend the dijit/ColorPalette in my module only by one none color (preferable way)

Please point me how to extend dijit/ColorPalette or another way to implement <set_none_color> action if simple extending is imposible.

I'm newbie in Dojo and i want to deal with it in right way.

Answer 1

I have solved the problem by extending dijit/ColorPalette (make subclass). I added basic functionality that I want. In general I did following:

1. override template to add holder for new element
2. add slider which controls alpha component
3. override onChange to blend color & alpha channels and return CSS value of color, also add onChangeCss to monitor changes in my module.

The code is quite simple and efficient (this is basic example which can be improved)

define([ "dojo/_base/declare", "dijit/ColorPalette", "dijit/form/HorizontalSlider",
     "dojo/_base/Color" ], function(declare,
    ColorPalette, HorizontalSlider, Color) {
return declare([ ColorPalette ], {
    //add some fields
    valueCss:'none',
    valueRgb:null,
    valueA:0,
    //override template
    templateString:'<div class="dijitInline dijitColorPalette" role="grid">'+
                        '<table><tr><td><span>Alpha</span></td>'+
                            ' <td><div data-dojo-attach-point="aSlider">  </div></td></tr></table>'+
                        '<table dojoAttachPoint="paletteTableNode" class="dijitPaletteTable" cellSpacing="0" cellPadding="0" role="presentation">'+
                            '<tbody data-dojo-attach-point="gridNode"> '+
                            '</tbody></table>'+
                    '</div>',

    postCreate: function(){
        //closure this
        var obj = this;
        this.value='#000000';
        //add slider
        this.alpha = new HorizontalSlider({
            name: "alpha",
            value: 0,
            minimum: 0,
            maximum: 5,
            discreteValues:6,
            intermediateChanges: true,
            style: "width:150px;",
            onChange: function(value){
                obj.valueA = this.value / this.maximum;
                obj.onChange(null);
            }
        }).placeAt(this.aSlider);

    },
    //override onChange to blend color & alpha and return CSS value 
    onChange: function(value){
        this.valueRgb = Color.fromHex(this.value);
        this.valueCss = Color.fromArray([this.valueRgb.r,this.valueRgb.g,this.valueRgb.b,this.valueA]).toCss(true);
        this.onChangeCss(this.valueA ? this.valueCss : 'transparent');
    },
    //use this method instead of onChange to trace color changing 
    onChangeCss: function(value){
    }
});

return ColorPalette;   });