refactor: 代码兼容演示模式

Author: ArgoZhang

src/components/BootstrapBlazor.PdfReader/BootstrapBlazor.PdfReader.csproj

@@ -17,7 +17,11 @@
   </ItemGroup>
 
   <ItemGroup>
-    <PackageReference Include="BootstrapBlazor" Version="$(BBVersion)" />
+    <!--<PackageReference Include="BootstrapBlazor" Version="$(BBVersion)" />-->
+  </ItemGroup>
+
+  <ItemGroup>
+    <ProjectReference Include="..\..\..\..\BootstrapBlazor\src\BootstrapBlazor\BootstrapBlazor.csproj" />
   </ItemGroup>
 
   <ItemGroup>

src/components/BootstrapBlazor.PdfReader/PdfReader.razor

@@ -50,13 +50,25 @@
                     <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
                         <i class="@MoreButtonIcon"></i>
                     </button>
-                    <div class="dropdown-menu shadow dropdown-menu-end">
+                    <div class="dropdown-menu shadow dropdown-menu-end bb-view-dropdown-menu">
                         @if (ShowTwoPagesOneView)
                         {
-                            <div class="dropdown-item dropdown-item-pages" @onclick="OnToggleTwoPagesOneView"><i class="@_twoPagesOneViewIcon"></i><span>Two pages on view</span></div>
+                            <div class="dropdown-item dropdown-item-pages">
+                                <i class="@_dropdownItemCheckIcon"></i>
+                                <i class="@_dropdownItemDefaultIcon"></i>
+                                <span>Two pages on view</span>
+                            </div>
                             <Divider></Divider>
                         }
-                        <div class="dropdown-item"><i class="fa-solid fa-fw"></i><span>Document properties</span></div>
+                        <div class="dropdown-item dropdown-item-presentation">
+                            <i class="@_dropdownItemCheckIcon"></i>
+                            <i class="@_dropdownItemDefaultIcon"></i>
+                            <span>Presentation Mode</span>
+                        </div>
+                        <div class="dropdown-item dropdown-item-doc">
+                            <i class="@_dropdownItemDefaultIcon"></i>
+                            <span>Document properties</span>
+                        </div>
                     </div>
                 </div>
             </div>

src/components/BootstrapBlazor.PdfReader/PdfReader.razor.cs

@@ -139,9 +139,8 @@ public partial class PdfReader
     private uint _currentPage;
     private string? _url;
     private string? _currentScale;
-    private bool _enableTwoPagesOneView;
-    private bool _showTwoPagesOneViewButton;
-    private string? _twoPagesOneViewIcon;
+    private string? _dropdownItemCheckIcon;
+    private string? _dropdownItemDefaultIcon;
 
     private string CurrentPageString
     {
@@ -182,14 +181,6 @@ private void SetCurrentScale(string value)
         }
     }
 
-    private void OnToggleTwoPagesOneView()
-    {
-        _enableTwoPagesOneView = !_enableTwoPagesOneView;
-        EnableTwoPagesOneView = _enableTwoPagesOneView;
-
-        _twoPagesOneViewIcon = _enableTwoPagesOneView ? "fa-solid fa-fw fa-check" : "fa-solid fa-fw";
-    }
-
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
@@ -198,7 +189,8 @@ protected override void OnParametersSet()
         base.OnParametersSet();
 
         MoreButtonIcon ??= "fa-solid fa-fw fa-ellipsis-vertical";
-        _twoPagesOneViewIcon ??= "fa-solid fa-fw";
+        _dropdownItemCheckIcon ??= "dropdown-item-check fa-solid fa-fw fa-check";
+        _dropdownItemDefaultIcon ??= "dropdown-item-icon fa-solid fa-fw";
 
         if (CurrentPage == 0)
         {
@@ -222,8 +214,6 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
             _currentPage = CurrentPage;
             _url = Url;
             _currentScale = CurrentScale;
-            _enableTwoPagesOneView = EnableTwoPagesOneView;
-            _showTwoPagesOneViewButton = ShowTwoPagesOneView;
         }
 
         if (_url != Url)
@@ -247,16 +237,6 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
             _currentScale = CurrentScale;
             await InvokeVoidAsync("scale", Id, _currentScale);
         }
