RockColorPicker - Simple and versatile dependency-free color palette picker

[bernhard]

Happy new year everyone! New year, new module 🙂

A super simple color picker for the ProcessWire backend that can not only pick colors but also custom HTML (so you can use it for picking gradients, for example).

Docs and Download: https://www.baumrock.com/en/processwire/modules/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 :)'
      ],
    ]);

 

[gebeer]

Thank you for this module. Love it.

A few weeks ago I accidentally found this gem although it was not listed on your website.

IMO this is the slickest color picker in the PW ecosystem, if you only need predefined colors (which is mostly the case in my projects). Very easy to setup and the editors love it, too.

This will be new standard in my tool belt for new projects.

[bernhard]

8 minutes ago, gebeer said:

A few weeks ago I accidentally found this gem although it was not listed on your website.

True, thx! I've just added it. I guess some others are missing as well... I guess I should go through my github repos and update my website 😅

[bernhard]

Just added docs to https://www.baumrock.com/en/processwire/modules/rockcolorpicker/docs/ with lots of examples and added some minor improvements 🙂 

[bernhard]

Actually the name of this module is totally wrong, because you can not only use it to pick colours, you can also use it for example to pick layout positions - here as an example in a RockPageBuilder block:

The code to achieve this:

$picker->setColors('site_overlayposition', [
	'top-left' => [
		'<svg ...></svg>',
		'Oben Links',
	],
	...
]);

 

[gebeer]

1 hour ago, bernhard said:

Actually the name of this module is totally wrong, because you can not only use it to pick colours, you can also use it for example to pick layout positions - here as an example in a RockPageBuilder block:

Awesome! What about RockMPP (RockMultiPurposePicker) or RockPickAnything?

Or just RockPicker.