Skip to content

feat(DriverJs): add OverlayClickBehavior support #707

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ArgoZhang merged 4 commits into from
Nov 19, 2025
Merged

feat(DriverJs): add OverlayClickBehavior support #707

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8037264
chore: bump version 10.0.1
ArgoZhang Nov 19, 2025
8375e47
chore: updated version to 1.4.0
ArgoZhang Nov 19, 2025
6313b13
feat: add OverlayClickBehavior support
ArgoZhang Nov 19, 2025
809d50d
feat: 更改回调参数
ArgoZhang Nov 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/BootstrapBlazor.DriverJs/BootstrapBlazor.DriverJs.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<Project Sdk="Microsoft.NET.Sdk.Razor">

<PropertyGroup>
<RootNamespace>BootstrapBlazor.Components</RootNamespace>
<Version>10.0.1</Version>
Copy link

Copilot AI Nov 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The RootNamespace property was removed in this change. All other components in the repository (e.g., BootstrapBlazor.Chart, BootstrapBlazor.Authenticator, BootstrapBlazor.BaiduOcr) maintain <RootNamespace>BootstrapBlazor.Components</RootNamespace> in their project files. Unless this removal is intentional, the property should be retained for consistency across the codebase.

Suggested change
<Version>10.0.1</Version>
<Version>10.0.1</Version>
<RootNamespace>BootstrapBlazor.Components</RootNamespace>

Copilot uses AI. Check for mistakes.
</PropertyGroup>

<PropertyGroup>
Expand Down
19 changes: 16 additions & 3 deletions src/components/BootstrapBlazor.DriverJs/Components/DriverJs.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Copyright (c) BootstrapBlazor & Argo Zhang (argo@live.ca). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/

