PDF presentation mode using JavaScript

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

3
let _instance;
4

5
export function load(defaultConfiguration) {
6
  const initialViewState = new PSPDFKit.ViewState({
7
    scrollMode: PSPDFKit.ScrollMode.PER_SPREAD,
8
    layoutMode: PSPDFKit.LayoutMode.SINGLE,
9
  });
10

11
  let fullscreenElement = defaultConfiguration.container.parentNode;
12

13
  registerFullscreenChangeEvents();
14

15
  const toolbarItems = [
16
    {
17
      type: "pager",
18
    },
19
    {
20
      type: "spacer",
21
    },
22
    {
23
      type: "sidebar-thumbnails",
24
    },
25
    {
26
      type: "search",
27
    },
28
    {
29
      type: "highlighter",
30
    },
31
  ];
32

33
  // A custom toolbar item to toggle full screen mode.
34
  const fullScreenToolbarItem = {
35
    type: "custom",
36
    title: "Toggle full screen mode",
37
    onPress: () => {
38
      // You can implement the fullscreen mode on your own. Either see our
39
      // functions below how to activate it or look at our guides:
40
      // https://www.nutrient.io/guides/web/features/fullscreen-mode/
41
      if (isFullscreenEnabled()) {
42
        exitFullscreen();
43
      } else {
44
        requestFullScreen(fullscreenElement);
45
      }
46
    },
47
  };
48

49
  if (isFullScreenSupported()) {
50
    toolbarItems.push(fullScreenToolbarItem);
51
  }
52

53
  return PSPDFKit.load({
54
    ...defaultConfiguration,
55
    toolbarItems,
56
    toolbarPlacement: PSPDFKit.ToolbarPlacement.BOTTOM,
57
    initialViewState,
58
  }).then((instance) => {
59
    _instance = instance;
60

61
    console.log("Nutrient Web SDK successfully loaded!!", instance);
62

63
    return instance;
64
  });
65
}
66

67
export function unload() {
68
  removeFullscreenChangeEvents();
69
}
70

71
function onFullScreenChange() {
72
  _instance.setViewState(
73
    _instance.viewState.set("showToolbar", !isFullscreenEnabled())
74
  );
75
}
76

77
function registerFullscreenChangeEvents() {
78
  document.addEventListener("fullscreenchange", onFullScreenChange);
79
  document.addEventListener("webkitfullscreenchange", onFullScreenChange);
80
  document.addEventListener("mozfullscreenchange", onFullScreenChange);
81
  document.addEventListener("MSFullscreenChange", onFullScreenChange);
82
}
83

84
function removeFullscreenChangeEvents() {
85
  document.removeEventListener("fullscreenchange", onFullScreenChange);
86
  document.removeEventListener("webkitfullscreenchange", onFullScreenChange);
87
  document.removeEventListener("mozfullscreenchange", onFullScreenChange);
88
  document.removeEventListener("MSFullscreenChange", onFullScreenChange);
89
}
90

91
function isFullscreenEnabled() {
92
  return (
93
    document.fullscreenElement ||
94
    document.mozFullScreenElement ||
95
    document.webkitFullscreenElement ||
96
    document.msFullscreenElement
97
  );
98
}
99

100
function isFullScreenSupported() {
101
  return (
102
    document.fullscreenEnabled ||
103
    document.mozFullScreenEnabled ||
104
    document.msFullScreenEnabled ||
105
    document.webkitFullscreenEnabled
106
  );
107
}
108

109
function requestFullScreen(element) {
110
  iOSFullscreenFix(element);
111

112
  if (element.requestFullscreen) {
113
    element.requestFullscreen();
114
  } else if (element.mozRequestFullScreen) {
115
    element.mozRequestFullScreen();
116
  } else if (element.webkitRequestFullscreen) {
117
    element.webkitRequestFullscreen();
118
  } else if (element.msRequestFullscreen) {
119
    element.msRequestFullscreen();
120
  }
121
}
122

123
function exitFullscreen() {
124
  if (document.webkitExitFullscreen) {
125
    document.webkitExitFullscreen();
126
  } else if (document.mozCancelFullScreen) {
127
    document.mozCancelFullScreen();
128
  } else if (document.msExitFullscreen) {
129
    document.msExitFullscreen();
130
  } else if (document.exitFullscreen) {
131
    document.exitFullscreen();
132
  }
133
}
134

135
// On iOS we have to make some tweaks to the element since the platform will
136
// overlay specific controls.
137
//
138
// We add padding top so that the element is pushed to the bottom and add a
139
// background color so that the controls become visible.
140
function iOSFullscreenFix(element) {
141
  const iOS =
142
    !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
143

144
  if (!iOS) {
145
    return;
146
  }
147

148
  let firstInvocation = true;
149

150
  function cleanup() {
151
    if (firstInvocation) {
152
      element.style.paddingTop = "76px";
153
      element.style.backgroundColor = "black";
154
      firstInvocation = false;
155

156
      return;
157
    }
158

159
    element.style.paddingTop = "0";
160
    element.style.backgroundColor = "transparent";
161
    document.removeEventListener("webkitfullscreenchange", cleanup);
162
  }
163

164
  document.addEventListener("webkitfullscreenchange", cleanup);
165
}