Viewing with WebViewer Server

1//
2// Requires starting WebViewer Server in order to run
3// eslint-disable-next-line no-undef
4const WebViewerConstructor = isWebComponent() ? WebViewer.WebComponent : WebViewer;
5
6const startWebViewer = () => {
7  WebViewerConstructor(
8    {
9      path: '../../../lib',
10      webviewerServerURL: hostname,
11      initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf',
12    },
13    document.getElementById('viewer')
14  ).then(instance => {
15    samplesSetup(instance);
16    document.getElementById('select').onchange = e => {
17      instance.UI.loadDocument(e.target.value);
18    };
19
20    document.getElementById('file-picker').onchange = e => {
21      const file = e.target.files[0];
22      if (file) {
23        instance.UI.loadDocument(file);
24      }
25    };
26
27    document.getElementById('url-form').onsubmit = e => {
28      e.preventDefault();
29      instance.UI.loadDocument(document.getElementById('url').value);
30    };
31  });
32};
33
34let hostname = 'http://localhost:8090/';
35if (window.location.hostname.includes('apryse.com')) {
36  hostname = 'https://demo.apryse.com/';
37}
38
39const healthFunc = () => {
40  if (this.status >= 500) {
41    alert(`WebViewer Server at ${hostname} failing health checks, cannot connect...`); // eslint-disable-line no-alert
42  } else if (this.status === 404) {
43    alert(`WebViewer Server cannot be found at ${hostname}, please run \`npm run webviewer-server\``); // eslint-disable-line no-alert
44  } else if (this.status >= 400) {
45    alert(`WebViewer Server cannot be reached at ${hostname}`); // eslint-disable-line no-alert
46  } else {
47    startWebViewer();
48  }
49};
50
51// Health check to ensure server is running
52const healthCheck = new XMLHttpRequest();
53healthCheck.onreadystatechange = () => {
54  if (healthCheck.readyState === 4 && healthCheck.status === 0) {
55    alert(`WebViewer Server at ${hostname} cannot be found, please run \`npm run webviewer-server\` in the WebViewer repository...`); // eslint-disable-line no-alert
56  }
57};
58
59healthCheck.addEventListener('load', healthFunc);
60healthCheck.open('GET', `${hostname}blackbox/health`);
61healthCheck.send();