[TASK] Migrate EXT:backend Tabs.js to TypeScript

Resolves: #82604
Releases: master
Change-Id: I9b9ff38c635902f2713602955ad9a3d04734ec88
Reviewed-on: https://review.typo3.org/54367


Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Andreas Fernandez <typo3@scripting-base.de>
Tested-by: Andreas Fernandez <typo3@scripting-base.de>
Reviewed-by: Wouter Wolters <typo3@wouterwolters.nl>
Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>

typo3/sysext/backend/Resources/Private/TypeScript/Tabs.ts

+/*
+ * 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 $ = require('jquery');
+import 'bootstrap';
+import Client = require('./Storage/Client');
+
+/**
+ * Module: TYPO3/CMS/Backend/Tabs
+ * @exports TYPO3/CMS/Backend/Tabs
+ */
+class Tabs {
+
+  /**
+   * Resolve timestamp
+   */
+  public static getTimestamp(): number {
+    return Math.round((new Date()).getTime() / 1000);
+  }
+
+  public storage: any;
+  protected cacheTimeInSeconds = 1800;
+  protected storeLastActiveTab = true;
+
+  constructor() {
+    this.storage = Client;
+
+    const that = this;
+    $('.t3js-tabs').each(function(this: Element): void {
+      const $tabContainer: JQuery = $(this);
+      that.storeLastActiveTab = $tabContainer.data('storeLastTab') === 1;
+      const currentActiveTab = that.receiveActiveTab($tabContainer.attr('id'));
+      if (currentActiveTab) {
+        $tabContainer.find('a[href="' + currentActiveTab + '"]').tab('show');
+      }
+      $tabContainer.on('show.bs.tab', (e: any) => {
+        if (that.storeLastActiveTab) {
+          const id = e.currentTarget.id;
+          const target = e.target.hash;
+          that.storeActiveTab(id, target);
+        }
+      });
+    });
+  }
+
+  /**
+   * Receive active tab from storage
+   *
+   * @param {string} id
+   * @returns {string}
+   */
+  public receiveActiveTab(id: string): string {
+    const target = this.storage.get(id) || '';
+    const expire = this.storage.get(id + '.expire') || 0;
+    if (expire > Tabs.getTimestamp()) {
+      return target;
+    }
+    return '';
+  }
+
+  /**
+   * Set active tab to storage
+   *
+   * @param {string} id
+   * @param {string} target
+   */
+  public storeActiveTab(id: string, target: string) {
+    this.storage.set(id, target);
+    this.storage.set(id + '.expire', Tabs.getTimestamp() + this.cacheTimeInSeconds);
+  }
+}
+
+const tabs = new Tabs();
+export = tabs;

typo3/sysext/backend/Resources/Public/JavaScript/Tabs.js

@@ -10,80 +10,66 @@
  *
  * The TYPO3 project - inspiring people to share!
  */
-
-/**
- * Module: TYPO3/CMS/Backend/Tabs
- * This class handle the tabs in the TYPO3 backend.
- * It stores the last active tab and open it again after a reload,
- */
-define(['jquery', 'TYPO3/CMS/Backend/Storage/Client', 'bootstrap'], function ($, ClientStorage) {
-	'use strict';
-
-	/**
-	 * Tabs helper
-	 *
-	 * @type {{storage: (ClientStorage|*), cacheTimeInSeconds: number, storeLastActiveTab: bool}}
-	 * @exports TYPO3/CMS/Backend/Tabs
-	 */
-	var Tabs = {
-		storage: ClientStorage,
-		// cache lifetime in seconds
-		cacheTimeInSeconds: 1800,
-		storeLastActiveTab: true
-	};
-
-	/**
-	 * Receive active tab from storage
-	 *
-	 * @param {String} id
-	 * @returns {String}
-	 */
-	Tabs.receiveActiveTab = function(id) {
-		var target = Tabs.storage.get(id) || '';
-		var expire = Tabs.storage.get(id + '.expire') || 0;
-		if (expire > Tabs.getTimestamp()) {
-			return target;
-		}
-		return '';
-	};
-
-	/**
-	 * Store active tab in storage
-	 *
-	 * @param {String} id
-	 * @param {String} target
-	 */
-	Tabs.storeActiveTab = function(id, target) {
-		Tabs.storage.set(id, target);
-		Tabs.storage.set(id + '.expire', Tabs.getTimestamp() + Tabs.cacheTimeInSeconds);
-	};
-
-	/**
-	 * Get unixtimestamp
-	 *
-	 * @returns {Number}
-	 */
-	Tabs.getTimestamp = function() {
-		return Math.round((new Date()).getTime() / 1000);
-	};
-
-	$(function () {
-		$('.t3js-tabs').each(function() {
-			var $tabContainer = $(this);
-			Tabs.storeLastActiveTab = $tabContainer.data('storeLastTab') === 1;
-			var currentActiveTab = Tabs.receiveActiveTab($tabContainer.attr('id'));
-			if (currentActiveTab) {
-				$tabContainer.find('a[href="' + currentActiveTab + '"]').tab('show');
-			}
-			$tabContainer.on('show.bs.tab', function(e) {
-				if (Tabs.storeLastActiveTab) {
-					var id = e.currentTarget.id;
-					var target = e.target.hash;
-					Tabs.storeActiveTab(id, target);
-				}
-			});
-		});
-	});
-
-	return Tabs;
+define(["require", "exports", "jquery", "./Storage/Client", "bootstrap"], function (require, exports, $, Client) {
+    "use strict";
+    /**
+     * Module: TYPO3/CMS/Backend/Tabs
+     * @exports TYPO3/CMS/Backend/Tabs
+     */
+    var Tabs = (function () {
+        function Tabs() {
+            this.cacheTimeInSeconds = 1800;
+            this.storeLastActiveTab = true;
+            this.storage = Client;
+            var that = this;
+            $('.t3js-tabs').each(function () {
+                var $tabContainer = $(this);
+                that.storeLastActiveTab = $tabContainer.data('storeLastTab') === 1;
+                var currentActiveTab = that.receiveActiveTab($tabContainer.attr('id'));
+                if (currentActiveTab) {
+                    $tabContainer.find('a[href="' + currentActiveTab + '"]').tab('show');
+                }
+                $tabContainer.on('show.bs.tab', function (e) {
+                    if (that.storeLastActiveTab) {
+                        var id = e.currentTarget.id;
+                        var target = e.target.hash;
+                        that.storeActiveTab(id, target);
+                    }
+                });
+            });
+        }
+        /**
+         * Resolve timestamp
+         */
+        Tabs.getTimestamp = function () {
+            return Math.round((new Date()).getTime() / 1000);
+        };
+        /**
+         * Receive active tab from storage
+         *
+         * @param {string} id
+         * @returns {string}
+         */
+        Tabs.prototype.receiveActiveTab = function (id) {
+            var target = this.storage.get(id) || '';
+            var expire = this.storage.get(id + '.expire') || 0;
+            if (expire > Tabs.getTimestamp()) {
+                return target;
+            }
+            return '';
+        };
+        /**
+         * Set active tab to storage
+         *
+         * @param {string} id
+         * @param {string} target
+         */
+        Tabs.prototype.storeActiveTab = function (id, target) {
+            this.storage.set(id, target);
+            this.storage.set(id + '.expire', Tabs.getTimestamp() + this.cacheTimeInSeconds);
+        };
+        return Tabs;
+    }());
+    var tabs = new Tabs();
+    return tabs;
 });