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://www,nutrient.io/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 Nutrient.
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();
  }
}