1// eslint-disable-next-line no-undef
2const WebViewerConstructor = isWebComponent() ? WebViewer.WebComponent : WebViewer;
3
4WebViewerConstructor(
5 {
6 path: '../../../lib',
7 initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf',
8 },
9 document.getElementById('viewer')
10).then(instance => {
11 samplesSetup(instance);
12 const { setHeaderItems, enableElements, disableElements, enableFeatures, disableFeatures, setTheme, Feature, Theme } = instance.UI;
13
14 const findFirstDividerIndex = items => {
15 for (let i = 0; i < items.length; ++i) {
16 if (items[i].type === 'divider') {
17 return i;
18 }
19 }
20 };
21
22 const reverseHeaderItems = () => {
23 // Change header items
24 setHeaderItems(header => {
25 const items = header.getItems();
26 // reverse all items after first divider
27 const indexAfterFirstDivider = findFirstDividerIndex(items) + 1;
28 // could use findIndex if you don't need to support IE
29 // const indexAfterFirstDivider = items.findIndex(item => item.type === 'divider') + 1;
30 const itemsToReverse = items.slice(indexAfterFirstDivider);
31 itemsToReverse.reverse();
32
33 header.update([].concat(items.slice(0, indexAfterFirstDivider), itemsToReverse));
34 });
35 };
36
37 const toggleElement = (e, dataElement) => {
38 // Enable/disable individual element
39 if (e.target.checked) {
40 enableElements([dataElement]);
41 } else {
42 disableElements([dataElement]);
43 }
44 };
45
46 if (NodeList && !NodeList.prototype.forEach) {
47 NodeList.prototype.forEach = Array.prototype.forEach;
48 }
49
50 if (HTMLCollection && !HTMLCollection.prototype.forEach) {
51 HTMLCollection.prototype.forEach = Array.prototype.forEach;
52 }
53
54 document.getElementsByName('header').forEach(radioInput => {
55 radioInput.onchange = () => {
56 reverseHeaderItems();
57 };
58 });
59
60 document.getElementById('ribbons').onchange = e => {
61 // Enable/disable ribbons
62 if (e.target.checked) {
63 enableFeatures([Feature.Ribbons]);
64 } else {
65 disableFeatures([Feature.Ribbons]);
66 }
67 };
68
69 document.getElementById('text-selection').onchange = e => {
70 // Enable/disable text selection
71 if (e.target.checked) {
72 enableFeatures([Feature.TextSelection]);
73 } else {
74 disableFeatures([Feature.TextSelection]);
75 }
76 };
77
78 document.getElementById('annotations').onchange = e => {
79 // Enable/disable annotations
80 if (e.target.checked) {
81 enableFeatures([Feature.Annotations]);
82 } else {
83 disableFeatures([Feature.Annotations]);
84 }
85 };
86
87 document.getElementById('notes-panel').onchange = e => {
88 // Enable/disable notes panel
89 if (e.target.checked) {
90 enableFeatures([Feature.NotesPanel]);
91 } else {
92 disableFeatures([Feature.NotesPanel]);
93 }
94 };
95
96 document.getElementById('file-picker').onchange = e => {
97 // Enable/disable file picker
98 if (e.target.checked) {
99 enableFeatures([Feature.FilePicker]);
100 } else {
101 disableFeatures([Feature.FilePicker]);
102 }
103 };
104
105 document.getElementById('print').onchange = e => {
106 // Enable/disable print
107 if (e.target.checked) {
108 enableFeatures([Feature.Print]);
109 } else {
110 disableFeatures([Feature.Print]);
111 }
112 };
113
114 document.getElementById('download').onchange = e => {
115 // Enable/disable download
116 if (e.target.checked) {
117 enableFeatures([Feature.Download]);
118 } else {
119 disableFeatures([Feature.Download]);
120 }
121 };
122
123 document.getElementById('view-controls').onchange = e => {
124 toggleElement(e, 'viewControlsButton');
125 };
126
127 document.getElementById('search').onchange = e => {
128 toggleElement(e, 'searchButton');
129 };
130
131 document.getElementById('pan-tool').onchange = e => {
132 toggleElement(e, 'panToolButton');
133 };
134
135 document.getElementById('page-nav').onchange = e => {
136 toggleElement(e, 'pageNavOverlay');
137 };
138
139 document.getElementById('default').onchange = e => {
140 if (e.target.checked) {
141 reverseHeaderItems();
142 }
143 };
144
145 document.getElementById('reverse').onchange = e => {
146 if (e.target.checked) {
147 reverseHeaderItems();
148 }
149 };
150
151 document.getElementsByName('theme').forEach(radioInput => {
152 radioInput.onchange = e => {
153 if (e.target.id === 'light' && e.target.checked) {
154 setTheme(Theme.LIGHT);
155 } else {
156 setTheme(Theme.DARK);
157 }
158 };
159 });
160});