color picker

[ramjet]

If anyone needs to get a colorpicker going with Contao 2.10.x modules - heres a little howto:
Its exactly the same colorpicker as the one we had (mooRainbow) but with a different stylesheet.
You can retrieve the old stylesheet from Contao 2.9 if you want it to look as it did.

(I've cut and pasted it from a solution i posted to the ticket system - so i hope it posts ok)

I got the mooRainbow mentioned here by lionel https://github.com/CBeloch/mooRainbow working in a backend module on Contao 2.10.2.
Lionel's right, if you link the old css, it's the same as it was.
I renamed the CBeloch-mooRainbow-bac1a43 folder to mooRainbow, and put it in plugins/mootools.
Added

$GLOBALS['TL_JAVASCRIPT'][] = 'plugins/mootools/mooRainbow/Source/mooRainbow.js'; 
$GLOBALS['TL_CSS'][] = 'plugins/mootools/mooRainbow/Assets/rainbow.css';

to the module config.
DCA fields:

'colorodd' => array
(
'label' => &$GLOBALS['TL_LANG']['tl_youoweme_settings']['colorodd'],
'inputType' => 'text',
'eval' => array('tl_class'=>'w50 wizard', 'maxlength'=>11),
'wizard' => array
(
array('tl_youoweme_settings', 'myPicker')
) 
),
'coloreven' => array
(
'label' => &$GLOBALS['TL_LANG']['tl_youoweme_settings']['coloreven'],
'inputType' => 'text',
'eval' => array('tl_class'=>'w50 wizard', 'decodeEntities'=>true, 'maxlength'=>7),
'wizard' => array
(
array('tl_youoweme_settings', 'myPicker')
) 
),

Theres a couple of quirks - decodeEntities makes a difference to the field length (7 for true (#eeeeee), 11 for false (as the # becomes & 39 ; ), so the db really needs to be varchar(11) at least.

In the wizard callback I output the javascript needed, and the old button "pickcolor.gif".
Also I convert the saved value to the format [255,255,255] needed for the startColor: option. By working from the end of the value string it doesn't matter whether decodeEntities is true or not. This is so that it won't default to red (its default) each load.
Also I only include the onChange function on non-empty fields, otherwise it will fill in an empty field on load, then save it on save.

public function myPicker(DataContainer $dc)
{
     //stored differently depending on whether  'decodeEntities'=>true (#eeeeee)   or not (&39;eeeeee) 
     $r = hexdec(substr($dc->value,-6,2));// 2 characters before the last 4 characters (no alpha)
     $g = hexdec(substr($dc->value,-4,2));//2 characters before the last 2 characters(no alpha)
     $b = hexdec(substr($dc->value,-2,2));//last 2 characters(no alpha)
			
    if($dc->value != '')
    {
        $onchange = '
	  onChange: function(color) {
	 $(\'ctrl_'.$dc->field.'\').value = color.hex;
	 },';
   }

 return ' '  . $this->generateImage('pickcolor.gif', $GLOBALS['TL_LANG']['MSC']['colorpicker'], 'style="vertical-align:top; cursor:pointer;" id="toggle_'.$dc->field.'" class="mooRainbow"') . '
	 <script>
	 var r = new MooRainbow(\'toggle_'.$dc->field.'\', {
	 id: \'unique_'.$dc->field.'\',
	 imgPath: \'plugins/mootools/mooRainbow/Assets/images/\',
	 startColor: ['.$r.','.$g.','.$b.'],
	 '.$onchange . '
	 onComplete: function(color) {
	 $(\'ctrl_'.$dc->field.'\').value = color.hex;
	 }
	 });
	 </script>';
		
}

It should be possible to include this in plugins, and code similar to above in Datacontainer.php, so that you could just call it in eval as colorpicker=>true (like datepicker currently is), and not have to bother with the wizard callback. Maybe even offer a choice between the old and new css (Colorpicker=>'oldCSS' Colorpicker=>'newCSS') or something.

Anyway, my point is it goes, and its the same as it was.

[ramjet]

Actually a better way would be to throw the mooRainbow folder into your own modules html folder, and change the paths in the config and wizard callback.
Then its self contained in the module and update safe.