-        if (_enableTwoPagesOneView != EnableTwoPagesOneView)
-        {
-            _enableTwoPagesOneView = EnableTwoPagesOneView;
-            await InvokeVoidAsync("setPages", Id, _enableTwoPagesOneView);
-        }
-        if (_showTwoPagesOneViewButton != ShowTwoPagesOneView)
-        {
-            _showTwoPagesOneViewButton = ShowTwoPagesOneView;
-            await InvokeVoidAsync("setPages", Id, _enableTwoPagesOneView);
-        }
     }
 
     /// <summary>

src/components/BootstrapBlazor.PdfReader/PdfReader.razor.css

@@ -26,6 +26,11 @@
         content: none;
     }
 
+    .bb-view-toolbar .dropdown-menu {
+        --bs-dropdown-link-active-bg: transparent;
+        --bs-dropdown-link-active-color: var(--bs-dropdown-color);
+    }
+
 .bb-view-title {
     display: flex;
     align-items: center;
@@ -134,6 +139,18 @@
         padding: 7px;
     }
 
+    .bb-view-controls .dropdown-item .dropdown-item-check {
+        display: none;
+    }
+
+    .bb-view-controls .dropdown-item.active .dropdown-item-check {
+        display: inline-block;
+    }
+
+    .bb-view-controls .dropdown-item.active .dropdown-item-icon {
+        display: none;
+    }
+
 .bb-view-main {
     display: flex;
     width: 100%;

src/components/BootstrapBlazor.PdfReader/PdfReader.razor.js

@@ -81,34 +81,6 @@ export function scale(id, scale) {
     }
 }
 
-export function setPages(id, enableTwoPagesOneView) {
-    const { el, pdfViewer } = Data.get(id);
-    if (pdfViewer) {
-        if (enableTwoPagesOneView) {
-            pdfViewer.spreadMode = 1;
-        }
-        else {
-            pdfViewer.spreadMode = 0;
-        }
-    }
-
-    resetTwoPagesOneView(el, pdfViewer);
-}
-
-const resetTwoPagesOneView = (el, pdfViewer) => {
-    const twoPagesOneView = el.querySelector(".dropdown-item-pages");
-    if (twoPagesOneView) {
-        EventHandler.on(twoPagesOneView, "click", e => {
-            if (pdfViewer.spreadMode === 0) {
-                pdfViewer.spreadMode = 1;
-            }
-            else {
-                pdfViewer.spreadMode = 0;
-            }
-        });
-    }
-}
-
 const addEventListener = (el, pdfViewer, eventBus, invoke, options) => {
     eventBus.on("pagesinit", async () => {
         if (options.fitMode) {
@@ -141,10 +113,30 @@ const addEventListener = (el, pdfViewer, eventBus, invoke, options) => {
         }
 
         const controls = el.querySelector(".bb-view-controls");
-        EventHandler.on(controls, "click", ".bb-view-print", e => {
+        EventHandler.on(controls, "click", ".bb-view-print", async e => {
             printPdf(options.url);
             await invoke.invokeMethodAsync("Printing");
         });
+        EventHandler.on(controls, "click", ".dropdown-item-pages", async e => {
+            e.delegateTarget.classList.toggle("active");
+
+            if (pdfViewer.spreadMode !== 1) {
+                pdfViewer.spreadMode = 1;
+            }
+            else {
+                pdfViewer.spreadMode = 0;
+            }
+        });
+        EventHandler.on(controls, "click", ".dropdown-item-presentation", async e => {
+            e.delegateTarget.classList.toggle("active");
+
+            //if (pdfViewer.isInPresentationMode) {
+            //    document.exitFullscreen();
+            //}
+            //else {
+            //    el.requestFullscreen();
+            //}
+        });
     })
 
     eventBus.on("pagechanging", async evt => {
@@ -179,9 +171,6 @@ const addEventListener = (el, pdfViewer, eventBus, invoke, options) => {
         const scale = evt.scale * 100;
         scaleEl.value = `${Math.round(scale, 0)}%`;
 
-        const minus = el.querySelector(".bb-page-minus");
-        const plus = el.querySelector(".bb-page-plus");
-
         if (scale === 25) {
             minus.classList.add("disabled");
         }
@@ -197,8 +186,6 @@ const addEventListener = (el, pdfViewer, eventBus, invoke, options) => {
     EventHandler.on(minus, "click", e => updateScale(pdfViewer, e.target, -1));
     EventHandler.on(plus, "click", e => updateScale(pdfViewer, e.target, 1));
 
-    resetTwoPagesOneView(el, pdfViewer);
-
     const thumbnailsToggle = el.querySelector(".bb-view-bar");
     if (thumbnailsToggle) {
         EventHandler.on(thumbnailsToggle, "click", e => {