FieldtypeColor

[kixe]

FieldtypeColor is on github

Fieldtype stores a 32bit integer value reflecting a RGBA value.

Input
5 types of Inputfields provided

1. Html5 Inputfield of type='color' (if supported by browser)   
2. Inputfield type='text' expecting a 24bit hexcode string (RGB). Input format: '#4496dd'.
   The background color of the input field shows selected color
3. Inputfield of type='text' expecting 32bit hexcode strings (RGB + alpha channel) Input format: '#fa4496dd'
4. Inputfield with Spectrum Color Picker
   (Options modifiable)
5. Inputfield type='text' with custom JavaScript and/or CSS (since version 1.0.3)

Output
Define output format under 'Details' tab in field settings. Select from the following 9 options

1. string 6-digit hex color. Example: '#4496dd'
2. string 8-digit hex color (limited browser support).  Example: '#fa4496dd'
3. string CSS color value RGB. Example: 'rgb(68, 100, 221)'
4. string CSS color value RGB. Example: 'rgba(68, 100, 221, 0.98)'
5. string CSS color value RGB. Example: 'hsl(227, 69.2%, 56.7%)'
6. string CSS color value RGB. Example: 'hsla(227, 69.2%, 56.7%, 0.98)'
7. string 32bit raw hex value. Example: 'fa4496dd'(unformatted output value)
8. int 32bit. Example: '4198799069' (storage value)
9. array()

   array(
           [0] => 0-255, // opacity
           [1],['r'] => 0-255,
           [2],['g'] => 0-255,
           [3],['b'] => 0-255,
           ['rx'] => 00-ff,
           ['gx'] => 00-ff,
           ['bx'] => 00-ff,
           ['ox'] => 00-ff, // opacity
           ['o'] => 0-1 // opacity
       )

    

The Fieldtype includes
Spectrum Color Picker by Brian Grinstead

SCREENSHOTS

Input type=text with changing background and font color (for better contrast)

Input type=color (in Firefox)

Javascript based input (Spectrum Color Picker)

Settings Output

 

Settings Input

[bernhard]

hi kixe,

thanks for sharing this  would you mind adding some screenshots or a sample usecase to know when your module would be useful? maybe you could also point out the differences to somas colorpicker module?

thanks!

[kixe]

Hi @bernhard I added some screenshots.

[kixe]

Updated to Version 1.0.3 with one more Inputfield Option which allows to use any custom JavaScript.

[joshuag]

Awesome work. I love this!

[Juergen]

Some time ago, I made a site for a company which sells wool. In this case I use the fieldtype color for the different colors of a wool product (as a color scheme board). In this case I use the old color picker field (I think it was from Soma). This could be a possible usecase example for this fieldtype.

[kixe]

I played around a bit with custom JS based Input. Here are the settings for 3 individual JS based input options:

