[TASK] Migrate DocumentHeader to TypeScript 74/55774/3
authorAndreas Fernandez <a.fernandez@scripting-base.de>
Sat, 17 Feb 2018 15:14:06 +0000 (16:14 +0100)
committerChristian Kuhn <lolli@schwarzbu.ch>
Sat, 17 Feb 2018 18:56:35 +0000 (19:56 +0100)
Change-Id: I44878243205274bac6e328ee8f1e4db79377869c
Resolves: #82584
Releases: master
Reviewed-on: https://review.typo3.org/55774
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: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>
typo3/sysext/backend/Resources/Private/TypeScript/DocumentHeader.ts [new file with mode: 0644]
typo3/sysext/backend/Resources/Public/JavaScript/DocumentHeader.js

diff --git a/typo3/sysext/backend/Resources/Private/TypeScript/DocumentHeader.ts b/typo3/sysext/backend/Resources/Private/TypeScript/DocumentHeader.ts
new file mode 100644 (file)
index 0000000..85d742b
--- /dev/null
@@ -0,0 +1,114 @@
+/*
+ * 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';
+
+/**
+ * Module: TYPO3/CMS/Backend/DocumentHeader
+ * Calculates the height of the docHeader and hides it upon scrolling
+ */
+class DocumentHeader {
+  private $documentHeader: JQuery = null;
+  private $documentHeaderBars: JQuery = null;
+  private $documentHeaderNavigationBar: JQuery = null;
+  private $documentHeaderSearchBar: JQuery = null;
+  private $moduleBody: JQuery = null;
+  private direction: string = 'down';
+  private reactionRange: number = 300;
+  private lastPosition: number = 0;
+  private currentPosition: number = 0;
+  private changedPosition: number = 0;
+  private settings: any = {
+    margin: 24,
+    offset: 100,
+    selectors: {
+      moduleDocumentHeader: '.t3js-module-docheader',
+      moduleDocheaderBar: '.t3js-module-docheader-bar',
+      moduleNavigationBar: '.t3js-module-docheader-bar-navigation',
+      moduleButtonBar: '.t3js-module-docheader-bar-buttons',
+      moduleSearchBar: '.t3js-module-docheader-bar-search',
+      moduleBody: '.t3js-module-body'
+
+    }
+  };
+
+  constructor() {
+    $((): void => {
+      this.initialize();
+    });
+  }
+
+  /**
+   * Reposition
+   */
+  public reposition = (): void => {
+    this.$documentHeader.css('height', 'auto');
+    this.$documentHeaderBars.css('height', 'auto');
+    this.$moduleBody.css('padding-top', this.$documentHeader.outerHeight() + this.settings.margin);
+  }
+
+  /**
+   * Initialize
+   */
+  private initialize(): void {
+    this.$documentHeader = $(this.settings.selectors.moduleDocumentHeader);
+    if (this.$documentHeader.length > 0) {
+      this.$documentHeaderBars = $(this.settings.selectors.moduleDocheaderBar);
+      this.$documentHeaderNavigationBar = $(this.settings.selectors.moduleNavigationBar);
+      this.$documentHeaderSearchBar = $(this.settings.selectors.moduleSearchBar).remove();
+      if (this.$documentHeaderSearchBar.length > 0) {
+        this.$documentHeader.append(this.$documentHeaderSearchBar);
+      }
+      this.$moduleBody = $(this.settings.selectors.moduleBody);
+      this.start();
+    }
+  }
+
+  /**
+   * Start
+   */
+  private start(): void {
+    this.reposition();
+    $(window).on('resize', this.reposition);
+    $('.t3js-module-docheader + .t3js-module-body').on('scroll', this.scroll);
+  }
+
+  /**
+   * Scroll
+   *
+   * @param {Event} e
+   */
+  private scroll = (e: Event): void => {
+    this.currentPosition = $(e.currentTarget).scrollTop();
+    if (this.currentPosition > this.lastPosition) {
+      if (this.direction !== 'down') {
+        this.direction = 'down';
+        this.changedPosition = this.currentPosition;
+      }
+    } else if (this.currentPosition < this.lastPosition) {
+      if (this.direction !== 'up') {
+        this.direction = 'up';
+        this.changedPosition = this.currentPosition;
+      }
+    }
+    if (this.direction === 'up' && (this.changedPosition - this.reactionRange) < this.currentPosition) {
+      this.$documentHeader.css('margin-top', 0);
+    }
+    if (this.direction === 'down' && (this.changedPosition + this.reactionRange) < this.currentPosition) {
+      this.$documentHeader.css('margin-top', (this.$documentHeaderNavigationBar.outerHeight() + 4) * -1);
+    }
+    this.lastPosition = this.currentPosition;
+  }
+}
+
+export = new DocumentHeader();
index 26ec63c..20a8ac0 100644 (file)
@@ -6,110 +6,8 @@
  * of the License, or any later version.
  *
  * For the full copyright and license information, please read the
