[BUGFIX] Update ColorPicker to use cleaned minicolors hex value
[Packages/TYPO3.CMS.git] / typo3 / sysext / backend / Resources / Private / TypeScript / ColorPicker.ts
1 /*
2  * This file is part of the TYPO3 CMS project.
3  *
4  * It is free software; you can redistribute it and/or modify it under
5  * the terms of the GNU General Public License, either version 2
6  * of the License, or any later version.
7  *
8  * For the full copyright and license information, please read the
9  * LICENSE.txt file that was distributed with this source code.
10  *
11  * The TYPO3 project - inspiring people to share!
12  */
13
14 import * as $ from 'jquery';
15 import 'TYPO3/CMS/Core/Contrib/jquery.minicolors';
16 import FormEngine = require('TYPO3/CMS/Backend/FormEngine');
17
18 /**
19  * Module: TYPO3/CMS/Backend/ColorPicker
20  * contains all logic for the color picker used in FormEngine
21  * @exports TYPO3/CMS/Backend/ColorPicker
22  */
23 class ColorPicker {
24   /**
25    * The selector for the color picker elements
26    */
27   private selector: string;
28
29   /**
30    * The constructor, set the class properties default values
31    */
32   constructor() {
33     this.selector = '.t3js-color-picker';
34   }
35
36   /**
37    * Initialize the color picker for the given selector
38    */
39   public initialize(): void {
40     ($(this.selector) as any).minicolors({
41       format: 'hex',
42       position: 'bottom left',
43       theme: 'bootstrap',
44     });
45     $(document).on('change', '.t3js-colorpicker-value-trigger', (event: Event): void => {
46       const $element = $(event.target);
47       if ($element.val() !== '') {
48         $element.closest('.t3js-formengine-field-item')
49           .find('.t3js-color-picker')
50           .val($element.val())
51           .trigger('paste');
52         $element.val('');
53       }
54     });
55     // On blur, use the formatted value from minicolors
56     $(document).on('blur', '.t3js-color-picker', (event: Event): void => {
57       const $element = $(event.target);
58       $element.closest('.t3js-formengine-field-item')
59         .find('INPUT[type="hidden"]')
60         .val($element.val());
61       if ($element.val() === '') { // force FormEngineReview if value is empty
62         FormEngine.Validation.validate();
63       }
64     });
65   }
66 }
67 // create an instance and return it
68 export = new ColorPicker();