RockColorPicker by bernhard

Main RockColorPicker Module

RockColorPicker

Super simple color (and custom HTML) picker for ProcessWire:

68747470733a2f2f692e696d6775722e636f6d2f3730314a6a39432e706e67

On non-required fields the selected color can be unselected by clicking the color again. The module also supports selecting colors via keyboard input (tab to focus color and then space/enter to select/unselect).

Setup


The colors of your field must be defined in /site/init.php:

$wire->addHookBefore(
  "RockColorPicker::colors",
  function (HookEvent $event) {
    // set colors of field "site_bgcolor"
    // labels are translatable
    $event->object->setColors('site_bgcolor', [
      'blue' => ['#acefee', __('blue')],
      'yellow' => ['#ffe36c', __('yellow')],
      'rose' => ['#ffc5df', __('rose')],
      'green' => ['#b5ffb2', __('green')],
      'violet' => ['#d5bfff', __('violet')],
    ]);

    // set colors of field "another_field"
    $event->object->setColors('another_field', [
      'red' => ['#ff0000', 'This is red'],
      'green' => ['#00ff00', 'This is green'],
      'blue' => ['#0000ff', 'This is blue'],
    ]);

    // 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 :)'
      ],
    ]);
  }
);

Accessing the field values


Formatted value:

68747470733a2f2f696d6775722e636f6d2f453037736b59452e706e67

Unformatted value:

68747470733a2f2f692e696d6775722e636f6d2f776872576336372e706e67

Why is there no GUI for setup?


Building a GUI for this field would be extremely hard because we need a connection between the color name, css-code and the label, but the label would need to be multi-language. Having a regular multilang textarea with language tabs would mean that we'd have to repeat all the colors for every language and also repeat all the css-codes. That's less than ideal so I chose to go with a code-only fieldtype so that one can setup colors once and then translate labels if need be.

Install and use modules at your own risk. Always have a site and database backup before installing new modules.

Twitter updates

  • Adding custom actions to ProcessWire image fields in the admin, part of this week’s dev branch additions: More
    27 January 2023
  • ProcessWire 3.0.210 new main/master version released— More
    6 January 2023
  • ProcessWire 3.0.209: Core updates and an interesting AI that knows ProcessWire– More
    30 December 2022

Latest news

  • ProcessWire Weekly #456
    The 456th issue of ProcessWire Weekly covers latest core updates, introduces a new third party module called TextformatterRockDown, and more. Read on!
    Weekly.pw / 4 February 2023
  • ProcessWire 3.0.210 new main/master version
    140 commits, 55 resolved issues, dozens of new features, eight contributors, and five new pull requests make yet another great new version of ProcessWire.
    Blog / 6 January 2023
  • Subscribe to weekly ProcessWire news

I just love the easy and intuitive ProcessWire API. ProcessWire rocks!” —Jens Martsch, Web developer