Skip to content

Commit f1aa892

Browse files
mckaragozmckaragoz
authored
MudGallery (#26)
* MudGallery initialize * Finalize * Animation & Cleanup * Docs
1 parent 7707768 commit f1aa892

10 files changed

Lines changed: 306 additions & 4 deletions

File tree

‎CodeBeam.MudExtensions/Components/Gallery/MudGallery.razor‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
@namespace MudExtensions
2+
@inherits MudComponentBase
3+
@using MudExtensions.Enums
4+
5+
<CascadingValue Value="this" IsFixed="true">
6+
<div class="@Classname" style="@Style">
7+
@foreach (var item in ImageSource)
8+
{
9+
<MudImage Style="@ImageStylename" Src="@item" @onclick="@(() => ImageClick(item))" ObjectFit="ObjectFit.Cover" />
10+
}
11+
</div>
12+
13+
@if (_visible)
14+
{
15+
<div class="mud-overlay" style="background-color: rgba(0, 0, 0, 0.8); z-index: 2000" @onclick="@(EnableBackdropClick ? () => ChangeMenu(false) : null)" @onclick:stopPropagation>
16+
<MudContainer Class="relative pa-0" MaxWidth="MaxWidth" Style="background-color: rgba(20, 20, 20, 0.9); top: 0; bottom: 0; height: 100%;">
17+
18+
<div class="d-flex absolute mud-gallery-selected-toolbox gallery-toolbox-top">
19+
@ToolboxTopContent
20+
</div>
21+
<div class="@($"d-flex align-center justify-center mud-gallery-ani-{_animateGuid.ToString()}")" style="background-color: rgba(var(--mud-palette-background-grey), 0.9); height: 100%; max-height: 100%; overflow: auto">
22+
<MudImage Class="@ClassSelectedImage" Style="@StyleSelectedImage" Src="@_selectedSrc" Fluid="true" />
23+
</div>
24+
25+
<div class="d-flex justify-center absolute mud-gallery-selected-toolbox gallery-toolbox-bottom">
26+
@ToolboxBottomContent
27+
</div>
28+
29+
@if (ShowToolboxNavigationButtons == true)
30+
{
31+
<MudIconButton Class="absolute white-text" Size="Size.Large" DisableRipple="true" Icon="@Icons.Outlined.ChevronLeft" Style="bottom: 0px; top: 0px; left: 4px;" OnClick="@(() => SetAdjacentImage(-1))" />
32+
<MudIconButton Class="absolute white-text" Size="Size.Large" DisableRipple="true" Icon="@Icons.Outlined.ChevronRight" Style="bottom: 0px; top: 0px; right: 4px;" OnClick="@(() => SetAdjacentImage(1))" />
33+
}
34+
35+
@if (ShowToolboxCloseButton == true)
36+
{
37+
<MudIconButton Class="absolute white-text" DisableRipple="true" Icon="@Icons.Outlined.Close" Style="top: 4px; right: 0px;" OnClick="@(() => ChangeMenu(false))" />
38+
}
39+
</MudContainer>
40+
</div>
41+
}
42+
</CascadingValue>
43+
44+
@if (EnableAnimation == true)
45+
{
46+
<MudAnimate @ref="_animate" Selector="@($".mud-gallery-ani-{_animateGuid.ToString()}")" AnimationType="Enums.AnimationType.Fade" Value="1" Duration="0.3" />
47+
}
48+

‎CodeBeam.MudExtensions/Components/Gallery/MudGallery.razor.cs‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
using CodeBeam.MudExtensions.Utilities;
2+
using Microsoft.AspNetCore.Components;
3+
using MudBlazor;
4+
using MudBlazor.Extensions;
5+
using MudBlazor.Utilities;
6+
using MudExtensions.Enums;
7+
using System;
8+
using System.Collections.Generic;
9+
using System.Linq;
10+
using System.Security.Cryptography.X509Certificates;
11+
using System.Text;
12+
using System.Threading.Tasks;
13+
using static MudBlazor.Colors;
14+
15+
namespace MudExtensions
16+
{
17+
public partial class MudGallery : MudComponentBase
18+
{
19+
MudAnimate _animate;
20+
Guid _animateGuid = Guid.NewGuid();
21+
22+
bool _visible = false;
23+
DialogOptions _dialogOptions = new() { NoHeader = true, FullWidth = true, MaxWidth = MaxWidth.Large, CloseOnEscapeKey = true };
24+
string _selectedSrc;
25+
26+
protected string Classname => new CssBuilder("d-flex flex-wrap")
27+
.AddClass(Class)
28+
.Build();
29+
30+
protected string ImageStylename => new StyleBuilder()
31+
.AddStyle("width", $"{100 / ItemPerLine}%")
32+
.AddStyle("aspect-ratio", "1 / 1")
33+
.Build();
34+
35+
[Parameter]
36+
public string ClassSelectedImage { get; set; }
37+
38+
[Parameter]
39+
public string StyleSelectedImage { get; set; }
40+
41+
/// <summary>
42+
/// Sets how many images show per gallery line. Default is 3.
43+
/// </summary>
44+
[Parameter]
45+
public int ItemPerLine { get; set; } = 3;
46+
47+
/// <summary>
48+
/// If true, closes selected image on backdrop click. Default is true.
49+
/// </summary>
50+
[Parameter]
51+
public bool EnableBackdropClick { get; set; } = true;
52+
53+
/// <summary>
54+
/// If true, disables the default animation on image changing.
55+
/// </summary>
56+
[Parameter]
57+
public bool EnableAnimation { get; set; } = true;
58+
59+
[Parameter]
60+
public bool ShowToolboxCloseButton { get; set; } = true;
61+
62+
[Parameter]
63+
public bool ShowToolboxNavigationButtons { get; set; } = true;
64+
65+
/// <summary>
66+
/// The max width for selected image. The remaining space fills with an overlay. Default is Medium.
67+
/// </summary>
68+
[Parameter]
69+
public MaxWidth MaxWidth { get; set; } = MaxWidth.Medium;
70+
71+
/// <summary>
72+
/// Renderfragment for top section on selected view.
73+
/// </summary>
74+
[Parameter]
75+
public RenderFragment ToolboxTopContent { get; set; }
76+
77+
/// <summary>
78+
/// Renderfragment for bottom section on selected view.
79+
/// </summary>
80+
[Parameter]
81+
public RenderFragment ToolboxBottomContent { get; set; }
82+
83+
/// <summary>
84+
/// Gallery's image source.
85+
/// </summary>
86+
[Parameter]
87+
public List<string> ImageSource { get; set; }
88+
89+
protected void ImageClick(string src)
90+
{
91+
_selectedSrc = src;
92+
_visible = true;
93+
StateHasChanged();
94+
}
95+
96+
public void ChangeMenu(bool visible)
97+
{
98+
_visible = visible;
99+
}
100+
101+
protected async Task SetAdjacentImage(int count)
102+
{
103+
if (_selectedSrc == null)
104+
{
105+
return;
106+
}
107+
int index = ImageSource.IndexOf(_selectedSrc);
108+
109+
if (ImageSource.Count <= index + count || index + count < 0)
110+
{
111+
return;
112+
}
113+
114+
if (EnableAnimation == true)
115+
{
116+
await _animate.Refresh();
117+
}
118+
_selectedSrc = ImageSource[index + count];
119+
120+
}
121+
122+
public int GetSelectedImageIndex()
123+
{
124+
return ImageSource.IndexOf(_selectedSrc);
125+
}
126+
127+
}
128+
}

‎CodeBeam.MudExtensions/Styles/Components/_gallery.scss‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
2+
.mud-gallery-selected-toolbox {
3+
left: 0;
4+
right: 0;
5+
height: 56px;
6+
width: 100%;
7+
background-color: rgba(0, 0, 0, 0.6);
8+
9+
&.gallery-toolbox-top {
10+
top: 0;
11+
}
12+
13+
&.gallery-toolbox-bottom {
14+
bottom: 0;
15+
}
16+
}

‎CodeBeam.MudExtensions/Styles/MudExtensions.css‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,15 @@
1-
.mud-page {
1+
.mud-gallery-selected-toolbox {
2+
left: 0;
3+
right: 0;
4+
height: 56px;
5+
width: 100%;
6+
background-color: rgba(0, 0, 0, 0.6); }
7+
.mud-gallery-selected-toolbox.gallery-toolbox-top {
8+
top: 0; }
9+
.mud-gallery-selected-toolbox.gallery-toolbox-bottom {
10+
bottom: 0; }
11+
12+
.mud-page {
213
display: grid;
314
box-sizing: border-box;
415
width: 100%; }

‎CodeBeam.MudExtensions/Styles/MudExtensions.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎CodeBeam.MudExtensions/Styles/MudExtensions.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1-
@import 'components/_page';
1+
@import 'components/_gallery';
2+
@import 'components/_page';
23
@import 'components/_stepper';
34
@import 'components/_wheel';

‎CodeBeam.MudExtensions/wwwroot/MudExtensions.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎ComponentViewer/Pages/Components/ApiPage.razor‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,19 @@
1515
</MudTable>
1616
</ExampleCard>
1717

18+
<ExampleCard Title="Api - MudGallery" HasExpansionPanel="true">
19+
<MudTable Items="@(typeof(MudGallery).GetProperties().OrderBy(x => x.Name).ToList())">
20+
<HeaderContent>
21+
<MudTh>Name</MudTh>
22+
<MudTh>Type</MudTh>
23+
</HeaderContent>
24+
<RowTemplate>
25+
<MudTd>@context.Name</MudTd>
26+
<MudTd>@context.PropertyType.ToString()</MudTd>
27+
</RowTemplate>
28+
</MudTable>
29+
</ExampleCard>
30+
1831
<ExampleCard Title="Api - MudLoading" HasExpansionPanel="true">
1932
<MudTable Items="@(typeof(MudLoading).GetProperties().OrderBy(x => x.Name).ToList())">
2033
<HeaderContent>

‎ComponentViewer/Pages/Components/GalleryPage.razor‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
@page "/mudgallery"
2+
@using MudBlazor.Extensions
3+
@using MudBlazor.Utilities
4+
5+
<ExamplePage Title="MudGallery">
6+
<ExampleCard Title="Usage" Description="">
7+
<MudGrid>
8+
<MudItem xs="12" sm="8" Class="d-flex align-center flex-wrap">
9+
<MudGallery @ref="_gallery" ImageSource="_source" ItemPerLine="_itemPerLine" EnableBackdropClick="_enableBackdropClick"
10+
ShowToolboxCloseButton="_showToolboxCloseButton" ShowToolboxNavigationButtons="_showToolboxNavigationButtons"
11+
MaxWidth="_maxWidth" StyleSelectedImage="@ImageStyle" EnableAnimation="_enableAnimation">
12+
<ToolboxTopContent>
13+
<MudText Class="white-text pa-4">Image @(_gallery.GetSelectedImageIndex() + 1) - Description</MudText>
14+
</ToolboxTopContent>
15+
<ToolboxBottomContent>
16+
<MudIconButton Class="white-text" Icon="@Icons.Outlined.Edit" />
17+
<MudIconButton Class="white-text" Icon="@Icons.Outlined.RotateRight" OnClick="ArrangeRotateValue" />
18+
@if (_showToolboxCloseButton == false)
19+
{
20+
<MudIconButton Class="white-text" Icon="@Icons.Outlined.Close" OnClick="@(() => _gallery.ChangeMenu(false))" />
21+
}
22+
</ToolboxBottomContent>
23+
</MudGallery>
24+
</MudItem>
25+
26+
<MudItem xs="12" sm="4">
27+
<MudStack Spacing="4">
28+
<MudNumericField @bind-Value="_itemPerLine" Label="Item Per Line" />
29+
<MudSwitch @bind-Checked="_enableBackdropClick" Color="Color.Primary" Label="Enable Backdrop Click" />
30+
<MudSwitch @bind-Checked="_showToolboxCloseButton" Color="Color.Primary" Label="Toolbox Close Button" />
31+
<MudSwitch @bind-Checked="_showToolboxNavigationButtons" Color="Color.Primary" Label="Toolbox Navigation Buttons" />
32+
<MudSwitch @bind-Checked="_enableAnimation" Color="Color.Primary" Label="Animation" />
33+
<MudSelect @bind-Value="_maxWidth" Variant="Variant.Outlined" Label="MaxWidth" Margin="Margin.Dense" Dense="true">
34+
@foreach (MaxWidth item in Enum.GetValues<MaxWidth>())
35+
{
36+
<MudSelectItem Value="item">@item.ToDescriptionString()</MudSelectItem>
37+
}
38+
</MudSelect>
39+
</MudStack>
40+
</MudItem>
41+
</MudGrid>
42+
</ExampleCard>
43+
</ExamplePage>
44+
45+
@code{
46+
MudGallery _gallery;
47+
int _itemPerLine = 3;
48+
bool _enableBackdropClick = true;
49+
bool _showToolboxCloseButton = true;
50+
bool _showToolboxNavigationButtons = true;
51+
bool _enableAnimation = true;
52+
int _rotateValue = 0;
53+
MaxWidth _maxWidth = MaxWidth.Medium;
54+
55+
private string ImageStyle => new StyleBuilder()
56+
.AddStyle("transform", $"rotate({_rotateValue}deg)")
57+
.Build();
58+
59+
List<string> _source = new() { "https://cdn.pixabay.com/photo/2022/09/17/08/47/piano-7460435_960_720.jpg",
60+
"https://cdn.pixabay.com/photo/2017/07/29/16/10/windows-2551954_960_720.jpg",
61+
"https://mudblazor.com/images/castle.jpg",
62+
"https://cdn.pixabay.com/photo/2022/08/01/13/20/lily-of-the-valley-7358144__340.jpg",
63+
"https://cdn.pixabay.com/photo/2022/03/31/01/05/bird-7102006__340.jpg",
64+
"https://cdn.pixabay.com/photo/2019/06/05/08/37/dog-4253238__340.jpg",
65+
"https://cdn.pixabay.com/photo/2022/07/27/03/23/deer-7347041_960_720.jpg",
66+
"https://cdn.pixabay.com/photo/2022/03/31/11/28/snakes-head-fritillary-7102810_960_720.jpg",
67+
"https://cdn.pixabay.com/photo/2022/10/07/09/06/bridge-7504605_960_720.jpg",
68+
"https://cdn.pixabay.com/photo/2022/08/24/05/44/duck-7406987_960_720.jpg",
69+
"https://cdn.pixabay.com/photo/2022/10/05/20/43/hyacinth-macaw-7501470_960_720.jpg" };
70+
71+
private void ArrangeRotateValue()
72+
{
73+
if (_rotateValue == 270)
74+
{
75+
_rotateValue = 0;
76+
return;
77+
}
78+
_rotateValue += 90;
79+
}
80+
}

‎ComponentViewer/Pages/Index.razor‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,11 @@
1414
Description="A basic API list for all components." />
1515
</MudItem>
1616

17+
<MudItem xs="12" sm="6" md="4" lg="3" xl="2">
18+
<ComponentCard Title="MudGallery"
19+
Description="Mobile friendly image gallery component." />
20+
</MudItem>
21+
1722
<MudItem xs="12" sm="6" md="4" lg="3" xl="2">
1823
<ComponentCard Title="MudAnimate"
1924
Description="A revolutionary next generation animate component." />

0 commit comments

Comments
 (0)