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); } }); |
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
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….
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
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
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.
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 🙂
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.
BTW: How is the colorpicker licensed?
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 =)
cool, thanks 🙂
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.
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
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.
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!
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.
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
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.