Yet another Prototype Colorpicker

And then there was another…..color….picker…. I have been dissatisfied with all the prototype color pickers out there, so when I found this jQuery colorpicker, I decided to port it to prototype. Yay!

It has lots of options. Examples/Demo available here, download available here. This color picker allows you to not only select your color, but it also enables the following features:

  • specify a preview element
  • specify an input element that’s not the actionable element (ie, you can specify an action element, like a clickable icon, and have the selected color applied to a hidden input)
  • allows for target input element and preview element’s background color to be updated on change of the new color in the picker, or not (only will update on the commit of the color)
  • ability to control hide color picker on commit color, or not
  • ability to customize onShow, onBeforeShow, onChange, onHide, onLoad, and onSubmit functions
  • HSB, RGB, and Hex numbers available
  • Custom Event type on the “show color picker target”, such as onClick or onFocus
  • has an “extra info” button which can allow you to put in a custom color palette, or anything else you might want to put into a color picker. Color palette code can be found at the demo page.
Select Your Color: #  

	var cp = new colorPicker('colorpicker',{
		color:'#008a20',
		previewElement:'colorpicker-preview',
		eventName: 'focus',
		onShow:function(picker){
			new Effect.Appear(picker.cp);
			return false;
		},
		onHide:function(picker){
			new Effect.Fade(picker.cp);
			return false;
		},
		origColor:'#000000',
		livePreview: true,
		hideOnSubmit:false,
		updateOnChange:true,
		flat: false,
		hasExtraInfo:true,
		extraInfo:function(picker){
			var colors = $A([
				  '000000', '993300', '333300', '003300', '003366', '000080', '333399', '333333',
				  '800000', 'FF6600', '808000', '008000', '008080', '0000FF', '666699', '808080',
				  'FF0000', 'FF9900', '99CC00', '339966', '33CCCC', '3366FF', '800080', '969696',
				  'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF', '993366', 'C0C0C0',
				  'FF99CC', 'FFCC99', 'FFFF99', 'CCFFCC', 'CCFFFF', '99CCFF', 'CC99FF', 'FFFFFF'
			]);
 
			var div = Builder.node('DIV').setStyle({padding:'10px 12px'});
			colors.each(function(color){
				var div_inner = Builder.node('DIV').setStyle({backgroundColor:'#'+color,cursor:'pointer',width:'10px',height:'10px','float':'left',border:'2px solid #'+color,margin:'1px'});
				div.insert(div_inner);
				div_inner.observe('click',function(ev){picker.setColor(color);});
				div_inner.observe('mouseover',function(ev){ev.element().setStyle({border:'2px solid #000'});});
				div_inner.observe('mouseout',function(ev){ev.element().setStyle({border:'2px solid #'+color});});		
			});
			picker.extraInfo.update(div);
		}
	});

