Jump to:

5451 Posts in 1673 Topics by 1197 members

Customising the CMS

SilverStripe Forums » Customising the CMS » Color-picker?

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Page: 1 2 3 4 5
Go to End
Author Topic: 7368 Views
  • banal
    Avatar
    Community Member
    901 Posts

    Color-picker? Link to this post

    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)

  • Hamish
    Avatar
    Community Member
    712 Posts

    Re: Color-picker? Link to this post

    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!

  • banal
    Avatar
    Community Member
    901 Posts

    Re: Color-picker? Link to this post

    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
  • banal
    Avatar
    Community Member
    901 Posts

    Re: Color-picker? Link to this post

    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):
    ColorField for SilverStripe

  • UncleCheese
    Avatar
    4085 Posts

    Re: Color-picker? Link to this post

    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.

  • Aram
    Avatar
    Community Member
    598 Posts

    Re: Color-picker? Link to this post

    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.

  • banal
    Avatar
    Community Member
    901 Posts

    Re: Color-picker? Link to this post

    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
  • Aram
    Avatar
    Community Member
    598 Posts

    Re: Color-picker? Link to this post

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

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

    7368 Views
Page: 1 2 3 4 5
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.