[TASK] Migrate TYPO3/CMS/Tstemplate/* to TypeScript 93/59693/4
authorFrank Naegler <frank.naegler@typo3.org>
Wed, 13 Feb 2019 11:24:00 +0000 (12:24 +0100)
committerAnja Leichsenring <aleichsenring@ab-softlab.de>
Sun, 17 Feb 2019 09:42:34 +0000 (10:42 +0100)
Resolves: #87705
Releases: master
Change-Id: Ife45202ad6151ad00f20aefdac881c99a88b93a3
Reviewed-on: https://review.typo3.org/c/59693
Tested-by: Andreas Fernandez <a.fernandez@scripting-base.de>
Tested-by: TYPO3com <noreply@typo3.com>
Tested-by: Anja Leichsenring <aleichsenring@ab-softlab.de>
Reviewed-by: Andreas Fernandez <a.fernandez@scripting-base.de>
Reviewed-by: Anja Leichsenring <aleichsenring@ab-softlab.de>
typo3/sysext/tstemplate/Resources/Private/TypeScript/ConstantEditor.ts [new file with mode: 0644]
typo3/sysext/tstemplate/Resources/Private/TypeScript/TypoScriptObjectBrowser.ts [new file with mode: 0644]
typo3/sysext/tstemplate/Resources/Public/JavaScript/ConstantEditor.js
typo3/sysext/tstemplate/Resources/Public/JavaScript/TypoScriptObjectBrowser.js

diff --git a/typo3/sysext/tstemplate/Resources/Private/TypeScript/ConstantEditor.ts b/typo3/sysext/tstemplate/Resources/Private/TypeScript/ConstantEditor.ts
new file mode 100644 (file)
index 0000000..11ac370
--- /dev/null
@@ -0,0 +1,87 @@
+/*
+ * 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';
+
+enum Selectors {
+  editIconSelector = '.t3js-toggle',
+  colorSelectSelector = '.t3js-color-select',
+  colorInputSelector = '.t3js-color-input',
+}
+
+/**
+ * Module: TYPO3/CMS/Tstemplate/ConstantEditor
+ * Various functions related to the Constant Editor
+ * e.g. updating the field and working with colors
+ */
+class ConstantEditor {
+  constructor() {
+    // no DOMready needed since only events for document are registered
+    $(document)
+      .on('click', Selectors.editIconSelector, this.changeProperty)
+      .on('change', Selectors.colorSelectSelector, this.updateColorFromSelect)
+      .on('blur', Selectors.colorInputSelector, this.updateColorFromInput)
+    ;
+  }
+
+  /**
+   * initially register event listeners
+   */
+  private changeProperty = (evt: JQueryEventObject): void => {
+    const $editIcon = $(evt.currentTarget);
+    const constantName = $editIcon.attr('rel');
+    const $defaultDiv = $('#defaultTS-' + constantName);
+    const $userDiv = $('#userTS-' + constantName);
+    const $checkBox = $('#check-' + constantName);
+    const toggleState = $editIcon.data('toggle');
+
+    if (toggleState === 'edit') {
+      $defaultDiv.hide();
+      $userDiv.show();
+      $userDiv.find('input').css({background: '#fdf8bd'});
+      $checkBox.prop('disabled', false).prop('checked', true);
+    } else if (toggleState === 'undo') {
+      $userDiv.hide();
+      $defaultDiv.show();
+      $checkBox.val('').prop('disabled', true);
+    }
+  }
+
+  /**
+   * updates the color from a dropdown
+   */
+  private updateColorFromSelect = (evt: JQueryEventObject): void => {
+    const $colorSelect = $(evt.currentTarget);
+    let constantName = $colorSelect.attr('rel');
+    let colorValue = $colorSelect.val();
+
+    $('#input-' + constantName).val(colorValue);
+    $('#colorbox-' + constantName).css({background: colorValue});
+  }
+
+  /**
+   * updates the color from an input field
+   */
+  private updateColorFromInput = (evt: JQueryEventObject): void => {
+    const $colorInput = $(evt.currentTarget);
+    let constantName = $colorInput.attr('rel');
+    let colorValue = $colorInput.val();
+
+    $('#colorbox-' + constantName).css({background: colorValue});
+    $('#select-' + constantName).children().each((i: number, option: Element) => {
+      (<HTMLOptionElement>option).selected = ((<HTMLOptionElement>option).value === colorValue);
+    });
+  }
+}
+
+export = new ConstantEditor();
diff --git a/typo3/sysext/tstemplate/Resources/Private/TypeScript/TypoScriptObjectBrowser.ts b/typo3/sysext/tstemplate/Resources/Private/TypeScript/TypoScriptObjectBrowser.ts
new file mode 100644 (file)
index 0000000..99a8b56
--- /dev/null
@@ -0,0 +1,44 @@
+/*
+ * 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 'TYPO3/CMS/Backend/jquery.clearable';
+
+/**
+ * Module: TYPO3/CMS/Tstemplate/TypoScriptObjectBrowser
+ * JavaScript for TypoScript Object Browser
+ * @exports TYPO3/CMS/Tstemplate/TypoScriptObjectBrowser
+ */
+class TypoScriptObjectBrowser {
+  private $searchFields: JQuery;
+  private readonly searchResultShown: boolean;
+
+  constructor() {
+    this.$searchFields = $('input[name="search_field"]');
+    this.searchResultShown = ('' !== this.$searchFields.first().val());
+
+    this.$searchFields.clearable({
+      onClear: (evt: JQueryEventObject): void => {
+        if (this.searchResultShown) {
+          $(evt.currentTarget).closest('form').submit();
+        }
+      }
+    });
+
+    if (self.location.hash) {
+      window.scrollTo(window.pageXOffset, window.pageYOffset - 40);
+    }
+  }
+}
+
+export = new TypoScriptObjectBrowser();
index bde8691..bb794fb 100644 (file)
  *
  * The TYPO3 project - inspiring people to share!
  */