17 Comments to Yet another Prototype Colorpicker

  1. Darren's Gravatar Darren
    October 24, 2010 at 8:14 am | Permalink

    Thanks for the colorpicker, Im finding it very useful, although Im having an issue with my script.aculo.us Sliders (http://www.tutorialspoint.com/script.aculo.us/scriptaculous_sliders.htm), once the colorpicker has been called, the sliders no longer work.

    Any ideas?

    Regards

  2. james's Gravatar james
    October 28, 2010 at 11:53 pm | Permalink

    It’s probably the scope of my colorpicker’s “drag” observer being too broad. Do you have a url that will give me an example of the conflict between script.aculo.us sliders and my colorpicker? If you give me a url I can check it out and hopefully come up with a solution to the bug….

  3. December 22, 2010 at 11:48 am | Permalink

    Hi there,

    first of all thanks for the colorpicker, it’s awesome and everything I need! The only problem is what Darren already said, it break’s scriptaculous’ sliders. Once you click into the colopicker the problem occurs. I found out it’s just what you said, you globally stop observing mousemove (etc) which breaks scriptaculous. If you change those global observers (respectively the stop observing part) with observers linked to your colorpicker everything works perfectly again.

    I put a slider on top of your demo and changed lines 239&240 and 252&253 for the colorfield as well as lines 217&218 & 230&231 for the huey-selection to local observers which fixes this. But I did not change the observers for value-incrementation/decrementation, because that went too deep in the code. You can see the issue there – once you use them the slider won’t slide anymore (yet you can click into the slider to set values). I uploaded the altered script here: http://blogage.de/files/66124/download

    It would be great if you could send me a note when/if you fix this, so I can use your ‘official’ colorpicker again 🙂

    Regards,
    Lukas

  4. james's Gravatar james
    December 22, 2010 at 8:45 pm | Permalink

    Hey Lukas,

    Thanks for reminding me about this problem. I’m guessing that the $(document).stopObserving is what is killing the sliders. I tried simply replaced all the instances of “$(document).observe” and “$(document).stopObserving” and replaced them with “this.cp.observe” and “this.cp.stopObserving” but that doesn’t seem to have done the trick.

    What i need to do is specify the event observes that I want to unregister on the document element so it wont kill all the other observers.

    I will post another comment when i have fixed the problem…

    James

  5. james's Gravatar james
    December 23, 2010 at 2:31 am | Permalink

    Ok, I got it fixed. I had to look at the way scriptaculous implements bindAsEventListener() and basically sandbox the event listeners so I could destroy them individually, rather than destroying all the events that are attached to the document. Anyway, the new code is downloadable here. Enjoy and let me know if you run into any more problems.

  6. December 23, 2010 at 4:34 am | Permalink

    Hi James

    thanks a lot for your update, it works great now. There’s just one minor glitch. If you click on the element that opens the picker while the picker is already open, the editor gets closed (from the document mousedown-event) and openad again because there’s still a listener on the opening element that, well, opens the colorpicker again. Apart from that it’s just awesome 🙂

  7. December 23, 2010 at 9:00 am | Permalink

    Just to make clear: what I’d expect is that it closes when you click the ‘open it’-element, so that you can toggle it. But anyways, this is just a minor thing.

  8. January 11, 2011 at 6:17 am | Permalink

    BTW: How is the colorpicker licensed?

  9. james's Gravatar james
    January 11, 2011 at 11:22 am | Permalink

    The original jQuery colorpicker that I ported from is dual licensed under the MIT and GPL licenses. So I will just go with that…. Feel free to do anything you want with it =)

  10. January 12, 2011 at 4:02 am | Permalink

    cool, thanks 🙂

  11. January 26, 2011 at 8:10 am | Permalink

    Me again, hope I’m not too annoying 🙂

    The picker has a bug if you position it fixed and scroll down. It seems to miscalculate the dragging of the colorselection – the ‘crosshair’ sticks to the very bottom of the color-area no matter where you move your mouse.

  12. February 18, 2011 at 6:12 am | Permalink

    Hi,

    i fixed the position:fixed issue (see last comment). It’s a quick and semi-dirty solution, but I thought I should share it anyway.

    Look for the 2 comments saying
    // Fix for fixed-positionined-colorpickers

    it’s really not a big deal.

    File’s here: http://cl.ly/062M462a1Q0m23302o1l

    Lukas

  13. Lukas's Gravatar Lukas
    August 24, 2011 at 8:22 am | Permalink

    Hi,

    I fixed a bug in Internet Explorer (I tested this with IE8) that every now and then IE decides to drag the colorselector-picker-element rather than bubbleing the mousemove event, so that the cursor turns to a forbidden-icon and the script gets broken. After that the move-event is permanently bound and you drag the picker even when you dont click and even when the colorpicker is closed.

    To stop this insert this
    this.selector.ondragstart = function() { window.event.returnValue = false; };
    after line 68

    Also, if you stop the event at the end of the downSelector-Function your page’s content will not be selected (as min click and drag to select text) when the mouse leaves the colorpicker while the mousebutton’s pressed.

  14. Tobias's Gravatar Tobias
    January 7, 2013 at 4:58 am | Permalink

    Hi!

    I’ve fixed a bug that appears when resetting to the original color.
    You then get NaN’s for the HSB settings, which results in black color.

    Just change line #46 in the JS from
    this.options.origColor = this.options.color;
    to
    this.options.origColor = this.color;

    It then works.
    Greetings and thanks for the script!

  15. james's Gravatar james
    February 4, 2013 at 12:27 pm | Permalink

    Thanks to both Lukas and Tobias for making me get off my ass and update this with their fixes. I am also going to create a github repo for this project so that others can contribute.

  16. February 15, 2013 at 10:45 am | Permalink

    Hi James,

    i have one problem with colorpicker. When i set color with mouse click, and from same position as pointer starting drag to other color, after move pointer set position to 0,0.

    i look on original jquery colorpicker and there is no problem.
    Can you fix it, or i must switch to jquery version, i asking because colorpicker is on magento website and jquery can be problem.

    Thanks for reply
    Vaclav

  17. james's Gravatar james
    February 15, 2013 at 11:28 am | Permalink

    At the moment I do not have enough time to look into this problem. Doesn’t seem like a deal breaker to me. Sorry and good luck.

Leave a Reply

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>