Skip to main content

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

Comments

Popular posts from this blog

Unlockd Android Auto Open

Now that Unlockd has reached its doomed. Here is a script where i just downloaded android tools and automatically have my phone open, I believe you can use this for games that requires constant tapping of the screen (as long as it's not one of the fast tap one as adb has a delay). for i in `seq 1 50`; do # open the phone adb shell input keyevent 26 # keep the phone open for 8 seconds sleep 8 # close the phone adb shell input keyevent 26 # randomised sleep to make it look real sleep $[ ( $RANDOM % 10 ) + 1 ]s done if your phone has passcode for i in `seq 1 50`; do adb shell input keyevent 26 sleep 1 # swipe from bottom to up adb shell input touchscreen swipe 530 1280 1030 480 # enter your passcode adb shell input text <Your passcode> # check button adb shell input keyevent 66 sleep 8 adb shell input keyevent 26 sl…