[TASK] Support valuePicker in colorpicker

Add the 'valuePicker' functionality to the colorpicker. This is useful
for editors to have a series of defaults. A similar configuration worked
in the past based on 'select' wizard.

Example TCA from styleguide master input_37:
    'config' => [
        'type' => 'input',
        'renderType' => 'colorpicker',
        'size' => 10,
        'valuePicker' => [
            'items' => [
                [ 'blue', '#0000FF', ],
                [ 'red', '#FF0000', ],
                [ 'typo3 orange', '#FF8700', ],
            ],
        ],
    ],

Change-Id: Idf24ecc1b47e84f6e4aa985191beebeb3631b202
Resolves: #80337
Releases: master
Reviewed-on: https://review.typo3.org/52090


Reviewed-by: Anja Leichsenring <aleichsenring@ab-softlab.de>
Tested-by: Anja Leichsenring <aleichsenring@ab-softlab.de>
Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>
Reviewed-by: Frank Nägler <frank.naegler@typo3.org>
Tested-by: Frank Nägler <frank.naegler@typo3.org>

typo3/sysext/backend/Classes/Form/Element/InputColorPickerElement.php

@@ -139,6 +139,16 @@ class InputColorPickerElement extends AbstractFormElement
             $attributes['autocomplete'] = empty($config['autocomplete']) ? 'new-' . $fieldName : 'on';
         }
 
+        $valuePickerHtml = [];
+        if (isset($config['valuePicker']['items']) && is_array($config['valuePicker']['items'])) {
+            $valuePickerHtml[] = '<select class="t3js-colorpicker-value-trigger form-control tceforms-select tceforms-wizardselect">';
+            $valuePickerHtml[] = '<option></option>';
+            foreach ($config['valuePicker']['items'] as $item) {
+                $valuePickerHtml[] = '<option value="' . htmlspecialchars($item[1]) . '">' . htmlspecialchars($languageService->sL($item[0])) . '</option>';
+            }
+            $valuePickerHtml[] = '</select>';
+        }
+
         $legacyWizards = $this->renderWizards();
         $legacyFieldControlHtml = implode(LF, $legacyWizards['fieldControl']);
         $legacyFieldWizardHtml = implode(LF, $legacyWizards['fieldWizard']);
@@ -165,6 +175,7 @@ class InputColorPickerElement extends AbstractFormElement
         $mainFieldHtml[] =      '<div class="form-wizards-items-aside">';
         $mainFieldHtml[] =          '<div class="btn-group">';
         $mainFieldHtml[] =              $fieldControlHtml;
+        $mainFieldHtml[] =              implode(LF, $valuePickerHtml);
         $mainFieldHtml[] =          '</div>';
         $mainFieldHtml[] =      '</div>';
         $mainFieldHtml[] =      '<div class="form-wizards-items-bottom">';

typo3/sysext/backend/Resources/Private/TypeScript/ColorPicker.ts

@@ -41,6 +41,14 @@ class ColorPicker {
       position: 'bottom left',
       theme: 'bootstrap',
     });
+    (<any> $(document)).on('change', '.t3js-colorpicker-value-trigger', function(): void {
+      (<any> $(this))
+        .closest('.t3js-formengine-field-item')
+        .find('.t3js-color-picker')
+        .val(this.value)
+        .trigger('paste');
+      (<any> $(this)).val('');
+    });
   }
 }
 // Create an instance and return it

typo3/sysext/backend/Resources/Public/JavaScript/ColorPicker.js

@@ -33,6 +33,14 @@ define(["require", "exports", "jquery", "TYPO3/CMS/Core/Contrib/jquery.minicolor
                 position: 'bottom left',
                 theme: 'bootstrap',
             });
+            $(document).on('change', '.t3js-colorpicker-value-trigger', function () {
+                $(this)
+                    .closest('.t3js-formengine-field-item')
+                    .find('.t3js-color-picker')
+                    .val(this.value)
+                    .trigger('paste');
+                $(this).val('');
+            });
         };
         return ColorPicker;
     }());