ColorPickerPlus

[theoretic]

Hi everyone,

First of all, thanks to this incredible community, which keeps giving me more and more new ideas! This one, making a better colour picker for ProcessWire, was also inspired by you.

ColorPickerPlus is a module that brings the pickers of the well-known react-color library to ProcessWire: Sketch, Chrome, Photoshop, Compact, Circle, Twitter, Block, Github, Swatches, Material, Hue, Slider and Alpha. That's 13 of them, and you choose one per field.

GitHub: https://github.com/theoretic/ColorPickerPlus

How it's built

ColorPickerPlus is not part of my Bridge project, but it follows Bridge's best practices: web components, a lightweight TypeScript runtime and no jQuery. There is no React either. The pickers were ported from react-color to plain TypeScript and DOM.

On top of that, every picker is a separate component, independent of the others. A field loads only the picker it uses, and only when its popover first opens. So the code your admin theme loads stays at the possible minimum: about 6 KB gzipped for the core, plus 0.2 to 1.8 KB for the picker itself.

Features

• Use it as the input of a plain Text field (Details tab > Input module), or from code on module config screens and in forms.
• The field settings show a gallery of screenshots of all 13 pickers. Only the one you choose runs live below the gallery, so you can try it before saving.
• Opens in a popover from a swatch button, or stays open under the field.
• Stores #rrggbb, rgb() or hsl(), with optional transparency (#rrggbbaa, rgba(), hsla()).
• An optional empty state means "no colour", with your own label (e.g. "Theme default") and the colour it stands for.
• Custom palettes for the palette pickers.
• The server normalises the value and rejects anything that isn't a colour.
• Keyboard friendly: the saturation square and the sliders work with the arrow keys, a palette is a single tab stop, and Escape closes the popover.
• CSP friendly: no inline styles, no inline scripts, no innerHTML.
• Works with AdminThemeUikit and other admin themes. Under Bridge it runs as a native component and follows the theme's light and dark colours.

Install

1. Put the module in /site/modules/ColorPickerPlus/ (the built files are committed, so no Node.js is needed).
2. Modules > Refresh, then install ColorPickerPlus. It installs the colour input, ColorPickerPlus Inputfield, too.
3. Edit a Text field: Details > Input module > ColorPickerPlus Inputfield, save, then pick a picker on the Input tab.

In code

$f = $modules->get('InputfieldColorPickerPlus');
$f->attr('name', 'accent');
$f->label = 'Accent';
$f->val('#ff6900');
$f->picker = 'chrome';
$f->emptyLabel = 'Theme default';
$inputfields->add($f);

Requires ProcessWire 3.0.200+ and PHP 7.4+. MIT licensed. Many thanks to Case Sandberg for react-color, whose pickers this module is built on.

Feedback, bug reports and ideas are very welcome!