From 9e696a0305663738d0cc38633f52f4f98a0e6d19 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Thu, 9 May 2024 21:16:27 +0200
Subject: [PATCH] FIX: allows to disable body scroll lock on swipe modifier
 (#26957)

Cases like the glimmer-site-header are complex because the swiped area is not the moved target, for now it's simpler to not apply the body scroll lock automatically.

A new property is now available on the swipe modifier: `{{swipe @lockBody=false}}`

Note I tried to have tests for this modifier in the past, but it was very inconsistent on CI causing lots of flakeys, this is why there are no tests for now. I might try to write them again using system specs.
---
 .../app/components/glimmer-site-header.gjs    |  1 +
 .../discourse/app/modifiers/swipe.js          | 30 +++++++++++++++----
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/glimmer-site-header.gjs b/app/assets/javascripts/discourse/app/components/glimmer-site-header.gjs
index 448e0d540d9..5b16ccb2696 100644
--- a/app/assets/javascripts/discourse/app/components/glimmer-site-header.gjs
+++ b/app/assets/javascripts/discourse/app/components/glimmer-site-header.gjs
@@ -425,6 +425,7 @@ export default class GlimmerSiteHeader extends Component {
         onDidEndSwipe=this.onSwipeEnd
         onDidCancelSwipe=this.onSwipeCancel
         onDidSwipe=this.onSwipe
+        lockBody=false
       }}
     >
       <Header
diff --git a/app/assets/javascripts/discourse/app/modifiers/swipe.js b/app/assets/javascripts/discourse/app/modifiers/swipe.js
index 1a049e228f4..92e8c45c291 100644
--- a/app/assets/javascripts/discourse/app/modifiers/swipe.js
+++ b/app/assets/javascripts/discourse/app/modifiers/swipe.js
@@ -56,17 +56,26 @@ export default class SwipeModifier extends Modifier {
    * @param {Function} options.onDidEndSwipe - Callback function when swipe ends.
    * @param {Function} options.onDidCancelSwipe - Callback function when swipe is canceled.
    * @param {boolean} options.enabled - Flag to enable/disable swipe.
+   * @param {boolean} options.lockBody - Automatically enable/disable body scroll lock.
    */
   modify(
     element,
     _,
-    { onDidStartSwipe, onDidSwipe, onDidEndSwipe, onDidCancelSwipe, enabled }
+    {
+      onDidStartSwipe,
+      onDidSwipe,
+      onDidEndSwipe,
+      onDidCancelSwipe,
+      enabled,
+      lockBody,
+    }
   ) {
     if (enabled === false || !this.site.mobileView) {
       this.enabled = enabled;
       return;
     }
 
+    this.lockBody = lockBody ?? true;
     this.element = element;
     this.onDidSwipeCallback = onDidSwipe;
     this.onDidStartSwipeCallback = onDidStartSwipe;
@@ -87,7 +96,10 @@ export default class SwipeModifier extends Modifier {
    */
   @bind
   onDidStartSwipe(event) {
-    disableBodyScroll(this.element);
+    if (this.lockBody) {
+      disableBodyScroll(this.element);
+    }
+
     this.onDidStartSwipeCallback?.(event.detail);
   }
 
@@ -97,7 +109,10 @@ export default class SwipeModifier extends Modifier {
    */
   @bind
   onDidEndSwipe() {
-    enableBodyScroll(this.element);
+    if (this.lockBody) {
+      enableBodyScroll(this.element);
+    }
+
     this.onDidEndSwipeCallback?.(event.detail);
   }
 
@@ -116,7 +131,10 @@ export default class SwipeModifier extends Modifier {
    */
   @bind
   onDidCancelSwipe(event) {
-    enableBodyScroll(this.element);
+    if (this.lockBody) {
+      enableBodyScroll(this.element);
+    }
+
     this.onDidCancelSwipe?.(event.detail);
   }
 
@@ -134,6 +152,8 @@ export default class SwipeModifier extends Modifier {
     this.element.removeEventListener("swipe", this.onDidSwipe);
     this._swipeEvents.removeTouchListeners();
 
-    enableBodyScroll(this.element);
+    if (this.lockBody) {
+      enableBodyScroll(this.element);
+    }
   }
 }