Skip to content

feat(Utility): add custom changed.bb.theme event #5709

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.

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
merged 4 commits into from
Mar 25, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
22 changes: 0 additions & 22 deletions src/BootstrapBlazor.Server/Components/Components/Pre.razor.cs
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,6 @@ public partial class Pre
[NotNull]
private CodeSnippetService? CodeSnippetService { get; set; }

[Inject]
[NotNull]
private IThemeProvider? ThemeProviderService { get; set; }

/// <summary>
/// 获得/设置 子组件 CodeFile 为空时生效
/// </summary>
Expand Down Expand Up @@ -71,16 +67,6 @@ public partial class Pre

private string? CopiedText { get; set; }

/// <summary>
/// <inheritdoc/>
/// </summary>
protected override void OnInitialized()
{
base.OnInitialized();

ThemeProviderService.ThemeChangedAsync += OnThemeChanged;
}

/// <summary>
/// <inheritdoc/>
/// </summary>
Expand Down Expand Up @@ -203,12 +189,4 @@ private string FindCodeSnippetByName(string code)

[GeneratedRegex(@"<Tips[\s\S]*>[\s\S]*?</Tips>")]
private static partial Regex TipsRegex();

private async Task OnThemeChanged(string themeName)
{
if (themeName == "light" || themeName == "dark")
{
await InvokeVoidAsync("switchTheme", themeName);
}
}
}
22 changes: 18 additions & 4 deletions src/BootstrapBlazor.Server/Components/Components/Pre.razor.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { copy, getDescribedElement, addLink, removeLink, addScript, getHeight, getPreferredTheme } from "../../_content/BootstrapBlazor/modules/utility.js"
import { copy, getDescribedElement, addLink, removeLink, addScript, getHeight, getPreferredTheme, registerBootstrapBlazorModule } from "../../_content/BootstrapBlazor/modules/utility.js"
import EventHandler from "../../_content/BootstrapBlazor/modules/event-handler.js"

export async function init(id, title, assetRoot) {
Expand Down Expand Up @@ -48,6 +48,15 @@ export async function init(id, title, assetRoot) {
preElement.style.maxHeight = `${preHeight}px`
})
}

registerBootstrapBlazorModule('Pre', id, () => {
EventHandler.on(document, 'changed.bb.theme', updateTheme);
});
}

const updateTheme = e => {
const theme = e.theme;
switchTheme(theme);
}

export async function highlight(id) {
Expand Down Expand Up @@ -96,7 +105,12 @@ export function dispose(id) {
return
}

EventHandler.off(el, 'click', '.btn-copy')
EventHandler.off(el, 'click', '.btn-plus')
EventHandler.off(el, 'click', '.btn-minus')
EventHandler.off(el, 'click', '.btn-copy');
EventHandler.off(el, 'click', '.btn-plus');
EventHandler.off(el, 'click', '.btn-minus');

const { Pre } = window.BootstrapBlazor;
Pre.dispose(id, () => {
EventHandler.off(document, 'changed.bb.theme', updateTheme);
});
}
2 changes: 1 addition & 1 deletion src/BootstrapBlazor/wwwroot/modules/base-popover.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const Popover = {
initCallback: null,
hideCallback: null
},
...(config ?? {})
...(config || {})
}
const createPopover = () => {
if (!popover.isDisabled()) {
Expand Down
5 changes: 4 additions & 1 deletion src/BootstrapBlazor/wwwroot/modules/utility.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
const vibrate = () => {
import EventHandler from "./event-handler.js"

const vibrate = () => {
if ('vibrate' in window.navigator) {
window.navigator.vibrate([200, 100, 200])
const handler = window.setTimeout(function () {
Expand Down Expand Up @@ -754,6 +756,7 @@ export function setTheme(theme, sync) {
})
saveTheme(theme);
}
EventHandler.trigger(document, 'changed.bb.theme', { theme: theme });
}

export function setActiveTheme(el, activeItem) {
Expand Down