Gallery Fix Same Item Loop Cycle (#524)

Author: mckaragoz

CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/Gallery/Examples/GalleryExample1.razor

@@ -4,8 +4,8 @@
 <MudGrid>
     <MudItem xs="12" sm="8" Class="d-flex align-center flex-wrap">
         <MudGallery @ref="_gallery" ImageSource="_source" ItemPerLine="_itemPerLine" EnableBackdropClick="_enableBackdropClick"
-                    ShowToolboxCloseButton="_showToolboxCloseButton" ShowToolboxNavigationButtons="_showToolboxNavigationButtons"
-                    MaxWidth="_maxWidth" StyleSelectedImage="@ImageStyle" EnableAnimation="_enableAnimation">
+        ShowToolboxCloseButton="_showToolboxCloseButton" ShowToolboxNavigationButtons="_showToolboxNavigationButtons"
+        MaxWidth="_maxWidth" StyleSelectedImage="@ImageStyle" EnableAnimation="_enableAnimation">
             <ToolboxTopContent>
                 <MudText Class="white-text pa-4">Image @(_gallery?.GetSelectedImageIndex() + 1) - Description</MudText>
             </ToolboxTopContent>
@@ -56,6 +56,7 @@
         "https://mudblazor.com/images/castle.jpg",
         "https://cdn.pixabay.com/photo/2022/08/01/13/20/lily-of-the-valley-7358144__340.jpg",
         "https://cdn.pixabay.com/photo/2022/03/31/01/05/bird-7102006__340.jpg",
+        "https://mudblazor.com/images/castle.jpg",
         "https://cdn.pixabay.com/photo/2019/06/05/08/37/dog-4253238__340.jpg",
         "https://cdn.pixabay.com/photo/2022/07/27/03/23/deer-7347041_960_720.jpg",
         "https://cdn.pixabay.com/photo/2022/03/31/11/28/snakes-head-fritillary-7102810_960_720.jpg",

CodeBeam.MudBlazor.Extensions/Components/Gallery/MudGallery.razor.cs

@@ -15,6 +15,7 @@ public partial class MudGallery : MudComponentBase
         bool _visible = false;
         DialogOptions _dialogOptions = new() { NoHeader = true, FullWidth = true, MaxWidth = MaxWidth.Large, CloseOnEscapeKey = true };
         string? _selectedSrc;
+        int _selectedIndex = 0;
 
         /// <summary>
         /// 
@@ -104,6 +105,7 @@ public partial class MudGallery : MudComponentBase
         protected void ImageClick(string src)
         {
             _selectedSrc = src;
+            _selectedIndex = ImageSource.IndexOf(src);
             _visible = true;
             StateHasChanged();
         }
@@ -128,19 +130,29 @@ protected async Task SetAdjacentImage(int count)
             {
                 return;
             }
-            int index = ImageSource.IndexOf(_selectedSrc);
 
-            if (ImageSource.Count <= index + count || index + count < 0)
+            if (EnableAnimation)
+            {
+                await _animate.Refresh();
+            }
+
+            if (ImageSource.Count <= _selectedIndex + count)
             {
+                _selectedSrc = ImageSource[0];
+                _selectedIndex = 0;
                 return;
             }
 
-            if (EnableAnimation)
+            if (_selectedIndex + count < 0)
             {
-                await _animate.Refresh();
+                _selectedSrc = ImageSource[^1];
+                _selectedIndex = ImageSource.Count - 1;
+                return;
             }
-            _selectedSrc = ImageSource[index + count];
-            
+
+            _selectedSrc = ImageSource[_selectedIndex + count];
+            _selectedIndex += count;
+
         }
 
         /// <summary>
@@ -149,7 +161,7 @@ protected async Task SetAdjacentImage(int count)
         /// <returns></returns>
         public int GetSelectedImageIndex()
         {
-            return ImageSource.IndexOf(_selectedSrc ?? "");
+            return _selectedIndex;
         }
 
     }