add LockDirection parameter to BitSwipeTrap bitfoundation#9662

msynk · Jan 12, 2025 · 8dac5c3 · 8dac5c3
1 parent 8d6a51c
commit 8dac5c3
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 7 deletions.
diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor b/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor
@@ -21,7 +21,8 @@
                   Throttle="10"
                   OnMove="HandleOnSwipeMove"
                   OnEnd="HandleOnSwipeEnd"
-                  OnTrigger="HandleOnSwipeTrigger">
+                  OnTrigger="HandleOnSwipeTrigger"
+                  LockOrientation="BitSwipeOrientation.Horizontal">
         <div style="@Styles?.Container" class="bit-npn-cnt @Classes?.Container">
             @if (Header is not null)
             {

diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor.cs
@@ -207,7 +207,7 @@ private void HandleOnSwipeMove(BitSwipeTrapEventArgs args)
         else
         {
             var diff = args.DiffY - _oldDiffY;
-            _js.BitExtrasScrollBy(RootElement, 0, diff > 0 ? -20 : 20);
+            //_js.BitExtrasScrollBy(RootElement, 0, diff > 0 ? -20 : 20);
             _oldDiffY = args.DiffY;
         }
 

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/SwipeTrap/BitSwipeOrientation.cs b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/SwipeTrap/BitSwipeOrientation.cs
@@ -0,0 +1,22 @@
+namespace Bit.BlazorUI;
+
+/// <summary>
+/// The lock orientation of the swipte trap component.
+/// </summary>
+public enum BitSwipeOrientation
+{
+    /// <summary>
+    /// Not orientation lock for swipe trap.
+    /// </summary>
+    None,
+
+    /// <summary>
+    /// Horizontal orientation lock of traping the swipe action.
+    /// </summary>
+    Horizontal,
+
+    /// <summary>
+    /// Vertical orientation lock of traping the swipe action.
+    /// </summary>
+    Vertical
+}
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/SwipeTrap/BitSwipeTrap.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/SwipeTrap/BitSwipeTrap.razor.cs
@@ -20,6 +20,11 @@ public partial class BitSwipeTrap : BitComponentBase, IAsyncDisposable
     /// </summary>
     [Parameter] public RenderFragment? ChildContent { get; set; }
 
+    /// <summary>
+    /// Specifies the lock direction in which the swipe trap allows to trap the swipe actions.
+    /// </summary>
+    [Parameter] public BitSwipeOrientation? LockOrientation { get; set; }
+
     /// <summary>
     /// The event callback for when the swipe action starts on the container of the swipe trap.
     /// </summary>
@@ -96,7 +101,14 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
         if (firstRender)
         {
             var dotnetObj = DotNetObjectReference.Create(this);
-            await _js.BitSwipeTrapSetup(UniqueId, RootElement, Trigger ?? 0.25m, Threshold ?? 0, Throttle ?? 0, dotnetObj);
+            await _js.BitSwipeTrapSetup(
+                UniqueId, 
+                RootElement, 
+                Trigger ?? 0.25m, 
+                Threshold ?? 0, 
+                Throttle ?? 0, 
+                LockOrientation ?? BitSwipeOrientation.None, 
+                dotnetObj);
         }
 
         await base.OnAfterRenderAsync(firstRender);

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/SwipeTrap/BitSwipeTrap.ts b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/SwipeTrap/BitSwipeTrap.ts
@@ -8,13 +8,15 @@
             trigger: number,
             threshold: number,
             throttle: number,
+            lockOrientation: BitSwipeOrientation,
             dotnetObj: DotNetObject) {
             const bcr = element.getBoundingClientRect();
 
             let diffX = 0;
             let diffY = 0;
             let startX = -1;
             let startY = -1;
+            let orientation = BitSwipeOrientation.None;
             const isTouchDevice = Utils.isTouchDevice();
             const throttledMove = Utils.throttle((sx: number, sy: number, dx: number, dy: number) => dotnetObj.invokeMethodAsync('OnMove', sx, sy, dx, dy), throttle);
 
@@ -34,9 +36,33 @@
                 diffX = getX(e) - startX;
                 diffY = getY(e) - startY;
 
-                if ((Math.abs(diffX) > threshold || Math.abs(diffY) > threshold) && e.cancelable) {
-                    e.preventDefault();
-                    e.stopPropagation();
+                if (orientation === BitSwipeOrientation.None) {
+                    if (diffX !== 0 && diffY === 0) {
+                        orientation = BitSwipeOrientation.Horizontal;
+                    }
+
+                    if (diffX === 0 && diffY !== 0) {
+                        orientation = BitSwipeOrientation.Vertical;
+                    }
+                }
+
+                if (e.cancelable) {
+                    if (lockOrientation === BitSwipeOrientation.Horizontal) {
+                        if (orientation === BitSwipeOrientation.Horizontal && Math.abs(diffX) > threshold) {
+                            e.preventDefault();
+                            e.stopPropagation();
+                        }
+                    }
+                    else if (lockOrientation === BitSwipeOrientation.Vertical) {
+                        if (orientation === BitSwipeOrientation.Vertical && Math.abs(diffY) > threshold) {
+                            e.preventDefault();
+                            e.stopPropagation();
+                        }
+                    }
+                    else if ((Math.abs(diffX) > threshold || Math.abs(diffY) > threshold)) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                    }
                 }
 
                 throttledMove(startX, startY, diffX, diffY);
@@ -59,6 +85,7 @@
                 } finally {
                     await dotnetObj.invokeMethodAsync('OnEnd', sX, sY, diffX, diffY);
                     diffX = diffY = 0;
+                    orientation = BitSwipeOrientation.None;
                 }
             };
 
@@ -130,4 +157,11 @@
             this.dotnetObj.dispose();
         }
     }
+
+    enum BitSwipeOrientation {
+        None,
+        Horizontal,
+        Vertical
+    }
+
 }
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/SwipeTrap/BitSwipeTrapJsRuntimeExtensions.cs b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/SwipeTrap/BitSwipeTrapJsRuntimeExtensions.cs
@@ -8,9 +8,10 @@ internal static ValueTask BitSwipeTrapSetup(this IJSRuntime js,
                                                      decimal trigger,
                                                      decimal threshold,
                                                      int throttle,
+                                                     BitSwipeOrientation lockOrientation,
                                                      DotNetObjectReference<BitSwipeTrap>? dotnetObjectReference)
     {
-        return js.InvokeVoid("BitBlazorUI.SwipeTrap.setup", id, element, trigger, threshold, throttle, dotnetObjectReference);
+        return js.InvokeVoid("BitBlazorUI.SwipeTrap.setup", id, element, trigger, threshold, throttle, lockOrientation, dotnetObjectReference);
     }
 
     internal static ValueTask BitSwipeTrapDispose(this IJSRuntime jsRuntime, string id)