Accessible Reading Order Showcase Demo Code Sample

1/* ES6 Compliant Syntax */
2/* GitHub Copilot v1.0, Claude 3.5 Sonnet, August 24, 2025 */
3/* File: index.js */
4
5import WebViewer from '@pdftron/webviewer';
6
7// Accessible Reading Order section
8//
9// Code to load accessible PDFs and PDF/UA documents and interact with them
10// via screen reader directly in your browser, without server-side
11// dependencies
12//
13
14const defaultDoc = 'https://apryse.s3.us-west-1.amazonaws.com/public/files/samples/PDFUA_AcademicAbstract.pdf';
15
16let isInAccessibleReadingOrderMode = false;
17let isAccessibleReadingOrderModeNoStructure = false;
18let currentPage = 1;
19let prevItem = null;
20let currentText = '';
21let isMuted = false;
22
23// Reset all variables when a new document is loaded
24const onDocumentLoaded = async () => {
25    // Reset the demo variables
26    isInAccessibleReadingOrderMode = false;
27    isAccessibleReadingOrderModeNoStructure = false;
28    currentPage = 1;
29    prevItem = null;
30    currentText = '';
31};
32
33// Set accessible reading order mode no structure state
34const onAccessibleReadingOrderModeNoStructure = () => {
35    isAccessibleReadingOrderModeNoStructure = true;
36    console.log('No structure detected in the document.');
37
38    // Update UI controls
39    updateUIControls();
40};
41
42const onAccessibleReadingOrderModeStarted = () => {
43    isInAccessibleReadingOrderMode = true;
44    console.log('Accessible reading order mode started.');
45
46    // Update UI controls
47    updateUIControls();
48};
49
50const onAccessibleReadingOrderModeEnded = () => {
51    isInAccessibleReadingOrderMode = false;
52    console.log('Accessible reading order mode ended.');
53
54    // Update UI controls
55    updateUIControls();
56};
57
58const customizeUI = async (instance) => {
59    const { documentViewer } = instance.Core;
60
61    // Set the default document to load
62    await instance.Core.documentViewer.loadDocument(defaultDoc, {
63        extension: 'pdf',
64    });
65
66    // Initialize the accessible reading order mode
67    const manager = documentViewer.getAccessibleReadingOrderManager();
68    await manager.startAccessibleReadingOrderMode();
69    isInAccessibleReadingOrderMode = manager.isInAccessibleReadingOrderMode();
70
71    // Add event listeners
72    documentViewer.addEventListener('documentLoaded', onDocumentLoaded);
73    manager.addEventListener('accessibleReadingOrderModeNoStructure', onAccessibleReadingOrderModeNoStructure);
74    manager.addEventListener('accessibleReadingOrderModeStarted', onAccessibleReadingOrderModeStarted);
75    manager.addEventListener('accessibleReadingOrderModeEnded', onAccessibleReadingOrderModeEnded);
76};
77
78const getFirstElementOnPage = (instance, page) => {
79    const allContentElements = Array.from(
80        instance.Core.documentViewer.getViewerElement()
81            .querySelectorAll(`[data-element^="a11y-reader-content-${page}_"]`)
82    );
83    return allContentElements.length > 0 ? allContentElements[0] : null;
84};
85
86const getAllContentElements = (instance, page) => {
87    return Array.from(
88        instance.Core.documentViewer.getViewerElement()
89            .querySelectorAll(`[data-element^="a11y-reader-content-${page}_"]`)
90    );
91};
92
93// Toggle mute
94const toggleMute = () => {
95    const speechSynth = window?.speechSynthesis;
96    if (isMuted) {
97        speechSynth?.resume();
98    } else {
99        speechSynth?.pause();
100    }
101    isMuted = !isMuted;
102};
103
104// Highlight the current text element
105const highlightCurrentElementAndChangePage = (instance, element) => {
106    if (!element) return;
107    element.style.border = '2px solid rgba(0, 0, 0, 0.6)';
108    element.style.borderRadius = '4px';
109    element.style.boxSizing = 'border-box';
110
111    const dataElement = element.getAttribute('data-element') || '';
112    let elementPage = -1;
113
114    if (dataElement && dataElement.startsWith('a11y-reader-content-')) {
115        // Parse the page number from a11y-reader-content-{page}-{block}
116        const parts = dataElement.split('-');
117        if (parts.length > 4) {
118            // Should have at least 4 parts to extract the page number       
119            elementPage = parseInt(parts[3], 10);
120        }
121    }
122
123    if (elementPage > 0) {
124        const currPage = instance?.Core.documentViewer.getCurrentPage();
125
126        if (elementPage !== currPage) {
127            instance?.Core.documentViewer.setCurrentPage(elementPage);
128        }
129    }
130};
131
132// Process selected content
133const processSelectedContent = (instance, content) => {
134    if (!content) return;
135
136    highlightCurrentElementAndChangePage(instance, content);
137    const typeDescription = getElementTypeDescription(content);
138    prevItem = content;
139
140    const baseText = content.textContent || '';
141    const text = typeDescription + baseText;
142    currentText = text;
143
144    speechSynthesis.cancel(); // Cancel any ongoing speech synthesis
145    readText(text, isMuted);
146};
147
148// Clear highlight from the previous element
149const clearPreviousHighlight = () => {
150    if (prevItem) {
151        prevItem.style.border = 'none';
152    }
153};
154
155// Get the next element in the reading order
156const nextElement = (instance) => {
157    const currPage = currentPage;
158
159    clearPreviousHighlight();
160
161    let content = null;
162
163    if (prevItem) {
164        // Find siblings that have the a11y-reader-content prefix
165        const allContentElements = getAllContentElements(instance, currPage);
166        const currentIndex = allContentElements.findIndex((el) => el === prevItem);
167
168        // Get the next element if available
169        if (currentIndex !== -1 && currentIndex < allContentElements.length - 1) {
170            content = allContentElements[currentIndex + 1];
171        }
172    } else {
173        content = getFirstElementOnPage(instance, currPage);
174    }
175
176
177    if (!content) {
178        content = getFirstElementOnPage(instance, currPage + 1);
179
180        if (content) {
181            currentPage += 1;
182        } else {
183            // Reset to start if no more content
184            currentPage = 1;
185            content = getFirstElementOnPage(instance, 1);
186        }
187    }
188
189    if (content) {
190        processSelectedContent(instance, content);
191    }
192};
193
194// Get the previous element in the reading order
195const previousElement = (instance) => {
196    const currPage = currentPage;
197
198    clearPreviousHighlight();
199    let content = null;
200
201    if (prevItem) {
202        // Find siblings that have the a11y-reader-content prefix
203        const allContentElements = getAllContentElements(instance, currPage);
204        const currentIndex = allContentElements.findIndex((el) => el === prevItem);
205
206        // Get the previous element if available
207        if (currentIndex > 0) {
208            content = allContentElements[currentIndex - 1];
209        } else if (currPage > 1) {
210            // if we are at the first element of the page, try to get the last element of the previous page
211            const prevPageElements = getAllContentElements(instance, currPage - 1);
212
213            if (prevPageElements.length > 0) {
214                content = getFirstElementOnPage(instance, currPage - 1);
215                currentPage -= 1;
216            }
217        }
218    } else {
219        // No current item yet, get the first one
220        content = getFirstElementOnPage(instance, currPage);
221    }
222
223    // If no content found, reset to the first element of the first page
224    if (!content) {
225        currentPage = 1;
226        content = getFirstElementOnPage(instance, 1);
227    }
228
229    if (content) {
230        processSelectedContent(instance, content);
231    }
232};
233
234// Speech Synthesis section
235// 
236// Code to read the text content of the document using the browser's
237// speech synthesis API
238//
239
240const voiceIndex = 0;
241const pitch = 1;
242const rate = 1;
243const volume = 1;
244
245const readText = (documentText, isMuted) => {
246    const speechSynth = window?.speechSynthesis;
247    const utterance = new window.SpeechSynthesisUtterance(documentText);
248    if (voiceIndex) {
249        utterance.voice = speechSynth?.getVoices()[voiceIndex];
250    }
251    utterance.pitch = pitch;
252    utterance.rate = rate;
253    utterance.volume = isMuted ? 0 : volume;
254
255    if (speechSynth?.speaking) {
256        speechSynth?.resume();
257    } else {
258        speechSynth?.speak(utterance);
259    }
260};
261
262const getElementTypeDescription = (element) => {
263    const role = element.getAttribute('role')?.toLowerCase() || '';
264
265    if (role === 'heading') {
266        const level = element.getAttribute('aria-level');
267        if (level) {
268            return `Heading level ${level}, `;
269        }
270    }
271
272    // Check for common semantic elements based on tag name or class
273    const tagName = element.tagName?.toLowerCase() || '';
274    if (tagName) {
275        if (tagName === 'h1') return 'Heading level 1, ';
276        if (tagName === 'h2') return 'Heading level 2, ';
277        if (tagName === 'h3') return 'Heading level 3, ';
278        if (tagName === 'h4') return 'Heading level 4, ';
279        if (tagName === 'h5') return 'Heading level 5, ';
280        if (tagName === 'h6') return 'Heading level 6, ';
281
282        if (tagName === 'img' || role === 'img') {
283            const alt = element.getAttribute('alt');
284            if (alt) return `Image, ${alt}, `;
285            return 'Image, ';
286        }
287
288        if (tagName === 'figure') return 'Figure, ';
289        if (tagName === 'table' || role === 'table') return 'Table, ';
290        if (tagName === 'ul' || role === 'list') return 'List, ';
291        if (tagName === 'ol') return 'Ordered list, ';
292        if (tagName === 'li' || role === 'listitem') return 'List item, ';
293        if (tagName === 'a' || role === 'link') return 'Link, ';
294        if (tagName === 'button' || role === 'button') return 'Button, ';
295        if (tagName === 'input' || role === 'textbox') return 'Input field, ';
296    }
297
298    return '';
299};
300
301
302// WebViewer section
303// 
304// This code initializes the WebViewer with the basic settings
305// that are found in the default showcase WebViewer
306//
307
308const searchParams = new URLSearchParams(window.location.search);
309const history = window.history || window.parent.history || window.top.history;
310const licenseKey = 'YOUR_LICENSE_KEY_HERE';
311const element = document.getElementById('viewer');
312
313// Initialize WebViewer with the specified settings
314WebViewer({
315    path: '/lib',
316    serverUrl: null,
317    forceClientSideInit: true,
318    fullAPI: true,
319    css: '../styles/stylesheet.css',
320    ui: 'beta',
321    licenseKey: licenseKey,
322    enableFilePicker: true,
323}, element).then((instance) => {
324    // Enable the measurement toolbar so it appears with all the other tools, and disable Cloudy rectangular tool
325    const cloudyTools = [
326        instance.Core.Tools.ToolNames.CLOUDY_RECTANGULAR_AREA_MEASUREMENT,
327        instance.Core.Tools.ToolNames.CLOUDY_RECTANGULAR_AREA_MEASUREMENT2,
328        instance.Core.Tools.ToolNames.CLOUDY_RECTANGULAR_AREA_MEASUREMENT3,
329        instance.Core.Tools.ToolNames.CLOUDY_RECTANGULAR_AREA_MEASUREMENT4,
330    ];
331    instance.UI.enableFeatures([instance.UI.Feature.Measurement, instance.UI.Feature.Initials]);
332    instance.UI.disableTools(cloudyTools);
333
334    // Set default toolbar group to Annotate
335    instance.UI.setToolbarGroup('toolbarGroup-Annotate');
336
337    // Set default tool on mobile devices to Pan.
338    // https://apryse.atlassian.net/browse/WVR-3134
339    if (isMobileDevice()) {
340        instance.UI.setToolMode(instance.Core.Tools.ToolNames.PAN);
341    }
342
343    instance.Core.documentViewer.addEventListener('documentUnloaded', () => {
344        if (searchParams.has('file')) {
345            searchParams.delete('file');
346            history.replaceState(null, '', '?' + searchParams.toString());
347        }
348    });
349
350    instance.Core.annotationManager.enableAnnotationNumbering();
351
352    instance.UI.NotesPanel.enableAttachmentPreview();
353
354    // Add the demo-specific functionality
355    customizeUI(instance).then(() => {
356        // Create UI controls after demo is initialized
357        createUIControls(instance);
358    });
359});
360
361// Function to check if the user is on a mobile device
362const isMobileDevice = () => {
363    return (
364        /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(
365            window.navigator.userAgent
366        ) ||
367        /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55\/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk\/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(
368            window.navigator.userAgent.substring(0, 4)
369        )
370    );
371}
372
373// Cleanup function for when the demo is closed or page is unloaded
374const cleanup = (instance) => {
375    const { documentViewer } = instance.Core;
376    const manager = documentViewer.getAccessibleReadingOrderManager();
377
378    if (typeof instance !== 'undefined' && instance.UI) {
379
380        // Cleanup
381        manager.endAccessibleReadingOrderMode();
382        speechSynthesis.cancel();
383
384        // Remove event listeners
385        manager.removeEventListener('accessibleReadingOrderModeStarted', onAccessibleReadingOrderModeStarted);
386        manager.removeEventListener('accessibleReadingOrderModeEnded', onAccessibleReadingOrderModeEnded);
387        manager.removeEventListener('accessibleReadingOrderModeNoStructure', onAccessibleReadingOrderModeNoStructure);
388        documentViewer.removeEventListener('documentLoaded', onDocumentLoaded);
389
390        console.log('Cleaning up compare-files demo');
391    }
392};
393
394// Register cleanup for page unload
395window.addEventListener('beforeunload', () => cleanup());
396window.addEventListener('unload', () => cleanup());
397
398// UI section
399// 
400// Helper code to add controls to the viewer holding the buttons
401// This code creates a container for the buttons, styles them, and adds them to the viewer
402//
403
404// Previous button
405const prevButton = (instance) => {
406    const button = document.createElement('button');
407    button.className = 'btn btn-prev';
408    button.textContent = 'Previous';
409    button.disabled = true; // Initially disabled
410    button.onclick = () => {
411        previousElement(instance);
412        updateUIControls();
413    };
414
415    return button;
416};
417
418// Next button
419const nextButton = (instance) => {
420    const button = document.createElement('button');
421    button.className = 'btn btn-next';
422    button.textContent = 'Next';
423    button.disabled = true; // Initially disabled
424    button.onclick = () => {
425        nextElement(instance);
426        updateUIControls();
427    };
428    
429    return button;
430};
431
432// Audio button
433const audioButton = (instance) => {
434    const button = document.createElement('button');
435    button.className = 'btn btn-audio';
436    button.textContent = 'Mute';
437    button.disabled = true; // Initially disabled
438    button.onclick = () => {
439        toggleMute(instance);
440        if (isMuted) {
441            button.textContent = 'Unmute';
442        } else {
443            button.textContent = 'Mute';
444        }
445    };
446
447    return button;
448};
449
450// Untagged Document alert and Current page text
451const currentPageText = () => {
452    const wrapper = document.createElement('div');
453    wrapper.className = 'current-page-text-wrapper';
454
455    const untaggedDocumentAlert = document.createElement('div');
456    untaggedDocumentAlert.className = 'untagged-document-alert';
457
458    const untaggedDocumentAlertTitle = document.createElement('span');
459    untaggedDocumentAlertTitle.className = 'untagged-document-alert-title';
460    untaggedDocumentAlertTitle.textContent = 'UNTAGGED DOCUMENT';
461
462    const untaggedDocumentAlertText = document.createElement('span');
463    untaggedDocumentAlertText.className = 'untagged-document-alert-text';
464    untaggedDocumentAlertText.textContent = 'No accessible tags or structure detected. Please upload a tagged document for the best accessible experience.';
465
466    untaggedDocumentAlert.appendChild(untaggedDocumentAlertTitle);
467    untaggedDocumentAlert.appendChild(untaggedDocumentAlertText);
468
469    wrapper.appendChild(untaggedDocumentAlert);
470
471    if (isAccessibleReadingOrderModeNoStructure) {
472        untaggedDocumentAlert.classList.add('visible');
473    }
474
475    const currentPageText = document.createElement('span');
476    currentPageText.className = 'current-page-text';
477    currentPageText.textContent = `Current Page: ${currentPage}`;
478    wrapper.appendChild(currentPageText);
479
480    return wrapper;
481};
482
483// Text console
484const textConsole = () => {
485    const wrapper = document.createElement('div');
486    wrapper.className = 'text-wrapper';
487
488    const textArea = document.createElement('div');
489    textArea.className = 'text-area';
490
491    const textConsoleTitle = document.createElement('div');
492    textConsoleTitle.className = 'text-console-title';
493    textConsoleTitle.textContent = 'Text Console';
494
495    textArea.appendChild(textConsoleTitle);
496
497    const textContent = document.createElement('div');
498    textContent.className = 'text-content';
499    textContent.textContent = currentText ? currentText : 'No text is currently being read. Press "Next" to begin reading content.';
500
501    textArea.appendChild(textContent);
502
503    wrapper.appendChild(textArea);
504
505    return wrapper;
506};
507
508const createUIControls = (instance) => {
509    // Create a container for all controls (label, dropdown, and buttons)
510    const controlsContainer = document.createElement('div');
511    controlsContainer.className = 'controls-container';
512
513    // Container for Buttons and Page Text
514    const leftContainer = document.createElement('div');
515    leftContainer.className = 'left-container';
516
517    // Buttons Container
518    const buttonsContainer = document.createElement('div');
519    buttonsContainer.className = 'buttons-container';
520    buttonsContainer.appendChild(prevButton(instance));
521    buttonsContainer.appendChild(nextButton(instance));
522    buttonsContainer.appendChild(audioButton(instance));
523    leftContainer.appendChild(buttonsContainer);
524
525    // Current Page Text
526    leftContainer.appendChild(currentPageText());
527
528    controlsContainer.appendChild(leftContainer);
529
530    // Text Console
531    const textConsoleElement = textConsole();
532    controlsContainer.appendChild(textConsoleElement);
533
534    element.insertBefore(controlsContainer, element.firstChild);
535
536    updateUIControls();
537};
538
539const updateUIControls = () => {
540    // Update the state of the buttons based on the current mode
541    const nextButton = document.querySelector('.btn-next');
542    if (nextButton) {
543        nextButton.disabled = !isInAccessibleReadingOrderMode;
544    }
545
546    const prevButton = document.querySelector('.btn-prev');
547    if (prevButton) {
548        prevButton.disabled =
549            !isInAccessibleReadingOrderMode ||
550            !prevItem;
551    }
552
553    const audioButton = document.querySelector('.btn-audio');
554    if (audioButton) {
555        audioButton.disabled = !isInAccessibleReadingOrderMode;
556    }
557
558    // Show or hide the untagged document alert
559    const untaggedDocumentAlert = document.querySelector('.untagged-document-alert');
560    if (untaggedDocumentAlert) {
561        if (isAccessibleReadingOrderModeNoStructure) {
562            untaggedDocumentAlert.classList.add('visible');
563        } else {
564            untaggedDocumentAlert.classList.remove('visible');
565        }
566    }
567
568    // Update the current page text
569    const currentPageText = document.querySelector('.current-page-text');
570    if (currentPageText) {
571        currentPageText.textContent = `Current Page: ${currentPage}`;
572    }
573
574    // Update the text content in the text console
575    const textContent = document.querySelector('.text-content');
576    if (textContent) {
577        textContent.textContent = currentText ? currentText : 'No text is currently being read. Press "Next" to begin reading content.';
578    }
579}