-
-/**
- * Module: TYPO3/CMS/Tstemplate/ConstantEditor
- * Various functions related to the Constant Editor
- * e.g. updating the field and working with colors
- */
-define(['jquery'], function($) {
-  'use strict';
-
-  /**
-   *
-   * @type {{options: {editIconSelector: string, colorSelectSelector: string, colorInputSelector: string}}}
-   * @exports TYPO3/CMS/Tstemplate/ConstantEditor
-   */
-  var ConstantEditor = {
-    options: {
-      editIconSelector: '.t3js-toggle',
-      colorSelectSelector: '.t3js-color-select',
-      colorInputSelector: '.t3js-color-input'
-    }
-  };
-
-  /**
-   * initially register event listeners
-   *
-   * @param {Object} $editIcon
-   */
-  ConstantEditor.changeProperty = function($editIcon) {
-    var constantName = $editIcon.attr('rel');
-    var $defaultDiv = $('#defaultTS-' + constantName);
-    var $userDiv = $('#userTS-' + constantName);
-    var $checkBox = $('#check-' + constantName);
-    var toggleState = $editIcon.data('toggle');
-
-    if (toggleState === 'edit') {
-      $defaultDiv.hide();
-      $userDiv.show();
-      $userDiv.find('input').css({background: '#fdf8bd'});
-      $checkBox.attr('disabled', false).attr('checked', true);
-    } else if (toggleState === 'undo') {
-      $userDiv.hide();
-      $defaultDiv.show();
-      $checkBox.val('').attr('disabled', true);
-    }
-  };
-
-  /**
-   * updates the color from a dropdown
-   *
-   * @param {Object} $colorSelect
-   */
-  ConstantEditor.updateColorFromSelect = function($colorSelect) {
-    var constantName = $colorSelect.attr('rel');
-    var colorValue = $colorSelect.val();
-
-    $('#input-' + constantName).val(colorValue);
-    $('#colorbox-' + constantName).css({background: colorValue});
-  };
-
-  /**
-   * updates the color from an input field
-   *
-   * @param {Object} $colorInput
-   */
-  ConstantEditor.updateColorFromInput = function($colorInput) {
-    var constantName = $colorInput.attr('rel');
-    var colorValue = $colorInput.val();
-
-    $('#colorbox-' + constantName).css({background: colorValue});
-    $('#select-' + constantName).children().each(function(option) {
-      option.selected = (option.value === colorValue);
-    });
-  };
-
-  /**
-   * Registers listeners
-   */
-  ConstantEditor.initializeEvents = function() {
-    // no DOMready needed since only events for document are registered
-    $(document).on('click', ConstantEditor.options.editIconSelector, function() {
-      ConstantEditor.changeProperty($(this));
-    }).on('change', ConstantEditor.options.colorSelectSelector, function() {
-      ConstantEditor.updateColorFromSelect($(this));
-    }).on('blur', ConstantEditor.options.colorInputSelector, function() {
-      ConstantEditor.updateColorFromInput($(this));
-    });
-  };
-
-  ConstantEditor.initializeEvents();
-
-  return ConstantEditor;
-});
+define(["require","exports","jquery"],function(e,t,o){"use strict";var r,c;return(c=r||(r={})).editIconSelector=".t3js-toggle",c.colorSelectSelector=".t3js-color-select",c.colorInputSelector=".t3js-color-input",new function(){this.changeProperty=function(e){var t=o(e.currentTarget),r=t.attr("rel"),c=o("#defaultTS-"+r),l=o("#userTS-"+r),n=o("#check-"+r),u=t.data("toggle");"edit"===u?(c.hide(),l.show(),l.find("input").css({background:"#fdf8bd"}),n.prop("disabled",!1).prop("checked",!0)):"undo"===u&&(l.hide(),c.show(),n.val("").prop("disabled",!0))},this.updateColorFromSelect=function(e){var t=o(e.currentTarget),r=t.attr("rel"),c=t.val();o("#input-"+r).val(c),o("#colorbox-"+r).css({background:c})},this.updateColorFromInput=function(e){var t=o(e.currentTarget),r=t.attr("rel"),c=t.val();o("#colorbox-"+r).css({background:c}),o("#select-"+r).children().each(function(e,t){t.selected=t.value===c})},o(document).on("click",r.editIconSelector,this.changeProperty).on("change",r.colorSelectSelector,this.updateColorFromSelect).on("blur",r.colorInputSelector,this.updateColorFromInput)}});
\ No newline at end of file
index 0850afe..381e3bb 100644 (file)
  *
  * The TYPO3 project - inspiring people to share!
  */