Expand Down Expand Up @@ -67,7 +67,7 @@ public async Task Start(int? index = 0)
{
string? ret = null;

if (Config?.OnDestroyStartedAsync != null)
if (Config is { OnDestroyStartedAsync: not null })
{
ret = await Config.OnDestroyStartedAsync(Config, index);
}
Expand All @@ -81,12 +81,25 @@ public async Task Start(int? index = 0)
[JSInvokable]
public async Task OnDestroyed()
{
if (Config?.OnDestroyedAsync != null)
if (Config is { OnDestroyedAsync: not null })
{
await Config.OnDestroyedAsync();
}
}
Comment on lines 81 to 88
Copy link
Copy Markdown

@sourcery-ai sourcery-ai Bot Nov 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion (bug_risk): Consider handling exceptions in OnDestroyed to avoid unhandled errors.

Because OnDestroyed is called from JavaScript, exceptions here may propagate unexpectedly. Use a try-catch around the await to handle errors and improve robustness.

Suggested change
[JSInvokable]
public async Task OnDestroyed()
{
if (Config?.OnDestroyedAsync != null)
if (Config is { OnDestroyedAsync: not null })
{
await Config.OnDestroyedAsync();
}
}
[JSInvokable]
public async Task OnDestroyed()
{
if (Config is { OnDestroyedAsync: not null })
{
try
{
await Config.OnDestroyedAsync();
}
catch (Exception ex)
{
// TODO: Replace with your preferred logging mechanism
Console.Error.WriteLine($"Exception in OnDestroyed: {ex}");
}
}
}


/// <summary>
/// 点击组件这招回调方法由 JavaScript 调用
Copy link

Copilot AI Nov 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Spelling error in comment: "这招" should likely be "遮罩" (overlay/mask in Chinese).

Suggested change
/// 点击组件这招回调方法由 JavaScript 调用
/// 点击组件遮罩回调方法由 JavaScript 调用

Copilot uses AI. Check for mistakes.
/// </summary>
/// <returns></returns>
[JSInvokable]
public async Task OnOverlayClicked(int index)
{
if (Config is { OnOverlayClickedAsync: not null })
{
await Config.OnOverlayClickedAsync(this, Config, index);
}
}
Comment on lines +95 to +101
Copy link
Copy Markdown

@sourcery-ai sourcery-ai Bot Nov 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion (bug_risk): Consider handling exceptions in OnOverlayClicked to avoid unhandled errors.

Because this method is called from JavaScript, unhandled exceptions may cause unpredictable behavior. Use a try-catch around the await call to handle errors and improve reliability.

Suggested change
public async Task OnOverlayClicked(int index)
{
if (Config is { OnOverlayClickedAsync: not null })
{
await Config.OnOverlayClickedAsync(this, Config, index);
}
}
public async Task OnOverlayClicked(int index)
{
if (Config is { OnOverlayClickedAsync: not null })
{
try
{
await Config.OnOverlayClickedAsync(this, Config, index);
}
catch (Exception ex)
{
// TODO: Replace with your logging mechanism if available
Console.Error.WriteLine($"Error in OnOverlayClicked: {ex}");
}
}
}


/// <summary>
/// Starts at step 0
/// </summary>
Expand Down
10 changes: 8 additions & 2 deletions src/components/BootstrapBlazor.DriverJs/Components/DriverJs.razor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { driver } from "../driver.js"
import { driver } from "../driver.js.mjs"
import { addLink } from '../../BootstrapBlazor/modules/utility.js'
import Data from "../../BootstrapBlazor/modules/data.js"

Expand All @@ -18,7 +18,7 @@ export function start(id, options, config) {
if (d) {
d.config = config;
const { index } = config;
const { hookDestroyStarted, hookDestroyed } = options;
const { hookDestroyStarted, hookDestroyed, overlayClickBehavior } = options;
if (hookDestroyStarted) {
delete options.hookDestroyStarted;
options.onDestroyStarted = async (el, step, { state }) => {
Expand All @@ -34,6 +34,12 @@ export function start(id, options, config) {
d.invoke.invokeMethodAsync("OnDestroyed");
};
}
if (overlayClickBehavior === "function") {
options.overlayClickBehavior = async (el, step, { state }) => {
await d.invoke.invokeMethodAsync("OnOverlayClicked", state.activeIndex)
Comment on lines +37 to +39
Copy link
Copy Markdown

@sourcery-ai sourcery-ai Bot Nov 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion: The overlayClickBehavior check for "function" is string-based; consider aligning with a more robust type or value check.

Using a constant or enum for 'function' will help prevent typos and make future updates safer.

Suggested implementation:

        const OVERLAY_CLICK_BEHAVIOR_FUNCTION = "function";
        d.config = config;
        const { index } = config;
        const { hookDestroyStarted, hookDestroyed, overlayClickBehavior } = options;
        if (overlayClickBehavior === OVERLAY_CLICK_BEHAVIOR_FUNCTION) {
            options.overlayClickBehavior = async (el, step, { state }) => {
                await d.invoke.invokeMethodAsync("OnOverlayClicked", state.activeIndex)
            };
        }

Copy link

Copilot AI Nov 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing semicolon at the end of the statement. While JavaScript has automatic semicolon insertion (ASI), it's a best practice to include semicolons explicitly for consistency with the rest of the codebase (see lines 28, 34, 35, etc.).

Suggested change
await d.invoke.invokeMethodAsync("OnOverlayClicked", state.activeIndex)
await d.invoke.invokeMethodAsync("OnOverlayClicked", state.activeIndex);

Copilot uses AI. Check for mistakes.
};
}

const driverObj = driver(options);
d.driver = driverObj;
driverObj.drive(index);
Expand Down
17 changes: 16 additions & 1 deletion src/components/BootstrapBlazor.DriverJs/Components/DriverJsConfig.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Copyright (c) BootstrapBlazor & Argo Zhang (argo@live.ca). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/

Expand Down Expand Up @@ -142,4 +142,19 @@ public class DriverJsConfig
/// </summary>
[JsonIgnore]
public Func<Task>? OnDestroyedAsync { get; set; }

/// <summary>
/// 获得/设置 点击遮罩行为 close nextStep function 默认 close
/// </summary>
[JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
public string? OverlayClickBehavior { get; set; }
Copy link
Copy Markdown

@sourcery-ai sourcery-ai Bot Nov 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion: OverlayClickBehavior is a string; consider using an enum for clarity and type safety.

Strings are prone to errors and complicate future changes; enums improve safety and code clarity.

Suggested implementation:

    /// <summary>
    /// 获得/设置 点击遮罩行为，默认 Close。可选值: Close, NextStep, Function
    /// </summary>
    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
    public OverlayClickBehaviorType? OverlayClickBehavior { get; set; }

    /// <summary>
    /// 点击遮罩行为枚举
    /// </summary>
    public enum OverlayClickBehaviorType
    {
        Close,
        NextStep,
        Function
    }

If this property is serialized/deserialized elsewhere, you may need to update those usages to handle the enum type instead of string. If you use this property in other files, update their references to use the enum values (e.g., OverlayClickBehaviorType.Close instead of "close").


[JsonInclude]
private string OverlayClickCallbackMethod => nameof(OnOverlayClickedAsync);
Comment on lines +152 to +153
Copy link

Copilot AI Nov 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The OverlayClickCallbackMethod property doesn't appear to be used anywhere in the JavaScript interop code (DriverJs.razor.js). The JavaScript checks overlayClickBehavior === "function" directly on line 37. This property either should be removed if unused, or the JavaScript should be using it to determine which method to invoke. Consider aligning with the existing pattern used for HookDestroyStarted and HookDestroyed (lines 128-129, 137-138) which use boolean properties.

Suggested change
[JsonInclude]
private string OverlayClickCallbackMethod => nameof(OnOverlayClickedAsync);

Copilot uses AI. Check for mistakes.

/// <summary>
/// 获得/设置 组件销毁前回调方法名称
Copy link

Copilot AI Nov 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The documentation comment "获得/设置 组件销毁前回调方法名称" (Gets/sets the method name before component destruction) is incorrect. This property is for overlay click callback, not destruction callback. The comment should describe that this is the callback method for handling overlay click events.

Suggested change
/// 获得/设置 组件销毁前回调方法名称
/// 获得/设置 点击遮罩时的回调方法

Copilot uses AI. Check for mistakes.
/// </summary>
[JsonIgnore]
public Func<DriverJs, DriverJsConfig, int, Task>? OnOverlayClickedAsync { get; set; }
}
Loading
Loading