AppStd/EnvelopeGenerator
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Track viewed PDF pages and persist state in sessionStorage

Browse Source 
Added logic to monitor which PDF pages have been viewed by the user. The list of unviewed pages and a flag for all pages viewed are stored in sessionStorage and updated as the user navigates. Changes applied to both ui.js and ui.min.js.
This commit is contained in:
tekh
2026-01-19 17:06:43 +01:00
parent a35f06070a
commit 5a5cbcb14d
2 changed files with 30 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
EnvelopeGenerator.Web/wwwroot/js/ui.js
View File

@@ -17,8 +17,37 @@
return !(annotation.isSignature || annotation.description === 'FRAME')
},
}).then((instance) => {
const totalPages = instance.totalPageCount || 0
const storageKeyAll = 'pspdf_all_pages_rendered'
const storageKeyUnviewed = 'pspdf_unviewed_pages'
let unviewed = totalPages > 0 ? Array.from({ length: totalPages }, (_, i) => i + 1) : []
const saveState = () => {
sessionStorage.setItem(storageKeyUnviewed, JSON.stringify(unviewed))
sessionStorage.setItem(storageKeyAll, JSON.stringify(unviewed.length === 0 && totalPages > 0))
}
const markPageViewed = (pageIndex) => {
const pageNumber = pageIndex + 1
if (pageNumber < 1 || pageNumber > totalPages) return
const idx = unviewed.indexOf(pageNumber)
if (idx >= 0) {
unviewed.splice(idx, 1)
saveState()
}
}
// initial state in session storage
saveState()
// mark the initially visible page
const initialPage = instance.viewState?.currentPageIndex ?? 0
markPageViewed(initialPage)
instance.addEventListener('viewState.currentPageIndex.change', (pageIndex) => {
console.log('Active page:', pageIndex + 1)
markPageViewed(pageIndex)
})
return instance

2
EnvelopeGenerator.Web/wwwroot/js/ui.min.js vendored
View File

@@ -1,4 +1,4 @@
function loadPSPDFKit(n,t,i,r){return PSPDFKit.load({inlineWorkers:!1,locale:r,licenseKey:i,styleSheets:["/css/site.css"],container:t,document:n,annotationPresets:getPresets(),electronicSignatures:{creationModes:["DRAW","TYPE","IMAGE"]},initialViewState:new PSPDFKit.ViewState({sidebarMode:PSPDFKit.SidebarMode.THUMBNAILS}),isEditableAnnotation:function(n){return!(n.isSignature||n.description==="FRAME")}}).then(n=>(n.addEventListener("viewState.currentPageIndex.change",n=>{console.log("Active page:",n+1)}),n))}function addToolbarItems(n,t){var i=n.toolbarItems.filter(n=>allowedToolbarItems.includes(n.type));i=IS_READONLY?i.concat(getReadOnlyItems(t)):i.concat(getWritableItems(t));IS_DESKTOP_SIZE||IS_READONLY||(i=i.concat(getMobileWritableItems(t)));n.setToolbarItems(i)}function getWritableItems(n){return[{type:"custom",id:"button-share",className:"button-share",title:"Teilen",onPress(){n("SHARE")},icon:`<svg width="30" height="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
function loadPSPDFKit(n,t,i,r){return PSPDFKit.load({inlineWorkers:!1,locale:r,licenseKey:i,styleSheets:["/css/site.css"],container:t,document:n,annotationPresets:getPresets(),electronicSignatures:{creationModes:["DRAW","TYPE","IMAGE"]},initialViewState:new PSPDFKit.ViewState({sidebarMode:PSPDFKit.SidebarMode.THUMBNAILS}),isEditableAnnotation:function(n){return!(n.isSignature||n.description==="FRAME")}}).then(n=>{const t=n.totalPageCount||0,f="pspdf_all_pages_rendered",e="pspdf_unviewed_pages";let i=t>0?Array.from({length:t},(n,t)=>t+1):[];const r=()=>{sessionStorage.setItem(e,JSON.stringify(i)),sessionStorage.setItem(f,JSON.stringify(i.length===0&&t>0))},u=n=>{const u=n+1;if(!(u<1)&&!(u>t)){const f=i.indexOf(u);f>=0&&(i.splice(f,1),r())}};r();const o=n.viewState?.currentPageIndex??0;return u(o),n.addEventListener("viewState.currentPageIndex.change",n=>{console.log("Active page:",n+1),u(n)}),n})}function addToolbarItems(n,t){var i=n.toolbarItems.filter(n=>allowedToolbarItems.includes(n.type));i=IS_READONLY?i.concat(getReadOnlyItems(t)):i.concat(getWritableItems(t));IS_DESKTOP_SIZE||IS_READONLY||(i=i.concat(getMobileWritableItems(t)));n.setToolbarItems(i)}function getWritableItems(n){return[{type:"custom",id:"button-share",className:"button-share",title:"Teilen",onPress(){n("SHARE")},icon:`<svg width="30" height="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 13V17.5C20 20.5577 16 20.5 12 20.5C8 20.5 4 20.5577 4 17.5V13M12 3L12 15M12 3L16 7M12 3L8 7" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>`},{type:"custom",id:"button-logout",className:"button-logout",title:"logout",onPress(){n("LOGOUT")},icon:`<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-box-arrow-left" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M6 12.5a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5h-8a.5.5 0 0 0-.5.5v2a.5.5 0 0 1-1 0v-2A1.5 1.5 0 0 1 6.5 2h8A1.5 1.5 0 0 1 16 3.5v9a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 5 12.5v-2a.5.5 0 0 1 1 0z"/>