afc9d2d39124f1c0bc47f153d8dd84bb29df349e
[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 $ = require('jquery');
15 import 'TYPO3/CMS/Core/Contrib/jquery.minicolors';
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 ($(this.selector) as any).minicolors({
40 format: 'hex',
41 position: 'bottom left',
42 theme: 'bootstrap',
43 });
44 $(document).on('change', '.t3js-colorpicker-value-trigger', function(this: HTMLFormElement): void {
45 $(this).closest('.t3js-formengine-field-item')
46 .find('.t3js-color-picker')
47 .val(this.value)
48 .trigger('paste');
49 $(this).val('');
50 });
51 }
52 }
53 // Create an instance and return it
54 export = new ColorPicker();