1Core.setWorkerPath('../../../lib/core');
2
3const flipbookElement = document.getElementById('flipbook');
4const loadingMessageElement = document.getElementById('loading-message');
5loadingMessageElement.innerHTML = 'Preparing document...';
6const source = 'https://pdftron.s3.amazonaws.com/downloads/pl/Cheetahs.pdf';
7const options = { l: window.sampleL /* license key here */ };
8const docViewer = new Core.DocumentViewer();
9const viewerElement = document.createElement('div');
10
11docViewer.setViewerElement(viewerElement);
12docViewer.setScrollViewElement(viewerElement);
13docViewer.enableAnnotations();
14docViewer.addEventListener('annotationsLoaded', () => {
15 const doc = docViewer.getDocument();
16 const annotManager = docViewer.getAnnotationManager();
17 const info = doc.getPageInfo(1);
18 const width = info.width;
19 const height = info.height;
20 const pageCount = doc.getPageCount();
21 const promises = [];
22 const canvases = [];
23 const boundingRect = flipbookElement.getBoundingClientRect();
24
25 let flipbookHeight = boundingRect.height;
26 let flipbookWidth = boundingRect.width;
27 if (((flipbookHeight * width) / height) * 2 < flipbookWidth) {
28 flipbookWidth = ((flipbookHeight * width) / height) * 2;
29 } else {
30 flipbookHeight = ((flipbookWidth / width) * height) / 2;
31 }
32
33 for (let i = 0; i < pageCount; i++) {
34 promises.push(
35 /* eslint-disable-next-line no-loop-func */
36 new Promise(resolve => {
37 // Load page canvas
38 const pageNumber = i + 1;
39 return doc.requirePage(pageNumber).then(() => {
40 return doc.loadCanvas({
41 pageNumber,
42 drawComplete: async (canvas, index) => {
43 canvases.push({ index, canvas });
44 loadingMessageElement.innerHTML = `Loading page canvas... (${canvases.length}/${pageCount})`;
45 await annotManager.drawAnnotations(index, canvas);
46 resolve();
47 },
48 });
49 });
50 })
51 );
52 }
53
54 Promise.all(promises).then(() => {
55 flipbookElement.removeChild(loadingMessageElement);
56 flipbookElement.style.margin = '60px 0px 0px auto';
57
58 canvases.sort((a, b) => a.index - b.index).forEach(o => flipbookElement.appendChild(o.canvas));
59
60 $('#flipbook').turn({
61 width: flipbookWidth,
62 height: flipbookHeight,
63 });
64
65 setTimeout(() => {
66 $('#flipbook').turn('next');
67 }, 500);
68
69 document.getElementById('previous').onclick = () => {
70 $('#flipbook').turn('previous');
71 };
72
73 document.getElementById('next').onclick = () => {
74 $('#flipbook').turn('next');
75 };
76 });
77});
78docViewer.loadDocument(source, options);