klewas VIP
Total posts: 18
25 Mar 2014 21:15

Hello, I need a field that user can pick a color from color palette? Maby there is a field that can be customized to get something similar? or I need to create a new field?

Last Modified: 01 Apr 2014


pepperstreet VIP
Total posts: 3,837
26 Mar 2014 02:28

Good point. Actually this field idea lives in my idea-folder for quite a long time. Forgot to create a proper topic ;-)

For sure, there might be many different approaches to create such a special field. There are also different ways to display a color selection.

Apart from utilizing an existing Cobalt field... with pre-defined values/names/images as options... You might also modify an existing field with a color-related JavaScript and custom input template.

How do you want the user to select a color? Your color palette is a small collection of color-wells? What type of data do you need and in which format should it be stored? What type of input is needed: by name? by a certain value? by an interactive WYSIWYG interface? etc.

Can you specify more details, please?


klewas VIP
Total posts: 18
26 Mar 2014 08:50

Great that not only me thinking about that field :) I believe that this one plugin can be used as color picker " http://www.eyecon.ro/colorpicker/ " - it is nice one. And for me its enough that field stores hexademical color value, that's it. Maby it could store also rgb values, it may be sometimes useful if you want to display it as rgba with transparency.


Sergey
Total posts: 13,748
26 Mar 2014 16:42

I think it is very simple to make as text field template. Just add script and apply it to input.


pepperstreet VIP
Total posts: 3,837
26 Mar 2014 18:09

klewas I believe that this one plugin can be used as color picker " http://www.eyecon.ro/colorpicker/ " - it is nice one.

BTW, J!2.5++ has also a build-in color form field type.
Related SpiralScripts article

J!3 ships with the following JS files incl. minified versions in media/JUI folder:


klewas VIP
Total posts: 18
27 Mar 2014 12:14

Great, I didn't know that Joomla has that kind of field:) Yes it's really simple to create it but I don't understand why it's still not created together with the other fields?:)


Sergey
Total posts: 13,748
28 Mar 2014 07:19

klewas but I don't understand why it's still not created together with the other fields?:)

Because this is fist time when some one asked for that.


pepperstreet VIP
Total posts: 3,837
31 Mar 2014 18:19

FYI - Tiny Colorpicker - A lightweight cross browser color picker.

jquery_color_tinycolorpicker


Sergey
Total posts: 13,748
01 Apr 2014 12:25

That is what I say. It is incredibly easy to implemen even on custom form. Just add theer this piece of code for text field by ID.


pepperstreet VIP
Total posts: 3,837
01 Apr 2014 14:29

Sergey easy to implemen even on custom form

What's best practice, if Javascript/CSS files have to be used?

  • Form template is easy, but it would load JS files always, even if the color field is not used in a certain type)
  • Text field input template: How to deal with JS scripts in field templates? Also include them with jfactory Addscript/AddStylesheet. But what about JS/CSS file location?
  • How to package and distribute a custom field-template with external JS/CSS files?

Sergey
Total posts: 13,748
01 Apr 2014 14:55

There are 2 ways. But I would do this one.

  1. Create custom text input field template.
  2. In that template at very top I would load JS that I save in any Joomla location I like
JFactory::getDocument()->addScript('/path/to/script.js');

And then at very bottom I vuld add

<script>
jQuery('#field_id').colopicker();
</script>
Powered by Cobalt