diff --git a/src/components/BootstrapBlazor.PdfReader/BootstrapBlazor.PdfReader.csproj b/src/components/BootstrapBlazor.PdfReader/BootstrapBlazor.PdfReader.csproj index b7cc7d4e..7e752e89 100644 --- a/src/components/BootstrapBlazor.PdfReader/BootstrapBlazor.PdfReader.csproj +++ b/src/components/BootstrapBlazor.PdfReader/BootstrapBlazor.PdfReader.csproj @@ -1,7 +1,7 @@  - 10.0.4-beta02 + 10.0.4-beta03 diff --git a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor index ba893759..ddc8d7be 100644 --- a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor +++ b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor @@ -3,10 +3,10 @@ @inherits BootstrapModuleComponentBase
-
- @if (ShowToolbar) - { -
+ @if (ShowToolbar) + { +
+
@if (EnableThumbnails) {
@@ -14,13 +14,17 @@ @_docTitle
- / -
-
-
- -
-
+
+ / +
+
+
+
+
+ +
+
+
@@ -28,7 +32,7 @@ -
+
@Localizer["PageActual"]
@Localizer["FitWidth"]
@Localizer["FitHeight"]
@@ -38,7 +42,7 @@
-
+
@if (ShowDownload) {
@@ -51,7 +55,7 @@ -
+
@if (ShowTwoPagesOneView) {
@@ -79,8 +83,8 @@
- } -
+
+ }
@if (EnableThumbnails) { diff --git a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.cs b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.cs index 87d47be4..7e646a0c 100644 --- a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.cs +++ b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.cs @@ -135,7 +135,7 @@ public partial class PdfReader .AddClassFromAttributes(AdditionalAttributes) .Build(); - private string? ViewBodyString => CssBuilder.Default("bb-view-body") + private string? ViewBodyString => CssBuilder.Default("bb-view-group bb-view-toolbar-main") .AddClass("fit-width", FitMode == PdfReaderFitMode.PageHeight) .Build(); diff --git a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.css b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.css index 9b1b7eb1..aad63ad5 100644 --- a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.css +++ b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.css @@ -27,10 +27,13 @@ --bs-dropdown-link-active-color: var(--bs-dropdown-color); } -.bb-view-title { +.bb-view-group { display: flex; align-items: center; flex-wrap: nowrap; +} + +.bb-view-title { padding: 0 1rem; } @@ -69,26 +72,22 @@ padding-inline-end: .5rem; } -.bb-view-body { +.bb-view-toolbar-main { + justify-content: center; flex: 1; min-width: 0; width: 1%; - display: flex; - flex-wrap: nowrap; - align-items: center; - justify-content: center; - background-color: var(--bb-toolbar-background-color); } - .bb-view-body.fit-width .bb-view-fit-height { + .bb-view-toolbar-main.fit-width .bb-view-fit-height { display: none; } - .bb-view-body.fit-width .bb-view-fit-width { + .bb-view-toolbar-main.fit-width .bb-view-fit-width { display: block; } - .bb-view-body .bb-view-fit-width { + .bb-view-toolbar-main .bb-view-fit-width { display: none; } @@ -125,9 +124,6 @@ } .bb-view-controls { - display: flex; - align-items: center; - justify-content: center; padding: 0 1rem; } diff --git a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.js b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.js index f253559e..02a2737c 100644 --- a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.js +++ b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.js @@ -20,33 +20,10 @@ export async function init(id, invoke, options) { return; } - const loadingTask = pdfjsLib.getDocument(options); - loadingTask.onProgress = function (progressData) { - - }; - - loadingTask.onPassword = function (updatePassword, reason) { - if (reason === pdfjsLib.PasswordResponses.NEED_PASSWORD) { - - } - else if (reason === pdfjsLib.PasswordResponses.INCORRECT_PASSWORD) { - - } - }; - - const container = el.querySelector(".bb-view-container"); - const eventBus = new pdfjsViewer.EventBus(); - const pdfViewer = new pdfjsViewer.PDFViewer({ - container, - eventBus - }); - - addEventListener(el, pdfViewer, eventBus, invoke, options); - - const pdfDocument = await loadingTask.promise; - pdfViewer.setDocument(pdfDocument); + const pdfViewer = await loadPdf(el, invoke, options); + const observer = setObserver(el); - Data.set(id, { el, pdfViewer }); + Data.set(id, { el, pdfViewer, observer }); } export function setScaleValue(id, value) { @@ -86,6 +63,107 @@ export function resetThumbnails(id) { } } +const loadPdf = async (el, invoke, options) => { + const loadingTask = pdfjsLib.getDocument(options); + loadingTask.onProgress = function (progressData) { + + }; + + loadingTask.onPassword = function (updatePassword, reason) { + if (reason === pdfjsLib.PasswordResponses.NEED_PASSWORD) { + + } + else if (reason === pdfjsLib.PasswordResponses.INCORRECT_PASSWORD) { + + } + }; + + const container = el.querySelector(".bb-view-container"); + const eventBus = new pdfjsViewer.EventBus(); + const pdfViewer = new pdfjsViewer.PDFViewer({ + container, + eventBus + }); + + addEventListener(el, pdfViewer, eventBus, invoke, options); + + const pdfDocument = await loadingTask.promise; + pdfViewer.setDocument(pdfDocument); + + return pdfViewer; +} + +const setObserver = el => { + const title = el.querySelector(".bb-view-title"); + const subject = el.querySelector(".bb-view-subject"); + const groupPage = el.querySelector(".bb-view-group-page"); + const groupScale = el.querySelector(".bb-view-group-scale"); + const groupRotate = el.querySelector(".bb-view-group-rotate"); + const controls = el.querySelector(".bb-view-controls"); + + el.widths = [subject.offsetWidth, groupRotate.offsetWidth, groupScale.offsetWidth, groupPage.offsetWidth, controls.offsetWidth]; + + const increaseSpace = toolbar => { + if (controls.classList.contains('d-none')) { + if (title.offsetWidth + el.widths[4] + groupPage.offsetWidth + groupScale.offsetWidth + groupRotate.offsetWidth + controls.offsetWidth < toolbar.offsetWidth) { + controls.classList.remove("d-none"); + } + } + else if (groupPage.classList.contains('d-none')) { + if (title.offsetWidth + el.widths[3] + groupPage.offsetWidth + groupScale.offsetWidth + groupRotate.offsetWidth + controls.offsetWidth < toolbar.offsetWidth) { + groupPage.classList.remove("d-none"); + } + } + else if (groupScale.classList.contains('d-none')) { + if (title.offsetWidth + el.widths[2] + groupPage.offsetWidth + groupScale.offsetWidth + groupRotate.offsetWidth + controls.offsetWidth < toolbar.offsetWidth) { + groupScale.classList.remove("d-none"); + } + } + else if (groupRotate.classList.contains('d-none')) { + if (title.offsetWidth + el.widths[1] + groupPage.offsetWidth + groupScale.offsetWidth + groupRotate.offsetWidth + controls.offsetWidth < toolbar.offsetWidth) { + groupRotate.classList.remove("d-none"); + } + } + else if (subject.classList.contains("d-none")) { + if (title.offsetWidth + el.widths[0] + groupPage.offsetWidth + groupScale.offsetWidth + groupRotate.offsetWidth + controls.offsetWidth < toolbar.offsetWidth) { + subject.classList.remove("d-none"); + } + } + } + const decreaseSpace = toolbar => { + while (title.offsetWidth + groupPage.offsetWidth + groupScale.offsetWidth + groupRotate.offsetWidth + controls.offsetWidth > toolbar.offsetWidth) { + if (subject.classList.contains("d-none") === false) { + subject.classList.add("d-none"); + } + else if (groupRotate.classList.contains('d-none') === false) { + groupRotate.classList.add("d-none"); + } + else if (groupScale.classList.contains('d-none') === false) { + groupScale.classList.add("d-none"); + } + else if (groupPage.classList.contains('d-none') === false) { + groupPage.classList.add("d-none"); + } + else if (controls.classList.contains('d-none') === false) { + controls.classList.add("d-none"); + } + } + } + + const observer = new ResizeObserver(entries => { + const toolbar = el.querySelector(".bb-view-toolbar"); + if (toolbar === null) { + return; + } + + decreaseSpace(toolbar); + increaseSpace(toolbar); + }); + + observer.observe(el); + return observer; +} + const addEventListener = (el, pdfViewer, eventBus, invoke, options) => { eventBus.on("pagesinit", async () => { if (options.fitMode) { @@ -303,9 +381,14 @@ const printPdf = url => { } export function dispose(id) { + const { el, observer } = Data.get(id); Data.remove(id); - const el = document.getElementById(id); + if (observer) { + observer.disconnect(); + observer = null; + } + if (el) { const minus = el.querySelector(".bb-page-minus"); const plus = el.querySelector(".bb-page-plus"); diff --git a/src/components/BootstrapBlazor.PdfReader/wwwroot/css/pdf_viewer.css b/src/components/BootstrapBlazor.PdfReader/wwwroot/css/pdf_viewer.css index ec06c657..85ea04d8 100644 --- a/src/components/BootstrapBlazor.PdfReader/wwwroot/css/pdf_viewer.css +++ b/src/components/BootstrapBlazor.PdfReader/wwwroot/css/pdf_viewer.css @@ -141,30 +141,6 @@ margin-inline: 5px; } -.pdfViewer .page.loadingIcon::after { - position: absolute; - top: 0; - left: 0; - content: ""; - width: 100%; - height: 100%; - background: url("images/loading-icon.gif") center no-repeat; - display: none; - transition-property: display; - transition-delay: var(--loading-icon-delay); - z-index: 5; - contain: strict; -} - -.pdfViewer .page.loading::after { - display: block; -} - -.pdfViewer .page:not(.loading)::after { - transition-property: none; - display: none; -} - .pdfPresentationMode .pdfViewer { padding-bottom: 0; }