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


<!-- -->
.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}

var cp = new goog.ui.ColorPicker();

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

Set the size of the pallate (i think its the column count)

Set colors, we use the sample colors, see Source for example change it to your color array (last few lines of the source)

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

Demo Site


Popular posts from this blog

LaMetric Python App

Creating a personal stock app for LaMetric is super simple, all you need is create an account at and have an url with your data. Depending on how you want the data to appear, the format should be in json and how it appears in the creation process.

I used appengine to host my data and used the metric data format

Here is the python code
import urllib2 import json # get stocks data using yahoo finance stocks = ['0002.HK', '0005.HK', '0011.HK', '0992.HK', '0066.HK'] url = "*" + ("%22%2C%22".join(stocks)) + "%22)%0A%09%09&" result = urllib2.urlopen(url) data = json.loads( # create frames based on the metric data format frames = [] for stock in data['query']['results']['quote']: …

Winamp Spotify Treasure hunting

Back in the days when WinAmp was huge (So was tripod and geocities), WinAmp users like to share their playlist. Most of these playlist are still available online through googling and a lot of them are actually good throwback playlist. With that in mind, I created a javascript script that would change the winamp playlist (pure text) into a spotify search link.

An example of this, say you liked the 90s rock scene. You would google "winamp playlist pearl jam silverchair" and some of the results will return with the title "Winamp Generated PlayList" and these are what we would like to treasure hunt on. Then
Click on of the result.
Right click anywhere in the page, select Inspect (Chrome) or Inspect Element (Firefox)
Select the Console
Paste this
$$('ul font small')[0].innerHTML = $$('ul font small')[0].innerHTML.split('<br>').map((val) => { return '<a style="color:white" href="spotify:search:' + encodeURIComp…