Have you seen our new video tutorials? Check it out!

Colorpicker Field Type

The colorpicker field type provides a fancy colorpicker input.

Introduction

anomaly.field_type.colorpicker

The colorpicker field type provides a fancy popup colorpicker input for choosing any color.

Configuration

Below is the full configuration available with defaults values:

"example" => [
    "type"   => "anomaly.field_type.colorpicker",
    "config" => [
        "default_value" => null,
        "format"        => "hex",
        "colors"        => null,
        "handler"       => "Anomaly\ColorpickerFieldType\Handler\[email protected]",
    ]
]
Configuration
Key Example Description

default_value

#61259e

The default value.

format

code

The color format to display. Valid options are hex, rgb, and rgba.

colors

["#61259e", "#38b5e6", "#24ce7b"]

Predefined color swatches.

handler

Example\Test\[email protected]

The predefined color handler.

Color Handlers

Color handlers are responsible for setting the predefined colors on the field type. You can define your own handler to add your own logic to predefined color options.

You can define custom handlers as a callable string where @handle will be assumed if no method is provided:

"handler" => "[email protected]"

Color handlers can also a handler with a closure:

"example" => [
    "config" => [
        "handler" => function (ColorpickerFieldType $fieldType) {
            $fieldType->setOptions(
                [
                    "#61259e",
                    "#38b5e6",
                    "#24ce7b"
                ]
            );
        }
    ]
]
Remember: Closures can not be stored in the database so your closure type handlers must be set / overridden from the form builder.
Writing Color Handlers

Writing custom color handlers is easy. To begin create a class with the method you defined in the config option.

"handler" => "[email protected]"

The handler string is called via Laravel's service container. The ColorpickerFieldType $fieldType is passed as an argument.

Pro Tip: Handlers are called through Laravel's service container so method and class injection is supported.
<?php namespace App/Example;

class MyColors
{
    public function handle(ColorpickerFieldType $fieldType)
    {
        $fieldType->setOptions(
            [
                "#61259e",
                "#38b5e6",
                "#24ce7b"
            ]
        );
    }
}

Usage

This section will show you how to use the field type via API and in the view layer.

Setting Values

You can set the colorpicker field type value with an valid color value in the configured format.

$entry->example = "#61259e";

Basic Output

The colorpicker field type returns null or the color value in the configured format.

$entry->example; // #61259e

Presenter Output

This section will show you how to use the decorated value provided by the \Anomaly\ColorpickerFieldType\ColorpickerFieldTypePresenter class.

ColorpickerFieldTypePresenter::code()

The code method returns the code portion of the hex value.

Returns: string
Example
$decorated->example->code();
Twig
{{ decorated.example.code() }}

ColorpickerFieldTypePresenter::hex()

The hex method returns the value has a hex code.

Returns: string
Example
$decorated->example->hex();
Twig
{{ decorated.example.hex() }}

ColorpickerFieldTypePresenter::rgb()

The rgb method returns the value as an RGB definition.

Returns: string
Example
$decorated->example->rgb();
Twig
{{ decorated.example.rgb() }}

ColorpickerFieldTypePresenter::rgba()

The rgba method returns the value as an rgba definition.

Example
$decorated->example->rgba();
Twig
{{ decorated.example.rgba() }}

ColorpickerFieldTypePresenter::levels()

The levels method returns an array of red, blue, and green levels. An optional opacity level is returned if the configured format is rgba.

Returns: array
Example
$decorated->example->levels()['red'];
Twig
{{ decorated.example.levels().red }}

ColorpickerFieldTypePresenter::red()

The red method returns the level of red in the value.

Returns: integer
Example
$decorated->example->red();
Twig
{{ decorated.example.red() }}

ColorpickerFieldTypePresenter::blue()

The blue method returns the level of blue in the value.

Example
$decorated->example->blue();
Twig
{{ decorated.example.blue() }}

ColorpickerFieldTypePresenter::green()

The green method returns the level of green in the value.

Returns: integer
Example
$decorated->example->green();
Twig
{{ decorated.example.green() }}

ColorpickerFieldTypePresenter::opacity()

The opacity method returns the opacity level of the value.

Returns: integer
Example
$decorated->example->opacity();
Twig
{{ decorated.example.opacity() }}