From 3b15704f970d926bbd643bf39468d3a6895d097d Mon Sep 17 00:00:00 2001
From: Andreas Fernandez <a.fernandez@scripting-base.de>
Date: Sat, 17 Feb 2018 16:14:06 +0100
Subject: [PATCH] [TASK] Migrate DocumentHeader to TypeScript
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>
---
.../Private/TypeScript/DocumentHeader.ts | 114 ++++++++++++++++++
.../Public/JavaScript/DocumentHeader.js | 106 +---------------
2 files changed, 116 insertions(+), 104 deletions(-)
create mode 100644 typo3/sysext/backend/Resources/Private/TypeScript/DocumentHeader.ts
diff --git a/typo3/sysext/backend/Resources/Private/TypeScript/DocumentHeader.ts b/typo3/sysext/backend/Resources/Private/TypeScript/DocumentHeader.ts
new file mode 100644
index 000000000000..85d742b782e0
--- /dev/null
+++ b/typo3/sysext/backend/Resources/Private/TypeScript/DocumentHeader.ts
@@ -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();
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/DocumentHeader.js b/typo3/sysext/backend/Resources/Public/JavaScript/DocumentHeader.js
index 26ec63ca9df9..20a8ac0f868e 100644
--- a/typo3/sysext/backend/Resources/Public/JavaScript/DocumentHeader.js
+++ b/typo3/sysext/backend/Resources/Public/JavaScript/DocumentHeader.js
@@ -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
--
GitLab