Customizing the Presentation Mode in Our JavaScript Viewer

You can implement the presentation mode as shown in our web demo by writing some custom code.

Launch Demo

Make the following customizations in PSPDFKit for Web:

  • Disable continuous scroll and default to single-page mode.

  • Move the main toolbar to bottom.

  • Hide the toolbar items that aren’t needed.

  • Add a custom toolbar item that can be used to toggle the fullscreen view.

let _instance = null;

const initialViewState = new PSPDFKit.ViewState({
	scrollMode: PSPDFKit.ScrollMode.PER_SPREAD,
	layoutMode: PSPDFKit.LayoutMode.SINGLE,
});

let fullscreenElement =
	typeof defaultConfiguration.container === 'string'
		? document.querySelector(defaultConfiguration.container).parentNode
		: defaultConfiguration.container.parentNode;

registerFullscreenChangeEvents();

const toolbarItems = [
	{ type: 'pager' },
	{ type: 'spacer' },
	{ type: 'sidebar-thumbnails' },
	{ type: 'search' },
	{ type: 'highlighter' },
];

// A custom toolbar item to toggle fullscreen mode.
const fullScreenToolbarItem = {
	type: 'custom',
	title: 'Toggle full screen mode',
	onPress: () => {
		// You can implement the fullscreen mode on your own. Either see our
		// functions below for information on how to activate it, or look at our guides:
		// https://pspdfkit.com/guides/web/features/fullscreen-mode/
		if (isFullscreenEnabled()) {
			exitFullscreen();
		} else {
			requestFullScreen(fullscreenElement);
		}
	},
};

if (isFullScreenSupported()) {
	toolbarItems.push(fullScreenToolbarItem);
}

return PSPDFKit.load({
	...defaultConfiguration,
	toolbarItems,
	toolbarPlacement: PSPDFKit.ToolbarPlacement.BOTTOM,
	initialViewState,
}).then((instance) => {
	_instance = instance;
});

function onFullScreenChange() {
	_instance.setViewState(
		_instance.viewState.set('showToolbar', !isFullscreenEnabled()),
	);
}

function registerFullscreenChangeEvents() {
	document.addEventListener('fullscreenchange', onFullScreenChange);
	document.addEventListener('webkitfullscreenchange', onFullScreenChange);
	document.addEventListener('mozfullscreenchange', onFullScreenChange);
	document.addEventListener('MSFullscreenChange', onFullScreenChange);
}

function isFullscreenEnabled() {
	return (
		document.fullscreenElement ||
		document.mozFullScreenElement ||
		document.webkitFullscreenElement ||
		document.msFullscreenElement
	);
}

function isFullScreenSupported() {
	return (
		document.fullscreenEnabled ||
		document.mozFullScreenEnabled ||
		document.msFullScreenEnabled ||
		document.webkitFullscreenEnabled
	);
}

function requestFullScreen(element) {
	if (element.requestFullscreen) {
		element.requestFullscreen();
	} else if (element.mozRequestFullScreen) {
		element.mozRequestFullScreen();
	} else if (element.webkitRequestFullscreen) {
		element.webkitRequestFullscreen();
	} else if (element.msRequestFullscreen) {
		element.msRequestFullscreen();
	}
}

function exitFullscreen() {
	if (document.webkitExitFullscreen) {
		document.webkitExitFullscreen();
	} else if (document.mozCancelFullScreen) {
		document.mozCancelFullScreen();
	} else if (document.msExitFullscreen) {
		document.msExitFullscreen();
	} else if (document.exitFullscreen) {
		document.exitFullscreen();
	}
}

Don’t forget to remove the listeners on unmount.

We use cookies to improve your experience and for marketing. Learn more in our privacy policy.