feat(EmbedPDF): add Theme parameter

Author: ArgoZhang

src/components/BootstrapBlazor.EmbedPDF/EmbedPDF.razor

@@ -1,4 +1,4 @@
 @namespace BootstrapBlazor.Components
 @inherits BootstrapModuleComponentBase
 
-<div @attributes="@AdditionalAttributes" id="@Id" style="@StyleString"></div>
+<div @attributes="@AdditionalAttributes" id="@Id" class="bb-embed-pdf" style="@StyleString"></div>

src/components/BootstrapBlazor.EmbedPDF/EmbedPDF.razor.cs

@@ -20,15 +20,69 @@ public partial class EmbedPDF
     [Parameter]
     public string ViewHeight { get; set; } = "600px";
 
+    /// <summary>
+    /// 获得/设置 标签显示模式 默认值 <see cref="EmbedPDFTabBarMode.Always"/>
+    /// </summary>
+    [Parameter]
+    public EmbedPDFTabBarMode TabBarMode { get; set; } = EmbedPDFTabBarMode.Always;
+
     /// <summary>
     /// 获得/设置 是否显示外边框
     /// </summary>
     [Parameter]
     public bool ShowBorder { get; set; } = true;
 
+    /// <summary>
+    /// 获得/设置 主题样式 默认 <see cref="EmbedPDFTheme.System"/>
+    /// </summary>
+    [Parameter]
+    public EmbedPDFTheme Theme { get; set; }
+
     private string? StyleString => CssBuilder.Default()
         .AddClass("border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); overflow: hidden;", ShowBorder)
         .AddClass($"height: {ViewHeight};", !string.IsNullOrEmpty(ViewHeight))
         .AddStyleFromAttributes(AdditionalAttributes)
         .Build();
+
+    private string? _url;
+    private EmbedPDFTheme _theme;
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <param name="firstRender"></param>
+    /// <returns></returns>
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        await base.OnAfterRenderAsync(firstRender);
+
+        if (firstRender)
+        {
+            _url = Url;
+            _theme = Theme;
+            return;
+        }
+
+        if (_url != Url)
+        {
+            _url = Url;
+            await InvokeVoidAsync("setUrl", Id, _url);
+        }
+        if (_theme != Theme)
+        {
+            _theme = Theme;
+            await InvokeVoidAsync("setTheme", Id, _theme.ToDescriptionString());
+        }
+    }
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <returns></returns>
+    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, new
+    {
+        TabBar = TabBarMode.ToDescriptionString(),
+        Theme = Theme.ToDescriptionString(),
+        Src = Url
+    });
 }

src/components/BootstrapBlazor.EmbedPDF/EmbedPDF.razor.js

@@ -1,23 +1,79 @@
-import EmbedPDF from './embedpdf.js';
+import Data from '../BootstrapBlazor/modules/data.js';
+import EventHandler from "../BootstrapBlazor/modules/event-handler.js"
+import { default as EmbedPDF, UIPlugin } from './embedpdf.js';
+import { getTheme, registerBootstrapBlazorModule } from '../BootstrapBlazor/modules/utility.js'
 
-export function init(id, invoke) {
+export function init(id, invoke, options) {
     const el = document.getElementById(id);
     if (el === null) {
         return null;
     }
 
     const target = el.querySelector('.pdf-viewer');
-    const src = './samples/sample.pdf';
+    const { src, tabBar, theme } = options;
     const wasmUrl = `${location.origin}/_content/BootstrapBlazor.EmbedPDF/pdfium.wasm`;
-    EmbedPDF.init({
+
+    let preference = theme;
+    if (preference === 'system') {
+        preference = getTheme();
+    }
+
+    const viewer = EmbedPDF.init({
         type: 'container',
         target: el,
         src,
         worker: true,
-        tabBar: 'always',
+        tabBar,
         theme: {
-            preference: 'system'
+            preference: preference
         },
         wasmUrl
     });
+
+    registerBootstrapBlazorModule('EmbedPDF', id, () => {
+        EventHandler.on(document, 'changed.bb.theme', updateTheme);
+    });
+
+    Data.set(id, { el, invoke, options, viewer });
+}
+
+export function setUrl(id, url) {
+
+}
+
+export function setTheme(id, theme) {
+    const pdf = Data.get(id);
+    const { viewer } = pdf;
+    if (viewer) {
+        viewer.setTheme(theme);
+    }
+}
+
+export function dispose(id) {
+    const pdf = Data.get(id);
+    Data.remove(id);
+
+    const { EmbedPDF } = window.BootstrapBlazor;
+    if (EmbedPDF) {
+        EmbedPDF.dispose(id, () => {
+            EventHandler.off(document, 'changed.bb.theme', updateTheme);
+        });
+    }
+}
+
+const updateTheme = e => {
+    const theme = e.theme;
+
+    [...document.querySelectorAll('.bb-embed-pdf')].forEach(s => {
+        const id = s.getAttribute('id');
+        if (id) {
+            const pdf = Data.get(id);
+            if (pdf) {
+                const { viewer } = pdf;
+                if (viewer) {
+                    viewer.setTheme(theme);
+                }
+            }
+        }
+    });
 }

src/components/BootstrapBlazor.EmbedPDF/EmbedPDFTabBarMode.cs

@@ -0,0 +1,31 @@
+// 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
+
+using System.ComponentModel;
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// 标签模式
+/// </summary>
+public enum EmbedPDFTabBarMode
+{
+    /// <summary>
+    /// 始终显示
+    /// </summary>
+    [Description("always")]
+    Always,
+
+    /// <summary>
+    /// 多标签模式
+    /// </summary>
+    [Description("multiple")]
+    Multiple,
+
+    /// <summary>
+    /// 不显示
+    /// </summary>
+    [Description("never")]
+    Never
+}

src/components/BootstrapBlazor.EmbedPDF/EmbedPDFTheme.cs

@@ -0,0 +1,31 @@
+// 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
+
+using System.ComponentModel;
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// 主题枚举
+/// </summary>
+public enum EmbedPDFTheme
+{
+    /// <summary>
+    /// 跟随系统
+    /// </summary>
+    [Description("system")]
+    System,
+
+    /// <summary>
+    /// 明亮模式
+    /// </summary>
+    [Description("light")]
+    Light,
+
+    /// <summary>
+    /// 暗黑模式
+    /// </summary>
+    [Description("dark")]
+    Dark
+}