ColorPicker.ts 1.87 KB
Newer Older
1
2
3
4
5
6
7
8
9
10
11
12
13
/*
 * This file is part of the TYPO3 CMS project.
 *
 * It is free software; you can redistribute it and/or modify it under
 * the terms of the GNU General Public License, either version 2
 * of the License, or any later version.
 *
 * For the full copyright and license information, please read the
 * LICENSE.txt file that was distributed with this source code.
 *
 * The TYPO3 project - inspiring people to share!
 */

14
import $ from 'jquery';
15
import 'jquery/minicolors';
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

/**
 * Module: TYPO3/CMS/Backend/ColorPicker
 * contains all logic for the color picker used in FormEngine
 * @exports TYPO3/CMS/Backend/ColorPicker
 */
class ColorPicker {
  /**
   * The selector for the color picker elements
   */
  private selector: string;

  /**
   * The constructor, set the class properties default values
   */
  constructor() {
    this.selector = '.t3js-color-picker';
  }

  /**
   * Initialize the color picker for the given selector
   */
  public initialize(): void {
39
    ($(this.selector) as any).minicolors({
40
41
42
43
      format: 'hex',
      position: 'bottom left',
      theme: 'bootstrap',
    });
44
45
46
47
48
49
50
51
52
    $(document).on('change', '.t3js-colorpicker-value-trigger', (event: Event): void => {
      const $element = $(event.target);
      if ($element.val() !== '') {
        $element.closest('.t3js-formengine-field-item')
          .find('.t3js-color-picker')
          .val($element.val())
          .trigger('paste');
        $element.val('');
      }
53
    });
54
55
56
57
    // On blur, use the formatted value from minicolors
    $(document).on('blur', '.t3js-color-picker', (event: Event): void => {
      const $element = $(event.target);
      $element.closest('.t3js-formengine-field-item')
58
        .find('input[type="hidden"]')
59
        .val($element.val());
60
61
62

      if ($element.val() === '') {
        $element.trigger('paste');
63
64
      }
    });
65
66
  }
}
67
// create an instance and return it
68
export = new ColorPicker();