Add a configurable threshold value

contao · Nov 28, 2023 · 713fc20 · 713fc20
1 parent 355be22
commit 713fc20
Show file tree

Hide file tree

Showing 15 changed files with 28 additions and 37 deletions.
diff --git a/core-bundle/assets/controllers/scroll-controller.js b/core-bundle/assets/controllers/scroll-controller.js
@@ -1,6 +1,10 @@
 import { Controller } from '@hotwired/stimulus';
 
 export default class extends Controller {
+    static values = {
+        threshold: Number
+    }
+
     static classes = ['up', 'down']
 
     initialize () {
@@ -40,12 +44,12 @@ export default class extends Controller {
         // 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) {
+        if (this.lastScroll < currentScroll - this.thresholdValue) {
             this.down();
-        } else if (this.lastScroll > currentScroll) {
+            this.lastScroll = currentScroll;
+        } else if (this.lastScroll > currentScroll + this.thresholdValue || currentScroll < 1) {
             this.up();
+            this.lastScroll = currentScroll;
         }
-
-        this.lastScroll = currentScroll;
     }
 }
diff --git a/core-bundle/contao/templates/backend/be_main.html5 b/core-bundle/contao/templates/backend/be_main.html5
@@ -35,7 +35,7 @@
 
   <?php $this->block('header'); ?>
     <?php if (!$this->isPopup): ?>
-      <header id="header" data-controller="contao--scroll" data-contao--scroll-up-class="header--fixed">
+      <header id="header" data-controller="contao--scroll" data-contao--scroll-down-class="header--hidden" data-contao--scroll-threshold-value="40">
         <div class="inner">
           <h1>
             <a href="<?= $this->route('contao_backend') ?>" accesskey="h" id="home" title="<?= $this->home ?>">

diff --git a/core-bundle/contao/themes/flexible/backend.02e8f95d.css b/core-bundle/contao/themes/flexible/backend.02e8f95d.css
diff --git a/core-bundle/contao/themes/flexible/backend.02e8f95d.css.map b/core-bundle/contao/themes/flexible/backend.02e8f95d.css.map
diff --git a/core-bundle/contao/themes/flexible/backend.74df4ebb.css b/core-bundle/contao/themes/flexible/backend.74df4ebb.css
diff --git a/core-bundle/contao/themes/flexible/backend.74df4ebb.css.map b/core-bundle/contao/themes/flexible/backend.74df4ebb.css.map
diff --git a/core-bundle/contao/themes/flexible/entrypoints.json b/core-bundle/contao/themes/flexible/entrypoints.json
@@ -2,7 +2,7 @@
   "entrypoints": {
     "backend": {
       "css": [
-        "/system/themes/flexible/backend.02e8f95d.css"
+        "/system/themes/flexible/backend.74df4ebb.css"
       ]
     },
     "confirm": {

diff --git a/core-bundle/contao/themes/flexible/manifest.json b/core-bundle/contao/themes/flexible/manifest.json
@@ -1,5 +1,5 @@
 {
-  "backend.css": "/system/themes/flexible/backend.02e8f95d.css",
+  "backend.css": "/system/themes/flexible/backend.74df4ebb.css",
   "confirm.css": "/system/themes/flexible/confirm.5231eaa5.css",
   "conflict.css": "/system/themes/flexible/conflict.41a64ff6.css",
   "diff.css": "/system/themes/flexible/diff.028ed04c.css",
@@ -8,7 +8,7 @@
   "popup.css": "/system/themes/flexible/popup.751f0537.css",
   "tinymce.css": "/system/themes/flexible/tinymce.e5009f94.css",
   "tinymce-dark.css": "/system/themes/flexible/tinymce-dark.596023db.css",
-  "backend.02e8f95d.css.map": "/system/themes/flexible/backend.02e8f95d.css.map",
+  "backend.74df4ebb.css.map": "/system/themes/flexible/backend.74df4ebb.css.map",
   "confirm.5231eaa5.css.map": "/system/themes/flexible/confirm.5231eaa5.css.map",
   "conflict.41a64ff6.css.map": "/system/themes/flexible/conflict.41a64ff6.css.map",
   "diff.028ed04c.css.map": "/system/themes/flexible/diff.028ed04c.css.map",

diff --git a/core-bundle/contao/themes/flexible/styles/main.css b/core-bundle/contao/themes/flexible/styles/main.css
@@ -53,24 +53,15 @@ body.popup {
 	min-height: 40px;
 	text-align: left;
 	background: var(--header-bg);
-}
-
-@keyframes slide-in-top {
-	0% {
-		transform: translateY(-40px);
-	}
-	100% {
-		transform: translateY(0);
-	}
-}
-
-.header--fixed #header {
-	position: fixed;
+	position: sticky;
 	top: 0;
-	left: 0;
-	right: 0;
-	animation: slide-in-top .2s;
 	z-index: 4;
+	transition: transform .2s ease;
+	transform: none;
+}
+
+.header--hidden #header {
+	transform: translateY(-40px);
 }
 
 #header h1 {
@@ -293,10 +284,6 @@ body.popup {
 	min-height: calc(100vh - 40px);
 }
 
-.header--fixed #container {
-	padding-top: 40px;
-}
-
 .popup #container {
 	padding: 0;
 	width: auto;

diff --git a/core-bundle/public/backend.49fb1747.js b/core-bundle/public/backend.49fb1747.js
diff --git a/core-bundle/public/backend.49fb1747.js.map b/core-bundle/public/backend.49fb1747.js.map
diff --git a/core-bundle/public/backend.6a4d1987.js b/core-bundle/public/backend.6a4d1987.js
diff --git a/core-bundle/public/backend.6a4d1987.js.map b/core-bundle/public/backend.6a4d1987.js.map
diff --git a/core-bundle/public/entrypoints.json b/core-bundle/public/entrypoints.json
@@ -2,7 +2,7 @@
   "entrypoints": {
     "backend": {
       "js": [
-        "/bundles/contaocore/backend.49fb1747.js"
+        "/bundles/contaocore/backend.6a4d1987.js"
       ]
     }
   }

diff --git a/core-bundle/public/manifest.json b/core-bundle/public/manifest.json
@@ -1,4 +1,4 @@
 {
-  "backend.js": "/bundles/contaocore/backend.49fb1747.js",
-  "backend.49fb1747.js.map": "/bundles/contaocore/backend.49fb1747.js.map"
+  "backend.js": "/bundles/contaocore/backend.6a4d1987.js",
+  "backend.6a4d1987.js.map": "/bundles/contaocore/backend.6a4d1987.js.map"
 }