PDF.js library pane and creating a Panel Extension?

Panel
1

I brought PDF.js javascript and viewer.html and the ability to jump to a specific page into Panel by just hacking it into a HTML pane.

I’m looking to do some custom pdf javascript interactions that take you to a specific coordinates within the page. I have the PDF.js custom javascript working with PDFViewerApplication.pdfViewer.container.scrollTop to go to the coordinates outside of panel. But, now that I’m in Panel I need to get a reference to the Shadow DOM and the iFrame down in the HTML pane; and realizing now that I probably should be building a Panel extension for PDF.js. I found the Awesome Panel Extension documentation and the WebComponent, I was considering trying to use that as a template to create this PDF.js pane/widget. Just want to confirm that I am on the right path, and ask if there are any things I should be looking into to help with this.

Thanks.

2

I’m addressing this question first with modifications to the custom viewer.html in PDF.js. Getting comfortable with the PDF.js javascript code and events before (for if/when) I pursue a custom Panel extension.

This demonstrates what I have so far:

3

If you are new to javascript and typescript then I would recommend using the ReactiveHTML component.