Sabrina's 10 Key - PDF.js Integration Guide

Overview

This guide will help you integrate Sabrina's 10 Key adding machine calculator directly into your PDF.js viewer, allowing you to perform calculations while reviewing PDF documents.

Prerequisites

PDF.js viewer (version 2.0 or higher)
Basic knowledge of HTML/JavaScript
Access to your PDF.js installation directory

Installation Steps

Step 1: Download Integration Files

Download the PDF.js integration package from the website
Extract the files to a temporary directory
You should have the following files:
- sabrina-tenkey-integration.js - Main integration script
- popup.html - Calculator interface with embedded logic
- manifest.json - Configuration file

Step 2: Copy Files to PDF.js Directory

Copy the following files to your PDF.js web directory:

your-pdfjs-directory/ ├── web/ │ ├── viewer.html (existing) │ ├── viewer.js (existing) │ ├── sabrina-tenkey-integration.js (new) │ └── popup.html (new)

Step 3: Modify viewer.html

Add the integration script to your viewer.html file. Insert this line before the closing </body> tag:

<!-- Sabrina's 10 Key Integration -->
<script src="sabrina-tenkey-integration.js"></script>
</body>

Step 4: Configure Integration (Optional)

You can customize the integration by modifying the initialization in viewer.html:

<script>
// Custom configuration
document.addEventListener('DOMContentLoaded', function() {
    window.sabrinas10Key = new Sabrinas10KeyIntegration({
        position: 'bottom-right',  // Options: top-left, top-right, bottom-left, bottom-right, center
        toggleKey: 'Alt+T',        // Keyboard shortcut to toggle calculator
        autoHide: true,            // Hide calculator on startup
        width: '320px',            // Calculator width
        height: '500px'            // Calculator height
    });
});
</script>

Usage Instructions

Opening the Calculator

Keyboard Shortcut: Press Alt+T (or your configured shortcut)
Manual: Call window.sabrinas10Key.toggle() from the console

Calculator Features in PDF.js

Floating Panel: The calculator appears as a floating panel that can be dragged anywhere on screen
Always on Top: Calculator stays above the PDF content
Resizable: Drag edges to resize (if enabled)
Auto-Hide: Automatically hides when not in use

Keyboard Shortcuts

While the calculator is open:

Enter or Numpad +: Addition
Numpad -: Subtraction
Numpad *: Subtotal
Numpad /: Division
ESC: Clear all
Delete: Clear entry
Ctrl+C: Copy tape

Advanced Integration

Copying Results to PDF Annotations

To enable copying calculator results directly to PDF annotations:

// In your viewer.js or custom script
window.addEventListener('message', function(e) {
    if (e.data.type === 'calculatorResult') {
        // Get current annotation tool
        const annotationManager = PDFViewerApplication.pdfViewer.annotationManager;
        if (annotationManager) {
            // Create text annotation with result
            annotationManager.createTextAnnotation({
                page: PDFViewerApplication.page,
                text: e.data.value,
                x: lastClickX,
                y: lastClickY
            });
        }
    }
});

Persistent Tape History

To save calculator tape between sessions:

// Add to sabrina-tenkey-integration.js
saveTapeHistory() {
    const tape = this.iframe.contentWindow.getTapeData();
    localStorage.setItem('sabrinas10key_tape', JSON.stringify(tape));
}

loadTapeHistory() {
    const tape = localStorage.getItem('sabrinas10key_tape');
    if (tape) {
        this.iframe.contentWindow.setTapeData(JSON.parse(tape));
    }
}

Troubleshooting

Calculator Doesn't Appear

Check browser console for errors
Verify all files are in correct directories
Ensure popup.html path is correct in the integration script
Check if popup blockers are interfering

Keyboard Shortcuts Not Working

Ensure PDF viewer has focus
Check for conflicts with PDF.js shortcuts
Try different shortcut combinations

Calculator Loads But Doesn't Function

Verify popup.html loaded correctly with embedded JavaScript
Check for JavaScript errors in console
Ensure no Content Security Policy violations

Browser Compatibility

Chrome/Edge: Full support
Firefox: Full support
Safari: Limited drag functionality
Mobile: Touch support varies

Security Considerations

The calculator runs in an iframe for isolation
No external connections required
All calculations performed locally
No data is sent to external servers

Customization Options

Styling

Modify the container styles in sabrina-tenkey-integration.js:

this.container.style.cssText = `
    position: fixed;
    width: ${this.options.width};
    height: ${this.options.height};
    // Add your custom styles here
`;

Adding Custom Buttons

Extend the title bar with custom actions:

titleBar.innerHTML += `
    <button onclick="window.sabrinas10Key.minimize()">_</button>
    <button onclick="window.sabrinas10Key.maximize()">□</button>
`;

Note: This integration is provided as-is for use with legally obtained copies of PDF.js.

← Back to Home 📦 Download Integration Package