Magazine Viewer Using JavaScript

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

Try for Free Launch Demo

Make the following customizations in PSPDFKit for Web:

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

  • Move the main toolbar to the bottom.

  • Hide the toolbar items that aren’t needed.

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

// Disable continuous scroll and default to double-page mode.
const initialViewState = new PSPDFKit.ViewState({
	scrollMode: PSPDFKit.ScrollMode.PER_SPREAD,
	layoutMode: PSPDFKit.LayoutMode.DOUBLE,
	keepFirstSpreadAsSinglePage: true,
});

// A custom toolbar item to toggle fullscreen mode.
const fullScreenToolbarItem = {
	type: 'custom',
	title: 'Toggle full screen mode',
	onPress: () => {
		const container =
			typeof defaultConfiguration.container === 'string'
				? document.querySelector(defaultConfiguration.container).parentNode
				: defaultConfiguration.container.parentNode;

		// 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(container);
		}
	},
};

// Only show the relevant toolbar items.
let toolbarItems = [
	{ type: 'sidebar-bookmarks', dropdownGroup: null },
	{ type: 'sidebar-thumbnails', dropdownGroup: null },
	{ type: 'highlighter' },
	{ type: 'zoom-in' },
	{ type: 'zoom-out' },
	{ type: 'spacer' },
	{ type: 'search' },
	fullScreenToolbarItem,
];

// Load PSPDFKit.
PSPDFKit.load({
	...defaultConfiguration,
	toolbarPlacement: PSPDFKit.ToolbarPlacement.BOTTOM,
	initialViewState,
	toolbarItems,
});

// All the functions written below are just utility functions used
// to toggle fullscreen mode.
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();
	}
}