Color Picker

Branch of http://www.eyecon.ro/colorpicker/

##Instructions-##

Download package. If you would like examples they are in the original zip. The files that are in my package are the only ones I cared about. See original website for more information.

##History-##

I did quite a bit of research several months ago and liked eyecon's color picker the best. During implementation I hit a couple of snags. I modified it to suite my needs.

##Change Summary-##

I've added an X icon for submit instead of the color pinwheel. The pinwheel is still included, so you can swap it back in via css. In my case I wanted the submit button to undo the changes. This way the user isn't forced into choosing a color.
I've added the element being returned on onShow, onChange, and onHide instead of just onSubmit. This allows you to bind to a class or multiple elements. Instead of just one id.
I've added a fix for when simply click on a color or hue. Previously you needed to click hold and drag to get a color you desired. This is documented in the comments of this thread: http://stackoverflow.com/questions/5717037/eyecon-colorpicker-color-not-changing-in-click-event

##My Code Changes-## ###change function###

Changed to have apply:

cal.data('colorpicker').onChange.apply(cal, [col, HSBToHex(col), HSBToRGB(col)]);

Return the element as well

cal.data('colorpicker').onChange.apply(cal, [col, HSBToHex(col), HSBToRGB(col), cal.data('colorpicker').el]);

Meaning you need to change your function

$('#colorSelector').ColorPicker({
  onChange: function (hsb, hex, rgb, el) {
  }
});

###show function### Changed to have apply:

if (cal.data('colorpicker').onShow.apply(this, [cal.get(0)]) != false) {
  cal.show();
}

Return the element as well

if (cal.data('colorpicker').onShow.apply(this, [cal.get(0), cal.data('colorpicker').el]) != false) {
  cal.show();
}

###hide function### Changed to have apply:

if (!isChildOf(ev.data.cal.get(0), ev.target, ev.data.cal.get(0))) {
  if (ev.data.cal.data('colorpicker').onHide.apply(this, [ev.data.cal.get(0)]) != false) {
    ev.data.cal.hide();
  }
  $(document).unbind('mousedown', hide);
}

Return the element as well

if (!isChildOf(ev.data.cal.get(0), ev.target, ev.data.cal.get(0))) {
  if (ev.data.cal.data('colorpicker').onHide.apply(this, [ev.data.cal.get(0), ev.data.cal.data('colorpicker').el]) != false) {
    ev.data.cal.hide();
  }
  $(document).unbind('mousedown', hide);
}

###uphue function### added:

moveHue(ev);

###upSelector function###

added

moveSelector(ev);

###Markdown Help:###

http://www.ctrlshift.net/project/markdowneditor/

http://github.github.com/github-flavored-markdown/

thorst/jQuery-ColorPicker

Color Picker