[BUGFIX] Prevent loading jsfunc.inline.js twice
[Packages/TYPO3.CMS.git] / typo3 / sysext / backend / Resources / Private / TypeScript / DocumentHeader.ts
1 /*
2  * This file is part of the TYPO3 CMS project.
3  *
4  * It is free software; you can redistribute it and/or modify it under
5  * the terms of the GNU General Public License, either version 2
6  * of the License, or any later version.
7  *
8  * For the full copyright and license information, please read the
9  * LICENSE.txt file that was distributed with this source code.
10  *
11  * The TYPO3 project - inspiring people to share!
12  */
13
14 import * as $ from 'jquery';
15
16 /**
17  * Module: TYPO3/CMS/Backend/DocumentHeader
18  * Calculates the height of the docHeader and hides it upon scrolling
19  */
20 class DocumentHeader {
21   private $documentHeader: JQuery = null;
22   private $documentHeaderBars: JQuery = null;
23   private $documentHeaderNavigationBar: JQuery = null;
24   private $documentHeaderSearchBar: JQuery = null;
25   private $moduleBody: JQuery = null;
26   private direction: string = 'down';
27   private reactionRange: number = 300;
28   private lastPosition: number = 0;
29   private currentPosition: number = 0;
30   private changedPosition: number = 0;
31   private settings: any = {
32     margin: 24,
33     offset: 100,
34     selectors: {
35       moduleDocumentHeader: '.t3js-module-docheader',
36       moduleDocheaderBar: '.t3js-module-docheader-bar',
37       moduleNavigationBar: '.t3js-module-docheader-bar-navigation',
38       moduleButtonBar: '.t3js-module-docheader-bar-buttons',
39       moduleSearchBar: '.t3js-module-docheader-bar-search',
40       moduleBody: '.t3js-module-body'
41
42     }
43   };
44
45   constructor() {
46     $((): void => {
47       this.initialize();
48     });
49   }
50
51   /**
52    * Reposition
53    */
54   public reposition = (): void => {
55     this.$documentHeader.css('height', 'auto');
56     this.$documentHeaderBars.css('height', 'auto');
57     this.$moduleBody.css('padding-top', this.$documentHeader.outerHeight() + this.settings.margin);
58   }
59
60   /**
61    * Initialize
62    */
63   private initialize(): void {
64     this.$documentHeader = $(this.settings.selectors.moduleDocumentHeader);
65     if (this.$documentHeader.length > 0) {
66       this.$documentHeaderBars = $(this.settings.selectors.moduleDocheaderBar);
67       this.$documentHeaderNavigationBar = $(this.settings.selectors.moduleNavigationBar);
68       this.$documentHeaderSearchBar = $(this.settings.selectors.moduleSearchBar).remove();
69       if (this.$documentHeaderSearchBar.length > 0) {
70         this.$documentHeader.append(this.$documentHeaderSearchBar);
71       }
72       this.$moduleBody = $(this.settings.selectors.moduleBody);
73       this.start();
74     }
75   }
76
77   /**
78    * Start
79    */
80   private start(): void {
81     this.reposition();
82     $(window).on('resize', this.reposition);
83     $('.t3js-module-docheader + .t3js-module-body').on('scroll', this.scroll);
84   }
85
86   /**
87    * Scroll
88    *
89    * @param {Event} e
90    */
91   private scroll = (e: Event): void => {
92     this.currentPosition = $(e.currentTarget).scrollTop();
93     if (this.currentPosition > this.lastPosition) {
94       if (this.direction !== 'down') {
95         this.direction = 'down';
96         this.changedPosition = this.currentPosition;
97       }
98     } else if (this.currentPosition < this.lastPosition) {
99       if (this.direction !== 'up') {
100         this.direction = 'up';
101         this.changedPosition = this.currentPosition;
102       }
103     }
104     if (this.direction === 'up' && (this.changedPosition - this.reactionRange) < this.currentPosition) {
105       this.$documentHeader.css('margin-top', 0);
106     }
107     if (this.direction === 'down' && (this.changedPosition + this.reactionRange) < this.currentPosition) {
108       this.$documentHeader.css('margin-top', (this.$documentHeaderNavigationBar.outerHeight() + 4) * -1);
109     }
110     this.lastPosition = this.currentPosition;
111   }
112 }
113
114 export = new DocumentHeader();