RockColorPicker - Super simple dependency-free color palette picker

[bernhard]

Happy new year everyone! New year, new module 😎

RockColorPicker

Super simple color picker for ProcessWire:

On non-required fields the selected color can be unselected by clicking the color again. The module also supports selecting colors via keyboard input (tab to focus color and then space/enter to select/unselect).

Setup

The colors of your field must be defined in /site/init.php:

$wire->addHookBefore(
  "RockColorPicker::colors",
  function (HookEvent $event) {
    // set colors of field "site_bgcolor"
    // labels are translatable
    $event->object->setColors('site_bgcolor', [
      'blue' => ['#acefee', __('blue')],
      'yellow' => ['#ffe36c', __('yellow')],
      'rose' => ['#ffc5df', __('rose')],
      'green' => ['#b5ffb2', __('green')],
      'violet' => ['#d5bfff', __('violet')],
    ]);

    // set colors of field "another_field"
    $event->object->setColors('another_field', [
      'red' => ['#ff0000', 'This is red'],
      'green' => ['#00ff00', 'This is green'],
      'blue' => ['#0000ff', 'This is blue'],
    ]);
  }
);

Accessing the field values

Formatted value:

Unformatted value:

Download

• https://processwire.com/modules/rock-color-picker/
• https://github.com/baumrock/RockColorPicker

[wbmnfktr]

So... the main difference to already existing color pickers here is the ability to give a preset of available colors?

That's nice. Feels more natural to select a visible color than just something with the label "blue" from a dropdown.

Next version is RockColorPickerCombo in which we can define foreground and background color combos? 😉

[bernhard]

2 hours ago, wbmnfktr said:

So... the main difference to already existing color pickers here is the ability to give a preset of available colors?

Yes, and to define them in code (which is a lot easier for automated deployments) and to get rid of any external JS library just for selecting a single color.

2 hours ago, wbmnfktr said:

That's nice. Feels more natural to select a visible color than just something with the label "blue" from a dropdown.

That's exactly the use that I built it for 🙂 

Before:

After:

2 hours ago, wbmnfktr said:

Next version is RockColorPickerCombo in which we can define foreground and background color combos? 😉

Not sure if there is any benefit here compared to creating two fields? What would be the exact use case?

[wbmnfktr]

5 minutes ago, bernhard said:

Before:

Yeah... that's what I meant. It works, but it's not nice at all.

 

5 minutes ago, bernhard said:

Not sure if there is any benefit here compared to creating two fields? What would be the exact use case?

Well I was just kidding with that thought but... the benefit of a ColorPickerCombo would be that client's can't display yellow text on blue backgrounds just because they have seen it in PowerPoint. Instead they could only choose from white/blue, white/orange, red/black or any other combo from the presets. You could even use that for simple gradients of some kind. But don't take that too serious.

[bernhard]

Damn, I thought about gradient backgrounds the other day but totally forgot that today 😄 

I've implemented the color blocks with SVG so I can't simply support gradients at the moment, but using DIV instead it will work:

I'll refactor and add that tomorrow the other day! Then we have another distinction to other colorpickers 😉 😄 

[bernhard]

Just pushed v1.1.0 - actually it is not a "color" picker any more 😅

    // custom CSS + HTML example
    $event->object->setColors('site_bgcolor', [
      // custom css
      'custom' => [
        'background: rgb(34,0,255); background: linear-gradient(90deg, rgba(34,0,255,1) 0%, rgba(0,0,0,1) 100%);',
        'Blue to black gradient'
      ],
      // custom html
      'custom2' => [
        '<div style="width:200px;">
          custom html demo 😍
        </div>',
        'Custom HTML demo :)'
      ],
    ]);