GET or SET page value for Document Preview Widget

Would it be possible for a feature enhancement to the Document Preview Widget to allow us to GET or SET the page to be displayed?

I am currently working on a translation tool, part of this tool I display a document that we ingested on the left in the Document Preview Widget, and a list of extracted data on the right provided to my Via an API from an ML Application, but due to this being over several pages I am left having to scroll through several pages within the Document viewer and then several pages of data in a “List Edit” .

It would be good to set the value of the Document Preview Widget to be inline with the Data I am displaying on the right, as part of the data returned to me I get a page number for each Value , it would be good to use this or be able to set the Value of the Document Preview Widget by rule or event to save a user from scrolling through both widgets.

The Preview widget is based on a PDF.js
https://mozilla.github.io/pdf.js/

It offers ability to get/set the page programmatically.
The javascript could be injected via Theme Pack or a Code studio component.

The viewer’s PDFViewerApplication.page property can be used to get/set the current page.
– a ‘Custom CSS class’ (Advanced section) of the Preview widget can be set to allow easy targeting, e.g. ‘the_preview_widget’
– the page can be set, e.g. ('.the_preview_widget iframe').first().contentWindow.page = 5; or get, e.g. const current_page = (’.the_preview_widget iframe’).first().contentWindow.page;

As a proof of concept the following code studio Presenter can be created…
– the Preview widget should have a ‘Custom CSS class’ set to ‘the_preview_widget’
– the presenter should be applied to a property displayed on the same page as a preview widget and holding the page number the widget should be set to.

/* Main js */

return {
	get_template_data: function() {
		return {
			value: presenter.get_editable_value(),
			current_page: 0
		}
	}
}

/* frontend.js */

export default {
	methods: {
		
	},
	mounted: function() {
		/**
		 * 'Custom CSS class' of the Preview widget has to be set to 'the_preview_widget'
		 * 
		 */

		const SELF = this;

		// wait for the iframe to load
		$('.the_preview_widget iframe').first().on('load', function() {
			// get page; listen to the page change
			$(this.contentWindow).on('pagechange', function() {
				SELF.current_page = this.PDFViewerApplication.page;
			});	
			// set page; wait for pdf.js to load the pdf
			$(this.contentWindow).on('pagesloaded', function() {
				this.PDFViewerApplication.page = parseInt(SELF.value, 10);
			});
		});
	}
}

/* main.html */

<span>initial page: {{value}}, current page: {{current_page}}</span>

2 Likes

Thanks for this Karol, I will see if I can get this working in my environment.