カラーピッカー

カラービッカーを作ってみた。とりあえず試作。
デモ

var ColorPicker = {};

ColorPicker.HSVtoRGB = function(h, s, v) {
    var r, g, b;

    if (s == 0) {
	var i = Math.round(v * 255);
	return [i, i, i];
    }
    var hi = Math.floor(h / 60);
    var f = h / 60 - hi;
    var p = v * (1 - s);
    var q = v * (1 - s * f);
    var t = v * (1 - s * (1 - f));
    
    switch (hi) {
    case 0:
	r = v;
	g = t;
	b = p;
	break;

    case 1:
	r = q;
	g = v;
	b = p;
	break;

    case 2:
	r = p;
	g = v;
	b = t;
	break;

    case 3:
	r = p;
	g = q;
	b = v;
	break;

    case 4:
	r = t;
	g = p;
	b = v;
	break;

    case 5:
	r = v;
	g = p;
	b = q;
	break;
    }
    r *= 255;
    g *= 255;
    b *= 255;
    return [Math.round(r), Math.round(g), Math.round(b)];
};

ColorPicker.addEvent = function(obj, type, func) {
    (obj.addEventListener) ? obj.addEventListener(type, func, false) :
	obj.attachEvent("on" + type, func);
};

ColorPicker.toColorCode = function(c) {
    var r = (c[0] < 16) ? "0" + c[0].toString(16) : c[0].toString(16);
    var g = (c[1] < 16) ? "0" + c[1].toString(16) : c[1].toString(16);
    var b = (c[2] < 16) ? "0" + c[2].toString(16) : c[2].toString(16);
    return "#" + r + g + b;
};

ColorPicker.addData = function(tr, h, s, v, list) {
    var color = ColorPicker.toColorCode(ColorPicker.HSVtoRGB(h, s, v));
    var td  = document.createElement("td");
    var clickList   = function() { ColorPicker.picker(h); };
    var clickPicker = function() { alert(color); };
    
    ColorPicker.addEvent(td, "click", list ? clickList : clickPicker);
    td.style.background = color;
    td.style.width  = "10px";
    td.style.height = "10px";
    tr.appendChild(td);
};

ColorPicker.list = function() {
    var tb = document.createElement("table");
    tb.style.background = "#000000";
    tb.style.borderSpacing = "1px";
    
    var tbody = document.createElement("tbody");
    for (var s = 1.0; s >= 0.5; s -= 0.1) {
	var tr  = document.createElement("tr");
	for (var h = 0; h < 360; h += 10) {
	    ColorPicker.addData(tr, h, s, 1, true);
	}
	tbody.appendChild(tr);
    }
    tb.appendChild(tbody);
    return tb;
};

ColorPicker.picker = function(h) {
    var tb = document.createElement("table");
    tb.style.background = "#000000";
    tb.style.borderSpacing = "1px";

    var tbody = document.createElement("tbody");
    for (var v = 1.0; v >= 0; v -= 0.05) {
	var tr  = document.createElement("tr");	
	for (var s = 0; s <= 1; s += 0.05) {
	    ColorPicker.addData(tr, h, s, v, false);
	}
	tbody.appendChild(tr);	
    }
    tb.appendChild(tbody);    
    
    if (ColorPicker.pickerId.firstChild)
	ColorPicker.pickerId.removeChild(ColorPicker.pickerId.firstChild);

    ColorPicker.pickerId.appendChild(tb);
};

ColorPicker.init = function() {
    var list = ColorPicker.list();
    document.body.appendChild(list);
    
    ColorPicker.pickerId = document.createElement("div");
    document.body.appendChild(ColorPicker.pickerId);
};