I have solved the problem by extending dijit/ColorPalette
(make subclass). I added basic functionality that I want.
In general I did following:
- override template to add holder for new element
- add slider which controls alpha component
- override
onChange
to blend color & alpha channels and return CSS value of color, also addonChangeCss
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; });