1// ES6 Compliant Syntax
2// GitHub Copilot - GPT-4 Model - August 26, 2025
3// File: pdf-viewer-mobile/index.js
4
5import WebViewer from '@pdftron/webviewer';
6
7const licenseKey = 'YOUR_WEBVIEWER_LICENSE_KEY';
8
9const devices = [
10 { label: 'Galaxy S5', value: 'galaxys5', checked: true, size: { width: 360, height: 640 } },
11 { label: 'Pixel 2', value: 'pixel2', size: { width: 411, height: 731 } },
12 { label: 'iPhone 6/7/8', value: 'iphone678', size: { width: 375, height: 667 } },
13 { label: 'iPhone X', value: 'iphonex', size: { width: 375, height: 812 } },
14 { label: 'iPad', value: 'iPad', size: { width: 768, height: 1024 } },
15 { label: 'iPad Pro', value: 'iPadPro', size: { width: 1024, height: 1366 } },
16];
17
18function setViewerSize() {
19 const width = parseInt(textWidth.value, 10);
20 const height = parseInt(textHeight.value, 10);
21
22 element.style.height = `${height}px`;
23 const inner = document.getElementById('wc-viewer');
24 inner.style.width = `${width}px`;
25 inner.style.height = `${height}px`;
26}
27
28const element = document.getElementById('viewer');
29const onLoad = async () => {
30 element.style.display = 'flex';
31 element.style.alignItems = 'center';
32 element.style.justifyContent = 'center';
33
34 setTimeout(() => {
35 textWidth.value = devices[0].size.width;
36 textHeight.value = devices[0].size.height;
37 setViewerSize();
38 }, 500);
39
40};
41
42// Initialize WebViewer and load default document
43WebViewer(
44 {
45 path: '/lib',
46 licenseKey: licenseKey,
47 initialDoc: 'https://apryse.s3.amazonaws.com/public/files/samples/magazine.pdf',
48 enableFilePicker: true, // Enable file picker to open files. In WebViewer -> menu icon -> Open File
49 },
50 element
51).then(() => {
52 onLoad();
53});
54
55// UI section
56//
57// Helper code to add controls to the viewer holding the buttons and dropdown
58
59// Create a container for all controls (labels, radio buttons and button)
60const controlsContainer = document.createElement('div');
61
62// Rotation state
63let rotated = false;
64
65// Create a radio group for devices
66const deviceGroup = document.createElement('div');
67deviceGroup.className = 'device-group';
68devices.forEach(device => {
69 const label = document.createElement('label');
70 label.textContent = device.label;
71 label.htmlFor = device.value;
72 label.className = 'radio-label-class';
73
74 const radio = document.createElement('input');
75 radio.type = 'radio';
76 radio.name = 'device';
77 radio.id = device.value;
78 radio.value = device.value;
79 radio.checked = device.checked;
80
81
82 radio.onchange = () => {
83 const selectedDevice = devices.find(d => d.value === radio.value);
84 if (selectedDevice) {
85 let w = selectedDevice.size.width;
86 let h = selectedDevice.size.height;
87 if(rotated){
88 [w, h] = [h, w];
89 }
90 textWidth.value = w;
91 textHeight.value = h;
92 setViewerSize();
93 }
94 };
95
96 deviceGroup.appendChild(radio);
97 deviceGroup.appendChild(label);
98});
99controlsContainer.appendChild(deviceGroup);
100
101const labelWidth = document.createElement('label');
102labelWidth.textContent = 'W:';
103labelWidth.className = 'label-class';
104controlsContainer.appendChild(labelWidth);
105
106const textWidth = document.createElement('input');
107textWidth.type = 'text';
108textWidth.className = 'text-style';
109textWidth.oninput = () => {
110 setViewerSize();
111};
112
113controlsContainer.appendChild(textWidth);
114
115const labelHeight = document.createElement('label');
116labelHeight.textContent = 'H:';
117labelHeight.className = 'label-class';
118controlsContainer.appendChild(labelHeight);
119
120const textHeight = document.createElement('input');
121textHeight.type = 'text';
122textHeight.className = 'text-style';
123
124textHeight.oninput = () => {
125 setViewerSize();
126};
127
128controlsContainer.appendChild(textHeight);
129
130// Create a button to swap dimensions
131const buttonSwap = document.createElement('button');
132buttonSwap.className = 'btn-style';
133buttonSwap.onclick = async () => {
134 rotated = !rotated;
135 [textWidth.value, textHeight.value] = [textHeight.value, textWidth.value];
136 setViewerSize();
137};
138
139// button's image
140const img = new Image(20, 20);
141img.src = "images/mobile-rotate-blue6.svg";
142img.style.width = "20px";
143img.style.height = "20px";
144
145buttonSwap.appendChild(img);
146
147controlsContainer.appendChild(buttonSwap);
148
149// Apply classes for styling using CSS
150controlsContainer.className = 'control-container';
151
152// Append elements to the controls container
153element.parentElement.insertBefore(controlsContainer, element);
154