daniel-c-harvey
120 lines
4.7 KiB
C#
120 lines
4.7 KiB
C#
using Microsoft.AspNetCore.Components;
|
|
using Microsoft.JSInterop;
|
|
|
|
namespace DeepDrftShared.Client.Components;
|
|
|
|
/// <summary>
|
|
/// Scroll-driven parallax image window. As the component scrolls up through the viewport,
|
|
/// the image pans through the window faster than the page scrolls. An optional second image
|
|
/// crossfades in on hover (pure CSS). A <see cref="FullWidth"/> flag breaks the container out
|
|
/// of parent padding to span the viewport.
|
|
/// </summary>
|
|
/// <remarks>
|
|
/// Progressive enhancement: renders a static framed image at SSR; the parallax attaches after
|
|
/// interactive boot via <c>OnAfterRenderAsync(firstRender)</c>. When <see cref="WindowHeight"/>
|
|
/// is left null, the window renders at 300px and the JS module recomputes height from the
|
|
/// container width and image aspect ratio (see <see cref="WindowHeightFraction"/>), tracking
|
|
/// container resizes — this may cause a layout shift on first paint or on orientation change. Pass an explicit
|
|
/// <see cref="WindowHeight"/> for above-the-fold hero usage to avoid the shift.
|
|
/// </remarks>
|
|
public abstract class ParallaxImageBase : ComponentBase, IAsyncDisposable
|
|
{
|
|
[Inject] private IJSRuntime JS { get; set; } = default!;
|
|
|
|
/// <summary>Primary image URL, shown at rest.</summary>
|
|
[Parameter, EditorRequired] public string Image1 { get; set; } = default!;
|
|
|
|
/// <summary>Optional hover image (assumed same dimensions as <see cref="Image1"/>).</summary>
|
|
[Parameter] public string? Image2 { get; set; }
|
|
|
|
/// <summary>Accessible name for <see cref="Image1"/>. When null, the window is decorative.</summary>
|
|
[Parameter] public string? Alt1 { get; set; }
|
|
|
|
/// <summary>Accessible name for <see cref="Image2"/> (only relevant if it adds semantic meaning).</summary>
|
|
[Parameter] public string? Alt2 { get; set; }
|
|
|
|
/// <summary>CSS height of the parallax window. When null, renders at 300px then recomputes from container width, image aspect ratio, and <see cref="WindowHeightFraction"/>.</summary>
|
|
[Parameter] public string? WindowHeight { get; set; }
|
|
|
|
/// <summary>
|
|
/// Fraction of the aspect-ratio-correct image height to use as the parallax window height.
|
|
/// Only active when <see cref="WindowHeight"/> is null.
|
|
/// E.g. 0.5 (default) = window is half the height the image would be if displayed at full container width.
|
|
/// Recalculates on container resize (orientation change, responsive layout shift).
|
|
/// </summary>
|
|
[Parameter] public double WindowHeightFraction { get; set; } = 0.5;
|
|
|
|
/// <summary><c>background-size</c> width.</summary>
|
|
[Parameter] public string ImageWidth { get; set; } = "auto";
|
|
|
|
/// <summary><c>background-size</c> height.</summary>
|
|
[Parameter] public string ImageHeight { get; set; } = "auto";
|
|
|
|
/// <summary>When true, stretches the container to 100vw via a negative-margin breakout.</summary>
|
|
[Parameter] public bool FullWidth { get; set; }
|
|
|
|
/// <summary>Speed multiplier, clamped to [0,1] in the JS module.</summary>
|
|
[Parameter] public double ParallaxSpeed { get; set; } = 0.5;
|
|
|
|
/// <summary>When false: top-on-entry to bottom-at-top. When true: inverted.</summary>
|
|
[Parameter] public bool InvertDirection { get; set; }
|
|
|
|
/// <summary>Extra CSS classes on the outer element.</summary>
|
|
[Parameter] public string? Class { get; set; }
|
|
|
|
protected ElementReference WindowRef;
|
|
protected string WindowHeightValue { get; private set; } = "300px";
|
|
|
|
private IJSObjectReference? _module;
|
|
private string? _handle;
|
|
|
|
protected override void OnParametersSet()
|
|
{
|
|
WindowHeightValue = WindowHeight ?? "300px";
|
|
}
|
|
|
|
protected override async Task OnAfterRenderAsync(bool firstRender)
|
|
{
|
|
if (!firstRender)
|
|
{
|
|
return;
|
|
}
|
|
|
|
_module = await JS.InvokeAsync<IJSObjectReference>(
|
|
"import", "./_content/DeepDrftShared.Client/js/parallax/parallax.js");
|
|
|
|
_handle = await _module.InvokeAsync<string>(
|
|
"register",
|
|
WindowRef,
|
|
new
|
|
{
|
|
speed = ParallaxSpeed,
|
|
invertDirection = InvertDirection,
|
|
heightFraction = WindowHeight == null ? (double?)WindowHeightFraction : null,
|
|
image1 = Image1
|
|
});
|
|
}
|
|
|
|
public async ValueTask DisposeAsync()
|
|
{
|
|
if (_module != null)
|
|
{
|
|
try
|
|
{
|
|
if (_handle != null)
|
|
{
|
|
await _module.InvokeVoidAsync("unregister", _handle);
|
|
}
|
|
|
|
await _module.DisposeAsync();
|
|
}
|
|
catch (JSDisconnectedException)
|
|
{
|
|
// Circuit already torn down (e.g. browser navigated away) — nothing to clean up.
|
|
}
|
|
}
|
|
|
|
GC.SuppressFinalize(this);
|
|
}
|
|
}
|