Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Customising the CMS /

Color-picker?


Go to End
Reply


39 Posts   8217 Views

Avatar
banal

Community Member, 901 Posts

27 March 2009 at 11:30pm

Edited: 03/02/2010 11:48am

Hi all

I'd like to integrate a Color-Picker into the SilverStripe CMS. It should behave like a regular form-input field, but open a color-picker dialog whenever the user clicks it. Much like the CalendarDateField

I was wondering if something like this has been done by anybody and if not, whether or not I should use jQuery (or still use Prototype?) to implement it.

Any input is appreciated.
Thanks - Roman

Update
The latest version of this module can be downloaded here: http://bummzack.ch/colorpicker (scroll down for installation instructions and download link)

Avatar
Hamish

Community Member, 712 Posts

28 March 2009 at 12:58am

Not aware of anyone here who have done it. Use jQuery - the goal is to do all new development in jQuery and drop prototype over time.

Look forward to seeing the result!

Avatar
banal

Community Member, 901 Posts

28 March 2009 at 3:59am

Edited: 28/03/2009 4:18am

Alright. This one was rather quick and painless :)
Thanks to the awesome jQuery ColorPicker Plugin, provided by
http://www.eyecon.ro/colorpicker/

Here's how this looks in the CMS (also works in a CMS-Popup):

Sources are attached to this post. Just extract to your SilverStripe Directory (like a module).
Usage (example for getCMSFields):

$fields->addFieldToTab('Root.Content.Main', new ColorField('BgColor', 'Background Color'));

The only thing that doesn't work is my custom "Disabled" class. I'd like to show the color when the form-field is rendered as disabled but I wasn't able to get it working. Maybe somebody can shed some light on this? What else has to be done, other than creating a class named "ColorField_Disabled". Do I have to "wire" it to the ColorField class somehow?

Have fun - Roman

Edit: Oh yeah forgot to add: So far this was only tested in SilverStripe 2.3.1 RC2. It relies on jQuery so most likely it won't work out of the box in SilverStripe 2.2

Edit 2: Grrr. Fixed a validation issue. Uploaded the updated files as colorpicker2.zip. Somehow the removal of attachements doesn't seem to work.

Attached Files
Avatar
banal

Community Member, 901 Posts

28 March 2009 at 4:41am

Oh my. Please ignore the previous attachments. They don't really work... I guess I was taking the motto "Release early, release often" too seriously :)

Here's a working version (this time I mean it):
[url=http://bummzack.ch/misc/colorpicker.zip]ColorField for SilverStripe[/url]

Avatar
UncleCheese

Forum Moderator, 4094 Posts

28 March 2009 at 4:48am

That rocks. I love it. Be sure to submit to SS as soon as it's stable. I'm sure I'll find a use for this somewhere along the line.

Avatar
Carbon Crayon

Community Member, 598 Posts

26 May 2009 at 6:18am

Edited: 26/05/2009 6:28am

Hi Roman

This looks great but I can't get it to work, it just behaves like a textfield. It's loading in the Javascript file colorpicker.js but the php class referes to another javascript file colorfield.js which was not included in the zip, could this be the reason it's not working?

I've tried it in 2.3.1 and 2.3.2 rc1

Thanks in advance

Aram

EDIT: The validation is working so the field it self is behaving, it's just the jquery colorpicker that isn't working.

Avatar
banal

Community Member, 901 Posts

26 May 2009 at 9:04am

Edited: 26/05/2009 9:05am

Hi Aram

Strange indeed. There should be two files in the javascript folder.. one named colorfield.js (my wrapper for SilverStripe), the other named colorpicker.js (the actual jQuery plugin).
I just attached my most recent version to this post... it works with 2.3.1 here.

Attached Files
Avatar
Carbon Crayon

Community Member, 598 Posts

26 May 2009 at 10:53am

Perfect, that did the trick, I guess it was the missing js file.

It's a great addition, just what I needed, thanks! :)

Go to Top