-
-/**
- * Module: TYPO3/CMS/Tstemplate/TypoScriptObjectBrowser
- * JavaScript for TypoScript Object Browser
- * @exports TYPO3/CMS/Tstemplate/TypoScriptObjectBrowser
- */
-define(['jquery', 'TYPO3/CMS/Backend/jquery.clearable'], function($) {
-
-  var $searchFields = $('input[name="search_field"]');
-  var searchResultShown = ('' !== $searchFields.first().val());
-
-  // make search field clearable
-  $searchFields.clearable({
-    onClear: function() {
-      if (searchResultShown) {
-        $(this).closest('form').submit();
-      }
-    }
-  });
-
-  if (self.location.hash) {
-    window.scrollTo(window.pageXOffset, window.pageYOffset - 40);
-  }
-});
+define(["require","exports","jquery","TYPO3/CMS/Backend/jquery.clearable"],function(e,s,r){"use strict";return new function(){var e=this;this.$searchFields=r('input[name="search_field"]'),this.searchResultShown=""!==this.$searchFields.first().val(),this.$searchFields.clearable({onClear:function(s){e.searchResultShown&&r(s.currentTarget).closest("form").submit()}}),self.location.hash&&window.scrollTo(window.pageXOffset,window.pageYOffset-40)}});
\ No newline at end of file