ColorPicker by Stefan Petr (http://www.eyecon.ro/colorpicker/)

initial JS

$('#{id}').ColorPicker({
    color: '{value}',
    onChange: function (hsb, hex, rgb) {
        $('#{id}').attr('value', '#' + hex);
    }
});

include JS
colorpicker/js/colorpicker.js

include CSS
colorpicker/css/colorpicker.css

 

 

JSColor by Jan Odvarko (http://jscolor.com/)

initial JS

var input = document.getElementById('{id}');
var picker = new jscolor(input);

include JS
jscolor-2.0.4/jscolor.js

 

 

Color Picker (http://dematte.at)

initial JS

$('#{id}').colorPicker();

include JS
dematte/jQueryColorPicker.min.js

Pull js file from here: https://github.com/PitPik/colorPicker/blob/master/jQuery_implementation/jQueryColorPicker.min.js

 

 

 

 

[rafaoski]

Thanks  kixe for this great picker, but I do not know why when saving color lost settings to the defolt? I'm using processwire 3.0.62 Master

[kixe]

@rafaoski
Are you talking about the field settings? Could you please explain more detailed what happened that I can reproduce the issue. Thanks.

[rafaoski]

I'm sorry kixe for my bad english ... Maybe this video will bring something ... Maybe somewhere I make a mistake when configuring the plugin ... View and rate ...

 

[kixe]

@rafaoski
thanks for the video. Unfortunately I cannot reproduce. Could you check if the value is changed in the database? It looks like the setting is falling back to a previous default value. Could you unset the default value and try again?

I made a screenshop of the fieldsettings. Is it similar to yours? Did you try custom js code?

[rafaoski]

Thanks kixe for the reply ... My table is out of date:

And Field Settings Screenshot :

I did not add my own js code ... How to solve the problem I will let you know ... Thanks again for help ...

[rafaoski]

I tested on Hosting and it works Correctly ... It's a bit weird, maybe it's through the Win 10 + Xampp Server ...

[bernhard]

hi @rafaoski maybe https://laragon.org/ is interesting for you as a replacement for xampp. i use it on win10 for about a year and it's great

[rafaoski]

I will be testing Laragon ... I just started to refresh the partition on some Linux derivative (maybe manjaro) ... I have to admit that Processwire has very good people around you who help ... Thank you both @kixe and you @bernhard ... Next time before I start looking for problems I will check on other machines - Such a lesson for the future

[Macrura]

I'm having the problem that i always get the 2nd option output (8 digit hex color, and no hash), no matter what i select for the Output Format.

Right now i'm doing an ltrim($widget->color, 'ff');  on the output, and then adding the hash myself, but would be good to get this fixed...

TIA

[kixe]

@Macrura

Page output formatting?

$page->of(false);
var_dump($page->color); // string(8) "ff5a01fd"
$page->of(true);
var_dump($page->color); // string(7) "#5a01fd"

 

[Macrura]

Yes - thanks, i'm using the color on an admin dashboard, which is being wireRendered from a module, so i assume that output formatting is off; Is there any way to get the formatted output in this situation?

[kixe]

If $widget is a page object it should be possible to put outputformatting on just to grab the value and switch it of after.

If not you can use the formatValue() function from the module. You need a page and a field object as arguments. $page can be any page in this case but $field should be the one where the OF type is stored.

$FieldtypeColor = wire('modules')->get('FieldtypeColor');
$field = new Field();
$unformattedColor = "ff5a01fd";
$page = new Page();
$field->type = $FieldtypeColor;
$field->outputFormat = 0;
$color = $FieldtypeColor->formatValue($page,$field,$unformattedColor);
var_dump($color); // string(7) "#5a01fd" 

 

[Macrura]

this does work:

    $FieldtypeColor = wire('modules')->get('FieldtypeColor');
    $field = $fields->get('dw_color');
    $field->outputFormat = 0;
    $widgetColor = $FieldtypeColor->formatValue($widget,$field,$widget->dw_color);

i just wonder if it is simpler/more efficient to do it this way:

$widgetColor = '#' . ltrim($widget->dw_color, 'ff');

 

[Robin S]

@Macrura if $widget is a page, then try this...

$widget->getFormatted('dw_color')

 

[titanium]

Hi, thanks for this really nice module.

I'm trying to initiate this module from within another module and have no luck so far. This is my config:

$colors[] = [
    'name'         => 'color',
    'type'         => 'color',
    // 'inputType'    => 3,
    'outputFormat' => 3,
    'showInput'    => true,
    'defaultValue' => '#ff0080ff',
    'collapsed'    => 0,
    'alpha'        => 0,
    'spectrum'     => "showInput: true\nallowEmpty:true\nshowAlpha: true\nshowInitial: true\nchooseText: \"Alright\",\ncancelText: \"No way\"\npreferredFormat: \"hex3\"",
    'class'        => 'FieldtypeColor',
    'label'        => $this->_($key),
    'description'  => $this->_(''),
    'required'     => false,
    'value'        => '#ff3300',
    'columnWidth'  => 25,
    'notes'        => $this->_('Initial value: ' . $value),
];

If I comment in "inputType => 3", ProcessWire returns "The process returned no content." when saving my modules config. Ok, as a workaround, I could live without Spectrum. When is commented out, it saves and returns the modules config page correctly.

But the field "color" doesn't show the value of #ff0000. It returns in JS console: "The specified value "#00000" does not conform to the required format." That's weird: where has my Value of "#ff3300" gone? Alright, it seems to return the FieldtypeColor's default of "#000000". But wait, there is a "0" missing in JS error log's message...

Obviously I'm doing something wrong here. I hope someone has an idea how to call this module from within my other custom module correctly. Thanks in advance.

[kixe]

@titanium

Sorry for the extremely delayed answer.

On 22.10.2017 at 9:28 PM, titanium said:

But wait, there is a "0" missing in JS error log's message...

Thanks for pointing on this. I pushed an update which allows to use InputfieldColor as a config field for modules.

I have made some changes in the code you have posted and tested it within the following module. Everything seems to work. Please check out.

<?php namespace ProcessWire;

class My2Module extends WireData implements Module, ConfigurableModule {

	/**
	 *
	 * @return array
	 *
	 */
	public static function getModuleInfo() {

		return array(
			'title' => 'My2Module',
			'summary' => 'Module with Config Input of type Color', 
			'version' => 100
			);
	}

	static public function getDefaultConfig() {
		return array(
			'color' => '#ff3300'
		);
	}

	public function __construct() {
		foreach(self::getDefaultConfig() as $key => $value) {
			$this->$key = $value;
		}
	}

	/**
	 * Initialize, attach hooks 
	 *
	 */
	public function init() {
		// ...
	}

	/**
	 * module settings
	 *
	 */
	static public function getModuleConfigInputfields(array $data) {
		
		$fields = new InputfieldWrapper();
		$defaults = self::getDefaultConfig();
		$data = array_merge($defaults, $data);
	
		$colors = [
				'name'         => 'color',
				'inputType'    => 3,
				'type'         => 'color', // will search for 'InputfieldColor'
				// 'outputFormat' => 3, // REMOVED outputFormat is related to the Fieldtype and not to the Inputfield
				// 'defaultValue' => '#ff0080ff', // REMOVED @see getDefaultConfig() and __construct()
				// 'alpha'        => 0, // REMOVED related to 'inputType=4', otherwise automatically set by the Inputfield
				'spectrum'     => "showInput: true\nallowEmpty:true\nshowAlpha: true\nshowInitial: true\nchooseText: \"Alright\"\ncancelText: \"No way\"\npreferredFormat: \"hex3\"",
				// 'class'        => 'FieldtypeColor', // REMOVED (unnecessary)
				'label'        => __('Label'),
				'description'  => __('Description'),
				'required'     => false,
				'value'        => $data['color'],
				'notes'        => __('Initial value: '.$defaults['color']),
			];

		$fields->add($colors);
		return $fields;
	}
}

 

[kixe]

Fixed issue #3 https://github.com/kixe/FieldtypeColor/issues/3

@flydev Thanks

[adrian]

@kixe - it might be worth noting that this module requires PHP's bcmath extension because of the call to: bcmod (and maybe others).