Color Picker Attribute?

Permalink 4 users found helpful
Has anyone made a color picker attribute?

Seems like developing one would be straight forward, but I though I'd ask before starting on it.

- IJ

ijessup
View Replies: View Best Answer
LucasAnderson replied on at Permalink Reply
LucasAnderson
There is a helper already built in for color picking. I've used it in block add/edit forms but wouldn't know if it can be used for attributes.
ijessup replied on at Permalink Reply
ijessup
Yeah. It being a built it helper I figured it wouldn't be terribly difficult to turn it into an attribute.

I need to assign color codes to sales reps for a client. So I guess I'll get working on it. :)

Thanks Lucas!
ijessup replied on at Permalink Reply
ijessup
Well... not nearly as straight forward as I thought.

I made a new attribute that extends the DefaultAttributeType. Set up the form to spit out the attribute's value into the color picker form helper.

models/attribute/types/color/controller.php
defined('C5_EXECUTE') or die(_("Access Denied."));
Loader::model('attribute/types/default/controller');
class ColorAttributeTypeController extends DefaultAttributeTypeController  {
   protected $searchIndexFieldDefinition = 'X NULL';
   public function form() {
      if (is_object($this->attributeValue)) {
         $value = Loader::helper('text')->entities($this->getAttributeValue()->getValue());
      }
      $cp = Loader::helper('form/color');
      print $cp->output('akID['.$this->attributeKey->getAttributeKeyID().'][value]', '', $value);
   }
}

But the dialog doesn't open when you click on the color square.

I feel like this is a JS issue somewhere. Still investigating though.
ijessup replied on at Permalink Reply
ijessup
Hmmm, I'm still pretty stumped on this. To be honest, my JS skills are pretty lacking.

However, I can use firebug to edit the value of the attribute and then save and everything goes into the DB just fine.

A refresh shows that everything was stored and the color block appears correctly.

The only thing that isn't working is the pop-up dialog.

Any thoughts?
LucasAnderson replied on at Permalink Reply
LucasAnderson
I'll take a look today when I get some free time. I love the idea of having this as an attribute.
ijessup replied on at Permalink Reply
ijessup
Thanks! I feel like its got to be something simple, and when it's brought to light it will be a *palm-to-face* moment for me.

I do see that HTML for the pop-up is not rendered when it is used as an attribute, but does when the code is on (for example) a single_page.
LucasAnderson replied on at Permalink Reply
LucasAnderson
I just thought about the fact that they use the color picker during the "customize site theme" area, wonder if that is calling the helper or something else?
ijessup replied on at Permalink Reply
ijessup
Good idea, looking for it now.
ijessup replied on at Permalink Reply
ijessup
Doesn't look like they are using the color picker form helper at all.

concrete/singele_pages/dashboard/pages/themes/customize.php is the file.
LucasAnderson replied on at Permalink Reply
LucasAnderson
Check out line 314. There is reference to a ColorPicker function:

$(this).ColorPicker()

Don't have a ton of time to dig into it yet.
vGibson replied on at Permalink Reply
vGibson
Could you elaborate on how you implemented the core colorpicker function into the add/edit block dialog?

I'm needing to add this to a block I'm working on with no luck.
ijessup replied on at Permalink Reply
ijessup
I'd need more information on what exactly you are trying to do, but try checking out this link:

http://www.concrete5.org/documentation/developers/forms/concrete5-w...
vGibson replied on at Permalink Reply
vGibson
Actually I had originally targeted the question toward Lucus since he mentioned having already implemented the color picker in the add/edit dialog but thanks to the link you posted I was able to find what I needed to make it work! :)

The only thing I am unsure about at this point is that when i click "OK" after selecting the color it adds it to the field but the color picker does not go away/hide. Any ideas how to hide it after you've clicked ok to add the color to the input field?
vGibson replied on at Permalink Reply
vGibson
Figured out the problem with it not hiding once I clicked OK

I was using another solution which was not as easy to implement but I left some of its code in which was causing the issue...

