// ES6 Compliant Syntax
// GitHub Copilot v1, Claude Sonnet 4 (Preview), 2025-09-17
// File: showcase-demos/add-personal-bookmark-pdf/index.js
import WebViewer from '@pdftron/webviewer';
const licenseKey = 'YOUR_WEBVIEWER_LICENSE_KEY';
// Function to initialize and load the WebViewer with user bookmarks feature
function addUserBookmarks() {
const element = document.getElementById('viewer');
if (!element) {
console.error('Viewer div not found.');
return;
}
WebViewer({
path: '/lib',
initialDoc: 'https://apryse.s3.us-west-1.amazonaws.com/public/files/samples/Report_2011.pdf',
licenseKey: licenseKey,
enableFilePicker: true,
}, element).then(instance => {
instance.UI.enableFeatures([instance.UI.Feature.Initials]);
// Reset state on document change
instance.Core.documentViewer.addEventListener('documentLoaded', () => {
instance.UI.openElements(['tabPanel']);
instance.UI.setActiveTabInPanel({ tabPanel: 'tabPanel', tabName: 'bookmarksPanel' });
instance.UI.enableBookmarkIconShortcutVisibility();
setBookmarks({});
setBookmarkName('My Bookmark');
setPageNumber(1);
createBookmarkControls();
});
instance.UI.addEventListener('userBookmarksChanged', (bookmarks) => {
console.log('User bookmarks updated:', bookmarks);
});
});
}
// Bookmarks state
let bookmarks = {};
//Usage: 'setBookmarks({ ...bookmarks, [pageNumber]: bookmarkName });'
function setBookmarks(newBookmarks) {
bookmarks = newBookmarks;
// Optionally, update the UI or perform other actions here
}
// Page number state
let pageNumber = 1;
function setPageNumber(val) {
pageNumber = val;
}
// Bookmark name state
let bookmarkName = 'My Bookmark';
function setBookmarkName(val) {
bookmarkName = val;
}
// Error state
let error = '';
function setError(val) {
error = val;
// if empty, or null, hide error div
if (val && val !== '' && val.length !== 0) {
console.error('Bookmark Error:', val);
} else {
console.log('Clearing bookmark error');
}
const errorDiv = document.querySelector('#bookmark-error-div');
if (errorDiv) {
errorDiv.textContent = val;
errorDiv.style.display = 'block';
}
}
// Button enabled state
let isButtonEnabled = true;
function setIsButtonEnabled(enabled) {
isButtonEnabled = enabled;
const button = document.querySelector('.bookmark-add-btn');
if (button) {
button.disabled = !enabled;
}
}
// Function to create a new bookmark
function createNewBookmark() {
const doc = WebViewer.getInstance().Core.documentViewer.getDocument();
const bookmarksObject = bookmarks;
const bookmarkName = document.querySelector('.bookmark-title-input').value || 'My Bookmark';
setPageNumber(document.querySelector('.bookmark-page-input').value || 1);
console.log('Creating new bookmark at page', pageNumber, 'with name', bookmarkName);
// validate bookmarksObject exists
if (!bookmarksObject) {
console.log('Bookmarks feature is not available.');
return;
}
// validate doc exists
if (!doc) {
console.log('Document is not loaded.');
return;
}
// validate pageNumber is valid
if (isNaN(pageNumber) || pageNumber < 1 || pageNumber > doc.getPageCount()) {
setError('Please enter a valid page number.');
} else {
bookmarks[pageNumber - 1] = bookmarkName;
WebViewer.getInstance().UI.importBookmarks(bookmarksObject);
setBookmarks({ ...bookmarksObject, [pageNumber - 1]: bookmarkName });
setIsButtonEnabled(true);
setError('');
}
}
// Function to created bookmark controls
function createBookmarkControls() {
console.log('Loading bookmark controls');
//Checking if controls already exist
const existingControls = document.getElementById('controls-container');
if (existingControls) {
resetBookmarkControls();
console.log('Bookmark controls already exist');
return;
}
// Create a container for all controls (label, dropdown, and buttons)
const controlsContainer = document.createElement('div');
controlsContainer.className = 'control-container';
controlsContainer.id = 'controls-container';
const element = document.getElementById('viewer');
if (!element) {
console.error('Viewer div not found.');
return;
}
element.insertBefore(controlsContainer, element.firstChild);
console.log('controls.js loaded, createBookmarkControls:', window.createBookmarkControls);
// Dynamically load controls.js if not already loaded
if (!window.createBookmarkControls) {
const script = document.createElement('script');
script.src = '/showcase-demos/add-personal-bookmark-pdf/controls.js';
script.onload = function () {
console.log('Loaded controls', createControls);
console.log('createNewBookmarks:', createNewBookmark);
console.log('resetBookmarkControls:', resetBookmarkControls);
createControls('controls-container', createNewBookmark, resetBookmarkControls);
};
document.head.appendChild(script);
}
}
function resetBookmarkControls() {
setBookmarks({});//Clear bookmarks state
setPageNumber(1);
setBookmarkName('My Bookmark');
setError('');
setIsButtonEnabled(true);
console.log('Bookmark controls reset');
}
// Initialize the WebViewer and add user bookmarks feature
addUserBookmarks();
