Add signature navigation to PDF viewer toolbar
This commit introduces a signature navigation feature in the PDF viewer: - Removed zoom preset buttons to make space for the new toolbar. - Added "Previous" and "Next" buttons for navigating signatures. - Displayed a signature counter with signed/total signatures and a badge for unsigned signatures or completion status. - Introduced state variables (`_totalSignatures`, `_signedSignatures`, `_unsignedSignatures`) to track signature progress. - Implemented methods for navigating signatures (`GoToPreviousSignature`, `GoToNextSignature`, `UpdateSignatureCounterAsync`). - Enhanced JavaScript with `getSignatureNavState`, `goToNextSignature`, and `goToPreviousSignature` for navigation logic. - Updated CSS for the toolbar and signature navigation, including responsive adjustments and hover effects. - Improved error handling during signature counter updates. - Updated `RenderSignatureButtonsAsync` to refresh the signature counter after rendering. These changes improve the user experience by enabling efficient navigation and tracking of signatures in the PDF viewer.
This commit is contained in:
@@ -455,6 +455,150 @@ window.pdfViewer = {
|
||||
|
||||
// Signature button functionality
|
||||
signatureButtons: [],
|
||||
appliedSignatures: [], // Track which signatures have been applied
|
||||
|
||||
/**
|
||||
* Gets signature navigation state (for toolbar display)
|
||||
* @returns {object} { total, signed, unsigned, currentIndex, canGoPrev, canGoNext }
|
||||
*/
|
||||
getSignatureNavState() {
|
||||
const total = this.signatureButtons.length + this.appliedSignatures.length;
|
||||
const signed = this.appliedSignatures.length;
|
||||
const unsigned = this.signatureButtons.length;
|
||||
|
||||
// Find index of first unsigned signature button (if any)
|
||||
let currentIndex = -1;
|
||||
if (unsigned > 0) {
|
||||
currentIndex = signed; // 0-based index of next signature to sign
|
||||
}
|
||||
|
||||
return {
|
||||
total: total,
|
||||
signed: signed,
|
||||
unsigned: unsigned,
|
||||
currentIndex: currentIndex,
|
||||
canGoPrev: signed > 0, // Can go to previous applied signature
|
||||
canGoNext: unsigned > 0 // Can go to next unsigned signature
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* Navigates to the next unsigned signature button.
|
||||
* Scrolls to button position and changes page if necessary.
|
||||
*/
|
||||
async goToNextSignature(dotNetRef) {
|
||||
if (this.signatureButtons.length === 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Get first unsigned signature button
|
||||
const button = this.signatureButtons[0];
|
||||
const signatureId = parseInt(button.getAttribute('data-signature-id'));
|
||||
|
||||
// Find signature in original list to get page number
|
||||
const signature = this._allSignatures?.find(s => s.id === signatureId);
|
||||
if (!signature) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Change page if needed
|
||||
if (signature.page !== this.pageNum) {
|
||||
await this.goToPage(signature.page);
|
||||
|
||||
// Wait for page render and button re-creation
|
||||
await new Promise(resolve => setTimeout(resolve, 300));
|
||||
|
||||
// Re-find button after page change
|
||||
const newButton = this.signatureButtons.find(btn =>
|
||||
parseInt(btn.getAttribute('data-signature-id')) === signatureId);
|
||||
|
||||
if (newButton) {
|
||||
this.scrollToButton(newButton);
|
||||
}
|
||||
} else {
|
||||
this.scrollToButton(button);
|
||||
}
|
||||
|
||||
// Notify Blazor to update counter
|
||||
if (dotNetRef) {
|
||||
dotNetRef.invokeMethodAsync('OnSignatureNavChanged');
|
||||
}
|
||||
|
||||
return true;
|
||||
},
|
||||
|
||||
/**
|
||||
* Navigates to the previous signature (last applied one).
|
||||
* Scrolls to signature position and changes page if necessary.
|
||||
*/
|
||||
async goToPreviousSignature(dotNetRef) {
|
||||
if (this.appliedSignatures.length === 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Get last applied signature
|
||||
const lastSig = this.appliedSignatures[this.appliedSignatures.length - 1];
|
||||
|
||||
// Change page if needed
|
||||
if (lastSig.page !== this.pageNum) {
|
||||
await this.goToPage(lastSig.page);
|
||||
await new Promise(resolve => setTimeout(resolve, 300));
|
||||
}
|
||||
|
||||
// Find applied signature container
|
||||
const container = document.querySelector(`.applied-signature[data-signature-id="${lastSig.id}"]`);
|
||||
if (container) {
|
||||
this.scrollToElement(container);
|
||||
}
|
||||
|
||||
// Notify Blazor
|
||||
if (dotNetRef) {
|
||||
dotNetRef.invokeMethodAsync('OnSignatureNavChanged');
|
||||
}
|
||||
|
||||
return true;
|
||||
},
|
||||
|
||||
/**
|
||||
* Scrolls to center a button in the viewport
|
||||
*/
|
||||
scrollToButton(button) {
|
||||
const wrapper = this.canvas.closest('.pdf-canvas-wrapper');
|
||||
if (!wrapper) return;
|
||||
|
||||
const buttonRect = button.getBoundingClientRect();
|
||||
const wrapperRect = wrapper.getBoundingClientRect();
|
||||
|
||||
// Calculate scroll to center button
|
||||
const scrollLeft = wrapper.scrollLeft + buttonRect.left - wrapperRect.left - (wrapperRect.width / 2) + (buttonRect.width / 2);
|
||||
const scrollTop = wrapper.scrollTop + buttonRect.top - wrapperRect.top - (wrapperRect.height / 2) + (buttonRect.height / 2);
|
||||
|
||||
wrapper.scrollTo({
|
||||
left: scrollLeft,
|
||||
top: scrollTop,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Scrolls to center an element in the viewport
|
||||
*/
|
||||
scrollToElement(element) {
|
||||
const wrapper = this.canvas.closest('.pdf-canvas-wrapper');
|
||||
if (!wrapper) return;
|
||||
|
||||
const elemRect = element.getBoundingClientRect();
|
||||
const wrapperRect = wrapper.getBoundingClientRect();
|
||||
|
||||
const scrollLeft = wrapper.scrollLeft + elemRect.left - wrapperRect.left - (wrapperRect.width / 2) + (elemRect.width / 2);
|
||||
const scrollTop = wrapper.scrollTop + elemRect.top - wrapperRect.top - (wrapperRect.height / 2) + (elemRect.height / 2);
|
||||
|
||||
wrapper.scrollTo({
|
||||
left: scrollLeft,
|
||||
top: scrollTop,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Renders clickable signature buttons on the PDF canvas.
|
||||
@@ -471,6 +615,7 @@ window.pdfViewer = {
|
||||
}
|
||||
|
||||
this.dotNetReference = dotNetRef;
|
||||
this._allSignatures = signatures; // Store for navigation
|
||||
|
||||
try {
|
||||
// Filter signatures for current page
|
||||
@@ -629,12 +774,23 @@ window.pdfViewer = {
|
||||
const left = button.style.left;
|
||||
const top = button.style.top;
|
||||
|
||||
// Find signature data for tracking
|
||||
const signature = this._allSignatures?.find(s => s.id === signatureId);
|
||||
|
||||
// Remove button
|
||||
if (button.parentNode) {
|
||||
button.parentNode.removeChild(button);
|
||||
}
|
||||
this.signatureButtons.splice(buttonIndex, 1);
|
||||
|
||||
// Track applied signature
|
||||
if (signature) {
|
||||
this.appliedSignatures.push({
|
||||
id: signatureId,
|
||||
page: signature.page
|
||||
});
|
||||
}
|
||||
|
||||
// Create signature container
|
||||
const signatureContainer = document.createElement('div');
|
||||
signatureContainer.className = 'applied-signature';
|
||||
|
||||
Reference in New Issue
Block a user