Customizing the presentation mode in our JavaScript viewer

let _instance = null;
 
const initialViewState = new NutrientViewer.ViewState({
 scrollMode: NutrientViewer.ScrollMode.PER_SPREAD,
 layoutMode: NutrientViewer.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://www.nutrient.io/guides/web/features/fullscreen-mode/
 if (isFullscreenEnabled()) {
 exitFullscreen();
 } else {
 requestFullScreen(fullscreenElement);
 }
 },
};
 
if (isFullScreenSupported()) {
 toolbarItems.push(fullScreenToolbarItem);
}
 
return NutrientViewer.load({
 ...defaultConfiguration,
 toolbarItems,
 toolbarPlacement: NutrientViewer.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();
 }
}