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/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

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);
+    }
   }
 }