mlColorPicker.js

/**
 * @author mlambir
 */

(function($) {
	var rgbRE = /^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/;
	var colorRE = /^[a-fA-F0-9]{6}|[a-fA-F0-9]{3}$/;
	var target = "";

	function mouseEnterColor(event){
		var rgbString = $(event.target).css("background-color");
		var parts = rgbString.match(rgbRE);
		if(parts!=null){
			delete (parts[0]);
			for (var i = 1; i <= 3; ++i) {
			    parts[i] = parseInt(parts[i]).toString(16);
			    if (parts[i].length == 1) parts[i] = '0' + parts[i];
			}
			var hexString = parts.join(''); 
			$("#mlSelectedColorText").val(hexString).keyup();
		}else{
			$("#mlSelectedColorText").val(rgbString.substring(1)).keyup();
			
		}
	}
	function mouseClickColor(){
		colorSave();
	}
	function textKeyUp(event){
		color = $(event.target).val();
		if (color.match(colorRE)) {
			colorChange(color)
		}
		if (event.keyCode == 13) {//enter
			colorSave()
		}
	}
	function colorChange(color){
		$("#mlSelectedColorDiv").css("background-color", "#"+color);
	}
	function colorSave(){
		if ($("#mlColorPicker").data("mlOnChange")) {
			color = $("#mlSelectedColorText").val();
			if (color.match(colorRE)) {
				$("#mlColorPicker").data("mlOnChange")(color, target);
				close()
			}
		}
	}
	
	function close(){
		$("#mlColorPicker").hide().removeData("mlOnChange");
	}
	
	function createColorPicker(){
		var colors = ["#000000","#000000","#000000","#003300","#006600","#009900","#00CC00","#00FF00","#330000","#333300","#336600","#339900","#33CC00","#33FF00","#660000","#663300","#666600","#669900","#66CC00","#66FF00","#333333","#000000","#000033","#003333","#006633","#009933","#00CC33","#00FF33","#330033","#333333","#336633","#339933","#33CC33","#33FF33","#660033","#663333","#666633","#669933","#66CC33","#66FF33","#666666","#000000","#000066","#003366","#006666","#009966","#00CC66","#00FF66","#330066","#333366","#336666","#339966","#33CC66","#33FF66","#660066","#663366","#666666","#669966","#66CC66","#66FF66","#999999","#000000","#000099","#003399","#006699","#009999","#00CC99","#00FF99","#330099","#333399","#336699","#339999","#33CC99","#33FF99","#660099","#663399","#666699","#669999","#66CC99","#66FF99","#CCCCCC","#000000","#0000CC","#0033CC","#0066CC","#0099CC","#00CCCC","#00FFCC","#3300CC","#3333CC","#3366CC","#3399CC","#33CCCC","#33FFCC","#6600CC","#6633CC","#6666CC","#6699CC","#66CCCC","#66FFCC","#FFFFFF","#000000","#0000FF","#0033FF","#0066FF","#0099FF","#00CCFF","#00FFFF","#3300FF","#3333FF","#3366FF","#3399FF","#33CCFF","#33FFFF","#6600FF","#6633FF","#6666FF","#6699FF","#66CCFF","#66FFFF","#FF0000","#000000","#990000","#993300","#996600","#999900","#99CC00","#99FF00","#CC0000","#CC3300","#CC6600","#CC9900","#CCCC00","#CCFF00","#FF0000","#FF3300","#FF6600","#FF9900","#FFCC00","#FFFF00","#00FF00","#000000","#990033","#993333","#996633","#999933","#99CC33","#99FF33","#CC0033","#CC3333","#CC6633","#CC9933","#CCCC33","#CCFF33","#FF0033","#FF3333","#FF6633","#FF9933","#FFCC33","#FFFF33","#0000FF","#000000","#990066","#993366","#996666","#999966","#99CC66","#99FF66","#CC0066","#CC3366","#CC6666","#CC9966","#CCCC66","#CCFF66","#FF0066","#FF3366","#FF6666","#FF9966","#FFCC66","#FFFF66","#FFFF00","#000000","#990099","#993399","#996699","#999999","#99CC99","#99FF99","#CC0099","#CC3399","#CC6699","#CC9999","#CCCC99","#CCFF99","#FF0099","#FF3399","#FF6699","#FF9999","#FFCC99","#FFFF99","#00FFFF","#000000","#9900CC","#9933CC","#9966CC","#9999CC","#99CCCC","#99FFCC","#CC00CC","#CC33CC","#CC66CC","#CC99CC","#CCCCCC","#CCFFCC","#FF00CC","#FF33CC","#FF66CC","#FF99CC","#FFCCCC","#FFFFCC","#FF00FF","#000000","#9900FF","#9933FF","#9966FF","#9999FF","#99CCFF","#99FFFF","#CC00FF","#CC33FF","#CC66FF","#CC99FF","#CCCCFF","#CCFFFF","#FF00FF","#FF33FF","#FF66FF","#FF99FF","#FFCCFF","#FFFFFF"];
		$("body").append(('<div style="position:absolute;" id="mlColorPicker"><div id="mlSelectedColorDiv"></div><input id="mlSelectedColorText" type="text" maxlength="6"><div id="mlCloseColorDiv">x</div><div id="mlColors"></div></div>'))
		var colorHolder=$("#mlColors")
		$.each(colors, function(i, color){
			colorHolder.append('<div class="mlColor" style="background-color:' + color + '" />')
		});
		$('.mlColor').bind("mouseenter", mouseEnterColor).click(mouseClickColor);
		$("#mlSelectedColorText").keyup(textKeyUp);
	  	$("#mlColorPicker").hide()

    	$(document).bind('keyup', function(e){
      		if (e.keyCode == 27){
        		close();
      		}
    	});
		
    	$("#mlCloseColorDiv").click(close);
		$('#mlColorPicker,#mlColorPicker *').click(function(e){e.stopPropagation()})
	}
	
	$.fn.mlColorPicker = function(settings) {
		var config = {
			'onChange': function(value, target){}
		};
		
		if($("#mlColorPicker").length==0){
			createColorPicker()
		}

		if (settings) $.extend(config, settings);
		this.each(function() {
			$(this).click(function(event){
			  	target = this;
				$("#mlColorPicker").hide()
								   .css("top", event.pageY)
								   .css("left", event.pageX)
								   .show("slow")
								   .data("mlOnChange", config["onChange"]);
			});
		});
		return this;
	};
})(jQuery);