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