[BUGFIX] Prevent loading jsfunc.inline.js twice
[Packages/TYPO3.CMS.git] / typo3 / sysext / backend / Resources / Private / TypeScript / ValueSlider.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 'twbs/bootstrap-slider';
16
17 interface UpdatedValue {
18   oldValue: number;
19   newValue: number;
20 }
21
22 interface ValueSliderUpdateEvent extends JQueryEventObject {
23   value: UpdatedValue;
24 }
25
26 class ValueSlider {
27   private id: string; // internally set by the renderTooltipValue callback
28   private selector: string = '[data-slider-id]';
29
30   /**
31    * Update value of slider element
32    *
33    * @param {ValueSliderUpdateEvent} e
34    */
35   private static updateValue(e: ValueSliderUpdateEvent): void {
36     const $slider = $(e.currentTarget);
37     const $foreignField = $('[data-formengine-input-name="' + $slider.data('sliderItemName') + '"]');
38     const sliderCallbackParams = $slider.data('sliderCallbackParams');
39
40     $foreignField.val(e.value.newValue);
41     TBE_EDITOR.fieldChanged.apply(TBE_EDITOR, sliderCallbackParams);
42   }
43
44   constructor() {
45     this.initializeSlider();
46   }
47
48   /**
49    * Initialize all slider elements
50    */
51   private initializeSlider(): void {
52     const $sliders = $(this.selector);
53     if ($sliders.length > 0) {
54       $sliders.slider({
55         formatter: this.renderTooltipValue
56       });
57       $sliders.on('change', ValueSlider.updateValue);
58     }
59   }
60
61   /**
62    * @param {string} value
63    * @returns {string | number}
64    */
65   private renderTooltipValue(value: string): any {
66     let renderedValue;
67     const $slider = $('[data-slider-id="' + this.id + '"]');
68     const data = $slider.data();
69     switch (data.sliderValueType) {
70       case 'double':
71         renderedValue = parseFloat(value).toFixed(2);
72         break;
73       case 'int':
74       default:
75         renderedValue = parseInt(value, 10);
76     }
77
78     return renderedValue;
79   }
80 }
81
82 export = new ValueSlider();