Hook into Select Option radio buttons

[ttttim]

I'm using a Select Option field for a user to select a color by name. In the back-end the radio buttons are showing the title of the color but the actual value (the Hex) can't be traced using the Inspector. Is there a way to hook into the Radio input field to add the Hex value if one is selected? I'd like to add the selected color to the background of the field after save.

[rick]

The only thing I know about hooks is to catch fish. ? You might take a look at @kixe's module color field to see how it was done there.

Another option, if you have a limited selection is to use individual pages for each color.

[ttttim]

I've seen some really nice colorpickers out there but I don't want the user to pick any color just the ones I select. Or is there a simple way to disable the JS colorpicker from https://modules.processwire.com/modules/fieldtype-color-picker/?

[elabx]

The module from @kixe uses Spectrum jquery color picker and it has an option to show only a palette.

https://modules.processwire.com/modules/fieldtype-color/

[kixe]

On 5/4/2020 at 5:02 PM, ttttim said:

Or is there a simple way to disable the JS colorpicker from https://modules.processwire.com/modules/fieldtype-color-picker/?

With FieldtypeColor https://modules.processwire.com/modules/fieldtype-color/ you have multiple options for the Inputfield:
Text, HTML5 Color, any Javascript ...

If you are able to create a custom SQL table for your colors FieldtypeSelectExtOption https://modules.processwire.com/modules/fieldtype-select-ext-option/ is a possible solution for your needs, since you can use the hex code as the value here.

 

 

[ttttim]

Thanks @kixe and @elabx I'm gonna look in to those option!

[kixe]

@ttttim

I have added new Fieldtype Select Color Options to FieldtypeColor package. Read more here:

Furthermore, as @elabx  already mentioned, if you use Spectrum Color Picker as Inputfield in FieldtypeColor it is also possible to configure it to a select with predefined options:

https://bgrins.github.io/spectrum/#options-togglePaletteOnly