108 lines
4.5 KiB
JavaScript
108 lines
4.5 KiB
JavaScript
(function($) {
|
|
'use strict';
|
|
|
|
class PDFViewer {
|
|
constructor(element) {
|
|
this.element = element;
|
|
this.container = element.querySelector('.pdf-viewer-container');
|
|
this.pagesContainer = element.querySelector('.pdf-pages-container');
|
|
this.pdfUrl = element.dataset.pdfUrl;
|
|
this.pages = element.dataset.pages;
|
|
this.showAll = element.dataset.showAll === 'true';
|
|
this.scrollbar = element.dataset.scrollbar === 'true';
|
|
this.layout = element.dataset.layout || 'horizontal';
|
|
this.pdfDoc = null;
|
|
this.scale = 1.0;
|
|
|
|
this.init();
|
|
}
|
|
|
|
async init() {
|
|
const pdfjsLib = window['pdfjs-dist/build/pdf'];
|
|
pdfjsLib.GlobalWorkerOptions.workerSrc = '//cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
|
|
|
|
try {
|
|
this.pdfDoc = await pdfjsLib.getDocument(this.pdfUrl).promise;
|
|
await this.renderPages();
|
|
} catch (error) {
|
|
console.error('Error loading PDF:', error);
|
|
}
|
|
}
|
|
|
|
async renderPages() {
|
|
this.pagesContainer.innerHTML = '';
|
|
|
|
const totalPages = this.pdfDoc.numPages;
|
|
const pagesToRender = this.showAll ? totalPages : Math.min(parseInt(this.pages), totalPages);
|
|
|
|
// Получаем первую страницу для определения масштаба
|
|
const firstPage = await this.pdfDoc.getPage(1);
|
|
const containerWidth = this.container.clientWidth;
|
|
const viewport = firstPage.getViewport({ scale: 1 });
|
|
|
|
// Настраиваем масштаб и стили контейнера в зависимости от layout
|
|
if (!this.showAll && pagesToRender > 1 && this.layout === 'horizontal') {
|
|
this.scale = (containerWidth / viewport.width) * 0.49;
|
|
this.pagesContainer.style.display = 'flex';
|
|
this.pagesContainer.style.flexWrap = 'wrap';
|
|
this.pagesContainer.style.justifyContent = 'space-between';
|
|
} else {
|
|
this.scale = containerWidth / viewport.width;
|
|
this.pagesContainer.style.display = this.layout === 'vertical' ? 'block' : 'flex';
|
|
this.pagesContainer.style.flexWrap = 'wrap';
|
|
}
|
|
|
|
// Настройка прокрутки
|
|
if (this.showAll && this.scrollbar) {
|
|
this.container.style.overflowY = 'auto';
|
|
this.container.style.maxHeight = '800px';
|
|
} else {
|
|
this.container.style.overflowY = 'hidden';
|
|
this.container.style.maxHeight = 'none';
|
|
}
|
|
|
|
// Рендерим страницы
|
|
for (let pageNum = 1; pageNum <= pagesToRender; pageNum++) {
|
|
const pageContainer = document.createElement('div');
|
|
pageContainer.classList.add('pdf-page-container');
|
|
|
|
if (!this.showAll && pagesToRender > 1) {
|
|
if (this.layout === 'horizontal') {
|
|
pageContainer.style.width = '49%';
|
|
pageContainer.style.marginBottom = '10px';
|
|
} else {
|
|
pageContainer.style.width = '100%';
|
|
pageContainer.style.marginBottom = '20px';
|
|
}
|
|
}
|
|
|
|
const canvas = document.createElement('canvas');
|
|
canvas.classList.add('pdf-canvas');
|
|
pageContainer.appendChild(canvas);
|
|
this.pagesContainer.appendChild(pageContainer);
|
|
|
|
const page = await this.pdfDoc.getPage(pageNum);
|
|
const scaledViewport = page.getViewport({ scale: this.scale });
|
|
|
|
canvas.height = scaledViewport.height;
|
|
canvas.width = scaledViewport.width;
|
|
|
|
const renderContext = {
|
|
canvasContext: canvas.getContext('2d'),
|
|
viewport: scaledViewport
|
|
};
|
|
|
|
await page.render(renderContext).promise;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Инициализация виджетов
|
|
$(window).on('elementor/frontend/init', () => {
|
|
elementorFrontend.hooks.addAction('frontend/element_ready/pdf_viewer.default', ($element) => {
|
|
const widgets = $element[0].querySelectorAll('.pdf-viewer-widget');
|
|
widgets.forEach(widget => new PDFViewer(widget));
|
|
});
|
|
});
|
|
|
|
})(jQuery); |