Thanks again ijessup! :)
ijessup replied on at Permalink Reply
ijessup
Got it. Code follows...
defined('C5_EXECUTE') or die(_("Access Denied."));
Loader::model('attribute/types/default/controller');
class ColorAttributeTypeController extends DefaultAttributeTypeController  {
   protected $searchIndexFieldDefinition = 'X NULL';
   public function form() {
      if (is_object($this->attributeValue)) {
         $value = Loader::helper('text')->entities($this->getAttributeValue()->getValue());
      }
      $fieldFormName = 'akID['.$this->attributeKey->getAttributeKeyID().'][value]';
      $html = '';
      $form = Loader::helper('form');
      $html .= '<div class="ccm-color-swatch-wrapper"><div class="ccm-color-swatch"><div id="f' . $this->attributeKey->getAttributeKeyHandle() . '" hex-color="' . $value . '" style="background-color:' . $value . '"></div></div></div>';
      $html .= $form->hidden($fieldFormName, $value);
      $html .= "<script type=\"text/javascript\">
   $(function() {
ijessup replied on at Permalink Reply 1 Attachment
ijessup
Tell me what you think.
jordanlev replied on at Permalink Reply
jordanlev
I think this is super awesome -- thanks!

One minor issue I ran into is that when I selected a color in my page's properties dialog and then clicked the save button, it didn't save my selection. I eventually realized this is because you need to click the "ok" button in the color picker itself and then click the dialog "Save" button.
So it's more of a UI issue than a bug, but in my opinion it would be better to have the color picker save its selection as soon as it's made, without requiring the 'ok' button to be clicked.

Might not be possible since you're using the built-in helper, but I figure if it confused me it will definitely surprise less technical end-users.

Nice work, though.

-Jordan

PS - off-topic here, but this made me think of a possible solution to a problem I've had converting free themes to c5 themes, where if they have a background image as the header image, it's impossible to swap out through the CMS. But maybe I could make that header image replaceable with a custom attribute? Then move the css for the background image from the stylesheet to the page type template's <head>. Hmm...
ijessup replied on at Permalink Reply
ijessup
Ahh, actually you are quite right. I have found that the best part of c5 is it's intuitiveness. And if someone like you had to think twice, I can imagine clients doing the same.

It isn't using the built in helper. Unfortunately there were some, what I though to be intrinsic, issues with the way the HTML was generated and how the JS handled it. So I rewrote the whole process only to find that I just needed to add a pair of quotes... >.<

On the bright side, I can fine tune things. For example, putting it in "flat" mode. I can, and will, change it so that you don't have to click OK.

I also need to look in to bringing it out of "hide" when you press the X button to remove the color value from the hidden input.
ijessup replied on at Permalink Reply 1 Attachment
ijessup
As requested... see attached.

I changed the submit button around so that it acts like it only changes the secondary color box.

Still working on getting the clear button to keep the dialog box open.
andoro replied on at Permalink Reply
andoro
I tried out in concrete 5.5.2 as a page attribute.
It doesn't work properly. Could you update it?

THX
sebastienj replied on at Permalink Reply
sebastienj
Great ! Many thanks !

Seb
jordanlev replied on at Permalink Best Answer Reply 1 Attachment
jordanlev
Attached is a modified version of @ljessup's attribute type. I changed it in 2 ways:

1) Upon installation it will only associate the attribute type with collections (not files or users).

2) Hacked the color picker so it doesn't show the HSB values.

3) Hacked the color picker so it just automatically "sets" colors when chosen by the user. I cannot fathom any possible use case where having to click an extra "ok" button to set the color you just chose makes sense (after all, if the user accidentally chooses the wrong color, they can just cancel the whole attribute dialog / not click the overall Save button).

Note that this is not very well tested, and may not work in certain browsers (I only tried it out in Chrome / Mac), and may not work with Concrete5.5 (I only tried it in 5.4.2.1).

Caveat Emptor.

-Jordan
whalanz replied on at Permalink Reply
Thankyou Jordan, This has come in handy. A slight design bug with concrete 5.5 and chrome browser... the textbox for the color fields extends in to the color box, but it is still very usable. Thanks again and also to ljessup
Ale replied on at Permalink Reply
Thanks ijessup and Jordan for the code! I just realized that I'll need to have color as an user attribute on one project and found out this thread.

I'd like to point out that the package works on the current version of Concrete (5.6.0.2), but only if you modify the controller to use AddFooterItem() instead of addHeaderItem() when adding in the javascripts needed for the color picker.
LukeBMM replied on at Permalink Reply
FYI, this causes a JS error and prevents other modal fields - like a thumbnail image attribute - from opening in Composer (at least in 5.6.1.2).

Without having tested much, it seems to work once the page has been created and the issue can be avoided by <i>not</i> putting the color picker attribute in Composer, but editing it on the page afterward. I only noticed the issue while in Composer, but haven't had a chance to dig up more details.
shahroq replied on at Permalink Reply
shahroq
Has somebody fixed issues on this addon for using recent 5.6+ version of c5?
agentorange replied on at Permalink Reply
agentorange
not sure if any one can assist me here - can I use this solution to change the colour of 2 elements on my page, 1 will be a font and the other a background.

If Yes - how would I link the attributes to the styles so they would actually change?

Thanks Maria