Magazine Viewer Using JavaScript

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