Track viewed PDF pages and persist state in sessionStorage

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.

EnvelopeGenerator.Web/wwwroot/js/ui.js

@@ -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

EnvelopeGenerator.Web/wwwroot/js/ui.min.js

@@ -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"/>