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;   });

Answer 2

In general, the way to extend a dojo dijit is something like the following:

define([
    'dojo/_base/declare',
    'dijit/ColorPalette'
], function(declare, ColorPalette) {

return declare([ColorPalette], {
    // add additonal functionality here
});});

After a quick look at dijit/ColorPalette and dijit/_PaletteMixin, you could extend dijit/ColorPalette and either create a new palette array in _palettes that includes a transparent color or extend the 7x10 or 3x4 palette that you're using. You'll also probably have to override the dyeClass attribute with a class that can return a distinct value for no color.

However, if I were doing this, I would go with something like your option 1.

Answer 3

If you don't want to subclass dijit/ColorPalette (as in Thomas Upton's answer), you can use dojo/_base/lang::extend to add functionality and properties to the ColorPalette "class."

require(["dojo/_base/lang", "dijit/ColorPalette"], function(lang, ColorPalette) {

    /* Extends the ColorPalette prototype */
    lang.extend(ColorPalette, { 
        newProperty: newValue
    });

}); 

Doing this will give all future instance of dijit/ColorPalette the property, newProperty. If you only want to apply this to a single instance, use dojo/_base_lang::mixin instance.

require(["dojo/_base/lang", "dijit/ColorPalette"], function(lang, ColorPalette) {

    var cp = new ColorPalette({ /* properties */ });

    /* Mixes the second object __into__ the first object. */
    lang.mixin(cp, { 
        newProperty: newValue;
    });
}