ColorPickerPlus

A colour picker Inputfield for ProcessWire with the thirteen pickers of react-color: Sketch, Chrome, Photoshop, Compact, Circle, Twitter, Block, Github, Swatches, Material, Hue, Slider and Alpha. They are ported to plain TypeScript and DOM, so no React and no jQuery reach the browser. A field downloads only the picker it uses.

Works with any admin theme, and natively with the Bridge admin theme (AdminThemeBridge). It is not part of Bridge and does not need it.

Install

1. Put this folder in site/modules/ColorPickerPlus/ (copy, or a junction on a local machine). Sites need only the committed files; node_modules/ is for building.
2. Modules > Refresh, install ColorPickerPlus. It installs the colour input, ColorPickerPlus Inputfield (InputfieldColorPickerPlus), and uninstalling it removes both. Code that only needs the input (a module's config screen) may install InputfieldColorPickerPlus on its own.

Use it on a page field

Create a Text field, and on its Details tab set Input module to ColorPickerPlus Inputfield. Save, then on the Input tab pick a picker from the gallery: each picker is shown as a screenshot, and only the chosen one runs live under the gallery.

Settings:

The value is a plain string. Empty is ''. Templates use it directly: <div style="background: <?= $page->accent ?>">.

Use it in code (module config screens, forms)

$f = $modules->get('InputfieldColorPickerPlus');
$f->attr('name', 'accent');
$f->label = 'Accent';
$f->val('#ff6900');                // or '' for no colour
$f->picker = 'chrome';
$f->emptyLabel = 'Theme default';
$f->emptyColor = '#2563eb';        // what '' stands for
$inputfields->add($f);

processInput() stores the value in the field's format and refuses anything that is not a colour (the old value stays, with an error). To check a value elsewhere:

InputfieldColorPickerPlus::normalize('#ABC');                  // '#aabbcc'
InputfieldColorPickerPlus::normalize('rgba(255,0,0,.5)', 'hex', true); // '#ff000080'
InputfieldColorPickerPlus::normalize('nope');                  // null
InputfieldColorPickerPlus::normalize('');                      // ''

In the browser

The field is a text input inside <color-picker-plus>. The input keeps the value and the form posts it, so the field works even without scripts. Each change sets the input's value and dispatches a bubbling input event on it. Letting go (pointer up, a click, a typed value, the clear button) also dispatches change. The element can be used without ProcessWire too:

<script type="module" src="/site/modules/ColorPickerPlus/assets/dist/color-picker-plus.js"></script>
<color-picker-plus picker="twitter" allow-empty empty-label="Default" placeholder="#2563eb">
  <input type="text" name="accent" value="#ff6900">
</color-picker-plus>

Attributes: picker, mode (inline), alpha, format, allow-empty, empty-label, placeholder (the empty colour), colors (JSON array or comma list), label, strings (JSON of translated UI text), disabled. Methods: open(), close(), clear(), ready() (resolves when the picker is drawn); properties value, state.

Keyboard: the saturation square and the sliders are sliders (arrow keys, Shift for steps of ten, Home/End), a palette is one tab stop with arrow keys, Escape closes the popover and returns focus.

Content Security Policy

No style attributes, no inline scripts and no innerHTML: the pickers are styled by stylesheets adopted into their shadow root, and positions and colours are set through the CSSOM. Checked under BridgeCsp's report-only mode, which reports nothing from the picker. Colours follow Bridge's tokens (--popover, --border, --input, --ring and so on) in light and dark. Without them, the pickers keep react-color's light look. The Photoshop picker keeps its grey look in both schemes, as in react-color.

Build and checks

npm install
npm run build          # type check, vite build to assets/dist/, gzip budgets (scripts/check-size.mjs)
npm test               # colour model
PW=<playwright-core> npm run previews   # assets/previews/*.png for the settings gallery (--sheet: review sheets)
node scripts/serve.mjs 8095             # tests/demo.html: every picker, ?inline=1, &dark=1

On a Bridge sandbox (<bridge> is the Bridge repository, <sandbox> its sandbox/<site>):

php tests/sandbox-fixture.php <bridge> <sandbox>            # page /cpp-test/, prints CPP_ID, CPP_FIELD_ID
php tests/smoke.php <bridge> <sandbox>
BRIDGE=<bridge> BASE=http://localhost:8089 CPP_ID=.. CPP_FIELD_ID=.. PW=<playwright-core> node tests/browser-check.cjs
php tests/sandbox-fixture.php <bridge> <sandbox> --remove

Licence

MIT. The pickers are ported from react-color 2.19.3, Copyright (c) 2015 Case Sandberg, MIT. The colour conversions follow tinycolor2, and the default palettes are material-colors. See LICENSE.