[BUGFIX] Colorpicker in irre records
[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 /// <amd-dependency path="TYPO3/CMS/Core/Contrib/jquery.minicolors">
15 import $ = require('jquery');
16
17 /**
18  * Module: TYPO3/CMS/Backend/ColorPicker
19  * contains all logic for the color picker used in FormEngine
20  * @exports TYPO3/CMS/Backend/ColorPicker
21  */
22 class ColorPicker {
23   /**
24    * The selector for the color picker elements
25    */
26   private selector: string;
27
28   /**
29    * The constructor, set the class properties default values
30    */
31   constructor() {
32     this.selector = '.t3js-color-picker';
33   }
34
35   /**
36    * Initialize the color picker for the given selector
37    */
38   public initialize(): void {
39     (<any> $(this.selector)).minicolors({
40       format: 'hex',
41       position: 'bottom left',
42       theme: 'bootstrap',
43     });
44     $(document).on('change', '.t3js-colorpicker-value-trigger', (event: Event): void => {
45       const $element: any = $(event.target);
46       if ($element.val() !== '') {
47         $element.closest('.t3js-formengine-field-item')
48           .find('.t3js-color-picker')
49           .val($element.val())
50           .trigger('paste');
51         $element.val('');
52       }
53     });
54   }
55 }
56 // Create an instance and return it
57 export = new ColorPicker();