[TASK] Migrate ValueSlider to TypeScript 75/55975/2
authorAndreas Fernandez <a.fernandez@scripting-base.de>
Thu, 1 Mar 2018 18:24:37 +0000 (19:24 +0100)
committerBenni Mack <benni@typo3.org>
Mon, 5 Mar 2018 05:54:37 +0000 (06:54 +0100)
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
typo3/sysext/backend/Resources/Private/TypeScript/ValueSlider.ts [new file with mode: 0644]
typo3/sysext/backend/Resources/Public/JavaScript/ValueSlider.js

index d5c2ec1..4ce0c03 100644 (file)
@@ -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 (file)
index 0000000..1aefb57
--- /dev/null
@@ -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();
index 9923823..7b91c7d 100644 (file)
  *
  * 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