Generate total page locations #1395
Description
Im trying to render the epub content in a horizontal card view for that i need to generate the locations of every page and assign that locations to card, which Im able to do, but the locations are not generating properly, some pages are getting skipped and in some pages locations are generated in the same page causing the duplicate render of the page.
// Wait for the book to be ready
await book.ready;
// Generate locations to paginate the book
await book.locations.generate(1600);
// Function to create a new card with EPUB content
async function createCard(location, index) {
console.log(`Creating card ${index} for location: ${location}`);
const card = document.createElement('div');
card.classList.add('card');
card.dataset.location = location; // Store location in data attribute
const epubContent = document.createElement('div');
epubContent.classList.add('epub-content');
epubContent.id = `epub-content-${index}`;
card.appendChild(epubContent);
bookContainer.appendChild(card);
// Initialize rendition for the card
const rendition = book.renderTo(epubContent, {
width: "100%",
height: "100%",
flow: "paginated", // Ensure single pages
allowScriptedContent: true
});
// Display the page at the given location
await rendition.display(location);
// Log that the rendition is displayed
console.log(`Rendered card ${index} at location: ${location}`);
// Function to create cards for all locations
async function initializeCards() {
const locations = book.locations;
console.log("Total locations:", locations.length());
// Iterate through locations and render each
for (let i = 0; i < locations.length(); i++) {
const location = locations.cfiFromPercentage(i / locations.length());
await createCard(location, i);
}
}
// Start initializing cards
initializeCards();