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
Seems like developing one would be straight forward, but I though I'd ask before starting on it.
- IJ
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.
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!
I need to assign color codes to sales reps for a client. So I guess I'll get working on it. :)
Thanks Lucas!
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
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.
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.
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?
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?
I'll take a look today when I get some free time. I love the idea of having this as an attribute.
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.
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.
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?
Good idea, looking for it now.
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.
concrete/singele_pages/dashboard/pages/themes/customize.php is the file.
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.
$(this).ColorPicker()
Don't have a ton of time to dig into it yet.
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.
I'm needing to add this to a block I'm working on with no luck.
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...
http://www.concrete5.org/documentation/developers/forms/concrete5-w...
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?
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?
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! :)
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! :)
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() {
Viewing 15 lines of 34 lines. View entire code block.
Tell me what you think.
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...
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...
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.
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.
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.
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.
I tried out in concrete 5.5.2 as a page attribute.
It doesn't work properly. Could you update it?
THX
It doesn't work properly. Could you update it?
THX
Great ! Many thanks !
Seb
Seb
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
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
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
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.
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.
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.
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.
Has somebody fixed issues on this addon for using recent 5.6+ version of c5?
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
If Yes - how would I link the attributes to the styles so they would actually change?
Thanks Maria
I've modified jordanlev's version from this post to integrate with johnthefish's spectrum color picker package. It appears to be in working order including mobile touch for color selection. Anyone interested please pm me in regards, as I'd like to debug before release.