From 9b5ce1b8161318187aa96de3fd34a9559e5c51b0 Mon Sep 17 00:00:00 2001
From: Andreas Fernandez <a.fernandez@scripting-base.de>
Date: Thu, 1 Mar 2018 19:24:37 +0100
Subject: [PATCH] [TASK] Migrate ValueSlider to TypeScript
Change-Id: Ibb233ab281052eba4a5cab267130cd50269fd0b2
Resolves: #82610
Releases: master
Reviewed-on: https://review.typo3.org/55975
Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Mathias Schreiber <mathias.schreiber@typo3.com>
Tested-by: Mathias Schreiber <mathias.schreiber@typo3.com>
Reviewed-by: Benni Mack <benni@typo3.org>
Tested-by: Benni Mack <benni@typo3.org>
---
Build/types/TYPO3/index.d.ts | 7 ++
.../Private/TypeScript/ValueSlider.ts | 82 +++++++++++++++++++
.../Public/JavaScript/ValueSlider.js | 74 +----------------
3 files changed, 90 insertions(+), 73 deletions(-)
create mode 100644 typo3/sysext/backend/Resources/Private/TypeScript/ValueSlider.ts
diff --git a/Build/types/TYPO3/index.d.ts b/Build/types/TYPO3/index.d.ts
index d5c2ec10887e..4ce0c03176fa 100644
--- a/Build/types/TYPO3/index.d.ts
+++ b/Build/types/TYPO3/index.d.ts
@@ -31,6 +31,10 @@ declare namespace TYPO3 {
}
}
+declare namespace TBE_EDITOR {
+ export let fieldChanged: Function;
+}
+
/**
* Current AMD/RequireJS modules are returning *instances* of ad-hoc *classes*, make that known to TypeScript
*/
@@ -92,4 +96,7 @@ interface JQuery {
clearable(options?: any): JQuery;
datetimepicker(options?: any): JQuery;
dragUploader(options?: DragUploaderOptions): JQuery;
+
+ // To be able to use twbs/bootstrap-slider we have to override the definition of jquerui
+ slider(options: { [key: string]: any }): any;
}
diff --git a/typo3/sysext/backend/Resources/Private/TypeScript/ValueSlider.ts b/typo3/sysext/backend/Resources/Private/TypeScript/ValueSlider.ts
new file mode 100644
index 000000000000..1aefb5775ccd
--- /dev/null
+++ b/typo3/sysext/backend/Resources/Private/TypeScript/ValueSlider.ts
@@ -0,0 +1,82 @@
+/*
+ * 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!
+ */
+
+import * as $ from 'jquery';
+import 'twbs/bootstrap-slider';
+
+interface UpdatedValue {
+ oldValue: number;
+ newValue: number;
+}
+
+interface ValueSliderUpdateEvent extends JQueryEventObject {
+ value: UpdatedValue;
+}
+
+class ValueSlider {
+ private id: string; // internally set by the renderTooltipValue callback
+ private selector: string = '[data-slider-id]';
+
+ /**
+ * Update value of slider element
+ *
+ * @param {ValueSliderUpdateEvent} e
+ */
+ private static updateValue(e: ValueSliderUpdateEvent): void {
+ const $slider = $(e.currentTarget);
+ const $foreignField = $('[data-formengine-input-name="' + $slider.data('sliderItemName') + '"]');
+ const sliderCallbackParams = $slider.data('sliderCallbackParams');
+
+ $foreignField.val(e.value.newValue);
+ TBE_EDITOR.fieldChanged.apply(TBE_EDITOR, sliderCallbackParams);
+ }
+
+ constructor() {
+ this.initializeSlider();
+ }
+
+ /**
+ * Initialize all slider elements
+ */
+ private initializeSlider(): void {
+ const $sliders = $(this.selector);
+ if ($sliders.length > 0) {
+ $sliders.slider({
+ formatter: this.renderTooltipValue
+ });
+ $sliders.on('change', ValueSlider.updateValue);
+ }
+ }
+
+ /**
+ * @param {string} value
+ * @returns {string | number}
+ */
+ private renderTooltipValue(value: string): any {
+ let renderedValue;
+ const $slider = $('[data-slider-id="' + this.id + '"]');
+ const data = $slider.data();
+ switch (data.sliderValueType) {
+ case 'double':
+ renderedValue = parseFloat(value).toFixed(2);
+ break;
+ case 'int':
+ default:
+ renderedValue = parseInt(value, 10);
+ }
+
+ return renderedValue;
+ }
+}
+
+export = new ValueSlider();
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/ValueSlider.js b/typo3/sysext/backend/Resources/Public/JavaScript/ValueSlider.js
index 992382392c31..7b91c7d1444a 100644
--- a/typo3/sysext/backend/Resources/Public/JavaScript/ValueSlider.js
+++ b/typo3/sysext/backend/Resources/Public/JavaScript/ValueSlider.js
@@ -10,76 +10,4 @@
*
* The TYPO3 project - inspiring people to share!
*/
-
-/**
- * Implementation of the value slider for input text elements.
- *
- * Module: TYPO3/CMS/Backend/ValueSlider
- */
-define(['jquery', 'twbs/bootstrap-slider'], function($) {
- /**
- * ValueSlider object
- *
- * @type {{selector: string}}
- * @exports TYPO3/CMS/Backend/ValueSlider
- */
- var ValueSlider = {
- selector: '[data-slider-id]'
- };
-
- /**
- * Initialize all slider elements
- */
- ValueSlider.initializeSlider = function() {
- var $sliders = $(ValueSlider.selector);
- if ($sliders.length > 0) {
- $sliders.slider({
- formatter: ValueSlider.renderTooltipValue
- });
- $sliders.on('change', ValueSlider.updateValue);
- }
- };
-
- /**
- * Update value of slider element
- *
- * @param {Event} e
- */
- ValueSlider.updateValue = function(e) {
- var $slider = $(e.currentTarget),
- $foreignField = $('[data-formengine-input-name="' + $slider.data('sliderItemName') + '"]'),
- sliderField = $slider.data('sliderField'),
- sliderCallbackParams = $slider.data('sliderCallbackParams');
-
- $foreignField.val(e.value.newValue);
- TBE_EDITOR.fieldChanged.apply(TBE_EDITOR, sliderCallbackParams);
- };
-
- /**
- *
- * @param {Number} value
- * @returns {*}
- */
- ValueSlider.renderTooltipValue = function(value) {
- var renderedValue,
- $slider = $('[data-slider-id="' + this.id + '"]'),
- data = $slider.data();
- switch (data.sliderValueType) {
- case 'double':
- renderedValue = parseFloat(value).toFixed(2);
- break;
- case 'int':
- default:
- renderedValue = parseInt(value);
- }
-
- return renderedValue;
- };
-
- // init if document is ready
- $(document).ready(function() {
- ValueSlider.initializeSlider();
- });
-
- return ValueSlider;
-});
+define(["require","exports","jquery","twbs/bootstrap-slider"],function(e,t,a){"use strict";return new(function(){function e(){this.selector="[data-slider-id]",this.initializeSlider()}return e.updateValue=function(e){var t=a(e.currentTarget),i=a('[data-formengine-input-name="'+t.data("sliderItemName")+'"]'),r=t.data("sliderCallbackParams");i.val(e.value.newValue),TBE_EDITOR.fieldChanged.apply(TBE_EDITOR,r)},e.prototype.initializeSlider=function(){var t=a(this.selector);t.length>0&&(t.slider({formatter:this.renderTooltipValue}),t.on("change",e.updateValue))},e.prototype.renderTooltipValue=function(e){var t;switch(a('[data-slider-id="'+this.id+'"]').data().sliderValueType){case"double":t=parseFloat(e).toFixed(2);break;case"int":default:t=parseInt(e,10)}return t},e}())});
\ No newline at end of file
--
GitLab