From 3b15704f970d926bbd643bf39468d3a6895d097d Mon Sep 17 00:00:00 2001 From: Andreas Fernandez 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 Reviewed-by: Mathias Schreiber Tested-by: Mathias Schreiber Reviewed-by: Christian Kuhn Tested-by: Christian Kuhn --- .../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.currentPosition0&&(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