Add a Stimulus controller for scroll events (see #9)

core-bundle/assets/backend.js

@@ -4,7 +4,6 @@ import { definitionForModuleAndIdentifier, identifierForContextKey } from '@hotw
 import './scripts/mootao.js'
 import './scripts/core.js'
 import './scripts/autofocus.js'
-import './scripts/hide-header.js'
 import './scripts/limit-height.js'
 import './scripts/modulewizard.js'
 import './scripts/sectionwizard.js'

core-bundle/assets/controllers/scroll-controller.js

@@ -0,0 +1,51 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+    static classes = ['up', 'down']
+
+    initialize () {
+        this.lastScroll = 0;
+        this.onScroll = this.onScroll.bind(this)
+    }
+
+    connect () {
+        window.addEventListener('scroll', this.onScroll, { passive: true });
+    }
+
+    disconnect () {
+        window.removeEventListener('scroll', this.onScroll);
+    }
+
+    up () {
+        if (this.hasUpClass) {
+            this.element.classList.add(this.upClass);
+        }
+
+        if (this.hasDownClass) {
+            this.element.classList.remove(this.downClass);
+        }
+    }
+
+    down () {
+        if (this.hasUpClass) {
+            this.element.classList.remove(this.upClass);
+        }
+
+        if (this.hasDownClass) {
+            this.element.classList.add(this.downClass);
+        }
+    }
+
+    onScroll () {
+        // Make sure the scroll value is between 0 and maxScroll
+        const currentScroll = Math.max(0, Math.min(document.documentElement.scrollHeight - document.documentElement.clientHeight, window.scrollY));
+
+        if (this.lastScroll < currentScroll) {
+            this.up();
+        } else if (this.lastScroll > currentScroll) {
+            this.down();
+        }
+
+        this.lastScroll = currentScroll;
+    }
+}

core-bundle/contao/templates/backend/be_main.html5

@@ -35,7 +35,7 @@
 
   <?php $this->block('header'); ?>
     <?php if (!$this->isPopup): ?>
-      <header id="header">
+      <header id="header" data-controller="contao--scroll" data-contao--scroll-down-class="header--hidden">
         <div class="inner">
           <h1>
             <a href="<?= $this->route('contao_backend') ?>" accesskey="h" id="home" title="<?= $this->home ?>">