- * LICENSE.txt file that was distributed with DocumentHeader source code.
+ * LICENSE.txt file that was distributed with this source code.
  *
  * The TYPO3 project - inspiring people to share!
  */
-
-/**
- * Module: TYPO3/CMS/Backend/DocumentHeader
- * Calculates the height of the docHeader and hides it upon scrolling
- */
-define(['jquery'], function($) {
-  'use strict';
-
-  /**
-   *
-   * @type {{$documentHeader: null, $documentHeaderBars: null, $documentHeaderNavigationBar: null, $documentHeaderSearchBar: null, $moduleBody: null, direction: string, reactionRange: number, lastPosition: number, currentPosition: number, changedPosition: number, settings: {margin: number, offset: number, selectors: {moduleDocumentHeader: string, moduleDocheaderBar: string, moduleNavigationBar: string, moduleButtonBar: string, moduleSearchBar: string, moduleBody: string}}}}
-   * @exports TYPO3/CMS/Backend/DocumentHeader
-   */
-  var DocumentHeader = {
-    $documentHeader: null,
-    $documentHeaderBars: null,
-    $documentHeaderNavigationBar: null,
-    $documentHeaderSearchBar: null,
-    $moduleBody: null,
-    direction: 'down',
-    reactionRange: 300,
-    lastPosition: 0,
-    currentPosition: 0,
-    changedPosition: 0,
-    settings: {
-      margin: 24,
-      offset: 100,
-      selectors: {
-        moduleDocumentHeader: '.t3js-module-docheader',
-        moduleDocheaderBar: '.t3js-module-docheader-bar',
-        moduleNavigationBar: '.t3js-module-docheader-bar-navigation',
-        moduleButtonBar: '.t3js-module-docheader-bar-buttons',
-        moduleSearchBar: '.t3js-module-docheader-bar-search',
-        moduleBody: '.t3js-module-body'
-
-      }
-    }
-  };
-
-  /**
-   * Reposition
-   */
-  DocumentHeader.reposition = function() {
-    DocumentHeader.$documentHeader.css('height', 'auto');
-    DocumentHeader.$documentHeaderBars.css('height', 'auto');
-    DocumentHeader.$moduleBody.css('padding-top', DocumentHeader.$documentHeader.outerHeight() + DocumentHeader.settings.margin);
-  };
-
-  /**
-   * Scroll
-   */
-  DocumentHeader.scroll = function() {
-    DocumentHeader.currentPosition = $(this).scrollTop();
-    if (DocumentHeader.currentPosition > DocumentHeader.lastPosition) {
-      if (DocumentHeader.direction !== 'down') {
-        DocumentHeader.direction = 'down';
-        DocumentHeader.changedPosition = DocumentHeader.currentPosition;
-      }
-    } else if (DocumentHeader.currentPosition < DocumentHeader.lastPosition) {
-      if (DocumentHeader.direction !== 'up') {
-        DocumentHeader.direction = 'up';
-        DocumentHeader.changedPosition = DocumentHeader.currentPosition;
-      }
-    }
-    if (DocumentHeader.direction === 'up' && (DocumentHeader.changedPosition - DocumentHeader.reactionRange) < DocumentHeader.currentPosition) {
-      DocumentHeader.$documentHeader.css('margin-top', 0);
-    }
-    if (DocumentHeader.direction === 'down' && (DocumentHeader.changedPosition + DocumentHeader.reactionRange) < DocumentHeader.currentPosition) {
-      DocumentHeader.$documentHeader.css('margin-top', (DocumentHeader.$documentHeaderNavigationBar.outerHeight() + 4) * -1);
-    }
-    DocumentHeader.lastPosition = DocumentHeader.currentPosition;
-  };
-
-  /**
-   * Start
-   */
-  DocumentHeader.start = function() {
-    DocumentHeader.reposition();
-    $(window).on('resize', DocumentHeader.reposition);
-    $('.t3js-module-docheader + .t3js-module-body').on('scroll', DocumentHeader.scroll);
-  };
-
-  /**
-   * Initialize
-   */
-  DocumentHeader.initialize = function() {
-    DocumentHeader.$documentHeader = $(DocumentHeader.settings.selectors.moduleDocumentHeader);
-    if (DocumentHeader.$documentHeader.length > 0) {
-      DocumentHeader.$documentHeaderBars = $(DocumentHeader.settings.selectors.moduleDocheaderBar);
-      DocumentHeader.$documentHeaderNavigationBar = $(DocumentHeader.settings.selectors.moduleNavigationBar);
-      DocumentHeader.$documentHeaderSearchBar = $(DocumentHeader.settings.selectors.moduleSearchBar).remove();
-      if (DocumentHeader.$documentHeaderSearchBar.length > 0) {
-        DocumentHeader.$documentHeader.append(DocumentHeader.$documentHeaderSearchBar);
-      }
-      DocumentHeader.$moduleBody = $(DocumentHeader.settings.selectors.moduleBody);
-      DocumentHeader.start();
-    }
-  };
-
-  $(DocumentHeader.initialize);
-
-  return DocumentHeader;
-});
+define(["require","exports","jquery"],function(a,b,c){"use strict";var d=function(){function a(){var a=this;this.$documentHeader=null,this.$documentHeaderBars=null,this.$documentHeaderNavigationBar=null,this.$documentHeaderSearchBar=null,this.$moduleBody=null,this.direction="down",this.reactionRange=300,this.lastPosition=0,this.currentPosition=0,this.changedPosition=0,this.settings={margin:24,offset:100,selectors:{moduleDocumentHeader:".t3js-module-docheader",moduleDocheaderBar:".t3js-module-docheader-bar",moduleNavigationBar:".t3js-module-docheader-bar-navigation",moduleButtonBar:".t3js-module-docheader-bar-buttons",moduleSearchBar:".t3js-module-docheader-bar-search",moduleBody:".t3js-module-body"}},this.reposition=function(){a.$documentHeader.css("height","auto"),a.$documentHeaderBars.css("height","auto"),a.$moduleBody.css("padding-top",a.$documentHeader.outerHeight()+a.settings.margin)},this.scroll=function(b){a.currentPosition=c(b.currentTarget).scrollTop(),a.currentPosition>a.lastPosition?"down"!==a.direction&&(a.direction="down",a.changedPosition=a.currentPosition):a.currentPosition<a.lastPosition&&"up"!==a.direction&&(a.direction="up",a.changedPosition=a.currentPosition),"up"===a.direction&&a.changedPosition-a.reactionRange<a.currentPosition&&a.$documentHeader.css("margin-top",0),"down"===a.direction&&a.changedPosition+a.reactionRange<a.currentPosition&&a.$documentHeader.css("margin-top",(a.$documentHeaderNavigationBar.outerHeight()+4)*-1),a.lastPosition=a.currentPosition},c(function(){a.initialize()})}return a.prototype.initialize=function(){this.$documentHeader=c(this.settings.selectors.moduleDocumentHeader),this.$documentHeader.length>0&&(this.$documentHeaderBars=c(this.settings.selectors.moduleDocheaderBar),this.$documentHeaderNavigationBar=c(this.settings.selectors.moduleNavigationBar),this.$documentHeaderSearchBar=c(this.settings.selectors.moduleSearchBar).remove(),this.$documentHeaderSearchBar.length>0&&this.$documentHeader.append(this.$documentHeaderSearchBar),this.$moduleBody=c(this.settings.selectors.moduleBody),this.start())},a.prototype.start=function(){this.reposition(),c(window).on("resize",this.reposition),c(".t3js-module-docheader + .t3js-module-body").on("scroll",this.scroll)},a}();return new d});
\ No newline at end of file