Files
openarchival/OpenArchival.Blazor.FileViewer/FileViewerCarousel.razor

69 lines
2.3 KiB
Plaintext

@namespace OpenArchival.Blazor.FileViewer
@using Microsoft.Extensions.Logging
@using OpenArchival.DataAccess;
@using MudBlazor;
<MudCarousel Style="@_carouselStyle"
Class="mud-width-full auto-height-carousel"
TData="object"
AutoCycle=false
@bind-SelectedIndex="SelectedIndex"
ShowArrows="(FilePathListings.Count > 1)"
ShowBullets="(FilePathListings.Count > 1)">
@foreach (var file in FilePathListings.Select((value, i) => new { i, value }))
{
@if (!ShowUnsupportedFiles && FileViewerFactory.GetViewerComponent(file.value.OriginalName) == typeof(UnsupportedFileViewer))
{
continue;
}
<MudCarouselItem @key="file.value" Style="width:auto;">
@CreateDynamicComponent(file.value, file.i == SelectedIndex)
</MudCarouselItem>
}
</MudCarousel>
@inject ILogger<FileViewerCarousel> Logger;
@code {
[Parameter]
public bool ShowUnsupportedFiles { get; set; }
[Parameter]
public List<FilePathListing> FilePathListings { get; set; } = [];
[Parameter]
public int MaxHeight { get; set; }
private string _carouselStyle = "height: 350px;"; // Initial height
public int SelectedIndex { get; set; }
// 1. CREATE a handler that receives the height from the child.
private void OnChildHeightMeasured(int newHeight)
{
if (newHeight > 0)
{
_carouselStyle = $"height: {Math.Min(newHeight, MaxHeight)}px;";
StateHasChanged();
}
}
// 2. MODIFY the dynamic component creator to pass the handler.
private RenderFragment CreateDynamicComponent(FilePathListing file, bool isSelected)
{
// Only render the component if it is the selected one to get its height
if (!isSelected) return builder => { };
return builder =>
{
Type componentType = FileViewerFactory.GetViewerComponent(file.OriginalName);
builder.OpenComponent(0, componentType);
builder.AddAttribute(1, "File", file);
// Pass the callback method to the child's "OnHeightMeasured" parameter.
builder.AddAttribute(2, "OnHeightMeasured", EventCallback.Factory.Create<int>(this, OnChildHeightMeasured));
builder.CloseComponent();
};
}
}