Add page selector
This commit is contained in:
pjmalandrino
parent
cfd71a15d6
commit
4679078462
3 changed files with 139 additions and 0 deletions
|
|
@ -71,6 +71,15 @@
|
|||
<!-- PDF Preview -->
|
||||
<div id="pdf-preview-container" class="hidden">
|
||||
<h4>PDF Preview - Page <span id="preview-page-num">1</span></h4>
|
||||
<div class="preview-controls">
|
||||
<button class="nav-btn" onclick="changePreviewPage(-1)">❮ Previous</button>
|
||||
<div class="page-selector">
|
||||
<label>Page:</label>
|
||||
<input type="number" id="preview-page-input" min="1" value="1" class="page-input">
|
||||
<button class="go-btn" onclick="goToPreviewPage()">Go</button>
|
||||
</div>
|
||||
<button class="nav-btn" onclick="changePreviewPage(1)">Next ❯</button>
|
||||
</div>
|
||||
<img id="pdf-preview-image" src="" alt="PDF Preview">
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -21,6 +21,12 @@ function loadPDFPreview() {
|
|||
// Update page number display
|
||||
document.getElementById('preview-page-num').textContent = pageNum;
|
||||
|
||||
// Update preview page input
|
||||
const previewPageInput = document.getElementById('preview-page-input');
|
||||
if (previewPageInput) {
|
||||
previewPageInput.value = pageNum;
|
||||
}
|
||||
|
||||
// Load the preview image
|
||||
const previewImg = document.getElementById('pdf-preview-image');
|
||||
previewImg.src = `/pdf-preview/${encodeURIComponent(pdfFile)}/${pageNum}`;
|
||||
|
|
@ -35,6 +41,38 @@ function loadPDFPreview() {
|
|||
};
|
||||
}
|
||||
|
||||
// Navigate to a specific page in the preview
|
||||
function navigateToPage(pageNum) {
|
||||
const pdfFile = document.getElementById('pdf_file').value;
|
||||
if (!pdfFile) return;
|
||||
|
||||
// Update the main page number input
|
||||
document.getElementById('page_num').value = pageNum;
|
||||
|
||||
// Reload the preview
|
||||
loadPDFPreview();
|
||||
}
|
||||
|
||||
// Handle preview page navigation
|
||||
function changePreviewPage(delta) {
|
||||
const currentPage = parseInt(document.getElementById('page_num').value);
|
||||
const newPage = Math.max(1, currentPage + delta);
|
||||
navigateToPage(newPage);
|
||||
}
|
||||
|
||||
// Handle direct page input in preview
|
||||
function goToPreviewPage() {
|
||||
const pageInput = document.getElementById('preview-page-input');
|
||||
const pageNum = parseInt(pageInput.value);
|
||||
|
||||
if (pageNum && pageNum > 0) {
|
||||
navigateToPage(pageNum);
|
||||
} else {
|
||||
// Reset to current page if invalid
|
||||
pageInput.value = document.getElementById('page_num').value;
|
||||
}
|
||||
}
|
||||
|
||||
// Tab switching functionality
|
||||
function switchTab(tabName) {
|
||||
// Hide all tab contents
|
||||
|
|
@ -220,6 +258,16 @@ window.addEventListener('DOMContentLoaded', function() {
|
|||
document.getElementById('pdf_file').addEventListener('change', loadPDFPreview);
|
||||
document.getElementById('page_num').addEventListener('change', loadPDFPreview);
|
||||
|
||||
// Add event listener for preview page input (if it exists)
|
||||
const previewPageInput = document.getElementById('preview-page-input');
|
||||
if (previewPageInput) {
|
||||
previewPageInput.addEventListener('keypress', function(e) {
|
||||
if (e.key === 'Enter') {
|
||||
goToPreviewPage();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Run an environment check on startup
|
||||
checkEnvironment();
|
||||
|
||||
|
|
|
|||
|
|
@ -441,6 +441,77 @@ button:disabled {
|
|||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Preview Controls */
|
||||
.preview-controls {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: var(--spacing-md);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
padding: var(--spacing-md);
|
||||
background: var(--surface-white);
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
background: var(--primary-medium);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.nav-btn:hover {
|
||||
background: var(--primary-dark);
|
||||
}
|
||||
|
||||
.page-selector {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.page-selector label {
|
||||
margin: 0;
|
||||
font-weight: 500;
|
||||
color: var(--text-medium);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.page-input {
|
||||
width: 60px;
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-sm);
|
||||
text-align: center;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.go-btn {
|
||||
padding: var(--spacing-xs) var(--spacing-md);
|
||||
background: var(--accent-mint);
|
||||
color: var(--primary-dark);
|
||||
border: none;
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.go-btn:hover {
|
||||
background: var(--primary-medium);
|
||||
color: white;
|
||||
}
|
||||
|
||||
#pdf-preview-image {
|
||||
max-width: 100%;
|
||||
max-height: 600px;
|
||||
|
|
@ -762,4 +833,15 @@ button:disabled {
|
|||
#modal-image {
|
||||
max-height: 60vh;
|
||||
}
|
||||
|
||||
/* Preview controls responsive */
|
||||
.preview-controls {
|
||||
flex-wrap: wrap;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
font-size: 0.8rem;
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue