Sunday, March 14, 2010

Closure - goog.ui.ColorPicker example

Been playing around Google's Closure library and i have to say the API looks good with ofcourse some exception like i dont know how to render a component, sometime you call render, decorate or the constructor itself. And when i was browsing through the code i was curious with ColorPicker and to my dismay there was no example, having searching on the web here is how to do it

Include
goog.require('goog.dom');
goog.require('goog.ui.ColorPicker');


<style>
<!-- http://gitorious.org/element/element/commit/6f9a6373727ff6478f6e78ec4917289b6523b5ad -->
.goog-palette-cell{height:20px;width:20px;margin:0;border:0;text-align:center;vertical-align:middle;border-right:1px solid #666;font-size:1px}
.goog-palette-colorswatch{position:relative;height:20px;width:20px;border:1px solid #666}
</style>


var cp = new goog.ui.ColorPicker();
cp.setSize(7);
cp.setColors(goog.ui.ColorPicker.SIMPLE_GRID_COLORS);
cp.addEventListener(goog.ui.ColorPicker.EventType.CHANGE,function(e){
alert(e.target.getSelectedColor())
});
cp.render(document.getElementById('s1'));


Explanation
Create a new instance of ColorPicker
var cp = new goog.ui.ColorPicker();

Set the size of the pallate (i think its the column count)
cp.setSize(7);

Set colors, we use the sample colors, see Source for example change it to your color array (last few lines of the source)
cp.setColors(goog.ui.ColorPicker.SIMPLE_GRID_COLORS);

Add a click event
cp.addEventListener(goog.ui.ColorPicker.EventType.CHANGE,function(e){ .. });

Render this element to a DOM with id of s1 (<div id='s1 ></div>)
cp.render(document.getElementById('s1'));

Demo Site
http://monmonja.com/closure/ColorPicker.html