Ever needed a color picker on some kind of settings page? Didn't want to install and setup a full-blown colorpicker module? Here's a quick and dirty hook to change a regular text field into an <input type="color"> type of input:
Before:
After:
<?php
public function init(): void
{
wire()->addHookBefore('Inputfield::render', $this, 'changeFieldType');
}
public function changeFieldType(HookEvent $event): void
{
$f = $event->object;
$colorFields = [
Site::field_col_primary,
Site::field_col_secondary,
Site::field_contrast_primary,
Site::field_contrast_secondary,
];
if (!in_array($f->name, $colorFields)) return;
$f->attr('type', 'color');
}
So right before the text input is rendered we change its "type" property to "color" and the browser will render a default color picker 😎
It once more shows how versatile ProcessWire is. And maybe it helps someone... 🙂
PS: Be advised that with that hack you only modify the optics of the field. The field will under the hood still be a regular text field, which means you'll not get any sanitisation or such from it and you might have to take care of that on your own. In my case it's a superuser-only settings page. So it is no issue at all.