`)
.attr('data-page', i)
.data('width', pageinfo.width)
.data('height', pageinfo.height)
.data('zoom', this._zoom.current)
.addClass(this.settings.pageClass)
.width(pageinfo.width * this._zoom.current)
.height(pageinfo.height * this._zoom.current);
let $content = $(`
`)
.width(pageinfo.width)
.height(pageinfo.height);
pageinfo.$div.append($content);
// Clean the page (i.e. put the empty content, etc.)
this._cleanPage(pageinfo.$div);
return pageinfo;
}
/**
* This function places the page.$div in the container, according to its page number (i.e. it searches for the previous page and puts this page after)
* * in principle, this method sould not be needed because all the pages are put in order; but this is created just in case it is needed in further versions
* @param {*} pageinfo - the pageinfo structure for the page (needs a valid $div)
* @param {*} i - the number of the page
*/
_placeSkeleton(pageinfo, i) {
let prevpage = i - 1;
let $prevpage = null;
while ((prevpage>0) && (($prevpage = this.$container.find(`.${this.settings.pageClass}[data-page="${prevpage}"]`)).length === 0)) {
prevpage--;
}
if (prevpage === 0) {
this.$container.append(pageinfo.$div);
}
else {
$prevpage.after(pageinfo.$div);
}
}
/**
* Creates the initial skeletons for all the pages, and places them into the container
* @param {page/pageinfo} pageinfo - the initial pageinfo (or page) structure
*/
_createSkeletons(pageinfo) {
for (let i = 1; i <= this.pageCount; i++) {
if (this.pages[i] === undefined) {
// Create the pageinfo structure, store it and place it in the appropriate place (the next page will be created similar to the previous one)
pageinfo = this._createSkeleton(pageinfo, i);
this.pages[i] = pageinfo;
this._placeSkeleton(pageinfo, i);
// Call the callback function (if provided)
if (this._documentReady) {
if (typeof this.settings.onNewPage === "function") {
this.settings.onNewPage.call(this, pageinfo.$div, i);
}
this.$container.get(0).dispatchEvent(new CustomEvent("newpage", { detail: { pageNumber: i, page: pageinfo.$div.get(0) } }));
}
}
}
}
/**
* Function to set the active page, and calling the callback (if provided)
* @param {*} i - the number of the page to set active
*/
_setActivePage(i) {
if (this._activePage !== i) {
this._activePage = i;
let activePage = this.getActivePage();
if (this._documentReady) {
if (typeof this.settings.onActivePageChanged === "function")
this.settings.onActivePageChanged.call(this, activePage, i);
this.$container.get(0).dispatchEvent(new CustomEvent("activepagechanged", { detail: { activePageNumber: i, activePage: activePage==null?null:activePage.get(0) } }));
}
}
}
/**
* Obtains the area of a div that falls in the viewer
* @param {*} $page - div whose area is to be calculated
* @returns the visible area
*/
_areaOfPageVisible($page) {
if ($page === undefined) {
return 0;
}
let c_offset = this.$container.offset();
let c_width = this.$container.width();
let c_height = this.$container.height();
let position = $page.offset();
position.top -= c_offset.top;
position.left -= c_offset.left;
position.bottom = position.top + $page.outerHeight();
position.right = position.left + $page.outerWidth();
let page_y0 = Math.min(Math.max(position.top, 0), c_height);
let page_y1 = Math.min(Math.max($page.outerHeight() + position.top, 0), c_height);
let page_x0 = Math.min(Math.max(position.left, 0), c_width);
let page_x1 = Math.min(Math.max($page.outerWidth() + position.left, 0), c_width);
let vis_x = page_x1 - page_x0;
let vis_y = page_y1 - page_y0;
return (vis_x * vis_y);
}
/**
* Function that returns true if the page is considered to be visible (the amount of visible area is greater than the threshold)
* @param {*} i - the number of page to check
* @returns true if the page is visible
*/
isPageVisible(i) {
if ((this.pdf === null) || (i === undefined) || (i === null) || (i < 1) || (i > this.pdf.numPages)) {
return false;
}
let $page = i;
if (typeof i === "number") {
if (this.pages[i] === undefined)
return false;
$page = this.pages[i].$div;
}
return this._areaOfPageVisible($page) > ($page.outerWidth() * $page.outerHeight() * this.settings.visibleThreshold);
}
/**
* Function that calculates which pages are visible in the viewer, draws them (if not already drawn), and clears those not visible
* @param {*} forceRedraw - if true, the visible pages will be redrawn regardless of whether they are already drawn (useful for zoom changes)
*/
_visiblePages(forceRedraw = false) {
// Will grab the page with the greater visible area to set it as active
let max_area = 0;
let i_page = null;
// If there are no visible pages, return
if (this.pages.length === 0) {
this._visibles = [];
this._setActivePage(0);
return;
}
// Calculate the visible area for each page and consider it visible if the visible area is greater than 0
let $visibles = this.pages.filter(function(pageinfo) {
let areaVisible = this._areaOfPageVisible(pageinfo.$div);
if (areaVisible > max_area) {
max_area = areaVisible;
i_page = pageinfo.$div.data('page');
}
return areaVisible > 0;
}.bind(this)).map((x) => x.$div);
// Set the active page
this._setActivePage(i_page);
// Now get the visible pages
let visibles = $visibles.map((x) => $(x).data('page'));
if (visibles.length > 0) {
// Now will add some extra pages (before and after) the visible ones, to have them prepared in case of scroll
let minVisible = Math.min(...visibles);
let maxVisible = Math.max(...visibles);
for (let i = Math.max(1, minVisible - this.settings.extraPagesToLoad) ; i < minVisible ; i++) {
if (!visibles.includes(i))
visibles.push(i)
}
for (let i = maxVisible + 1; i <= Math.min(maxVisible + this.settings.extraPagesToLoad, this.pdf.numPages); i++) {
if (!visibles.includes(i))
visibles.push(i)
}
}
// Now will draw the visible pages, but if not forcing, will only draw those that were not visible before
let nowVisibles = visibles;
if (! forceRedraw) {
nowVisibles = visibles.filter(function (x) {
return !this._visibles.includes(x)
}.bind(this));
}
// Get the pages that were visible before, that are not visible now, and clear them
this._visibles.filter(function (x) {
return !visibles.includes(x)
}).forEach(function (i) {
this._cleanPage(this.pages[i].$div);
}.bind(this))
// Store the new visible pages
this._visibles = visibles;
// And now we'll queue the pages to load
this.loadPages(...nowVisibles);
}
/**
* Function queue a set of pages to be loaded; if not loading, the function starts the loading worker
* @param {...pageinfo} pages - the pages to load
*/
loadPages(...pages) {
this._pagesLoading.push(...pages);
if (this._loading) {
return;
}
this._loadingTask();
}
/**
* Function that gets the pages pending to load and renders them sequentially (to avoid multiple rendering promises)
*/
_loadingTask() {
this._loading = true;
if (this._pagesLoading.length > 0) {
let pagei = this._pagesLoading.shift();
this.pdf.getPage(pagei).then(function(page) {
// Render the page and update the information about the page with the loaded values
this._renderPage(page, pagei);
}.bind(this)).then(function(pageinfo) {
// Once loaded, we are not loading anymore
if (this._pagesLoading.length > 0) {
this._loadingTask();
}
}.bind(this));
}
// Free the loading state
this._loading = false;
}
/**
* Function that sets the scroll position of the container to the specified page
* @param {*} i - the number of the page to set the scroll position
*/
scrollToPage(i) {
if ((this.pages.length === 0) || (this.pages[i] === undefined)) {
return;
}
let $page = this.pages[i].$div;
if ($page.length === 0) {
console.warn(`Page ${i} not found`);
return;
}
let position = $page.position();
let containerPosition = this.$container.position();
if (position !== undefined) {
this.$container.get(0).scrollTop = this.$container.get(0).scrollTop + position.top - containerPosition.top;
this.$container.get(0).scrollLeft = this.$container.get(0).scrollLeft + position.left - containerPosition.left;
}
this._setActivePage(i);
}
/**
* Function that renders the page in a canvas, and sets the canvas into the $div
* @param {*} page - the page to be rendered
* @param {*} i - the number of the page to be rendered
* @returns a promise to render the page (the result of the promise will be the pageinfo)
*/
_renderPage(page, i) {
// Get the pageinfo structure
let pageinfo = this.pages[i];
let scale = this.settings.renderingScale;
// Calculate the pixel ratio of the device (we'll use a minimum of 1)
let pixel_ratio = window.devicePixelRatio || 1;
// Update the information that we know about the page to the actually loaded page
let viewport = page.getViewport({rotation: this._rotation, scale: this._zoom.current * scale});
pageinfo.width = (viewport.width / this._zoom.current) / scale;
pageinfo.height = (viewport.height / this._zoom.current) / scale;
pageinfo.$div.data("width", pageinfo.width);
pageinfo.$div.data("height", pageinfo.height);
pageinfo.$div.width(pageinfo.width * this._zoom.current);
pageinfo.$div.height(pageinfo.height * this._zoom.current);
pageinfo.loaded = true;
// Create the canvas and prepare the rendering context
let $canvas = $('');
let canvas = $canvas.get(0);
let context = canvas.getContext('2d');
canvas.height = viewport.height * pixel_ratio;
canvas.width = viewport.width * pixel_ratio;
canvas.getContext("2d")//.scale(pixel_ratio, pixel_ratio);
var transform = pixel_ratio !== 1
? [pixel_ratio, 0, 0, pixel_ratio, 0, 0]
: null;
var renderContext = {
canvasContext: context,
viewport: viewport,
transform: transform,
};
// Render the page and put the resulting rendered canvas into the page $div
return page.render(renderContext).promise.then(function() {
this._setPageContent(pageinfo.$div, $canvas);
// Call the callback (if provided)
if (this._documentReady) {
if (typeof this.settings.onPageRender === "function") {
this.settings.onPageRender.call(this, pageinfo.$div, i);
}
this.$container.get(0).dispatchEvent(new CustomEvent("pagerender", { detail: { pageNumber: i, page: pageinfo.$div.get(0) } }));
}
return pageinfo;
}.bind(this));
}
/** Gets the div object corresponding to the active page */
getActivePage() {
if ((this._activePage === null) || (this.pdf === null)) {
return null;
}
if ((this._activePage < 1) || (this._activePage > this.pdf.numPages)) {
return null;
}
return this.pages[this._activePage].$div;
}
/** Gets all the pages of the document (the pageinfo structures) */
getPages() {
return this.pages;
}
/** Gets the number of pages of the document */
getPageCount() {
if (this.pdf === null) {
return 0;
}
return this.pdf.numPages;
}
/** Scrolls to the next page (if any) */
next() {
if (this._activePage < this.pdf.numPages) {
this.scrollToPage(this._activePage + 1);
}
}
/** Scrolls to the previous page (if any) */
prev() {
if (this._activePage > 1) {
this.scrollToPage(this._activePage - 1);
}
}
first() {
if (this._activePage !== 1) {
this.scrollToPage(1);
}
}
last() {
if (this.pdf === null)
return;
if (this._activePage !== this.pdf.numPages) {
this.scrollToPage(this.pdf.numPages);
}
}
/**
* Rotates the pages of the document
* @param {*} deg - degrees to rotate the pages
* @param {*} accumulate - whether the rotation is accumulated or not
*/
rotate(deg, accumulate = false) {
if (accumulate) {
deg = deg + this._rotation;
}
this._rotation = deg;
let container = this.$container.get(0);
let prevScroll = {
top: container.scrollTop,
left: container.scrollLeft,
height: container.scrollHeight,
width: container.scrollWidth
};
return this.forceViewerInitialization().then(function() {
let newScroll = {
top: container.scrollTop,
left: container.scrollLeft,
height: container.scrollHeight,
width: container.scrollWidth
};
container.scrollTop = prevScroll.top * (newScroll.height / prevScroll.height);
container.scrollLeft = prevScroll.left * (newScroll.width / prevScroll.width);
}.bind(this));
}
/**
* This functions forces the creation of the whole content of the viewer (i.e. new divs, structures, etc.). It is usefull for full refresh of the viewer (e.g. when changes
* the rotation of the pages)
* @returns a promise that is resolved when the viewer is fully initialized
*/
forceViewerInitialization() {
// Store the pdf file
// Now prepare a placeholder for the pages
this.pages = [];
// Remove all the pages
this.$container.find(`.${this.settings.pageClass}`).remove();
this._pagesLoading = [];
this._loading = false;
this._visibles = [];
this._activePage = null;
return this.pdf.getPage(1).then(function(page) {
this._createSkeletons(page);
this._visiblePages();
this._setActivePage(1);
}.bind(this));
}
/**
* Loads the document and creates the pages
* @param {string} document - the url of the document to load
*/
async loadDocument(document) {
// The document is not ready while loading
this._documentReady = false;
// Now prepare a placeholder for the pages
this.pages = [];
// Remove all the pages
this.$container.find(`.${this.settings.pageClass}`).remove();
// Let's free the pdf file (if there was one before), and rely on the garbage collector to free the memory
this.pdf = null;
// Load the task and return the promise to load the document
let loadingTask = pdfjsLib.getDocument(document);
return loadingTask.promise.then(function(pdf) {
// Store the pdf file and get the
this.pdf = pdf;
this.pageCount = pdf.numPages;
this._rotation = 0;
return this.forceViewerInitialization();
}.bind(this)).then(function() {
if (typeof this.settings.onDocumentReady === "function") {
this.settings.onDocumentReady.call(this);
}
this.$container.get(0).dispatchEvent(new CustomEvent("documentready", { detail: { document: this.pdf } }));
// This is a trick to force active page changed event triggering after the document is ready
this._setActivePage(0)
this._documentReady = true;
this._setActivePage(1)
}.bind(this));
}
}
function recoverAttributes(target, attributeDefaults) {
const camelcaseToSnakecase = str => str.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`);
let $target = $(target);
let result = {};
if ($target.length > 0) {
$target = $($target[0]);
for (let originalAttributeName in attributeDefaults) {
let attributeName = camelcaseToSnakecase(originalAttributeName)
let attributeValue = $target.attr(attributeName);
if (attributeValue != null) {
switch (typeof(attributeDefaults[originalAttributeName])) {
case 'float':
try {
attributeValue = parseFloat(attributeValue);
} catch (_) {
}
break;
case 'number':
try {
attributeValue = parseInt(attributeValue);
} catch (_) {
}
break;
case 'function':
let functionString = attributeValue;
attributeValue = function() { eval(functionString); }.bind(target[0]); break;
default:
break;
}
result[originalAttributeName] = attributeValue;
}
};
}
return result;
}
function init(element) {
let options = recoverAttributes(element, Object.assign({
pdfDocument: "", initialZoom: ""
}, defaults));
if (options["pdfDocument"] != null) {
let pdfViewer = new PDFjsViewer($(element), options);
pdfViewer.loadDocument(options["pdfDocument"]).then(function() {
if (options["initialZoom"] != null) {
pdfViewer.setZoom(options["initialZoom"]);
}
})
element.get(0).pdfViewer = pdfViewer;
}
}
$(function() {
$('.pdfjs-viewer').each(function() {
let $viewer = $(this);
init($viewer);
})
});
exports.PDFjsViewer = PDFjsViewer;
})(window, jQuery)