No-Module Color Picker (One Simple Hook)

[bernhard]

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.

[FireWire]

@bernhard NICE!