JavaScript PDF magazine viewer

1
import PSPDFKit from "@nutrient-sdk/viewer";
2

3
export function load(defaultConfiguration) {
4
  // Disable continuous scroll and default to double page mode.
5
  const initialViewState = new PSPDFKit.ViewState({
6
    scrollMode: PSPDFKit.ScrollMode.PER_SPREAD,
7
    layoutMode: PSPDFKit.LayoutMode.DOUBLE,
8
    keepFirstSpreadAsSinglePage: true,
9
  });
10

11
  // A custom toolbar item to toggle full screen mode.
12
  const fullScreenToolbarItem = {
13
    type: "custom",
14
    title: "Toggle full screen mode",
15
    onPress: () => {
16
      // We use the parent container of our mount node. This is necessary for
17
      // the iOS specific fixes applied in the iOSFullscreenFix() function.
18
      const container = defaultConfiguration.container.parentNode;
19

20
      // You can implement the fullscreen mode on your own. Either see our
21
      // functions below how to activate it or look at our guides:
22
      // https://www.nutrient.io/guides/web/features/fullscreen-mode/
23
      if (isFullscreenEnabled()) {
24
        exitFullscreen();
25
      } else {
26
        requestFullScreen(container);
27
      }
28
    },
29
  };
30

31
  // Customize the toolbar.
32
  let toolbarItems = [
33
    { type: "sidebar-bookmarks", dropdownGroup: null },
34
    { type: "sidebar-thumbnails", dropdownGroup: null },
35
    { type: "highlighter" },
36
    { type: "zoom-in" },
37
    { type: "zoom-out" },
38
    { type: "spacer" },
39
    { type: "search" },
40
  ];
41

42
  // Only add the fullscreenToolbarItem if the browser supports fullscreen mode
43
  if (isFullScreenSupported()) {
44
    toolbarItems.push(fullScreenToolbarItem);
45
  }
46

47
  return PSPDFKit.load({
48
    ...defaultConfiguration,
49
    toolbarPlacement: PSPDFKit.ToolbarPlacement.BOTTOM,
50
    initialViewState,
51
    toolbarItems,
52
  }).then((instance) => {
53
    console.log(
54
      "Nutrient Web SDK successfully loaded!!",
55
      instance,
56
      "\nWhen fullscreen is supported the toolbar should be placed to the bottom to improve usability"
57
    );
58

59
    return instance;
60
  });
61
}
62

63
function isFullscreenEnabled() {
64
  return (
65
    document.fullscreenElement ||
66
    document.mozFullScreenElement ||
67
    document.webkitFullscreenElement ||
68
    document.msFullscreenElement
69
  );
70
}
71

72
function isFullScreenSupported() {
73
  return (
74
    document.fullscreenEnabled ||
75
    document.mozFullScreenEnabled ||
76
    document.msFullScreenEnabled ||
77
    document.webkitFullscreenEnabled
78
  );
79
}
80

81
function requestFullScreen(element) {
82
  iOSFullscreenFix(element);
83

84
  if (element.requestFullscreen) {
85
    element.requestFullscreen();
86
  } else if (element.mozRequestFullScreen) {
87
    element.mozRequestFullScreen();
88
  } else if (element.webkitRequestFullscreen) {
89
    element.webkitRequestFullscreen();
90
  } else if (element.msRequestFullscreen) {
91
    element.msRequestFullscreen();
92
  }
93
}
94

95
function exitFullscreen() {
96
  if (document.webkitExitFullscreen) {
97
    document.webkitExitFullscreen();
98
  } else if (document.mozCancelFullScreen) {
99
    document.mozCancelFullScreen();
100
  } else if (document.msExitFullscreen) {
101
    document.msExitFullscreen();
102
  } else if (document.exitFullscreen) {
103
    document.exitFullscreen();
104
  }
105
}
106

107
// On iOS we have to make some tweaks to the element since the platform will
108
// overlay specific controls.
109
//
110
// We add padding top so that the element is pushed to the bottom and add a
111
// background color so that the controls become visible.
112
function iOSFullscreenFix(element) {
113
  const iOS =
114
    !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
115

116
  if (!iOS) {
117
    return;
118
  }
119

120
  let firstInvocation = true;
121

122
  function cleanup() {
123
    if (firstInvocation) {
124
      element.style.paddingTop = "76px";
125
      element.style.backgroundColor = "black";
126
      firstInvocation = false;
127

128
      return;
129
    }
130

131
    element.style.paddingTop = "0";
132
    element.style.backgroundColor = "transparent";
133
    document.removeEventListener("webkitfullscreenchange", cleanup);
134
  }
135

136
  document.addEventListener("webkitfullscreenchange", cleanup);
137
}