efe5d1b173b9a26d8008dbc0f08d05d7e031306b
[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     (<any> $(document)).on('change', '.t3js-colorpicker-value-trigger', function(): void {
45       (<any> $(this))
46         .closest('.t3js-formengine-field-item')
47         .find('.t3js-color-picker')
48         .val(this.value)
49         .trigger('paste');
50       (<any> $(this)).val('');
51     });
52   }
53 }
54 // Create an instance and return it
55 export = new ColorPicker();