feat: add Quick Look page preview and unify thumbnail styles across all tools
This commit is contained in:
alam00000
@@ -159,7 +159,7 @@ async function renderThumbnails() {
|
||||
|
||||
for (let i = 1; i <= deleteState.totalPages; i++) {
|
||||
const page = await deleteState.pdfJsDoc.getPage(i);
|
||||
const viewport = page.getViewport({ scale: 0.3 });
|
||||
const viewport = page.getViewport({ scale: 1 });
|
||||
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = viewport.width;
|
||||
|
||||
@@ -9,6 +9,7 @@ import {
|
||||
renderPagesProgressively,
|
||||
cleanupLazyRendering,
|
||||
} from '../utils/render-utils.js';
|
||||
import { initPagePreview } from '../utils/page-preview.js';
|
||||
import { isCpdfAvailable } from '../utils/cpdf-helper.js';
|
||||
import {
|
||||
showWasmRequiredDialog,
|
||||
@@ -210,6 +211,8 @@ async function renderPageMergeThumbnails() {
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
initPagePreview(container, pdfjsDoc);
|
||||
}
|
||||
|
||||
mergeState.cachedThumbnails = true;
|
||||
|
||||
@@ -1,365 +1,425 @@
|
||||
import { createIcons, icons } from 'lucide';
|
||||
import { showAlert, showLoader, hideLoader } from '../ui.js';
|
||||
import { readFileAsArrayBuffer, formatBytes, downloadFile, getPDFDocument } from '../utils/helpers.js';
|
||||
import {
|
||||
readFileAsArrayBuffer,
|
||||
formatBytes,
|
||||
downloadFile,
|
||||
getPDFDocument,
|
||||
} from '../utils/helpers.js';
|
||||
import { initPagePreview } from '../utils/page-preview.js';
|
||||
import { PDFDocument } from 'pdf-lib';
|
||||
import * as pdfjsLib from 'pdfjs-dist';
|
||||
import Sortable from 'sortablejs';
|
||||
|
||||
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
|
||||
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
|
||||
'pdfjs-dist/build/pdf.worker.min.mjs',
|
||||
import.meta.url
|
||||
).toString();
|
||||
|
||||
interface OrganizeState {
|
||||
file: File | null;
|
||||
pdfDoc: any;
|
||||
pdfJsDoc: any;
|
||||
totalPages: number;
|
||||
sortableInstance: any;
|
||||
file: File | null;
|
||||
pdfDoc: any;
|
||||
pdfJsDoc: any;
|
||||
totalPages: number;
|
||||
sortableInstance: any;
|
||||
}
|
||||
|
||||
const organizeState: OrganizeState = {
|
||||
file: null,
|
||||
pdfDoc: null,
|
||||
pdfJsDoc: null,
|
||||
totalPages: 0,
|
||||
sortableInstance: null,
|
||||
file: null,
|
||||
pdfDoc: null,
|
||||
pdfJsDoc: null,
|
||||
totalPages: 0,
|
||||
sortableInstance: null,
|
||||
};
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', initializePage);
|
||||
document.addEventListener('DOMContentLoaded', initializePage);
|
||||
} else {
|
||||
initializePage();
|
||||
initializePage();
|
||||
}
|
||||
|
||||
function initializePage() {
|
||||
createIcons({ icons });
|
||||
createIcons({ icons });
|
||||
|
||||
const fileInput = document.getElementById('file-input') as HTMLInputElement;
|
||||
const dropZone = document.getElementById('drop-zone');
|
||||
const processBtn = document.getElementById('process-btn');
|
||||
const fileInput = document.getElementById('file-input') as HTMLInputElement;
|
||||
const dropZone = document.getElementById('drop-zone');
|
||||
const processBtn = document.getElementById('process-btn');
|
||||
|
||||
if (fileInput) fileInput.addEventListener('change', handleFileUpload);
|
||||
if (fileInput) fileInput.addEventListener('change', handleFileUpload);
|
||||
|
||||
if (dropZone) {
|
||||
dropZone.addEventListener('dragover', (e) => { e.preventDefault(); dropZone.classList.add('bg-gray-700'); });
|
||||
dropZone.addEventListener('dragleave', () => { dropZone.classList.remove('bg-gray-700'); });
|
||||
dropZone.addEventListener('drop', (e) => {
|
||||
e.preventDefault();
|
||||
dropZone.classList.remove('bg-gray-700');
|
||||
const droppedFiles = e.dataTransfer?.files;
|
||||
if (droppedFiles && droppedFiles.length > 0) handleFile(droppedFiles[0]);
|
||||
});
|
||||
// Clear value on click to allow re-selecting the same file
|
||||
fileInput?.addEventListener('click', () => {
|
||||
if (fileInput) fileInput.value = '';
|
||||
});
|
||||
}
|
||||
|
||||
if (processBtn) processBtn.addEventListener('click', saveChanges);
|
||||
|
||||
document.getElementById('back-to-tools')?.addEventListener('click', () => {
|
||||
window.location.href = import.meta.env.BASE_URL;
|
||||
if (dropZone) {
|
||||
dropZone.addEventListener('dragover', (e) => {
|
||||
e.preventDefault();
|
||||
dropZone.classList.add('bg-gray-700');
|
||||
});
|
||||
dropZone.addEventListener('dragleave', () => {
|
||||
dropZone.classList.remove('bg-gray-700');
|
||||
});
|
||||
dropZone.addEventListener('drop', (e) => {
|
||||
e.preventDefault();
|
||||
dropZone.classList.remove('bg-gray-700');
|
||||
const droppedFiles = e.dataTransfer?.files;
|
||||
if (droppedFiles && droppedFiles.length > 0) handleFile(droppedFiles[0]);
|
||||
});
|
||||
// Clear value on click to allow re-selecting the same file
|
||||
fileInput?.addEventListener('click', () => {
|
||||
if (fileInput) fileInput.value = '';
|
||||
});
|
||||
}
|
||||
|
||||
const applyOrderBtn = document.getElementById('apply-order-btn');
|
||||
if (applyOrderBtn) applyOrderBtn.addEventListener('click', applyCustomOrder);
|
||||
if (processBtn) processBtn.addEventListener('click', saveChanges);
|
||||
|
||||
document.getElementById('back-to-tools')?.addEventListener('click', () => {
|
||||
window.location.href = import.meta.env.BASE_URL;
|
||||
});
|
||||
|
||||
const applyOrderBtn = document.getElementById('apply-order-btn');
|
||||
if (applyOrderBtn) applyOrderBtn.addEventListener('click', applyCustomOrder);
|
||||
}
|
||||
|
||||
function applyCustomOrder() {
|
||||
const orderInput = document.getElementById('page-order-input') as HTMLInputElement;
|
||||
const grid = document.getElementById('page-grid');
|
||||
const orderInput = document.getElementById(
|
||||
'page-order-input'
|
||||
) as HTMLInputElement;
|
||||
const grid = document.getElementById('page-grid');
|
||||
|
||||
if (!orderInput || !grid) return;
|
||||
if (!orderInput || !grid) return;
|
||||
|
||||
const orderString = orderInput.value;
|
||||
if (!orderString) {
|
||||
showAlert('Invalid Order', 'Please enter a page order.');
|
||||
return;
|
||||
const orderString = orderInput.value;
|
||||
if (!orderString) {
|
||||
showAlert('Invalid Order', 'Please enter a page order.');
|
||||
return;
|
||||
}
|
||||
|
||||
const newOrder = orderString.split(',').map((s) => parseInt(s.trim(), 10));
|
||||
|
||||
// Validation
|
||||
const currentGridCount = grid.children.length;
|
||||
const validNumbers = newOrder.every((n) => !isNaN(n) && n > 0); // Basic check, will validate against available thumbnails
|
||||
if (!validNumbers) {
|
||||
showAlert('Invalid Page Numbers', `Please enter positive numbers.`);
|
||||
return;
|
||||
}
|
||||
|
||||
if (newOrder.length !== currentGridCount) {
|
||||
showAlert(
|
||||
'Incorrect Page Count',
|
||||
`The number of pages specified (${newOrder.length}) does not match the current number of pages in the document (${currentGridCount}). Please provide a complete ordering for all pages.`
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
const uniqueNumbers = new Set(newOrder);
|
||||
if (uniqueNumbers.size !== newOrder.length) {
|
||||
showAlert(
|
||||
'Duplicate Page Numbers',
|
||||
'Please ensure all page numbers in the order are unique.'
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
const currentThumbnails = Array.from(grid.children) as HTMLElement[];
|
||||
const reorderedThumbnails: HTMLElement[] = [];
|
||||
const foundIndices = new Set();
|
||||
|
||||
for (const pageNum of newOrder) {
|
||||
const originalIndexToFind = pageNum - 1; // pageNum is 1-based, originalPageIndex is 0-based
|
||||
const foundThumbnail = currentThumbnails.find(
|
||||
(thumb) =>
|
||||
thumb.dataset.originalPageIndex === originalIndexToFind.toString()
|
||||
);
|
||||
|
||||
if (foundThumbnail) {
|
||||
reorderedThumbnails.push(foundThumbnail);
|
||||
foundIndices.add(originalIndexToFind.toString());
|
||||
}
|
||||
}
|
||||
|
||||
const newOrder = orderString.split(',').map(s => parseInt(s.trim(), 10));
|
||||
const allOriginalIndicesPresent = currentThumbnails.every((thumb) =>
|
||||
foundIndices.has(thumb.dataset.originalPageIndex)
|
||||
);
|
||||
|
||||
// Validation
|
||||
const currentGridCount = grid.children.length;
|
||||
const validNumbers = newOrder.every(n => !isNaN(n) && n > 0); // Basic check, will validate against available thumbnails
|
||||
if (!validNumbers) {
|
||||
showAlert('Invalid Page Numbers', `Please enter positive numbers.`);
|
||||
return;
|
||||
}
|
||||
if (
|
||||
reorderedThumbnails.length !== currentGridCount ||
|
||||
!allOriginalIndicesPresent
|
||||
) {
|
||||
showAlert(
|
||||
'Invalid Page Order',
|
||||
'The specified page order is incomplete or contains invalid page numbers. Please ensure you provide a new position for every original page.'
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
if (newOrder.length !== currentGridCount) {
|
||||
showAlert('Incorrect Page Count', `The number of pages specified (${newOrder.length}) does not match the current number of pages in the document (${currentGridCount}). Please provide a complete ordering for all pages.`);
|
||||
return;
|
||||
}
|
||||
// Clear the grid and append the reordered thumbnails
|
||||
grid.innerHTML = '';
|
||||
reorderedThumbnails.forEach((thumb) => grid.appendChild(thumb));
|
||||
|
||||
const uniqueNumbers = new Set(newOrder);
|
||||
if (uniqueNumbers.size !== newOrder.length) {
|
||||
showAlert('Duplicate Page Numbers', 'Please ensure all page numbers in the order are unique.');
|
||||
return;
|
||||
}
|
||||
initializeSortable(); // Re-initialize sortable on the new order
|
||||
|
||||
const currentThumbnails = Array.from(grid.children) as HTMLElement[];
|
||||
const reorderedThumbnails: HTMLElement[] = [];
|
||||
const foundIndices = new Set();
|
||||
|
||||
for (const pageNum of newOrder) {
|
||||
const originalIndexToFind = pageNum - 1; // pageNum is 1-based, originalPageIndex is 0-based
|
||||
const foundThumbnail = currentThumbnails.find(
|
||||
thumb => thumb.dataset.originalPageIndex === originalIndexToFind.toString()
|
||||
);
|
||||
|
||||
if (foundThumbnail) {
|
||||
reorderedThumbnails.push(foundThumbnail);
|
||||
foundIndices.add(originalIndexToFind.toString());
|
||||
}
|
||||
}
|
||||
|
||||
const allOriginalIndicesPresent = currentThumbnails.every(thumb => foundIndices.has(thumb.dataset.originalPageIndex));
|
||||
|
||||
if (reorderedThumbnails.length !== currentGridCount || !allOriginalIndicesPresent) {
|
||||
showAlert('Invalid Page Order', 'The specified page order is incomplete or contains invalid page numbers. Please ensure you provide a new position for every original page.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Clear the grid and append the reordered thumbnails
|
||||
grid.innerHTML = '';
|
||||
reorderedThumbnails.forEach(thumb => grid.appendChild(thumb));
|
||||
|
||||
initializeSortable(); // Re-initialize sortable on the new order
|
||||
|
||||
showAlert('Success', 'Pages have been reordered.', 'success');
|
||||
showAlert('Success', 'Pages have been reordered.', 'success');
|
||||
}
|
||||
|
||||
function handleFileUpload(e: Event) {
|
||||
const input = e.target as HTMLInputElement;
|
||||
if (input.files && input.files.length > 0) handleFile(input.files[0]);
|
||||
const input = e.target as HTMLInputElement;
|
||||
if (input.files && input.files.length > 0) handleFile(input.files[0]);
|
||||
}
|
||||
|
||||
async function handleFile(file: File) {
|
||||
if (file.type !== 'application/pdf' && !file.name.toLowerCase().endsWith('.pdf')) {
|
||||
showAlert('Invalid File', 'Please select a PDF file.');
|
||||
return;
|
||||
}
|
||||
if (
|
||||
file.type !== 'application/pdf' &&
|
||||
!file.name.toLowerCase().endsWith('.pdf')
|
||||
) {
|
||||
showAlert('Invalid File', 'Please select a PDF file.');
|
||||
return;
|
||||
}
|
||||
|
||||
showLoader('Loading PDF...');
|
||||
organizeState.file = file;
|
||||
showLoader('Loading PDF...');
|
||||
organizeState.file = file;
|
||||
|
||||
try {
|
||||
const arrayBuffer = await readFileAsArrayBuffer(file);
|
||||
organizeState.pdfDoc = await PDFDocument.load(arrayBuffer as ArrayBuffer, { ignoreEncryption: true, throwOnInvalidObject: false });
|
||||
organizeState.pdfJsDoc = await getPDFDocument({ data: (arrayBuffer as ArrayBuffer).slice(0) }).promise;
|
||||
organizeState.totalPages = organizeState.pdfDoc.getPageCount();
|
||||
try {
|
||||
const arrayBuffer = await readFileAsArrayBuffer(file);
|
||||
organizeState.pdfDoc = await PDFDocument.load(arrayBuffer as ArrayBuffer, {
|
||||
ignoreEncryption: true,
|
||||
throwOnInvalidObject: false,
|
||||
});
|
||||
organizeState.pdfJsDoc = await getPDFDocument({
|
||||
data: (arrayBuffer as ArrayBuffer).slice(0),
|
||||
}).promise;
|
||||
organizeState.totalPages = organizeState.pdfDoc.getPageCount();
|
||||
|
||||
updateFileDisplay();
|
||||
await renderThumbnails();
|
||||
hideLoader();
|
||||
} catch (error) {
|
||||
console.error('Error loading PDF:', error);
|
||||
hideLoader();
|
||||
showAlert('Error', 'Failed to load PDF file.');
|
||||
}
|
||||
updateFileDisplay();
|
||||
await renderThumbnails();
|
||||
hideLoader();
|
||||
} catch (error) {
|
||||
console.error('Error loading PDF:', error);
|
||||
hideLoader();
|
||||
showAlert('Error', 'Failed to load PDF file.');
|
||||
}
|
||||
}
|
||||
|
||||
function updateFileDisplay() {
|
||||
const fileDisplayArea = document.getElementById('file-display-area');
|
||||
if (!fileDisplayArea || !organizeState.file) return;
|
||||
const fileDisplayArea = document.getElementById('file-display-area');
|
||||
if (!fileDisplayArea || !organizeState.file) return;
|
||||
|
||||
fileDisplayArea.innerHTML = '';
|
||||
const fileDiv = document.createElement('div');
|
||||
fileDiv.className = 'flex items-center justify-between bg-gray-700 p-3 rounded-lg';
|
||||
fileDisplayArea.innerHTML = '';
|
||||
const fileDiv = document.createElement('div');
|
||||
fileDiv.className =
|
||||
'flex items-center justify-between bg-gray-700 p-3 rounded-lg';
|
||||
|
||||
const infoContainer = document.createElement('div');
|
||||
infoContainer.className = 'flex flex-col flex-1 min-w-0';
|
||||
const infoContainer = document.createElement('div');
|
||||
infoContainer.className = 'flex flex-col flex-1 min-w-0';
|
||||
|
||||
const nameSpan = document.createElement('div');
|
||||
nameSpan.className = 'truncate font-medium text-gray-200 text-sm mb-1';
|
||||
nameSpan.textContent = organizeState.file.name;
|
||||
const nameSpan = document.createElement('div');
|
||||
nameSpan.className = 'truncate font-medium text-gray-200 text-sm mb-1';
|
||||
nameSpan.textContent = organizeState.file.name;
|
||||
|
||||
const metaSpan = document.createElement('div');
|
||||
metaSpan.className = 'text-xs text-gray-400';
|
||||
metaSpan.textContent = `${formatBytes(organizeState.file.size)} • ${organizeState.totalPages} pages`;
|
||||
const metaSpan = document.createElement('div');
|
||||
metaSpan.className = 'text-xs text-gray-400';
|
||||
metaSpan.textContent = `${formatBytes(organizeState.file.size)} • ${organizeState.totalPages} pages`;
|
||||
|
||||
infoContainer.append(nameSpan, metaSpan);
|
||||
infoContainer.append(nameSpan, metaSpan);
|
||||
|
||||
const removeBtn = document.createElement('button');
|
||||
removeBtn.className = 'ml-4 text-red-400 hover:text-red-300 flex-shrink-0';
|
||||
removeBtn.innerHTML = '<i data-lucide="trash-2" class="w-4 h-4"></i>';
|
||||
removeBtn.onclick = () => resetState();
|
||||
const removeBtn = document.createElement('button');
|
||||
removeBtn.className = 'ml-4 text-red-400 hover:text-red-300 flex-shrink-0';
|
||||
removeBtn.innerHTML = '<i data-lucide="trash-2" class="w-4 h-4"></i>';
|
||||
removeBtn.onclick = () => resetState();
|
||||
|
||||
fileDiv.append(infoContainer, removeBtn);
|
||||
fileDisplayArea.appendChild(fileDiv);
|
||||
createIcons({ icons });
|
||||
fileDiv.append(infoContainer, removeBtn);
|
||||
fileDisplayArea.appendChild(fileDiv);
|
||||
createIcons({ icons });
|
||||
}
|
||||
|
||||
function renumberPages() {
|
||||
const grid = document.getElementById('page-grid');
|
||||
if (!grid) return;
|
||||
const labels = grid.querySelectorAll('.page-number');
|
||||
labels.forEach((label, index) => {
|
||||
label.textContent = (index + 1).toString();
|
||||
});
|
||||
const grid = document.getElementById('page-grid');
|
||||
if (!grid) return;
|
||||
const labels = grid.querySelectorAll('.page-number');
|
||||
labels.forEach((label, index) => {
|
||||
label.textContent = (index + 1).toString();
|
||||
});
|
||||
}
|
||||
|
||||
function attachEventListeners(element: HTMLElement) {
|
||||
const duplicateBtn = element.querySelector('.duplicate-btn');
|
||||
const deleteBtn = element.querySelector('.delete-btn');
|
||||
const duplicateBtn = element.querySelector('.duplicate-btn');
|
||||
const deleteBtn = element.querySelector('.delete-btn');
|
||||
|
||||
duplicateBtn?.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
const clone = element.cloneNode(true) as HTMLElement;
|
||||
element.after(clone);
|
||||
attachEventListeners(clone);
|
||||
renumberPages();
|
||||
createIcons({ icons });
|
||||
initializeSortable();
|
||||
});
|
||||
duplicateBtn?.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
const clone = element.cloneNode(true) as HTMLElement;
|
||||
element.after(clone);
|
||||
attachEventListeners(clone);
|
||||
renumberPages();
|
||||
createIcons({ icons });
|
||||
initializeSortable();
|
||||
});
|
||||
|
||||
deleteBtn?.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
const grid = document.getElementById('page-grid');
|
||||
if (grid && grid.children.length > 1) {
|
||||
element.remove();
|
||||
renumberPages();
|
||||
initializeSortable();
|
||||
} else {
|
||||
showAlert('Cannot Delete', 'You cannot delete the last page of the document.');
|
||||
}
|
||||
});
|
||||
deleteBtn?.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
const grid = document.getElementById('page-grid');
|
||||
if (grid && grid.children.length > 1) {
|
||||
element.remove();
|
||||
renumberPages();
|
||||
initializeSortable();
|
||||
} else {
|
||||
showAlert(
|
||||
'Cannot Delete',
|
||||
'You cannot delete the last page of the document.'
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function renderThumbnails() {
|
||||
const grid = document.getElementById('page-grid');
|
||||
const processBtn = document.getElementById('process-btn');
|
||||
const advancedSettings = document.getElementById('advanced-settings');
|
||||
if (!grid || !processBtn || !advancedSettings) return;
|
||||
const grid = document.getElementById('page-grid');
|
||||
const processBtn = document.getElementById('process-btn');
|
||||
const advancedSettings = document.getElementById('advanced-settings');
|
||||
if (!grid || !processBtn || !advancedSettings) return;
|
||||
|
||||
grid.innerHTML = '';
|
||||
grid.classList.remove('hidden');
|
||||
processBtn.classList.remove('hidden');
|
||||
advancedSettings.classList.remove('hidden');
|
||||
grid.innerHTML = '';
|
||||
grid.classList.remove('hidden');
|
||||
processBtn.classList.remove('hidden');
|
||||
advancedSettings.classList.remove('hidden');
|
||||
|
||||
for (let i = 1; i <= organizeState.totalPages; i++) {
|
||||
const page = await organizeState.pdfJsDoc.getPage(i);
|
||||
const viewport = page.getViewport({ scale: 0.5 });
|
||||
for (let i = 1; i <= organizeState.totalPages; i++) {
|
||||
const page = await organizeState.pdfJsDoc.getPage(i);
|
||||
const viewport = page.getViewport({ scale: 1 });
|
||||
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = viewport.width;
|
||||
canvas.height = viewport.height;
|
||||
const ctx = canvas.getContext('2d');
|
||||
await page.render({ canvasContext: ctx, viewport }).promise;
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = viewport.width;
|
||||
canvas.height = viewport.height;
|
||||
const ctx = canvas.getContext('2d');
|
||||
await page.render({ canvasContext: ctx, viewport }).promise;
|
||||
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.className = 'page-thumbnail relative cursor-move flex flex-col items-center gap-2';
|
||||
wrapper.dataset.originalPageIndex = (i - 1).toString();
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.className =
|
||||
'page-thumbnail relative cursor-move flex flex-col items-center gap-1 p-2 border-2 border-gray-600 hover:border-indigo-500 rounded-lg bg-gray-700 transition-colors group';
|
||||
wrapper.dataset.originalPageIndex = (i - 1).toString();
|
||||
wrapper.dataset.pageNumber = i.toString();
|
||||
|
||||
const imgContainer = document.createElement('div');
|
||||
imgContainer.className = 'w-full h-36 bg-gray-900 rounded-lg flex items-center justify-center overflow-hidden border-2 border-gray-600';
|
||||
const imgContainer = document.createElement('div');
|
||||
imgContainer.className = 'relative';
|
||||
|
||||
const img = document.createElement('img');
|
||||
img.src = canvas.toDataURL();
|
||||
img.className = 'max-w-full max-h-full object-contain';
|
||||
imgContainer.appendChild(img);
|
||||
const img = document.createElement('img');
|
||||
img.src = canvas.toDataURL();
|
||||
img.className = 'rounded-md shadow-md max-w-full h-auto';
|
||||
imgContainer.appendChild(img);
|
||||
|
||||
const pageLabel = document.createElement('span');
|
||||
pageLabel.className = 'page-number absolute top-1 left-1 bg-gray-900 bg-opacity-75 text-white text-xs rounded-full px-2 py-1';
|
||||
pageLabel.textContent = i.toString();
|
||||
const pageLabel = document.createElement('div');
|
||||
pageLabel.className =
|
||||
'page-number absolute top-1 left-1 bg-indigo-600 text-white text-xs px-2 py-1 rounded-md font-semibold shadow-lg z-10 pointer-events-none';
|
||||
pageLabel.textContent = i.toString();
|
||||
imgContainer.appendChild(pageLabel);
|
||||
|
||||
const controlsDiv = document.createElement('div');
|
||||
controlsDiv.className = 'flex items-center justify-center gap-4';
|
||||
const controlsDiv = document.createElement('div');
|
||||
controlsDiv.className = 'flex items-center justify-center gap-4';
|
||||
|
||||
const duplicateBtn = document.createElement('button');
|
||||
duplicateBtn.className = 'duplicate-btn bg-green-600 hover:bg-green-700 text-white rounded-full w-8 h-8 flex items-center justify-center';
|
||||
duplicateBtn.title = 'Duplicate Page';
|
||||
duplicateBtn.innerHTML = '<i data-lucide="copy-plus" class="w-5 h-5"></i>';
|
||||
const duplicateBtn = document.createElement('button');
|
||||
duplicateBtn.className =
|
||||
'duplicate-btn bg-green-600 hover:bg-green-700 text-white rounded-full w-8 h-8 flex items-center justify-center';
|
||||
duplicateBtn.title = 'Duplicate Page';
|
||||
duplicateBtn.innerHTML = '<i data-lucide="copy-plus" class="w-5 h-5"></i>';
|
||||
|
||||
const deleteBtn = document.createElement('button');
|
||||
deleteBtn.className = 'delete-btn bg-red-600 hover:bg-red-700 text-white rounded-full w-8 h-8 flex items-center justify-center';
|
||||
deleteBtn.title = 'Delete Page';
|
||||
deleteBtn.innerHTML = '<i data-lucide="x-circle" class="w-5 h-5"></i>';
|
||||
const deleteBtn = document.createElement('button');
|
||||
deleteBtn.className =
|
||||
'delete-btn bg-red-600 hover:bg-red-700 text-white rounded-full w-8 h-8 flex items-center justify-center';
|
||||
deleteBtn.title = 'Delete Page';
|
||||
deleteBtn.innerHTML = '<i data-lucide="x-circle" class="w-5 h-5"></i>';
|
||||
|
||||
controlsDiv.append(duplicateBtn, deleteBtn);
|
||||
wrapper.append(imgContainer, pageLabel, controlsDiv);
|
||||
grid.appendChild(wrapper);
|
||||
controlsDiv.append(duplicateBtn, deleteBtn);
|
||||
wrapper.append(imgContainer, controlsDiv);
|
||||
grid.appendChild(wrapper);
|
||||
|
||||
attachEventListeners(wrapper);
|
||||
}
|
||||
attachEventListeners(wrapper);
|
||||
}
|
||||
|
||||
createIcons({ icons });
|
||||
initializeSortable();
|
||||
createIcons({ icons });
|
||||
initializeSortable();
|
||||
initPagePreview(grid, organizeState.pdfJsDoc);
|
||||
}
|
||||
|
||||
function initializeSortable() {
|
||||
const grid = document.getElementById('page-grid');
|
||||
if (!grid) return;
|
||||
const grid = document.getElementById('page-grid');
|
||||
if (!grid) return;
|
||||
|
||||
if (organizeState.sortableInstance) organizeState.sortableInstance.destroy();
|
||||
if (organizeState.sortableInstance) organizeState.sortableInstance.destroy();
|
||||
|
||||
organizeState.sortableInstance = Sortable.create(grid, {
|
||||
animation: 150,
|
||||
ghostClass: 'sortable-ghost',
|
||||
chosenClass: 'sortable-chosen',
|
||||
dragClass: 'sortable-drag',
|
||||
filter: '.duplicate-btn, .delete-btn',
|
||||
preventOnFilter: true,
|
||||
onStart: (evt) => {
|
||||
if (evt.item) evt.item.style.opacity = '0.5';
|
||||
},
|
||||
onEnd: (evt) => {
|
||||
if (evt.item) evt.item.style.opacity = '1';
|
||||
},
|
||||
});
|
||||
organizeState.sortableInstance = Sortable.create(grid, {
|
||||
animation: 150,
|
||||
ghostClass: 'sortable-ghost',
|
||||
chosenClass: 'sortable-chosen',
|
||||
dragClass: 'sortable-drag',
|
||||
filter: '.duplicate-btn, .delete-btn',
|
||||
preventOnFilter: true,
|
||||
onStart: (evt) => {
|
||||
if (evt.item) evt.item.style.opacity = '0.5';
|
||||
},
|
||||
onEnd: (evt) => {
|
||||
if (evt.item) evt.item.style.opacity = '1';
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
async function saveChanges() {
|
||||
showLoader('Building new PDF...');
|
||||
showLoader('Building new PDF...');
|
||||
|
||||
try {
|
||||
const grid = document.getElementById('page-grid');
|
||||
if (!grid) return;
|
||||
try {
|
||||
const grid = document.getElementById('page-grid');
|
||||
if (!grid) return;
|
||||
|
||||
const finalPageElements = grid.querySelectorAll('.page-thumbnail');
|
||||
const finalIndices = Array.from(finalPageElements)
|
||||
.map(el => parseInt((el as HTMLElement).dataset.originalPageIndex || '', 10))
|
||||
.filter(index => !isNaN(index) && index >= 0);
|
||||
const finalPageElements = grid.querySelectorAll('.page-thumbnail');
|
||||
const finalIndices = Array.from(finalPageElements)
|
||||
.map((el) =>
|
||||
parseInt((el as HTMLElement).dataset.originalPageIndex || '', 10)
|
||||
)
|
||||
.filter((index) => !isNaN(index) && index >= 0);
|
||||
|
||||
if (finalIndices.length === 0) {
|
||||
showAlert('Error', 'No valid pages to save.');
|
||||
return;
|
||||
}
|
||||
|
||||
const newPdf = await PDFDocument.create();
|
||||
const copiedPages = await newPdf.copyPages(organizeState.pdfDoc, finalIndices);
|
||||
copiedPages.forEach(page => newPdf.addPage(page));
|
||||
|
||||
const pdfBytes = await newPdf.save();
|
||||
const baseName = organizeState.file?.name.replace('.pdf', '') || 'document';
|
||||
downloadFile(new Blob([pdfBytes as BlobPart], { type: 'application/pdf' }), `${baseName}_organized.pdf`);
|
||||
|
||||
hideLoader();
|
||||
showAlert('Success', 'PDF organized successfully!', 'success', () => resetState());
|
||||
} catch (error) {
|
||||
console.error('Error saving changes:', error);
|
||||
hideLoader();
|
||||
showAlert('Error', 'Failed to save changes.');
|
||||
if (finalIndices.length === 0) {
|
||||
showAlert('Error', 'No valid pages to save.');
|
||||
return;
|
||||
}
|
||||
|
||||
const newPdf = await PDFDocument.create();
|
||||
const copiedPages = await newPdf.copyPages(
|
||||
organizeState.pdfDoc,
|
||||
finalIndices
|
||||
);
|
||||
copiedPages.forEach((page) => newPdf.addPage(page));
|
||||
|
||||
const pdfBytes = await newPdf.save();
|
||||
const baseName = organizeState.file?.name.replace('.pdf', '') || 'document';
|
||||
downloadFile(
|
||||
new Blob([pdfBytes as BlobPart], { type: 'application/pdf' }),
|
||||
`${baseName}_organized.pdf`
|
||||
);
|
||||
|
||||
hideLoader();
|
||||
showAlert('Success', 'PDF organized successfully!', 'success', () =>
|
||||
resetState()
|
||||
);
|
||||
} catch (error) {
|
||||
console.error('Error saving changes:', error);
|
||||
hideLoader();
|
||||
showAlert('Error', 'Failed to save changes.');
|
||||
}
|
||||
}
|
||||
|
||||
function resetState() {
|
||||
if (organizeState.sortableInstance) {
|
||||
organizeState.sortableInstance.destroy();
|
||||
organizeState.sortableInstance = null;
|
||||
}
|
||||
if (organizeState.sortableInstance) {
|
||||
organizeState.sortableInstance.destroy();
|
||||
organizeState.sortableInstance = null;
|
||||
}
|
||||
|
||||
organizeState.file = null;
|
||||
organizeState.pdfDoc = null;
|
||||
organizeState.pdfJsDoc = null;
|
||||
organizeState.totalPages = 0;
|
||||
organizeState.file = null;
|
||||
organizeState.pdfDoc = null;
|
||||
organizeState.pdfJsDoc = null;
|
||||
organizeState.totalPages = 0;
|
||||
|
||||
const grid = document.getElementById('page-grid');
|
||||
if (grid) {
|
||||
grid.innerHTML = '';
|
||||
grid.classList.add('hidden');
|
||||
}
|
||||
document.getElementById('process-btn')?.classList.add('hidden');
|
||||
document.getElementById('advanced-settings')?.classList.add('hidden');
|
||||
const fileDisplayArea = document.getElementById('file-display-area');
|
||||
if (fileDisplayArea) fileDisplayArea.innerHTML = '';
|
||||
const grid = document.getElementById('page-grid');
|
||||
if (grid) {
|
||||
grid.innerHTML = '';
|
||||
grid.classList.add('hidden');
|
||||
}
|
||||
document.getElementById('process-btn')?.classList.add('hidden');
|
||||
document.getElementById('advanced-settings')?.classList.add('hidden');
|
||||
const fileDisplayArea = document.getElementById('file-display-area');
|
||||
if (fileDisplayArea) fileDisplayArea.innerHTML = '';
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,6 +1,7 @@
|
||||
import { PDFDocument } from 'pdf-lib';
|
||||
import * as pdfjsLib from 'pdfjs-dist';
|
||||
import { createIcons, icons } from 'lucide';
|
||||
import { initPagePreview } from '../utils/page-preview.js';
|
||||
|
||||
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
|
||||
'pdfjs-dist/build/pdf.worker.min.mjs',
|
||||
@@ -161,7 +162,7 @@ async function isPageBlank(
|
||||
}
|
||||
|
||||
async function generateThumbnail(page: any): Promise<string> {
|
||||
const viewport = page.getViewport({ scale: 1.5 });
|
||||
const viewport = page.getViewport({ scale: 1 });
|
||||
const canvas = document.createElement('canvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (!ctx) return '';
|
||||
@@ -211,6 +212,10 @@ async function detectBlankPages() {
|
||||
// Show preview panel
|
||||
updatePreviewPanel();
|
||||
document.getElementById('preview-panel')?.classList.remove('hidden');
|
||||
|
||||
const previewContainer = document.getElementById('blank-pages-preview');
|
||||
if (previewContainer) initPagePreview(previewContainer, pdfDoc);
|
||||
|
||||
hideLoader();
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
@@ -231,17 +236,18 @@ function updatePreviewPanel() {
|
||||
pageState.detectedBlankPages.forEach((pageIndex) => {
|
||||
const thumbnail = pageState.pageThumbnails.get(pageIndex) || '';
|
||||
const div = document.createElement('div');
|
||||
div.className = 'relative cursor-pointer group';
|
||||
div.className =
|
||||
'relative cursor-pointer flex flex-col items-center gap-1 p-2 border-2 border-red-500 rounded-lg bg-gray-700 transition-colors group';
|
||||
div.dataset.pageIndex = String(pageIndex);
|
||||
div.dataset.selected = 'true';
|
||||
|
||||
div.innerHTML = `
|
||||
<div class="relative border-2 border-red-500 rounded-lg overflow-hidden transition-all">
|
||||
<img src="${thumbnail}" alt="Page ${pageIndex + 1}" class="w-full h-auto">
|
||||
<div class="absolute bottom-0 left-0 right-0 bg-black/70 text-white text-xs text-center py-1">
|
||||
Page ${pageIndex + 1}
|
||||
<div class="relative">
|
||||
<img src="${thumbnail}" alt="Page ${pageIndex + 1}" class="rounded-md shadow-md max-w-full h-auto">
|
||||
<div class="absolute top-1 left-1 bg-indigo-600 text-white text-xs px-2 py-1 rounded-md font-semibold shadow-lg z-10 pointer-events-none">
|
||||
${pageIndex + 1}
|
||||
</div>
|
||||
<div class="absolute top-1 right-1 bg-red-500 rounded-full w-5 h-5 flex items-center justify-center check-mark">
|
||||
<div class="absolute top-1 right-1 bg-red-500 rounded-full w-5 h-5 flex items-center justify-center check-mark z-10">
|
||||
<i data-lucide="check" class="w-3 h-3 text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
@@ -256,18 +262,17 @@ function updatePreviewPanel() {
|
||||
|
||||
function togglePageSelection(div: HTMLElement, pageIndex: number) {
|
||||
const isSelected = div.dataset.selected === 'true';
|
||||
const border = div.querySelector('.border-2') as HTMLElement;
|
||||
const checkMark = div.querySelector('.check-mark') as HTMLElement;
|
||||
|
||||
if (isSelected) {
|
||||
div.dataset.selected = 'false';
|
||||
border?.classList.remove('border-red-500');
|
||||
border?.classList.add('border-gray-500', 'opacity-50');
|
||||
div.classList.remove('border-red-500');
|
||||
div.classList.add('border-gray-600', 'opacity-50');
|
||||
checkMark?.classList.add('hidden');
|
||||
} else {
|
||||
div.dataset.selected = 'true';
|
||||
border?.classList.add('border-red-500');
|
||||
border?.classList.remove('border-gray-500', 'opacity-50');
|
||||
div.classList.add('border-red-500');
|
||||
div.classList.remove('border-gray-600', 'opacity-50');
|
||||
checkMark?.classList.remove('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12,6 +12,7 @@ import {
|
||||
renderPagesProgressively,
|
||||
cleanupLazyRendering,
|
||||
} from '../utils/render-utils.js';
|
||||
import { initPagePreview } from '../utils/page-preview.js';
|
||||
import { isCpdfAvailable } from '../utils/cpdf-helper.js';
|
||||
import { showWasmRequiredDialog } from '../utils/wasm-provider.js';
|
||||
import JSZip from 'jszip';
|
||||
@@ -153,18 +154,24 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
const createWrapper = (canvas: HTMLCanvasElement, pageNumber: number) => {
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.className =
|
||||
'page-thumbnail-wrapper p-1 border-2 border-transparent rounded-lg cursor-pointer hover:border-indigo-500 relative';
|
||||
'page-thumbnail-wrapper p-2 border-2 border-gray-600 rounded-lg cursor-pointer hover:border-indigo-500 bg-gray-700 transition-colors relative group flex flex-col items-center gap-1';
|
||||
wrapper.dataset.pageIndex = (pageNumber - 1).toString();
|
||||
wrapper.dataset.pageNumber = pageNumber.toString();
|
||||
|
||||
const imgContainer = document.createElement('div');
|
||||
imgContainer.className = 'relative';
|
||||
|
||||
const img = document.createElement('img');
|
||||
img.src = canvas.toDataURL();
|
||||
img.className = 'rounded-md w-full h-auto';
|
||||
img.className = 'rounded-md shadow-md max-w-full h-auto';
|
||||
|
||||
const p = document.createElement('p');
|
||||
p.className = 'text-center text-xs mt-1 text-gray-300';
|
||||
p.textContent = `Page ${pageNumber}`;
|
||||
const pageNumDiv = document.createElement('div');
|
||||
pageNumDiv.className =
|
||||
'absolute top-1 left-1 bg-indigo-600 text-white text-xs px-2 py-1 rounded-md font-semibold shadow-lg z-10 pointer-events-none';
|
||||
pageNumDiv.textContent = pageNumber.toString();
|
||||
|
||||
wrapper.append(img, p);
|
||||
imgContainer.append(img, pageNumDiv);
|
||||
wrapper.appendChild(imgContainer);
|
||||
|
||||
const handleSelection = (e: any) => {
|
||||
e.preventDefault();
|
||||
@@ -174,10 +181,10 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
if (isSelected) {
|
||||
wrapper.classList.remove('selected', 'border-indigo-500');
|
||||
wrapper.classList.add('border-transparent');
|
||||
wrapper.classList.add('border-gray-600');
|
||||
} else {
|
||||
wrapper.classList.add('selected', 'border-indigo-500');
|
||||
wrapper.classList.remove('border-transparent');
|
||||
wrapper.classList.remove('border-gray-600');
|
||||
}
|
||||
};
|
||||
|
||||
@@ -203,6 +210,8 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
createIcons({ icons });
|
||||
},
|
||||
});
|
||||
|
||||
initPagePreview(container, pdf);
|
||||
} catch (error) {
|
||||
console.error('Error rendering visual selector:', error);
|
||||
showAlert('Error', 'Failed to render page previews.');
|
||||
|
||||
@@ -50,3 +50,4 @@ export * from './bookmark-pdf-type.ts';
|
||||
export * from './scanner-effect-type.ts';
|
||||
export * from './adjust-colors-type.ts';
|
||||
export * from './bates-numbering-type.ts';
|
||||
export * from './page-preview-type.ts';
|
||||
|
||||
10
src/js/types/page-preview-type.ts
Normal file
10
src/js/types/page-preview-type.ts
Normal file
@@ -0,0 +1,10 @@
|
||||
import { PDFDocumentProxy } from 'pdfjs-dist';
|
||||
|
||||
export interface PreviewState {
|
||||
modal: HTMLElement | null;
|
||||
pdfjsDoc: PDFDocumentProxy | null;
|
||||
currentPage: number;
|
||||
totalPages: number;
|
||||
isOpen: boolean;
|
||||
container: HTMLElement | null;
|
||||
}
|
||||
723
src/js/ui.ts
723
src/js/ui.ts
@@ -1,177 +1,201 @@
|
||||
import { resetState } from './state.js';
|
||||
import { formatBytes, getPDFDocument } from './utils/helpers.js';
|
||||
import { tesseractLanguages } from './config/tesseract-languages.js';
|
||||
import { renderPagesProgressively, cleanupLazyRendering } from './utils/render-utils.js';
|
||||
import {
|
||||
renderPagesProgressively,
|
||||
cleanupLazyRendering,
|
||||
} from './utils/render-utils.js';
|
||||
import { initPagePreview } from './utils/page-preview.js';
|
||||
import { icons, createIcons } from 'lucide';
|
||||
import Sortable from 'sortablejs';
|
||||
import { getRotationState, updateRotationState } from './utils/rotation-state.js';
|
||||
import {
|
||||
getRotationState,
|
||||
updateRotationState,
|
||||
} from './utils/rotation-state.js';
|
||||
import * as pdfjsLib from 'pdfjs-dist';
|
||||
import { t } from './i18n/i18n';
|
||||
|
||||
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
|
||||
|
||||
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
|
||||
'pdfjs-dist/build/pdf.worker.min.mjs',
|
||||
import.meta.url
|
||||
).toString();
|
||||
|
||||
// Centralizing DOM element selection
|
||||
export const dom = {
|
||||
gridView: document.getElementById('grid-view'),
|
||||
toolGrid: document.getElementById('tool-grid'),
|
||||
toolInterface: document.getElementById('tool-interface'),
|
||||
toolContent: document.getElementById('tool-content'),
|
||||
backToGridBtn: document.getElementById('back-to-grid'),
|
||||
loaderModal: document.getElementById('loader-modal'),
|
||||
loaderText: document.getElementById('loader-text'),
|
||||
alertModal: document.getElementById('alert-modal'),
|
||||
alertTitle: document.getElementById('alert-title'),
|
||||
alertMessage: document.getElementById('alert-message'),
|
||||
alertOkBtn: document.getElementById('alert-ok'),
|
||||
heroSection: document.getElementById('hero-section'),
|
||||
featuresSection: document.getElementById('features-section'),
|
||||
toolsHeader: document.getElementById('tools-header'),
|
||||
dividers: document.querySelectorAll('.section-divider'),
|
||||
hideSections: document.querySelectorAll('.hide-section'),
|
||||
shortcutsModal: document.getElementById('shortcuts-modal'),
|
||||
closeShortcutsModalBtn: document.getElementById('close-shortcuts-modal'),
|
||||
shortcutsList: document.getElementById('shortcuts-list'),
|
||||
shortcutSearch: document.getElementById('shortcut-search'),
|
||||
resetShortcutsBtn: document.getElementById('reset-shortcuts-btn'),
|
||||
importShortcutsBtn: document.getElementById('import-shortcuts-btn'),
|
||||
exportShortcutsBtn: document.getElementById('export-shortcuts-btn'),
|
||||
openShortcutsBtn: document.getElementById('open-shortcuts-btn'),
|
||||
warningModal: document.getElementById('warning-modal'),
|
||||
warningTitle: document.getElementById('warning-title'),
|
||||
warningMessage: document.getElementById('warning-message'),
|
||||
warningCancelBtn: document.getElementById('warning-cancel-btn'),
|
||||
warningConfirmBtn: document.getElementById('warning-confirm-btn'),
|
||||
gridView: document.getElementById('grid-view'),
|
||||
toolGrid: document.getElementById('tool-grid'),
|
||||
toolInterface: document.getElementById('tool-interface'),
|
||||
toolContent: document.getElementById('tool-content'),
|
||||
backToGridBtn: document.getElementById('back-to-grid'),
|
||||
loaderModal: document.getElementById('loader-modal'),
|
||||
loaderText: document.getElementById('loader-text'),
|
||||
alertModal: document.getElementById('alert-modal'),
|
||||
alertTitle: document.getElementById('alert-title'),
|
||||
alertMessage: document.getElementById('alert-message'),
|
||||
alertOkBtn: document.getElementById('alert-ok'),
|
||||
heroSection: document.getElementById('hero-section'),
|
||||
featuresSection: document.getElementById('features-section'),
|
||||
toolsHeader: document.getElementById('tools-header'),
|
||||
dividers: document.querySelectorAll('.section-divider'),
|
||||
hideSections: document.querySelectorAll('.hide-section'),
|
||||
shortcutsModal: document.getElementById('shortcuts-modal'),
|
||||
closeShortcutsModalBtn: document.getElementById('close-shortcuts-modal'),
|
||||
shortcutsList: document.getElementById('shortcuts-list'),
|
||||
shortcutSearch: document.getElementById('shortcut-search'),
|
||||
resetShortcutsBtn: document.getElementById('reset-shortcuts-btn'),
|
||||
importShortcutsBtn: document.getElementById('import-shortcuts-btn'),
|
||||
exportShortcutsBtn: document.getElementById('export-shortcuts-btn'),
|
||||
openShortcutsBtn: document.getElementById('open-shortcuts-btn'),
|
||||
warningModal: document.getElementById('warning-modal'),
|
||||
warningTitle: document.getElementById('warning-title'),
|
||||
warningMessage: document.getElementById('warning-message'),
|
||||
warningCancelBtn: document.getElementById('warning-cancel-btn'),
|
||||
warningConfirmBtn: document.getElementById('warning-confirm-btn'),
|
||||
};
|
||||
|
||||
export const showLoader = (text = t('common.loading'), progress?: number) => {
|
||||
if (dom.loaderText) dom.loaderText.textContent = text;
|
||||
if (dom.loaderText) dom.loaderText.textContent = text;
|
||||
|
||||
// Add or update progress bar if progress is provided
|
||||
const loaderModal = dom.loaderModal;
|
||||
if (loaderModal) {
|
||||
let progressBar = loaderModal.querySelector('.loader-progress-bar') as HTMLElement;
|
||||
let progressContainer = loaderModal.querySelector('.loader-progress-container') as HTMLElement;
|
||||
// Add or update progress bar if progress is provided
|
||||
const loaderModal = dom.loaderModal;
|
||||
if (loaderModal) {
|
||||
let progressBar = loaderModal.querySelector(
|
||||
'.loader-progress-bar'
|
||||
) as HTMLElement;
|
||||
let progressContainer = loaderModal.querySelector(
|
||||
'.loader-progress-container'
|
||||
) as HTMLElement;
|
||||
|
||||
if (progress !== undefined && progress >= 0) {
|
||||
// Create progress container if it doesn't exist
|
||||
if (!progressContainer) {
|
||||
progressContainer = document.createElement('div');
|
||||
progressContainer.className = 'loader-progress-container w-64 mt-4';
|
||||
progressContainer.innerHTML = `
|
||||
if (progress !== undefined && progress >= 0) {
|
||||
// Create progress container if it doesn't exist
|
||||
if (!progressContainer) {
|
||||
progressContainer = document.createElement('div');
|
||||
progressContainer.className = 'loader-progress-container w-64 mt-4';
|
||||
progressContainer.innerHTML = `
|
||||
<div class="bg-gray-700 rounded-full h-2 overflow-hidden">
|
||||
<div class="loader-progress-bar bg-indigo-500 h-full transition-all duration-300" style="width: 0%"></div>
|
||||
</div>
|
||||
<p class="loader-progress-text text-xs text-gray-400 mt-1 text-center">0%</p>
|
||||
`;
|
||||
loaderModal.querySelector('.bg-gray-800')?.appendChild(progressContainer);
|
||||
progressBar = progressContainer.querySelector('.loader-progress-bar') as HTMLElement;
|
||||
}
|
||||
loaderModal
|
||||
.querySelector('.bg-gray-800')
|
||||
?.appendChild(progressContainer);
|
||||
progressBar = progressContainer.querySelector(
|
||||
'.loader-progress-bar'
|
||||
) as HTMLElement;
|
||||
}
|
||||
|
||||
// Update progress
|
||||
if (progressBar) {
|
||||
progressBar.style.width = `${progress}%`;
|
||||
}
|
||||
const progressText = progressContainer.querySelector('.loader-progress-text');
|
||||
if (progressText) {
|
||||
progressText.textContent = `${Math.round(progress)}%`;
|
||||
}
|
||||
progressContainer.classList.remove('hidden');
|
||||
} else {
|
||||
// Hide progress bar if no progress provided
|
||||
if (progressContainer) {
|
||||
progressContainer.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
loaderModal.classList.remove('hidden');
|
||||
// Update progress
|
||||
if (progressBar) {
|
||||
progressBar.style.width = `${progress}%`;
|
||||
}
|
||||
const progressText = progressContainer.querySelector(
|
||||
'.loader-progress-text'
|
||||
);
|
||||
if (progressText) {
|
||||
progressText.textContent = `${Math.round(progress)}%`;
|
||||
}
|
||||
progressContainer.classList.remove('hidden');
|
||||
} else {
|
||||
// Hide progress bar if no progress provided
|
||||
if (progressContainer) {
|
||||
progressContainer.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
loaderModal.classList.remove('hidden');
|
||||
}
|
||||
};
|
||||
|
||||
export const hideLoader = () => {
|
||||
if (dom.loaderModal) dom.loaderModal.classList.add('hidden');
|
||||
if (dom.loaderModal) dom.loaderModal.classList.add('hidden');
|
||||
};
|
||||
|
||||
export const showAlert = (title: any, message: any, type: string = 'error', callback?: () => void) => {
|
||||
if (dom.alertTitle) dom.alertTitle.textContent = title;
|
||||
if (dom.alertMessage) dom.alertMessage.textContent = message;
|
||||
if (dom.alertModal) dom.alertModal.classList.remove('hidden');
|
||||
export const showAlert = (
|
||||
title: any,
|
||||
message: any,
|
||||
type: string = 'error',
|
||||
callback?: () => void
|
||||
) => {
|
||||
if (dom.alertTitle) dom.alertTitle.textContent = title;
|
||||
if (dom.alertMessage) dom.alertMessage.textContent = message;
|
||||
if (dom.alertModal) dom.alertModal.classList.remove('hidden');
|
||||
|
||||
if (dom.alertOkBtn) {
|
||||
const newOkBtn = dom.alertOkBtn.cloneNode(true) as HTMLElement;
|
||||
dom.alertOkBtn.replaceWith(newOkBtn);
|
||||
dom.alertOkBtn = newOkBtn;
|
||||
if (dom.alertOkBtn) {
|
||||
const newOkBtn = dom.alertOkBtn.cloneNode(true) as HTMLElement;
|
||||
dom.alertOkBtn.replaceWith(newOkBtn);
|
||||
dom.alertOkBtn = newOkBtn;
|
||||
|
||||
newOkBtn.addEventListener('click', () => {
|
||||
hideAlert();
|
||||
if (callback) callback();
|
||||
});
|
||||
}
|
||||
newOkBtn.addEventListener('click', () => {
|
||||
hideAlert();
|
||||
if (callback) callback();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
export const hideAlert = () => {
|
||||
if (dom.alertModal) dom.alertModal.classList.add('hidden');
|
||||
if (dom.alertModal) dom.alertModal.classList.add('hidden');
|
||||
};
|
||||
|
||||
export const switchView = (view: any) => {
|
||||
if (view === 'grid') {
|
||||
dom.gridView.classList.remove('hidden');
|
||||
dom.toolInterface.classList.add('hidden');
|
||||
// show hero and features and header
|
||||
dom.heroSection.classList.remove('hidden');
|
||||
dom.featuresSection.classList.remove('hidden');
|
||||
dom.toolsHeader.classList.remove('hidden');
|
||||
// show dividers
|
||||
dom.dividers.forEach((divider) => {
|
||||
divider.classList.remove('hidden');
|
||||
});
|
||||
// show hideSections
|
||||
dom.hideSections.forEach((section) => {
|
||||
section.classList.remove('hidden');
|
||||
});
|
||||
if (view === 'grid') {
|
||||
dom.gridView.classList.remove('hidden');
|
||||
dom.toolInterface.classList.add('hidden');
|
||||
// show hero and features and header
|
||||
dom.heroSection.classList.remove('hidden');
|
||||
dom.featuresSection.classList.remove('hidden');
|
||||
dom.toolsHeader.classList.remove('hidden');
|
||||
// show dividers
|
||||
dom.dividers.forEach((divider) => {
|
||||
divider.classList.remove('hidden');
|
||||
});
|
||||
// show hideSections
|
||||
dom.hideSections.forEach((section) => {
|
||||
section.classList.remove('hidden');
|
||||
});
|
||||
|
||||
resetState();
|
||||
} else {
|
||||
dom.gridView.classList.add('hidden');
|
||||
dom.toolInterface.classList.remove('hidden');
|
||||
dom.featuresSection.classList.add('hidden');
|
||||
dom.heroSection.classList.add('hidden');
|
||||
dom.toolsHeader.classList.add('hidden');
|
||||
dom.dividers.forEach((divider) => {
|
||||
divider.classList.add('hidden');
|
||||
});
|
||||
dom.hideSections.forEach((section) => {
|
||||
section.classList.add('hidden');
|
||||
});
|
||||
}
|
||||
resetState();
|
||||
} else {
|
||||
dom.gridView.classList.add('hidden');
|
||||
dom.toolInterface.classList.remove('hidden');
|
||||
dom.featuresSection.classList.add('hidden');
|
||||
dom.heroSection.classList.add('hidden');
|
||||
dom.toolsHeader.classList.add('hidden');
|
||||
dom.dividers.forEach((divider) => {
|
||||
divider.classList.add('hidden');
|
||||
});
|
||||
dom.hideSections.forEach((section) => {
|
||||
section.classList.add('hidden');
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const thumbnailState = {
|
||||
sortableInstances: {},
|
||||
sortableInstances: {},
|
||||
};
|
||||
|
||||
function initializeOrganizeSortable(containerId: any) {
|
||||
const container = document.getElementById(containerId);
|
||||
if (!container) return;
|
||||
const container = document.getElementById(containerId);
|
||||
if (!container) return;
|
||||
|
||||
if (thumbnailState.sortableInstances[containerId]) {
|
||||
thumbnailState.sortableInstances[containerId].destroy();
|
||||
}
|
||||
if (thumbnailState.sortableInstances[containerId]) {
|
||||
thumbnailState.sortableInstances[containerId].destroy();
|
||||
}
|
||||
|
||||
thumbnailState.sortableInstances[containerId] = Sortable.create(container, {
|
||||
animation: 150,
|
||||
ghostClass: 'sortable-ghost',
|
||||
chosenClass: 'sortable-chosen',
|
||||
dragClass: 'sortable-drag',
|
||||
filter: '.delete-page-btn',
|
||||
preventOnFilter: true,
|
||||
onStart: function (evt: any) {
|
||||
evt.item.style.opacity = '0.5';
|
||||
},
|
||||
onEnd: function (evt: any) {
|
||||
evt.item.style.opacity = '1';
|
||||
},
|
||||
});
|
||||
thumbnailState.sortableInstances[containerId] = Sortable.create(container, {
|
||||
animation: 150,
|
||||
ghostClass: 'sortable-ghost',
|
||||
chosenClass: 'sortable-chosen',
|
||||
dragClass: 'sortable-drag',
|
||||
filter: '.delete-page-btn',
|
||||
preventOnFilter: true,
|
||||
onStart: function (evt: any) {
|
||||
evt.item.style.opacity = '0.5';
|
||||
},
|
||||
onEnd: function (evt: any) {
|
||||
evt.item.style.opacity = '1';
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -180,243 +204,247 @@ function initializeOrganizeSortable(containerId: any) {
|
||||
* @param {object} pdfDoc The loaded pdf-lib document instance.
|
||||
*/
|
||||
export const renderPageThumbnails = async (toolId: any, pdfDoc: any) => {
|
||||
const containerId = toolId === 'organize' ? 'page-organizer' : toolId === 'delete-pages' ? 'delete-pages-preview' : 'page-rotator';
|
||||
const container = document.getElementById(containerId);
|
||||
if (!container) return;
|
||||
const containerId =
|
||||
toolId === 'organize'
|
||||
? 'page-organizer'
|
||||
: toolId === 'delete-pages'
|
||||
? 'delete-pages-preview'
|
||||
: 'page-rotator';
|
||||
const container = document.getElementById(containerId);
|
||||
if (!container) return;
|
||||
|
||||
container.innerHTML = '';
|
||||
container.innerHTML = '';
|
||||
|
||||
// Cleanup any previous lazy loading observers
|
||||
cleanupLazyRendering();
|
||||
// Cleanup any previous lazy loading observers
|
||||
cleanupLazyRendering();
|
||||
|
||||
const currentRenderId = Date.now();
|
||||
container.dataset.renderId = currentRenderId.toString();
|
||||
const currentRenderId = Date.now();
|
||||
container.dataset.renderId = currentRenderId.toString();
|
||||
|
||||
showLoader(t('multiTool.renderingTitle'));
|
||||
showLoader(t('multiTool.renderingTitle'));
|
||||
|
||||
const pdfData = await pdfDoc.save();
|
||||
const pdf = await getPDFDocument({ data: pdfData }).promise;
|
||||
const pdfData = await pdfDoc.save();
|
||||
const pdf = await getPDFDocument({ data: pdfData }).promise;
|
||||
|
||||
// Function to create wrapper element for each page
|
||||
const createWrapper = (canvas: HTMLCanvasElement, pageNumber: number) => {
|
||||
const wrapper = document.createElement('div');
|
||||
// @ts-expect-error TS(2322) FIXME: Type 'number' is not assignable to type 'string'.
|
||||
wrapper.dataset.pageIndex = pageNumber - 1;
|
||||
// Function to create wrapper element for each page
|
||||
const createWrapper = (canvas: HTMLCanvasElement, pageNumber: number) => {
|
||||
const wrapper = document.createElement('div');
|
||||
// @ts-expect-error TS(2322) FIXME: Type 'number' is not assignable to type 'string'.
|
||||
wrapper.dataset.pageIndex = pageNumber - 1;
|
||||
|
||||
const imgContainer = document.createElement('div');
|
||||
imgContainer.className =
|
||||
'w-full h-36 bg-gray-900 rounded-lg flex items-center justify-center overflow-hidden border-2 border-gray-600';
|
||||
const imgContainer = document.createElement('div');
|
||||
imgContainer.className = 'relative';
|
||||
|
||||
const img = document.createElement('img');
|
||||
img.src = canvas.toDataURL();
|
||||
img.className = 'max-w-full max-h-full object-contain';
|
||||
const img = document.createElement('img');
|
||||
img.src = canvas.toDataURL();
|
||||
img.className = 'rounded-md shadow-md max-w-full h-auto';
|
||||
|
||||
imgContainer.appendChild(img);
|
||||
imgContainer.appendChild(img);
|
||||
|
||||
if (toolId === 'organize') {
|
||||
wrapper.className = 'page-thumbnail relative group';
|
||||
wrapper.appendChild(imgContainer);
|
||||
const pageNumSpan = document.createElement('div');
|
||||
pageNumSpan.className =
|
||||
'absolute top-1 left-1 bg-indigo-600 text-white text-xs px-2 py-1 rounded-md font-semibold shadow-lg z-10 pointer-events-none';
|
||||
pageNumSpan.textContent = pageNumber.toString();
|
||||
|
||||
const pageNumSpan = document.createElement('span');
|
||||
pageNumSpan.className =
|
||||
'absolute top-1 left-1 bg-gray-900 bg-opacity-75 text-white text-xs rounded-full px-2 py-1';
|
||||
pageNumSpan.textContent = pageNumber.toString();
|
||||
if (toolId === 'organize') {
|
||||
wrapper.className =
|
||||
'page-thumbnail relative cursor-move flex flex-col items-center gap-1 p-2 border-2 border-gray-600 hover:border-indigo-500 rounded-lg bg-gray-700 transition-colors group';
|
||||
|
||||
const deleteBtn = document.createElement('button');
|
||||
deleteBtn.className =
|
||||
'delete-page-btn absolute top-1 right-1 bg-red-600 text-white rounded-full w-6 h-6 flex items-center justify-center';
|
||||
deleteBtn.innerHTML = '×';
|
||||
deleteBtn.addEventListener('click', (e) => {
|
||||
(e.currentTarget as HTMLElement).parentElement.remove();
|
||||
imgContainer.appendChild(pageNumSpan);
|
||||
wrapper.appendChild(imgContainer);
|
||||
|
||||
// Renumber remaining pages
|
||||
const pages = container.querySelectorAll('.page-thumbnail');
|
||||
pages.forEach((page, index) => {
|
||||
const numSpan = page.querySelector('span');
|
||||
if (numSpan) {
|
||||
numSpan.textContent = (index + 1).toString();
|
||||
}
|
||||
});
|
||||
const deleteBtn = document.createElement('button');
|
||||
deleteBtn.className =
|
||||
'delete-page-btn absolute top-1 right-1 bg-red-600 hover:bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center z-10';
|
||||
deleteBtn.innerHTML = '×';
|
||||
deleteBtn.addEventListener('click', (e) => {
|
||||
(e.currentTarget as HTMLElement).parentElement.remove();
|
||||
|
||||
initializeOrganizeSortable(containerId);
|
||||
});
|
||||
// Renumber remaining pages
|
||||
const pages = container.querySelectorAll('.page-thumbnail');
|
||||
pages.forEach((page, index) => {
|
||||
const numSpan = page.querySelector('.bg-indigo-600');
|
||||
if (numSpan) {
|
||||
numSpan.textContent = (index + 1).toString();
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.append(pageNumSpan, deleteBtn);
|
||||
} else if (toolId === 'rotate') {
|
||||
wrapper.className = 'page-rotator-item flex flex-col items-center gap-2 relative group';
|
||||
initializeOrganizeSortable(containerId);
|
||||
});
|
||||
|
||||
// Read rotation from state (handles "Rotate All" on lazy-loaded pages)
|
||||
const rotationStateArray = getRotationState();
|
||||
const pageIndex = pageNumber - 1;
|
||||
const initialRotation = rotationStateArray[pageIndex] || 0;
|
||||
wrapper.appendChild(deleteBtn);
|
||||
} else if (toolId === 'rotate') {
|
||||
wrapper.className =
|
||||
'page-rotator-item flex flex-col items-center gap-2 p-2 border-2 border-gray-600 hover:border-indigo-500 rounded-lg bg-gray-700 transition-colors relative group';
|
||||
|
||||
wrapper.dataset.rotation = initialRotation.toString();
|
||||
img.classList.add('transition-transform', 'duration-300');
|
||||
// Read rotation from state (handles "Rotate All" on lazy-loaded pages)
|
||||
const rotationStateArray = getRotationState();
|
||||
const pageIndex = pageNumber - 1;
|
||||
const initialRotation = rotationStateArray[pageIndex] || 0;
|
||||
|
||||
// Apply initial rotation if any
|
||||
if (initialRotation !== 0) {
|
||||
img.style.transform = `rotate(${initialRotation}deg)`;
|
||||
}
|
||||
wrapper.dataset.rotation = initialRotation.toString();
|
||||
img.classList.add('transition-transform', 'duration-300');
|
||||
|
||||
wrapper.appendChild(imgContainer);
|
||||
// Apply initial rotation if any
|
||||
if (initialRotation !== 0) {
|
||||
img.style.transform = `rotate(${initialRotation}deg)`;
|
||||
}
|
||||
|
||||
// Page Number Overlay (Top Left)
|
||||
const pageNumSpan = document.createElement('span');
|
||||
pageNumSpan.className =
|
||||
'absolute top-2 left-2 bg-gray-900 bg-opacity-75 text-white text-xs font-medium rounded-md px-2 py-1 shadow-sm z-10 pointer-events-none';
|
||||
pageNumSpan.textContent = pageNumber.toString();
|
||||
wrapper.appendChild(pageNumSpan);
|
||||
imgContainer.appendChild(pageNumSpan);
|
||||
wrapper.appendChild(imgContainer);
|
||||
|
||||
const controlsDiv = document.createElement('div');
|
||||
controlsDiv.className = 'flex flex-col lg:flex-row items-center justify-center w-full gap-2 px-1';
|
||||
const controlsDiv = document.createElement('div');
|
||||
controlsDiv.className =
|
||||
'flex flex-col lg:flex-row items-center justify-center w-full gap-2 px-1';
|
||||
|
||||
// Custom Stepper Component
|
||||
const stepperContainer = document.createElement('div');
|
||||
stepperContainer.className = 'flex items-center border border-gray-600 rounded-md bg-gray-800 overflow-hidden w-24 h-8';
|
||||
// Custom Stepper Component
|
||||
const stepperContainer = document.createElement('div');
|
||||
stepperContainer.className =
|
||||
'flex items-center border border-gray-600 rounded-md bg-gray-800 overflow-hidden w-24 h-8';
|
||||
|
||||
const decrementBtn = document.createElement('button');
|
||||
decrementBtn.className = 'px-2 h-full text-gray-400 hover:text-white hover:bg-gray-700 border-r border-gray-600 transition-colors flex items-center justify-center';
|
||||
decrementBtn.innerHTML = '<i data-lucide="minus" class="w-3 h-3"></i>';
|
||||
const decrementBtn = document.createElement('button');
|
||||
decrementBtn.className =
|
||||
'px-2 h-full text-gray-400 hover:text-white hover:bg-gray-700 border-r border-gray-600 transition-colors flex items-center justify-center';
|
||||
decrementBtn.innerHTML = '<i data-lucide="minus" class="w-3 h-3"></i>';
|
||||
|
||||
const angleInput = document.createElement('input');
|
||||
angleInput.type = 'number';
|
||||
angleInput.className = 'no-spinner w-full h-full bg-transparent text-white text-xs text-center focus:outline-none appearance-none m-0 p-0 border-none';
|
||||
angleInput.value = initialRotation.toString();
|
||||
angleInput.placeholder = "0";
|
||||
const angleInput = document.createElement('input');
|
||||
angleInput.type = 'number';
|
||||
angleInput.className =
|
||||
'no-spinner w-full h-full bg-transparent text-white text-xs text-center focus:outline-none appearance-none m-0 p-0 border-none';
|
||||
angleInput.value = initialRotation.toString();
|
||||
angleInput.placeholder = '0';
|
||||
|
||||
const incrementBtn = document.createElement('button');
|
||||
incrementBtn.className = 'px-2 h-full text-gray-400 hover:text-white hover:bg-gray-700 border-l border-gray-600 transition-colors flex items-center justify-center';
|
||||
incrementBtn.innerHTML = '<i data-lucide="plus" class="w-3 h-3"></i>';
|
||||
const incrementBtn = document.createElement('button');
|
||||
incrementBtn.className =
|
||||
'px-2 h-full text-gray-400 hover:text-white hover:bg-gray-700 border-l border-gray-600 transition-colors flex items-center justify-center';
|
||||
incrementBtn.innerHTML = '<i data-lucide="plus" class="w-3 h-3"></i>';
|
||||
|
||||
// Helper to update rotation
|
||||
const updateRotation = (newRotation: number) => {
|
||||
const card = wrapper; // Closure capture
|
||||
const imgEl = card.querySelector('img');
|
||||
const pageIndex = pageNumber - 1;
|
||||
// Helper to update rotation
|
||||
const updateRotation = (newRotation: number) => {
|
||||
const card = wrapper; // Closure capture
|
||||
const imgEl = card.querySelector('img');
|
||||
const pageIndex = pageNumber - 1;
|
||||
|
||||
// Update UI
|
||||
angleInput.value = newRotation.toString();
|
||||
card.dataset.rotation = newRotation.toString();
|
||||
imgEl.style.transform = `rotate(${newRotation}deg)`;
|
||||
// Update UI
|
||||
angleInput.value = newRotation.toString();
|
||||
card.dataset.rotation = newRotation.toString();
|
||||
imgEl.style.transform = `rotate(${newRotation}deg)`;
|
||||
|
||||
// Update State
|
||||
updateRotationState(pageIndex, newRotation);
|
||||
};
|
||||
// Update State
|
||||
updateRotationState(pageIndex, newRotation);
|
||||
};
|
||||
|
||||
// Event Listeners
|
||||
decrementBtn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
const current = parseInt(angleInput.value) || 0;
|
||||
updateRotation(current - 1);
|
||||
});
|
||||
// Event Listeners
|
||||
decrementBtn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
const current = parseInt(angleInput.value) || 0;
|
||||
updateRotation(current - 1);
|
||||
});
|
||||
|
||||
incrementBtn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
const current = parseInt(angleInput.value) || 0;
|
||||
updateRotation(current + 1);
|
||||
});
|
||||
incrementBtn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
const current = parseInt(angleInput.value) || 0;
|
||||
updateRotation(current + 1);
|
||||
});
|
||||
|
||||
angleInput.addEventListener('change', (e) => {
|
||||
e.stopPropagation();
|
||||
const val = parseInt((e.target as HTMLInputElement).value) || 0;
|
||||
updateRotation(val);
|
||||
});
|
||||
angleInput.addEventListener('click', (e) => e.stopPropagation());
|
||||
angleInput.addEventListener('change', (e) => {
|
||||
e.stopPropagation();
|
||||
const val = parseInt((e.target as HTMLInputElement).value) || 0;
|
||||
updateRotation(val);
|
||||
});
|
||||
angleInput.addEventListener('click', (e) => e.stopPropagation());
|
||||
|
||||
stepperContainer.append(decrementBtn, angleInput, incrementBtn);
|
||||
stepperContainer.append(decrementBtn, angleInput, incrementBtn);
|
||||
|
||||
const rotateBtn = document.createElement('button');
|
||||
rotateBtn.className = 'rotate-btn btn bg-gray-700 hover:bg-gray-600 p-1.5 rounded-md text-gray-200 transition-colors flex-shrink-0';
|
||||
rotateBtn.title = 'Rotate +90°';
|
||||
rotateBtn.innerHTML = '<i data-lucide="rotate-cw" class="w-4 h-4"></i>';
|
||||
rotateBtn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
const current = parseInt(angleInput.value) || 0;
|
||||
updateRotation(current + 90);
|
||||
});
|
||||
const rotateBtn = document.createElement('button');
|
||||
rotateBtn.className =
|
||||
'rotate-btn btn bg-gray-700 hover:bg-gray-600 p-1.5 rounded-md text-gray-200 transition-colors flex-shrink-0';
|
||||
rotateBtn.title = 'Rotate +90°';
|
||||
rotateBtn.innerHTML = '<i data-lucide="rotate-cw" class="w-4 h-4"></i>';
|
||||
rotateBtn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
const current = parseInt(angleInput.value) || 0;
|
||||
updateRotation(current + 90);
|
||||
});
|
||||
|
||||
controlsDiv.append(stepperContainer, rotateBtn);
|
||||
wrapper.appendChild(controlsDiv);
|
||||
} else if (toolId === 'delete-pages') {
|
||||
wrapper.className = 'page-thumbnail relative group cursor-pointer transition-all duration-200';
|
||||
wrapper.dataset.pageNumber = pageNumber.toString();
|
||||
controlsDiv.append(stepperContainer, rotateBtn);
|
||||
wrapper.appendChild(controlsDiv);
|
||||
} else if (toolId === 'delete-pages') {
|
||||
wrapper.className =
|
||||
'page-thumbnail relative cursor-pointer flex flex-col items-center gap-1 p-2 border-2 border-gray-600 hover:border-indigo-500 rounded-lg bg-gray-700 transition-colors group';
|
||||
wrapper.dataset.pageNumber = pageNumber.toString();
|
||||
|
||||
const innerContainer = document.createElement('div');
|
||||
innerContainer.className = 'relative w-full h-36 bg-gray-900 rounded-lg flex items-center justify-center overflow-hidden border-2 border-gray-600 transition-colors duration-200';
|
||||
innerContainer.appendChild(img);
|
||||
wrapper.appendChild(innerContainer);
|
||||
imgContainer.appendChild(pageNumSpan);
|
||||
wrapper.appendChild(imgContainer);
|
||||
|
||||
const pageNumSpan = document.createElement('span');
|
||||
pageNumSpan.className =
|
||||
'absolute top-2 left-2 bg-gray-900 bg-opacity-75 text-white text-xs font-medium rounded-md px-2 py-1 shadow-sm z-10 pointer-events-none';
|
||||
pageNumSpan.textContent = pageNumber.toString();
|
||||
wrapper.appendChild(pageNumSpan);
|
||||
wrapper.addEventListener('click', () => {
|
||||
const input = document.getElementById(
|
||||
'pages-to-delete'
|
||||
) as HTMLInputElement;
|
||||
if (!input) return;
|
||||
|
||||
wrapper.addEventListener('click', () => {
|
||||
const input = document.getElementById('pages-to-delete') as HTMLInputElement;
|
||||
if (!input) return;
|
||||
const currentVal = input.value;
|
||||
let pages = currentVal
|
||||
.split(',')
|
||||
.map((s) => s.trim())
|
||||
.filter((s) => s);
|
||||
const pageStr = pageNumber.toString();
|
||||
|
||||
const currentVal = input.value;
|
||||
let pages = currentVal.split(',').map(s => s.trim()).filter(s => s);
|
||||
const pageStr = pageNumber.toString();
|
||||
|
||||
if (pages.includes(pageStr)) {
|
||||
pages = pages.filter(p => p !== pageStr);
|
||||
} else {
|
||||
pages.push(pageStr);
|
||||
}
|
||||
|
||||
pages.sort((a, b) => {
|
||||
const numA = parseInt(a.split('-')[0]);
|
||||
const numB = parseInt(b.split('-')[0]);
|
||||
return numA - numB;
|
||||
});
|
||||
|
||||
input.value = pages.join(', ');
|
||||
|
||||
input.dispatchEvent(new Event('input'));
|
||||
});
|
||||
if (pages.includes(pageStr)) {
|
||||
pages = pages.filter((p) => p !== pageStr);
|
||||
} else {
|
||||
pages.push(pageStr);
|
||||
}
|
||||
|
||||
return wrapper;
|
||||
};
|
||||
pages.sort((a, b) => {
|
||||
const numA = parseInt(a.split('-')[0]);
|
||||
const numB = parseInt(b.split('-')[0]);
|
||||
return numA - numB;
|
||||
});
|
||||
|
||||
try {
|
||||
// Render pages progressively with lazy loading
|
||||
await renderPagesProgressively(
|
||||
pdf,
|
||||
container,
|
||||
createWrapper,
|
||||
{
|
||||
batchSize: 8,
|
||||
useLazyLoading: true,
|
||||
lazyLoadMargin: '300px',
|
||||
onProgress: (current, total) => {
|
||||
showLoader(`Rendering page previews: ${current}/${total}`);
|
||||
},
|
||||
onBatchComplete: () => {
|
||||
createIcons({ icons });
|
||||
},
|
||||
shouldCancel: () => {
|
||||
return container.dataset.renderId !== currentRenderId.toString();
|
||||
}
|
||||
}
|
||||
);
|
||||
input.value = pages.join(', ');
|
||||
|
||||
if (toolId === 'organize') {
|
||||
initializeOrganizeSortable(containerId);
|
||||
} else if (toolId === 'delete-pages') {
|
||||
// No sortable needed for delete pages
|
||||
}
|
||||
|
||||
// Reinitialize lucide icons for dynamically added elements
|
||||
createIcons({ icons });
|
||||
} catch (error) {
|
||||
console.error('Error rendering page thumbnails:', error);
|
||||
showAlert(t('multiTool.error'), t('multiTool.errorRendering'));
|
||||
} finally {
|
||||
hideLoader();
|
||||
input.dispatchEvent(new Event('input'));
|
||||
});
|
||||
}
|
||||
|
||||
return wrapper;
|
||||
};
|
||||
|
||||
try {
|
||||
// Render pages progressively with lazy loading
|
||||
await renderPagesProgressively(pdf, container, createWrapper, {
|
||||
batchSize: 8,
|
||||
useLazyLoading: true,
|
||||
lazyLoadMargin: '300px',
|
||||
onProgress: (current, total) => {
|
||||
showLoader(`Rendering page previews: ${current}/${total}`);
|
||||
},
|
||||
onBatchComplete: () => {
|
||||
createIcons({ icons });
|
||||
},
|
||||
shouldCancel: () => {
|
||||
return container.dataset.renderId !== currentRenderId.toString();
|
||||
},
|
||||
});
|
||||
|
||||
if (toolId === 'organize') {
|
||||
initializeOrganizeSortable(containerId);
|
||||
} else if (toolId === 'delete-pages') {
|
||||
// No sortable needed for delete pages
|
||||
}
|
||||
|
||||
// Reinitialize lucide icons for dynamically added elements
|
||||
createIcons({ icons });
|
||||
|
||||
// Attach Quick Look page preview
|
||||
initPagePreview(container, pdf);
|
||||
} catch (error) {
|
||||
console.error('Error rendering page thumbnails:', error);
|
||||
showAlert(t('multiTool.error'), t('multiTool.errorRendering'));
|
||||
} finally {
|
||||
hideLoader();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
@@ -425,36 +453,36 @@ export const renderPageThumbnails = async (toolId: any, pdfDoc: any) => {
|
||||
* @param {File[]} files The array of file objects.
|
||||
*/
|
||||
export const renderFileDisplay = (container: any, files: any) => {
|
||||
container.textContent = '';
|
||||
if (files.length > 0) {
|
||||
files.forEach((file: any) => {
|
||||
const fileDiv = document.createElement('div');
|
||||
fileDiv.className =
|
||||
'flex items-center justify-between bg-gray-700 p-3 rounded-lg text-sm';
|
||||
container.textContent = '';
|
||||
if (files.length > 0) {
|
||||
files.forEach((file: any) => {
|
||||
const fileDiv = document.createElement('div');
|
||||
fileDiv.className =
|
||||
'flex items-center justify-between bg-gray-700 p-3 rounded-lg text-sm';
|
||||
|
||||
const nameSpan = document.createElement('span');
|
||||
nameSpan.className = 'truncate font-medium text-gray-200';
|
||||
nameSpan.textContent = file.name;
|
||||
const nameSpan = document.createElement('span');
|
||||
nameSpan.className = 'truncate font-medium text-gray-200';
|
||||
nameSpan.textContent = file.name;
|
||||
|
||||
const sizeSpan = document.createElement('span');
|
||||
sizeSpan.className = 'flex-shrink-0 ml-4 text-gray-400';
|
||||
sizeSpan.textContent = formatBytes(file.size);
|
||||
const sizeSpan = document.createElement('span');
|
||||
sizeSpan.className = 'flex-shrink-0 ml-4 text-gray-400';
|
||||
sizeSpan.textContent = formatBytes(file.size);
|
||||
|
||||
fileDiv.append(nameSpan, sizeSpan);
|
||||
container.appendChild(fileDiv);
|
||||
});
|
||||
}
|
||||
fileDiv.append(nameSpan, sizeSpan);
|
||||
container.appendChild(fileDiv);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const createFileInputHTML = (options = {}) => {
|
||||
// @ts-expect-error TS(2339) FIXME: Property 'multiple' does not exist on type '{}'.
|
||||
const multiple = options.multiple ? 'multiple' : '';
|
||||
// @ts-expect-error TS(2339) FIXME: Property 'accept' does not exist on type '{}'.
|
||||
const acceptedFiles = options.accept || 'application/pdf';
|
||||
// @ts-expect-error TS(2339) FIXME: Property 'showControls' does not exist on type '{}... Remove this comment to see the full error message
|
||||
const showControls = options.showControls || false; // NEW: Add this parameter
|
||||
// @ts-expect-error TS(2339) FIXME: Property 'multiple' does not exist on type '{}'.
|
||||
const multiple = options.multiple ? 'multiple' : '';
|
||||
// @ts-expect-error TS(2339) FIXME: Property 'accept' does not exist on type '{}'.
|
||||
const acceptedFiles = options.accept || 'application/pdf';
|
||||
// @ts-expect-error TS(2339) FIXME: Property 'showControls' does not exist on type '{}... Remove this comment to see the full error message
|
||||
const showControls = options.showControls || false; // NEW: Add this parameter
|
||||
|
||||
return `
|
||||
return `
|
||||
<div id="drop-zone" class="relative flex flex-col items-center justify-center w-full h-48 border-2 border-dashed border-gray-600 rounded-xl cursor-pointer bg-gray-900 hover:bg-gray-700 transition-colors duration-300">
|
||||
<div class="flex flex-col items-center justify-center pt-5 pb-6">
|
||||
<i data-lucide="upload-cloud" class="w-10 h-10 mb-3 text-gray-400"></i>
|
||||
@@ -465,7 +493,8 @@ const createFileInputHTML = (options = {}) => {
|
||||
<input id="file-input" type="file" class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer" ${multiple} accept="${acceptedFiles}">
|
||||
</div>
|
||||
|
||||
${showControls
|
||||
${
|
||||
showControls
|
||||
? `
|
||||
<!-- NEW: Add control buttons for multi-file uploads -->
|
||||
<div id="file-controls" class="hidden mt-4 flex gap-3">
|
||||
|
||||
215
src/js/utils/page-preview.ts
Normal file
215
src/js/utils/page-preview.ts
Normal file
@@ -0,0 +1,215 @@
|
||||
import * as pdfjsLib from 'pdfjs-dist';
|
||||
import type { PDFDocumentProxy } from 'pdfjs-dist';
|
||||
import { PreviewState } from '@/types';
|
||||
|
||||
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
|
||||
'pdfjs-dist/build/pdf.worker.min.mjs',
|
||||
import.meta.url
|
||||
).toString();
|
||||
|
||||
const state: PreviewState = {
|
||||
modal: null,
|
||||
pdfjsDoc: null,
|
||||
currentPage: 1,
|
||||
totalPages: 0,
|
||||
isOpen: false,
|
||||
container: null,
|
||||
};
|
||||
|
||||
function getOrCreateModal(): HTMLElement {
|
||||
if (state.modal) return state.modal;
|
||||
|
||||
const modal = document.createElement('div');
|
||||
modal.id = 'page-preview-modal';
|
||||
modal.className =
|
||||
'fixed inset-0 bg-black/80 backdrop-blur-sm z-[60] flex items-center justify-center opacity-0 pointer-events-none transition-opacity duration-200';
|
||||
modal.innerHTML = `
|
||||
<button id="preview-close" class="absolute top-4 right-4 text-white/70 hover:text-white z-10 transition-colors" title="Close (Esc)">
|
||||
<svg class="w-8 h-8" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
<button id="preview-prev" class="absolute left-4 top-1/2 -translate-y-1/2 text-white/50 hover:text-white transition-colors p-2" title="Previous page">
|
||||
<svg class="w-10 h-10" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/></svg>
|
||||
</button>
|
||||
<button id="preview-next" class="absolute right-4 top-1/2 -translate-y-1/2 text-white/50 hover:text-white transition-colors p-2" title="Next page">
|
||||
<svg class="w-10 h-10" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
|
||||
</button>
|
||||
<div id="preview-canvas-container" class="flex items-center justify-center max-w-[90vw] max-h-[85vh]">
|
||||
<div id="preview-loading" class="text-white/60 text-sm">Loading...</div>
|
||||
</div>
|
||||
<div id="preview-page-info" class="absolute bottom-6 left-1/2 -translate-x-1/2 bg-gray-900/80 text-white text-sm px-4 py-2 rounded-full backdrop-blur-sm"></div>
|
||||
`;
|
||||
|
||||
modal.addEventListener('click', (e) => {
|
||||
if (e.target === modal) hidePreview();
|
||||
});
|
||||
modal.querySelector('#preview-close')!.addEventListener('click', hidePreview);
|
||||
modal
|
||||
.querySelector('#preview-prev')!
|
||||
.addEventListener('click', () => navigatePage(-1));
|
||||
modal
|
||||
.querySelector('#preview-next')!
|
||||
.addEventListener('click', () => navigatePage(1));
|
||||
|
||||
document.body.appendChild(modal);
|
||||
state.modal = modal;
|
||||
return modal;
|
||||
}
|
||||
|
||||
async function renderPreviewPage(pageNumber: number): Promise<void> {
|
||||
if (!state.pdfjsDoc) return;
|
||||
|
||||
const modal = getOrCreateModal();
|
||||
const container = modal.querySelector(
|
||||
'#preview-canvas-container'
|
||||
) as HTMLElement;
|
||||
const pageInfo = modal.querySelector('#preview-page-info') as HTMLElement;
|
||||
const prevBtn = modal.querySelector('#preview-prev') as HTMLElement;
|
||||
const nextBtn = modal.querySelector('#preview-next') as HTMLElement;
|
||||
|
||||
container.innerHTML = '<div class="text-white/60 text-sm">Loading...</div>';
|
||||
|
||||
pageInfo.textContent = `Page ${pageNumber} of ${state.totalPages}`;
|
||||
prevBtn.style.visibility = pageNumber > 1 ? 'visible' : 'hidden';
|
||||
nextBtn.style.visibility =
|
||||
pageNumber < state.totalPages ? 'visible' : 'hidden';
|
||||
|
||||
try {
|
||||
const page = await state.pdfjsDoc.getPage(pageNumber);
|
||||
const scale = 2.0;
|
||||
const viewport = page.getViewport({ scale });
|
||||
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = viewport.width;
|
||||
canvas.height = viewport.height;
|
||||
canvas.className =
|
||||
'max-w-[90vw] max-h-[85vh] object-contain rounded-lg shadow-2xl';
|
||||
canvas.style.width = 'auto';
|
||||
canvas.style.height = 'auto';
|
||||
canvas.style.maxWidth = '90vw';
|
||||
canvas.style.maxHeight = '85vh';
|
||||
|
||||
const ctx = canvas.getContext('2d')!;
|
||||
await page.render({ canvasContext: ctx, viewport, canvas }).promise;
|
||||
|
||||
container.innerHTML = '';
|
||||
container.appendChild(canvas);
|
||||
state.currentPage = pageNumber;
|
||||
} catch (err) {
|
||||
console.error('Preview render error:', err);
|
||||
container.innerHTML =
|
||||
'<div class="text-red-400 text-sm">Failed to render page</div>';
|
||||
}
|
||||
}
|
||||
|
||||
function navigatePage(delta: number): void {
|
||||
const newPage = state.currentPage + delta;
|
||||
if (newPage >= 1 && newPage <= state.totalPages) {
|
||||
renderPreviewPage(newPage);
|
||||
}
|
||||
}
|
||||
|
||||
export function showPreview(
|
||||
pdfjsDoc: PDFDocumentProxy,
|
||||
pageNumber: number,
|
||||
totalPages: number
|
||||
): void {
|
||||
state.pdfjsDoc = pdfjsDoc;
|
||||
state.totalPages = totalPages;
|
||||
state.isOpen = true;
|
||||
|
||||
const modal = getOrCreateModal();
|
||||
modal.classList.remove('opacity-0', 'pointer-events-none');
|
||||
document.body.style.overflow = 'hidden';
|
||||
|
||||
renderPreviewPage(pageNumber);
|
||||
}
|
||||
|
||||
export function hidePreview(): void {
|
||||
if (!state.modal) return;
|
||||
state.isOpen = false;
|
||||
state.modal.classList.add('opacity-0', 'pointer-events-none');
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
|
||||
function handleKeydown(e: KeyboardEvent): void {
|
||||
if (!state.isOpen) return;
|
||||
|
||||
switch (e.key) {
|
||||
case 'Escape':
|
||||
hidePreview();
|
||||
break;
|
||||
case 'ArrowLeft':
|
||||
e.preventDefault();
|
||||
navigatePage(-1);
|
||||
break;
|
||||
case 'ArrowRight':
|
||||
e.preventDefault();
|
||||
navigatePage(1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', handleKeydown);
|
||||
|
||||
export function initPagePreview(
|
||||
container: HTMLElement,
|
||||
pdfjsDoc: PDFDocumentProxy,
|
||||
options: { pageAttr?: string } = {}
|
||||
): void {
|
||||
const totalPages = pdfjsDoc.numPages;
|
||||
|
||||
const thumbnails = container.querySelectorAll<HTMLElement>(
|
||||
'[data-page-number], [data-page-index], [data-pageIndex]'
|
||||
);
|
||||
|
||||
thumbnails.forEach((thumb) => {
|
||||
if (thumb.dataset.previewInit) return;
|
||||
thumb.dataset.previewInit = 'true';
|
||||
|
||||
let pageNum = 1;
|
||||
if (thumb.dataset.pageNumber) {
|
||||
pageNum = parseInt(thumb.dataset.pageNumber, 10);
|
||||
} else if (thumb.dataset.pageIndex !== undefined) {
|
||||
pageNum = parseInt(thumb.dataset.pageIndex, 10) + 1;
|
||||
}
|
||||
|
||||
const icon = document.createElement('button');
|
||||
icon.className =
|
||||
'page-preview-btn absolute bottom-1 right-1 bg-gray-900/80 hover:bg-indigo-600 text-white/70 hover:text-white rounded-full w-7 h-7 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity z-10';
|
||||
icon.title = 'Preview';
|
||||
icon.innerHTML =
|
||||
'<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>';
|
||||
icon.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
showPreview(pdfjsDoc, pageNum, totalPages);
|
||||
});
|
||||
|
||||
if (!thumb.classList.contains('relative')) {
|
||||
thumb.classList.add('relative');
|
||||
}
|
||||
if (!thumb.classList.contains('group')) {
|
||||
thumb.classList.add('group');
|
||||
}
|
||||
|
||||
thumb.appendChild(icon);
|
||||
});
|
||||
|
||||
container.addEventListener('keydown', (e) => {
|
||||
if (e.key === ' ' && !state.isOpen) {
|
||||
const hovered = container.querySelector<HTMLElement>(
|
||||
'[data-preview-init]:hover'
|
||||
);
|
||||
if (hovered) {
|
||||
e.preventDefault();
|
||||
let pageNum = 1;
|
||||
if (hovered.dataset.pageNumber) {
|
||||
pageNum = parseInt(hovered.dataset.pageNumber, 10);
|
||||
} else if (hovered.dataset.pageIndex !== undefined) {
|
||||
pageNum = parseInt(hovered.dataset.pageIndex, 10) + 1;
|
||||
}
|
||||
showPreview(pdfjsDoc, pageNum, totalPages);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -24,7 +24,7 @@ export interface RenderConfig {
|
||||
*/
|
||||
interface PageTask {
|
||||
pageNumber: number;
|
||||
pdfjsDoc: any;
|
||||
pdfjsDoc: pdfjsLib.PDFDocumentProxy;
|
||||
fileName?: string;
|
||||
container: HTMLElement;
|
||||
scale?: number;
|
||||
@@ -92,9 +92,9 @@ export function createPlaceholder(
|
||||
* Renders a single page to canvas
|
||||
*/
|
||||
export async function renderPageToCanvas(
|
||||
pdfjsDoc: any,
|
||||
pdfjsDoc: pdfjsLib.PDFDocumentProxy,
|
||||
pageNumber: number,
|
||||
scale: number = 0.5
|
||||
scale: number = 1
|
||||
): Promise<HTMLCanvasElement> {
|
||||
const page = await pdfjsDoc.getPage(pageNumber);
|
||||
const viewport = page.getViewport({ scale });
|
||||
@@ -260,7 +260,7 @@ function requestIdleCallbackPolyfill(callback: () => void): void {
|
||||
* Main function to render pages progressively with optional lazy loading
|
||||
*/
|
||||
export async function renderPagesProgressively(
|
||||
pdfjsDoc: any,
|
||||
pdfjsDoc: pdfjsLib.PDFDocumentProxy,
|
||||
container: HTMLElement,
|
||||
createWrapper: (
|
||||
canvas: HTMLCanvasElement,
|
||||
@@ -298,7 +298,7 @@ export async function renderPagesProgressively(
|
||||
pageNumber: i,
|
||||
pdfjsDoc,
|
||||
container,
|
||||
scale: useLazyLoading ? 0.3 : 0.5,
|
||||
scale: useLazyLoading ? 0.5 : 1,
|
||||
createWrapper,
|
||||
placeholderElement: placeholders[i - 1],
|
||||
});
|
||||
|
||||
@@ -182,24 +182,25 @@
|
||||
></div>
|
||||
|
||||
<!-- Advanced Settings -->
|
||||
<div id="advanced-settings" class="hidden mt-6">
|
||||
<h3 class="text-lg font-semibold text-white mb-2">
|
||||
Advanced Settings
|
||||
</h3>
|
||||
<div class="bg-gray-700 p-4 rounded-lg">
|
||||
<div id="advanced-settings" class="hidden mt-6 space-y-3">
|
||||
<h3 class="text-lg font-semibold text-white">Advanced Settings</h3>
|
||||
<div class="bg-gray-800/50 p-4 rounded-lg border border-gray-700">
|
||||
<label
|
||||
for="page-order-input"
|
||||
class="block text-sm font-medium text-gray-300 mb-2"
|
||||
>Page Order (comma-separated)</label
|
||||
>
|
||||
<div class="flex gap-2">
|
||||
<div class="flex gap-3">
|
||||
<input
|
||||
type="text"
|
||||
id="page-order-input"
|
||||
class="w-full bg-gray-900 text-white rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-indigo-500 border border-gray-600"
|
||||
class="flex-1 bg-gray-900 text-white rounded-lg px-3 py-2.5 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 border border-gray-600 placeholder-gray-500"
|
||||
placeholder="e.g., 3,1,4,2"
|
||||
/>
|
||||
<button id="apply-order-btn" class="btn-secondary">
|
||||
<button
|
||||
id="apply-order-btn"
|
||||
class="btn-gradient whitespace-nowrap !px-5 !py-2.5 text-sm"
|
||||
>
|
||||
Apply Order
|
||||
</button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user