sweetvision

Welcome to the final installation of my JavaScript based Color Picker series. I have made a lot of changes to the color picker since my last installment. Layout I found some major problems based on the document type with the way I was laying out elements in the color picker dialog, so I decided that it needed to use the lowest common denominator in order to work reliably, so it is laid out with, *gasp* tables. Sizing After adding the support for the Canvas element I decided to add options to size the HueBar and the SV Box.

if(this.Options.hueBarWidth){
		this.HueBar.setStyle("width", this.Options.hueBarWidth);
	}else{
		this.HueBar.setStyle("width", "30");
	}
	if(this.Options.hueBarHeight){
		this.HueBar.setStyle("height", this.Options.hueBarHeight);
	}else{
		this.HueBar.setStyle("height", "360");
	}

Options I added the ability to pass in an Options object that gives the ability to customize many parts of the Color Picker.

this.Options = {};
	if(objOptions){
		this.Options = objOptions;
	}

Open/Close I created Open and Close member functions on the color picker object its self.

open: function (){
		this.Container.setStyle("display", "block");
	},
	close: function (){
		this.Container.setStyle("display", "none");
	}

You can download the full source from the JavaScript Color Picker project page.